/* Peptigo theme custom styles
Scoped to wrapper classes so they don't leak into other patterns. */
:root {
--navy-950:#0b1736; --navy-900:#11224a; --navy-800:#173063;
--blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6; --blue-400:#60a5fa;
--blue-100:#dbeafe; --blue-50:#eff6ff;
--gold:#c9a96a; --gold-soft:#e7d8b3;
--ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-300:#cbd5e1;
--bg:#f5f7fb; --card:#ffffff;
--radius-lg:24px; --radius-md:16px; --radius-pill:999px;
--shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04);
--shadow-md:0 6px 18px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
--shadow-lg:0 24px 60px rgba(15,23,42,.12);
--hairline:1px solid rgba(15,23,42,.07);
}
body { font-family:'Inter',system-ui,sans-serif !important; color:var(--ink-900); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6; }
h1,h2,h3,h4 { font-family:'Inter Tight','Inter',sans-serif !important; letter-spacing:-.022em; margin:0; }
h1 { font-size:clamp(2.4rem, 5vw, 4.2rem) !important; font-weight:800 !important; line-height:1.04 !important; }
h2 { font-size:clamp(1.9rem, 3vw, 2.7rem) !important; font-weight:700 !important; line-height:1.1 !important; }
h3 { font-size:1.1rem !important; font-weight:600 !important; }
.serif, .has-fraunces-font-family, .peptigo-em { font-family:'Fraunces',serif !important; font-style:italic; font-weight:500; }
.peptigo-hero h1, .peptigo-hero h1 em { line-height:1.04 !important; }
.peptigo-hero h1 em { font-family:'Fraunces',serif !important; font-weight:500 !important; font-style:italic; color:#bfdbfe; }
/* ========== HEADER ========== */
.peptigo-header {
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.78);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:var(--hairline);
transition:padding .25s ease;
}
.peptigo-header.is-scrolled { padding:4px 0; }
.peptigo-nav { display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:14px 24px; max-width:1440px; margin:0 auto; gap:24px; }
.peptigo-nav a { color:var(--ink-700); text-decoration:none; padding:8px 14px; border-radius:var(--radius-pill); font-size:.93rem; font-weight:500; transition:background .2s, color .2s; }
.peptigo-nav a:hover { background:var(--blue-50); color:var(--blue-700); }
.peptigo-nav__group { display:flex; gap:4px; align-items:center; }
.peptigo-nav__group--center { justify-self:center; }
.peptigo-nav__group--right { justify-self:end; }
@media (max-width:760px) {
.peptigo-nav { grid-template-columns:auto auto; gap:12px; }
.peptigo-nav__group--center { display:none; }
}
/* ========== LOGO ========== */
.peptigo-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:6px 8px; }
.peptigo-logo__mark { transition:transform .4s ease; }
.peptigo-logo:hover .peptigo-logo__mark { transform:scale(1.06); }
.peptigo-logo__ring-l, .peptigo-logo__ring-r { transform-box:fill-box; transform-origin:center; transition:transform .5s ease; }
.peptigo-logo:hover .peptigo-logo__ring-l { transform:translateX(2px); }
.peptigo-logo:hover .peptigo-logo__ring-r { transform:translateX(-2px); }
.peptigo-logo__dot { transition:r .4s ease; }
.peptigo-logo:hover .peptigo-logo__dot { r:6; }
.peptigo-logo__word { font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:.18em; }
/* ========== HERO ========== */
.peptigo-hero {
position:relative; overflow:hidden;
margin:12px; border-radius:32px;
background:
radial-gradient(1100px 580px at 50% -10%, #3b82f6 0%, transparent 58%),
radial-gradient(900px 520px at 90% 110%, #2563eb 0%, transparent 55%),
radial-gradient(700px 400px at 5% 90%, #1d4ed8 0%, transparent 60%),
linear-gradient(180deg, #173063 0%, #11224a 100%);
color:#fff;
padding:56px 24px 48px;
text-align:center;
box-shadow:0 30px 80px -30px rgba(29,78,216,.5);
}
.peptigo-hero__molecule {
position:absolute; inset:0; width:100%; height:100%;
opacity:.32; mix-blend-mode:screen; pointer-events:none;
animation:peptigoDrift 40s linear infinite alternate;
}
.peptigo-hero::after {
content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(rgba(219,234,254,.10) 1px, transparent 1.5px);
background-size:32px 32px;
mask-image:radial-gradient(ellipse at center, black 35%, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center, black 35%, transparent 75%);
}
@keyframes peptigoDrift { from{transform:translate3d(-30px,-15px,0)} to{transform:translate3d(30px,15px,0)} }
.peptigo-hero__eyebrow {
position:relative; display:inline-flex; gap:8px; align-items:center;
padding:7px 16px; border-radius:var(--radius-pill);
background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#dbeafe;
margin-bottom:24px;
}
.peptigo-hero__dot { width:6px; height:6px; border-radius:999px; background:var(--blue-400); box-shadow:0 0 14px var(--blue-400); }
.peptigo-hero h1 { position:relative; max-width:920px; margin:0 auto; }
.peptigo-hero h1 em { font-family:'Fraunces',serif; font-weight:500; font-style:italic; color:#bfdbfe; }
.peptigo-hero__lede { position:relative; max-width:640px; margin:22px auto 36px; color:#dbeafe; font-size:1.1rem; }
.peptigo-hero__cta { position:relative; display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.peptigo-btn { display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:var(--radius-pill); font-weight:600; font-size:.95rem; transition:transform .2s, box-shadow .2s, background .2s; cursor:pointer; border:none; text-decoration:none; }
.peptigo-btn--primary { background:#fff; color:var(--navy-900); box-shadow:0 12px 30px rgba(255,255,255,.18); }
.peptigo-btn--primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(255,255,255,.28); }
.peptigo-btn--ghost { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22); }
.peptigo-btn--ghost:hover { background:rgba(255,255,255,.16); }
.peptigo-btn--dark { background:var(--navy-900); color:#fff; }
.peptigo-btn--dark:hover { background:var(--blue-700); }
/* Atom pulse + bond shimmer */
.peptigo-atom { transform-box:fill-box; transform-origin:center; animation:peptigoAtomPulse 4s ease-in-out infinite; }
.peptigo-atom.a2{animation-delay:.5s} .peptigo-atom.a3{animation-delay:1s} .peptigo-atom.a4{animation-delay:1.5s}
.peptigo-atom.a5{animation-delay:.2s} .peptigo-atom.a6{animation-delay:.8s} .peptigo-atom.a7{animation-delay:1.4s}
.peptigo-atom.a8{animation-delay:.3s} .peptigo-atom.a9{animation-delay:1.8s} .peptigo-atom.a10{animation-delay:.6s}
.peptigo-atom.a11{animation-delay:1.2s} .peptigo-atom.a12{animation-delay:.9s} .peptigo-atom.a13{animation-delay:1.6s}
.peptigo-atom.a14{animation-delay:.4s} .peptigo-atom.a15{animation-delay:1.1s} .peptigo-atom.a16{animation-delay:.7s}
.peptigo-atom.a17{animation-delay:1.9s} .peptigo-atom.a18{animation-delay:.1s} .peptigo-atom.a19{animation-delay:1.3s}
@keyframes peptigoAtomPulse { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.35);opacity:1} }
.peptigo-shimmer { animation:peptigoShimmer 5s linear infinite; }
.peptigo-shimmer.s2 { animation-duration:7s; animation-delay:1.5s; }
.peptigo-shimmer.s3 { animation-duration:4s; animation-delay:.8s; }
@keyframes peptigoShimmer { from{stroke-dashoffset:0} to{stroke-dashoffset:-1560} }
@media (prefers-reduced-motion: reduce) {
.peptigo-hero__molecule, .peptigo-atom, .peptigo-shimmer { animation:none !important; }
}
/* CATEGORY PILLS */
.peptigo-cats { position:relative; display:grid; gap:14px; margin-top:52px; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:920px; margin-inline:auto; }
.peptigo-cats a { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-radius:var(--radius-pill); background:rgba(255,255,255,.96); color:var(--ink-900); font-weight:600; text-decoration:none; transition:transform .25s, background .25s; border:1px solid rgba(255,255,255,.4); }
.peptigo-cats a:hover { transform:translateY(-3px); background:#fff; }
.peptigo-cats .arrow { width:34px; height:34px; border-radius:999px; background:var(--navy-900); color:#fff; display:grid; place-items:center; transition:background .2s; }
.peptigo-cats a:hover .arrow { background:var(--blue-600); }
/* ========== SECTIONS ========== */
.peptigo-section { padding:88px 0; }
.peptigo-section.no-top-pad { padding-top:0; }
.peptigo-wrap { max-width:1280px; margin:0 auto; padding:0 24px; }
.peptigo-eyebrow { font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--blue-700); letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; }
.peptigo-section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:36px; gap:24px; flex-wrap:wrap; }
.peptigo-section-head.is-centered { justify-content:center; text-align:center; flex-direction:column; align-items:center; }
.peptigo-link { color:var(--blue-700); font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.peptigo-link:hover { color:var(--blue-600); }
.peptigo-em { font-family:'Fraunces',serif; font-style:italic; font-weight:500; color:var(--blue-700); }
/* ========== PRODUCT CARDS ========== */
.peptigo-grid { display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px) { .peptigo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .peptigo-grid { grid-template-columns:1fr; } }
.peptigo-card { background:var(--card); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s, box-shadow .35s; display:flex; flex-direction:column; border:var(--hairline); text-decoration:none; color:inherit; }
.peptigo-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.peptigo-card__media {
aspect-ratio:1/1; position:relative;
background:radial-gradient(75% 55% at 50% 42%, #dbeafe 0%, #eff6ff 50%, #f8fafc 85%, #ffffff 100%);
display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
}
.peptigo-card__media::before { content:""; position:absolute; left:50%; top:58%; width:95%; height:80%; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(96,165,250,.45) 0%, rgba(96,165,250,0) 72%); filter:blur(10px); pointer-events:none; z-index:0; }
.peptigo-card__media::after { content:""; position:absolute; inset:auto 0 0 0; height:24%; pointer-events:none; z-index:2; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 100%); }
.peptigo-card__media img { position:relative; z-index:1; width:135%; height:144%; object-fit:contain; object-position:center bottom; margin-bottom:-32%; filter:drop-shadow(0 24px 26px rgba(15,23,42,.18)) drop-shadow(0 6px 12px rgba(29,78,216,.22)); transition:transform .6s ease; }
.peptigo-card:hover .peptigo-card__media img { transform:translateY(-4px) scale(1.03); }
.peptigo-card__cat { position:absolute; top:14px; left:14px; background:var(--navy-900); color:#fff; font-size:.7rem; padding:5px 11px; border-radius:8px; font-weight:600; z-index:3; }
.peptigo-card__rate { position:absolute; top:14px; right:14px; background:#fff; color:var(--ink-900); font-size:.7rem; padding:5px 10px; border-radius:8px; font-weight:600; display:flex; align-items:center; gap:4px; z-index:3; box-shadow:var(--shadow-sm); }
.peptigo-card__rate .star { color:var(--gold); }
.peptigo-card__tested { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); font-size:.7rem; color:var(--ink-500); font-family:'JetBrains Mono',monospace; letter-spacing:.12em; z-index:3; }
.peptigo-card__body { padding:18px 20px 6px; }
.peptigo-card__body h3 { font-size:1.06rem; margin:0 0 2px; }
.peptigo-card__body p { margin:0; color:var(--ink-500); font-size:.88rem; }
.peptigo-card__cta { display:flex; align-items:center; justify-content:space-between; margin:14px; padding:14px 18px; background:var(--navy-900); color:#fff; border-radius:14px; font-weight:600; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; transition:background .25s; text-decoration:none; }
.peptigo-card__cta:hover { background:var(--blue-700); }
/* ========== FEATURE CARDS ========== */
.peptigo-features { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:880px) { .peptigo-features { grid-template-columns:1fr; } }
.peptigo-feature { background:#fff; border-radius:var(--radius-lg); padding:52px 44px; text-align:center; box-shadow:var(--shadow-sm); border:var(--hairline); }
.peptigo-feature h2 { margin-bottom:14px; }
.peptigo-feature p { color:var(--ink-500); max-width:460px; margin:0 auto 32px; }
.peptigo-feature__illu { height:200px; display:grid; place-items:center; }
.peptigo-lab-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:280px; }
.peptigo-lab-grid div { aspect-ratio:1/1; border-radius:8px; background:linear-gradient(135deg,#dbeafe,#93c5fd); box-shadow:0 6px 14px rgba(30,64,175,.15); }
.peptigo-lab-grid div:nth-child(odd) { background:linear-gradient(135deg,#bfdbfe,#60a5fa); }
.peptigo-purity-stack { position:relative; width:300px; height:200px; }
.peptigo-purity-card { position:absolute; background:#fff; border-radius:14px; padding:16px; box-shadow:var(--shadow-md); font-size:.78rem; }
.peptigo-purity-card.left { left:0; top:24px; width:170px; transform:rotate(-6deg); }
.peptigo-purity-card.right { right:0; top:0; width:150px; height:175px; transform:rotate(6deg); background:linear-gradient(160deg,var(--blue-600),var(--blue-700)); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; }
.peptigo-purity-card.right .vlabel { font-family:'JetBrains Mono',monospace; font-weight:600; }
.peptigo-purity-card.right .vsub { font-size:.7rem; opacity:.85; }
.peptigo-purity-pill { display:inline-block; background:var(--blue-600); color:#fff; padding:3px 10px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:.7rem; margin-bottom:10px; }
.peptigo-purity-bullets { margin:0; padding:0; list-style:none; color:var(--ink-700); }
.peptigo-purity-bullets li { display:flex; gap:6px; align-items:center; padding:3px 0; font-size:.72rem; }
.peptigo-purity-bullets li::before { content:"\2713"; color:var(--blue-600); font-weight:700; }
/* ========== PRESS STRIP ========== */
.peptigo-press { background:#fff; border-radius:var(--radius-lg); padding:34px 24px; display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:24px; border:var(--hairline); }
.peptigo-press span { font-size:.92rem; color:#94a3b8; font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:.06em; }
/* ========== STATS STRIP ========== */
.peptigo-stats {
background:#fff; border-radius:var(--radius-lg); border:var(--hairline);
padding:36px 28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:0; box-shadow:var(--shadow-sm);
}
.peptigo-stat { text-align:center; padding:8px 16px; position:relative; }
.peptigo-stat + .peptigo-stat::before {
content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px;
background:rgba(15,23,42,.08);
}
.peptigo-stat__num {
display:flex; align-items:baseline; justify-content:center; gap:4px;
font-family:'Inter Tight',sans-serif; font-weight:700;
color:var(--ink-900); line-height:1;
margin-bottom:10px;
}
.peptigo-stat__num em {
font-family:'Fraunces',serif !important; font-style:italic; font-weight:600 !important;
font-size:clamp(2.2rem, 3.6vw, 3.4rem);
background:linear-gradient(180deg, var(--ink-900) 30%, var(--blue-700) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.peptigo-stat__suffix {
font-family:'Inter Tight',sans-serif; font-weight:700;
font-size:1.2rem; color:var(--blue-600); margin-left:2px;
letter-spacing:.02em;
}
.peptigo-stat__label {
font-size:.78rem; color:var(--ink-500); letter-spacing:.06em;
text-transform:uppercase; line-height:1.4; font-weight:600;
}
@media (max-width:760px) {
.peptigo-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0; }
.peptigo-stat:nth-child(3)::before { display:none; }
}
/* ========== TESTIMONIALS ========== */
.peptigo-testi-grid { display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px) { .peptigo-testi-grid { grid-template-columns:1fr; } }
.peptigo-testi { background:#fff; border-radius:var(--radius-lg); padding:32px 30px; box-shadow:var(--shadow-sm); border:var(--hairline); display:flex; flex-direction:column; gap:18px; }
.peptigo-testi__stars { color:var(--gold); letter-spacing:2px; font-size:.95rem; }
.peptigo-testi blockquote { margin:0; font-family:'Fraunces',serif; font-weight:500; font-size:1.12rem; line-height:1.5; color:var(--ink-900); }
.peptigo-testi__meta { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:8px; border-top:var(--hairline); }
.peptigo-testi__avatar { width:38px; height:38px; border-radius:999px; background:linear-gradient(135deg,var(--blue-500),var(--blue-700)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.peptigo-testi__who { font-weight:600; font-size:.92rem; }
.peptigo-testi__role { font-size:.8rem; color:var(--ink-500); }
.peptigo-testi__verify { margin-left:auto; font-size:.7rem; color:var(--blue-700); font-family:'JetBrains Mono',monospace; letter-spacing:.08em; }
/* ========== FAQ ========== */
.peptigo-faq { max-width:820px; margin:0 auto; }
.peptigo-faq details { background:#fff; border-radius:var(--radius-md); border:var(--hairline); margin-bottom:10px; overflow:hidden; transition:box-shadow .2s; }
.peptigo-faq details[open] { box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.2); }
.peptigo-faq summary { list-style:none; cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:600; font-size:1rem; }
.peptigo-faq summary::-webkit-details-marker { display:none; }
.peptigo-faq .chev { width:32px; height:32px; border-radius:999px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; flex-shrink:0; transition:transform .25s, background .25s; }
.peptigo-faq details[open] .chev { transform:rotate(180deg); background:var(--blue-600); color:#fff; }
.peptigo-faq .body { padding:0 24px 22px; color:var(--ink-700); font-size:.95rem; line-height:1.7; }
/* ========== NEWSLETTER ========== */
.peptigo-newsletter { text-align:center; padding:80px 24px; }
.peptigo-newsletter h2 { margin-bottom:24px; }
.peptigo-nl-form { display:inline-flex; gap:8px; background:#fff; padding:8px; border-radius:var(--radius-pill); box-shadow:var(--shadow-md); min-width:min(460px,90vw); border:var(--hairline); }
.peptigo-nl-form input { flex:1; border:none; background:transparent; padding:10px 18px; font:inherit; font-size:.95rem; outline:none; }
.peptigo-nl-form button { background:var(--navy-900); color:#fff; border:none; padding:12px 26px; border-radius:var(--radius-pill); font-weight:600; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.peptigo-nl-form button:hover { background:var(--blue-700); }
.peptigo-nl-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.peptigo-nl-form__msg {
margin: 12px auto 0;
max-width: 480px;
font-size: 0.88rem;
color: var(--ink-500, #6b7280);
min-height: 22px;
}
.peptigo-nl-form__msg.is-success {
color: #166534;
font-weight: 500;
}
.peptigo-nl-form__msg.is-error {
color: #b91c1c;
}
/* ========== TRUST PILLARS ========== */
.peptigo-pillars { display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:880px) { .peptigo-pillars { grid-template-columns:1fr; } }
.peptigo-pillar { background:#fff; border-radius:var(--radius-lg); padding:38px 30px; text-align:center; box-shadow:var(--shadow-sm); border:var(--hairline); }
.peptigo-pillar__icon { width:52px; height:52px; border-radius:14px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; margin:0 auto 18px; }
.peptigo-pillar h3 { margin-bottom:8px; }
.peptigo-pillar p { color:var(--ink-500); font-size:.92rem; margin:0; }
/* ========== FOOTER ========== */
.peptigo-footer { background:var(--navy-950); color:#cbd5e1; padding:64px 24px 24px; margin-top:40px; }
.peptigo-footer__grid { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; max-width:1280px; margin:0 auto; }
.peptigo-footer__links { display:flex; gap:28px; flex-wrap:wrap; }
.peptigo-footer__links a { color:#cbd5e1; font-size:.92rem; text-decoration:none; }
.peptigo-footer__links a:hover { color:#fff; }
.peptigo-footer__bar { max-width:1280px; margin:40px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:#64748b; flex-wrap:wrap; gap:16px; }
.peptigo-research-pill { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:6px 14px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.08em; color:#dbeafe; }
/* ========== REVEAL ON SCROLL ========== */
.peptigo-reveal { opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.peptigo-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .peptigo-reveal { opacity:1; transform:none; transition:none; } }
.peptigo-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* ========== ANNOUNCEMENT BAR ========== */
.peptigo-announce {
background: linear-gradient(90deg, #0b1736 0%, #11224a 50%, #0b1736 100%);
color: #dbeafe;
font-size: .74rem; letter-spacing: .1em;
padding: 8px 24px;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
}
.peptigo-announce__left { display: flex; align-items: center; gap: 8px; }
.peptigo-announce__right { display: flex; align-items: center; gap: 14px; color: #94a3b8; }
.peptigo-announce__dot { width: 6px; height: 6px; border-radius: 999px; background: #60a5fa; box-shadow: 0 0 10px #60a5fa; animation: peptigoAnnouncePulse 2s ease-in-out infinite; }
@keyframes peptigoAnnouncePulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 720px) { .peptigo-announce__right { display: none; } }
/* ============================================================
v1.7.6 — PROMO MODAL (one-time per visitor, 30-day suppress)
Premium glassmorphic modal with animated radial burst graphic
and the gold-on-navy 30% OFF anchor. Remove block in
header.html when sale ends — CSS can stay (harmless when no
matching DOM is rendered).
============================================================ */
.ppm {
position: fixed; inset: 0;
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 20px;
pointer-events: none;
}
.ppm[hidden] { display: none; }
.ppm__backdrop {
position: absolute; inset: 0;
background: rgba(5,13,36,0.62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .28s ease;
pointer-events: auto;
}
.ppm.is-open .ppm__backdrop { opacity: 1; }
.ppm__card {
position: relative;
max-width: 480px;
width: 100%;
background: linear-gradient(180deg, #0a1428 0%, #11224a 60%, #050d24 100%);
border: 1px solid rgba(251, 191, 36, 0.22);
border-radius: 22px;
padding: 28px 32px 24px;
color: #fff;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
text-align: center;
box-shadow:
0 30px 80px -10px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 1px 0 rgba(255,255,255,0.06) inset;
transform: scale(0.94) translateY(10px);
opacity: 0;
transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .32s ease;
pointer-events: auto;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.ppm.is-open .ppm__card {
transform: scale(1) translateY(0);
opacity: 1;
}
.ppm__card::-webkit-scrollbar { display: none; }
.ppm__close {
position: absolute;
top: 14px; right: 14px;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.10);
color: #cbd5e1;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .15s ease;
font-family: inherit;
z-index: 2;
}
.ppm__close:hover {
background: rgba(255,255,255,0.14);
color: #fff;
transform: scale(1.05);
}
.ppm__close:focus-visible {
outline: 2px solid #fbbf24;
outline-offset: 2px;
}
.ppm__graphic {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-width: 280px;
margin: 0 auto 6px;
display: flex;
align-items: center;
justify-content: center;
}
.ppm__rays {
position: absolute;
inset: 0;
width: 100%; height: 100%;
}
.ppm__rays-group {
transform-origin: 200px 200px;
animation: ppmRotate 22s linear infinite;
}
@keyframes ppmRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ppm__rays > circle {
animation: ppmHaloPulse 3.8s ease-in-out infinite;
transform-origin: 200px 200px;
}
@keyframes ppmHaloPulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.08); opacity: 1; }
}
.ppm__pct {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
background: linear-gradient(135deg, #fde68a 0%, #fbbf24 35%, #f59e0b 70%, #d97706 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 6px 20px rgba(251,191,36,0.35));
}
.ppm__pct-num {
font-size: clamp(80px, 22vw, 140px);
}
.ppm__pct-sym {
font-size: clamp(48px, 13vw, 80px);
margin-left: 4px;
font-weight: 700;
}
.ppm__off {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 26px;
letter-spacing: 0.32em;
color: #fff;
margin: -10px 0 6px;
text-indent: 0.32em; /* center despite letter-spacing */
}
.ppm__eyebrow {
font-family: 'JetBrains Mono', SF Mono, Consolas, monospace;
font-size: 10.5px;
letter-spacing: 0.20em;
text-transform: uppercase;
font-weight: 600;
color: #fbbf24;
margin-bottom: 14px;
}
.ppm__lede {
font-size: 14px;
line-height: 1.55;
color: #cbd5e1;
margin: 0 0 22px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.ppm__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0a1424;
border: 0;
border-radius: 999px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.005em;
text-decoration: none;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
box-shadow:
0 8px 22px -4px rgba(251,191,36,0.45),
0 1px 0 rgba(255,255,255,0.30) inset;
}
.ppm__cta:hover {
transform: translateY(-1px);
box-shadow:
0 12px 28px -4px rgba(251,191,36,0.55),
0 1px 0 rgba(255,255,255,0.30) inset;
color: #0a1424;
}
.ppm__cta:active { transform: translateY(0); }
.ppm__cta:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.ppm__chain {
display: block;
width: 180px;
max-width: 60%;
margin: 22px auto 4px;
}
.ppm__chain circle {
animation: ppmChainPulse 2.6s ease-in-out infinite;
}
.ppm__chain circle:nth-child(2) { animation-delay: 0s; }
.ppm__chain circle:nth-child(3) { animation-delay: 0.4s; }
.ppm__chain circle:nth-child(4) { animation-delay: 0.8s; }
.ppm__chain circle:nth-child(5) { animation-delay: 1.2s; }
.ppm__chain circle:nth-child(6) { animation-delay: 1.6s; }
@keyframes ppmChainPulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.ppm__signature {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: #64748b;
margin-top: 4px;
}
/* Mobile tightening */
@media (max-width: 480px) {
.ppm { padding: 16px; }
.ppm__card { padding: 24px 22px 20px; border-radius: 18px; }
.ppm__close { top: 12px; right: 12px; width: 36px; height: 36px; }
.ppm__graphic { max-width: 220px; margin-bottom: 4px; }
.ppm__off { font-size: 22px; letter-spacing: 0.30em; text-indent: 0.30em; }
.ppm__lede { font-size: 13px; }
.ppm__cta { padding: 12px 24px; font-size: 13px; }
}
/* Reduced-motion: kill the rotating rays + chain pulse */
@media (prefers-reduced-motion: reduce) {
.ppm__rays-group { animation: none; }
.ppm__rays > circle { animation: none; }
.ppm__chain circle { animation: none; opacity: 0.85; }
.ppm__card { transition: opacity .2s ease; transform: none; }
.ppm__backdrop { transition: opacity .15s ease; }
}
/* ============================================================
v1.7.4 — SITE-WIDE SALE BANNER
Sits ABOVE .peptigo-announce. Remove HTML block + this CSS
block when sale ends (or just hide via .is-dismissed JS).
============================================================ */
.peptigo-sale-banner {
background: linear-gradient(90deg, #050d24 0%, #11224a 50%, #050d24 100%);
color: #fff;
border-bottom: 1px solid rgba(201, 169, 106, 0.28);
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 12.5px;
letter-spacing: 0;
position: relative;
z-index: 60;
}
.peptigo-sale-banner.is-dismissed { display: none; }
.peptigo-sale-banner__inner {
max-width: 1280px;
margin: 0 auto;
padding: 9px 44px 9px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
}
.peptigo-sale-banner__pulse {
width: 6px; height: 6px;
background: #fbbf24;
border-radius: 50%;
box-shadow: 0 0 8px #fbbf24;
animation: peptigoSalePulse 2s ease-in-out infinite;
flex-shrink: 0;
}
.peptigo-sale-banner__pct {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.01em;
font-family: 'Inter Tight', 'Inter', sans-serif;
}
.peptigo-sale-banner__sep {
color: #475569;
font-weight: 400;
}
.peptigo-sale-banner__msg {
color: #cbd5e1;
font-weight: 400;
}
.peptigo-sale-banner__close {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: #64748b;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color .15s ease, background .15s ease;
}
.peptigo-sale-banner__close:hover {
color: #fff;
background: rgba(255,255,255,0.06);
}
.peptigo-sale-banner__close:focus-visible {
outline: 2px solid #fbbf24;
outline-offset: 2px;
}
@keyframes peptigoSalePulse {
0%, 100% { box-shadow: 0 0 8px #fbbf24, 0 0 0 0 rgba(251, 191, 36, 0.4); }
50% { box-shadow: 0 0 12px #fbbf24, 0 0 0 5px rgba(251, 191, 36, 0); }
}
@media (max-width: 600px) {
.peptigo-sale-banner { font-size: 11.5px; }
.peptigo-sale-banner__inner { padding: 8px 36px 8px 14px; gap: 6px; }
.peptigo-sale-banner__pct { font-size: 12px; }
.peptigo-sale-banner__msg {
/* Tighten on narrow screens */
font-size: 11px;
}
}
@media (max-width: 380px) {
/* On very small phones, drop the explainer and keep just the headline */
.peptigo-sale-banner__msg { display: none; }
.peptigo-sale-banner__sep { display: none; }
}
/* ========== MOLECULE LOGO ========== */
.peptigo-logo__mark {
width: 40px; height: 40px;
transition: transform .5s ease;
filter: drop-shadow(0 4px 10px rgba(37,99,235,.25));
}
.peptigo-logo:hover .peptigo-logo__mark { transform: rotate(-8deg) scale(1.08); }
/* ========== HERO BRAND LOCKUP (large) ========== */
.peptigo-hero__brand {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 28px;
margin: 0 auto 28px; width: 100%;
}
.peptigo-hero__brand-mark {
width: 120px; height: 120px;
filter: drop-shadow(0 18px 40px rgba(96,165,250,.55)) drop-shadow(0 4px 10px rgba(11,23,54,.3));
animation: peptigoHeroBrandFloat 6s ease-in-out infinite;
}
@keyframes peptigoHeroBrandFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.peptigo-hero__brand-word {
font-family: 'Inter Tight', sans-serif;
font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 4.6rem);
letter-spacing: .32em; line-height: 1;
background: linear-gradient(180deg, #ffffff 0%, #bfdbfe 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-indent: .32em;
}
@media (max-width: 640px) {
.peptigo-hero__brand { gap: 14px; margin-bottom: 22px; }
.peptigo-hero__brand-mark { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .peptigo-hero__brand-mark { animation: none; } }
/* ========== VIDEO FEATURE SECTION ========== */
.peptigo-video-feature { padding: 88px 0; }
.peptigo-vf__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 900px) { .peptigo-vf__grid { grid-template-columns: 1fr; gap: 32px; } }
.peptigo-vf__video-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(29,78,216,.35), 0 2px 8px rgba(15,23,42,.08); border: 1px solid rgba(15,23,42,.06); background: #0b1736; }
.peptigo-vf__video-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(11,23,54,.18) 100%); pointer-events: none; }
.peptigo-vf__video-wrap video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.peptigo-vf__badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(11,23,54,.55); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(8px); }
.peptigo-vf__badge-pulse { width: 6px; height: 6px; border-radius: 999px; background: #60a5fa; box-shadow: 0 0 10px #60a5fa; animation: peptigoAnnouncePulse 2s ease-in-out infinite; }
.peptigo-vf__title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.022em; margin: 0 0 16px; }
.peptigo-vf__title em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; color: var(--blue-700); }
.peptigo-vf__lede { color: var(--ink-500); font-size: 1.02rem; line-height: 1.7; margin: 0 0 24px; max-width: 460px; }
.peptigo-vf__bullets { list-style: none; margin: 0 0 28px; padding: 0; }
.peptigo-vf__bullets li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: .95rem; color: var(--ink-700); }
.peptigo-vf__bullets li svg { color: var(--blue-600); flex-shrink: 0; margin-top: 3px; }
.peptigo-vf__cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: var(--navy-900); color: #fff; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; transition: background .2s, transform .2s; }
.peptigo-vf__cta:hover { background: var(--blue-700); transform: translateY(-1px); }
.peptigo-vf__replay { position: absolute; bottom: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(11,23,54,.55); color: #fff; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); font-size: .78rem; font-weight: 600; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s, background .2s; font-family: inherit; }
.peptigo-vf__replay.is-visible { opacity: 1; transform: none; }
.peptigo-vf__replay:hover { background: var(--blue-600); }
/* ============================================================ */
/* === V2 DESIGN SYSTEM — premium ink palette (PDP + Shop) === */
/* ============================================================ */
:root {
--ink-950: #0a1424;
--ink-700: #3a4252;
--ink-200: #e5e7eb;
--ink-100: #f1f3f7;
--paper: #fafbfc;
--gold: #c9a96a;
}
.peptigo-hero__brand { gap: 12px !important; }
.peptigo-hero__brand-word {
background: linear-gradient(120deg, #fff 0%, #dbeafe 30%, #bfdbfe 50%, #dbeafe 70%, #fff 100%) !important;
background-size: 220% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
animation: peptigoHeroBrandShine 7s ease-in-out infinite;
}
@keyframes peptigoHeroBrandShine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.peptigo-cats a {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #fff 0%, #eff6ff 55%, #dbeafe 100%) !important;
border: 1px solid rgba(255,255,255,.7) !important;
box-shadow: 0 4px 14px rgba(29,78,216,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
transition: transform .3s ease, box-shadow .3s ease, background .3s ease !important;
}
.peptigo-cats a:hover {
background: linear-gradient(135deg, #fff 0%, #dbeafe 60%, #bfdbfe 100%) !important;
box-shadow: 0 12px 28px rgba(29,78,216,.22), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
/* ===== PDP V2 styles (scoped to body.tpl-pdp) ===== */
.tpl-pdp {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.6rem,4.5vw,3.8rem);font-weight:700;line-height:1.02}
h2{font-size:clamp(1.6rem,2.4vw,2rem);font-weight:600;line-height:1.15}
h3{font-size:1.05rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center;letter-spacing:.02em}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== ABOVE-THE-FOLD HERO ========== */
.pdp{padding:32px 0 96px}
.pdp__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
@media (max-width:920px){.pdp__grid{grid-template-columns:1fr;gap:32px}}
/* GALLERY — full bleed within column, no card frame */
.gallery{position:sticky;top:96px}
.gallery__main{
position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;
background:radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 85%, var(--paper) 100%);
display:flex;align-items:flex-end;justify-content:center;
}
.gallery__main::before{
content:"";position:absolute;left:50%;top:58%;width:90%;height:80%;transform:translate(-50%,-50%);
background:radial-gradient(closest-side, rgba(96,165,250,.4) 0%, rgba(96,165,250,0) 72%);
filter:blur(16px);pointer-events:none;
}
.gallery__main img{
position:relative;z-index:1;width:74%;height:96%;object-fit:contain;object-position:center bottom;
margin-bottom:-6%;
filter:drop-shadow(0 32px 40px rgba(15,23,42,.16)) drop-shadow(0 8px 16px rgba(29,78,216,.16));
transition:transform .8s ease;
}
.gallery__main:hover img{transform:translateY(-4px) scale(1.02)}
.gallery__rate{
position:absolute;top:20px;right:20px;font-size:.72rem;color:var(--ink-500);
font-family:'JetBrains Mono';letter-spacing:.08em;display:flex;align-items:center;gap:6px;z-index:2;
}
.gallery__rate .star{color:var(--gold);font-size:.85rem}
.gallery__thumbs{display:flex;gap:10px;margin-top:14px}
.thumb{
flex:1;aspect-ratio:1/1;max-width:90px;border-radius:4px;overflow:hidden;cursor:pointer;
background:radial-gradient(60% 60% at 50% 50%, #e9eff9 0%, #f5f7fb 100%);
display:grid;place-items:center;border:1px solid transparent;transition:border-color .2s, transform .2s;
}
.thumb img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(15,23,42,.1))}
.thumb.active{border-color:var(--ink-900)}
.thumb:hover{transform:translateY(-1px)}
.gallery__coa{
margin-top:18px;display:inline-flex;align-items:center;gap:8px;
font-size:.84rem;color:var(--ink-700);
border-bottom:1px dotted var(--ink-200);padding-bottom:2px;
transition:color .2s, border-color .2s;
}
.gallery__coa:hover{color:var(--ink-950);border-color:var(--ink-700)}
.gallery__coa svg{color:var(--ink-500);width:16px;height:16px}
/* INFO COLUMN — minimal */
.info__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-500);margin-bottom:20px;
}
.info h1{margin-bottom:14px}
.info h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--ink-700)}
.info__sub{
color:var(--ink-700);font-size:1.08rem;line-height:1.55;
margin:0 0 28px;max-width:440px;
}
.info__rating{
display:flex;align-items:center;gap:10px;margin-bottom:36px;
padding-bottom:28px;border-bottom:var(--hairline);font-size:.92rem;color:var(--ink-700);
}
.info__rating .stars{color:var(--gold);letter-spacing:1px;font-size:1rem}
.info__rating a{color:var(--ink-700);border-bottom:1px solid var(--ink-200);padding-bottom:1px}
.info__rating a:hover{color:var(--ink-950);border-color:var(--ink-700)}
/* PRICE */
.price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.price-current{font-family:'Inter Tight';font-weight:700;font-size:2.2rem;line-height:1;color:var(--ink-950)}
.price-was{font-size:.95rem;color:var(--ink-400);text-decoration:line-through}
/* VARIANT — single line pills */
.variant-block{margin-bottom:28px}
.variant-label{
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;
}
.variant-label .selected{color:var(--ink-900);font-family:'Inter';font-size:.85rem;letter-spacing:0;text-transform:none;font-weight:600}
.variant-pills{display:flex;gap:8px;flex-wrap:wrap}
.variant-pill{
padding:11px 18px;background:#fff;border:1px solid var(--ink-200);border-radius:6px;
font:inherit;font-size:.92rem;font-weight:500;color:var(--ink-700);cursor:pointer;
transition:all .15s;
}
.variant-pill:hover{border-color:var(--ink-700);color:var(--ink-950)}
.variant-pill.active{background:var(--ink-950);border-color:var(--ink-950);color:#fff}
/* CTA */
.add-row{display:flex;gap:10px;margin-bottom:24px}
.qty{
display:flex;align-items:center;border:1px solid var(--ink-200);border-radius:6px;background:#fff;
}
.qty button{width:42px;height:50px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--ink-700);transition:color .15s}
.qty button:hover{color:var(--ink-950)}
.qty input{width:42px;height:50px;text-align:center;border:none;background:none;font:inherit;font-weight:600;font-size:.95rem;outline:none;color:var(--ink-950)}
.add-cart{
flex:1;background:var(--ink-950);color:#fff;border:none;border-radius:6px;
padding:0 24px;height:50px;font:inherit;font-weight:600;font-size:.92rem;
letter-spacing:.04em;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:10px;
transition:background .25s;
}
.add-cart:hover{background:#1e40af}
/* TRUST LINE — text only, no cards */
.trust-text{
font-size:.82rem;color:var(--ink-500);line-height:1.7;
padding-top:24px;border-top:var(--hairline);
}
.trust-text strong{color:var(--ink-900);font-weight:600}
/* RUO inline note (footer of right column) */
.ruo-note{
margin-top:20px;padding:14px 16px;background:var(--ink-100);border-radius:6px;
font-size:.78rem;color:var(--ink-700);line-height:1.55;
display:flex;gap:10px;align-items:flex-start;
}
.ruo-note svg{color:var(--ink-500);flex-shrink:0;margin-top:1px;width:14px;height:14px;stroke-width:1.7}
/* ========== STICKY SUB-NAV ========== */
.subnav{
position:sticky;top:64px;z-index:40;background:rgba(250,251,252,.92);backdrop-filter:blur(12px);
border-top:var(--hairline);border-bottom:var(--hairline);margin-top:0;
}
.subnav__inner{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;gap:4px;overflow-x:auto}
.subnav a{
padding:18px 16px;font-size:.86rem;font-weight:500;color:var(--ink-500);
border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s, border-color .15s;
}
.subnav a:hover{color:var(--ink-900)}
.subnav a.active{color:var(--ink-950);border-bottom-color:var(--ink-950)}
/* ========== SECTIONS ========== */
section.s{padding:112px 0;border-top:var(--hairline)}
section.s:first-of-type{border-top:none}
.s__head{margin-bottom:48px;max-width:680px}
.s__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:14px;
}
.s__head p{color:var(--ink-700);margin:14px 0 0;font-size:1.05rem;line-height:1.7;max-width:620px}
/* OVERVIEW long form */
.overview{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start}
@media (max-width:820px){.overview{grid-template-columns:1fr;gap:32px}}
.overview__body p{color:var(--ink-700);font-size:1.02rem;line-height:1.85;margin:0 0 20px;max-width:620px}
.overview__body h3{margin:32px 0 12px;font-size:1.05rem}
.overview__body ul{padding-left:0;list-style:none;margin:0 0 20px}
.overview__body ul li{color:var(--ink-700);padding:8px 0 8px 20px;position:relative;font-size:.96rem;line-height:1.6}
.overview__body ul li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--ink-400)}
.key-facts{
background:transparent;padding:0;
}
.key-facts h4{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin:0 0 18px;font-weight:600;
}
.key-facts dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.key-facts dt, .key-facts dd{margin:0;padding:14px 0;font-size:.92rem;border-bottom:var(--hairline)}
.key-facts dt{color:var(--ink-500);font-weight:500}
.key-facts dd{color:var(--ink-950);font-weight:600;margin-bottom:0;text-align:right;font-family:'JetBrains Mono';font-size:.86rem}
.key-facts .row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:var(--hairline);gap:16px}
.key-facts .row:first-child{border-top:var(--hairline)}
.key-facts .row .k{color:var(--ink-500);font-weight:500;font-size:.92rem}
.key-facts .row .v{color:var(--ink-950);font-weight:600;font-size:.88rem;text-align:right}
.key-facts .row .v.mono{font-family:'JetBrains Mono'}
/* LAB VERIFICATION — clean document feel, no gradient */
.lab{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;padding-top:24px}
@media (max-width:820px){.lab{grid-template-columns:1fr;gap:32px}}
.lab__intro h3{font-family:'Inter Tight';font-weight:600;font-size:1.4rem;margin-bottom:16px;color:var(--ink-950)}
.lab__intro p{color:var(--ink-700);font-size:1rem;line-height:1.75;margin:0 0 20px;max-width:480px}
.lab__partner{
display:inline-flex;align-items:center;gap:10px;padding:10px 14px;
border:var(--hairline);border-radius:6px;font-size:.85rem;color:var(--ink-700);background:#fff;
}
.lab__partner svg{color:var(--ink-500)}
.lab__partner strong{color:var(--ink-950);font-weight:600}
.lab__pdf{
margin-top:20px;display:inline-flex;align-items:center;gap:8px;
font-size:.88rem;color:var(--ink-950);font-weight:500;
border-bottom:1px solid var(--ink-300);padding-bottom:2px;
}
.lab__pdf:hover{border-bottom-color:var(--ink-950)}
.lab__pdf svg{width:16px;height:16px;color:var(--ink-500)}
.lab__results{
background:#fff;border:var(--hairline);border-radius:8px;padding:8px 24px;
}
.lab__results .row{
display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;
padding:18px 0;border-bottom:var(--hairline);
}
.lab__results .row:last-child{border-bottom:none}
.lab__results .label{color:var(--ink-700);font-size:.92rem;font-weight:500}
.lab__results .value{color:var(--ink-950);font-family:'JetBrains Mono';font-size:.92rem;font-weight:600;text-align:right}
.lab__results .pass{font-size:.7rem;letter-spacing:.12em;color:#0a7f3f;background:#e7f7ee;padding:3px 9px;border-radius:3px;font-family:'JetBrains Mono';font-weight:600}
.lab__results .header-row{padding:14px 0 16px;border-bottom:var(--hairline-strong)}
.lab__results .header-row .h{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);font-weight:600}
/* PULL QUOTE bridge */
.pull-quote{
margin:64px auto 0;max-width:720px;text-align:center;padding-top:40px;border-top:var(--hairline);
}
.pull-quote blockquote{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:1.4rem;line-height:1.5;
color:var(--ink-900);margin:0 0 20px;
}
.pull-quote cite{font-style:normal;font-size:.84rem;color:var(--ink-500);letter-spacing:.04em}
/* SPECIFICATIONS — definition list */
.specs-table{
background:transparent;
}
.spec-row{
display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:baseline;
padding:22px 0;border-bottom:var(--hairline);
}
@media (max-width:680px){.spec-row{grid-template-columns:1fr;gap:6px;padding:18px 0}}
.spec-row .k{
font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-500);font-weight:500;
}
.spec-row .v{font-size:.98rem;color:var(--ink-950);font-weight:500}
.spec-row .v.mono{font-family:'JetBrains Mono';font-size:.92rem}
.sequence-display{
margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.sequence-display .aa{
display:inline-block;padding:6px 12px;border:var(--hairline);border-radius:4px;
font-family:'JetBrains Mono';font-size:.84rem;color:var(--ink-700);font-weight:500;
transition:all .15s;background:#fff;
}
.sequence-display .aa:hover{border-color:var(--ink-900);color:var(--ink-950);transform:translateY(-1px)}
/* STORAGE */
.storage{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
@media (max-width:680px){.storage{grid-template-columns:1fr;gap:32px}}
.storage__item h4{font-family:'Inter Tight';font-weight:600;font-size:1.05rem;margin-bottom:8px;color:var(--ink-950)}
.storage__item .temp{
display:inline-block;font-family:'JetBrains Mono';font-size:.78rem;
color:var(--ink-700);background:#f1f3f7;padding:3px 10px;border-radius:4px;margin-bottom:12px;
}
.storage__item p{color:var(--ink-700);margin:0;font-size:.94rem;line-height:1.7;max-width:380px}
/* REVIEWS */
.reviews{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
@media (max-width:760px){.reviews{grid-template-columns:1fr;gap:32px}}
.rs-summary .num{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:4.5rem;color:var(--ink-950);line-height:1;margin-bottom:12px}
.rs-summary .stars{color:var(--gold);font-size:1.05rem;letter-spacing:2px;margin-bottom:6px}
.rs-summary .total{color:var(--ink-500);font-size:.88rem}
.rs-bars{margin-top:20px;display:flex;flex-direction:column;gap:6px}
.rs-bar{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--ink-500)}
.rs-bar .label{width:14px;text-align:right;color:var(--ink-700);font-weight:500}
.rs-bar .track{flex:1;height:4px;background:var(--ink-100);border-radius:2px;overflow:hidden}
.rs-bar .fill{height:100%;background:var(--ink-700);border-radius:2px}
.rs-bar .pct{width:32px;text-align:right;font-family:'JetBrains Mono';font-size:.76rem}
.review-list{display:flex;flex-direction:column;gap:0}
.review{padding:32px 0;border-bottom:var(--hairline)}
.review:first-child{padding-top:0}
.review:last-child{border-bottom:none}
.review-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.review-head .avatar{
width:34px;height:34px;border-radius:999px;background:var(--ink-100);color:var(--ink-700);
display:grid;place-items:center;font-size:.78rem;font-weight:600;font-family:'JetBrains Mono';
}
.review-head .who{font-size:.92rem;font-weight:600;color:var(--ink-950)}
.review-head .meta{font-size:.78rem;color:var(--ink-500)}
.review-head .verify{margin-left:auto;font-size:.7rem;color:var(--ink-500);font-family:'JetBrains Mono';letter-spacing:.08em}
.review .stars{color:var(--gold);font-size:.88rem;letter-spacing:1px;margin-bottom:10px}
.review .title{font-family:'Inter Tight';font-weight:600;font-size:1rem;color:var(--ink-950);margin:0 0 8px}
.review p{margin:0;color:var(--ink-700);font-size:.95rem;line-height:1.7}
/* FAQ */
.faq-list{max-width:720px;margin:0 auto}
.faq-list details{
border-bottom:var(--hairline);padding:0;
}
.faq-list details:first-child{border-top:var(--hairline)}
.faq-list summary{
list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
font-weight:600;font-size:1rem;color:var(--ink-950);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .chev{
width:24px;height:24px;color:var(--ink-500);flex-shrink:0;transition:transform .25s, color .2s;
}
.faq-list details[open] .chev{transform:rotate(180deg);color:var(--ink-950)}
.faq-list .body{padding:0 0 24px;color:var(--ink-700);font-size:.95rem;line-height:1.75;max-width:620px}
/* FOOTER */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
}
/* ===== Shop V2 styles (scoped to body.tpl-shop) ===== */
.tpl-shop {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.6rem,4.5vw,3.6rem);font-weight:700;line-height:1.05}
h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--ink-700)}
h2{font-size:clamp(1.4rem,2vw,1.7rem);font-weight:600;line-height:1.2}
h3{font-size:1.05rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.nav-group a.active{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== PAGE HEAD ========== */
.page-head{padding:32px 0 0}
.page-head__intro{max-width:680px;margin-bottom:48px}
.page-head__intro p{color:var(--ink-700);font-size:1.02rem;line-height:1.7;margin:18px 0 0;max-width:560px}
/* ========== LAYOUT ========== */
.catalog{display:grid;grid-template-columns:240px 1fr;gap:64px;padding-bottom:96px}
@media (max-width:980px){.catalog{grid-template-columns:1fr;gap:32px}}
/* ========== SIDEBAR (no card chrome) ========== */
.filters{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:8px}
@media (max-width:980px){.filters{position:static;max-height:none;padding-right:0}}
.filters::-webkit-scrollbar{width:4px}
.filters::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:2px}
.filter-group{padding:24px 0;border-bottom:var(--hairline)}
.filter-group:first-child{padding-top:0}
.filter-group:last-child{border-bottom:none}
.filter-group__head{
display:flex;justify-content:space-between;align-items:baseline;
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:14px;font-weight:600;
}
.filter-group__clear{font-family:'Inter';text-transform:none;letter-spacing:0;font-size:.78rem;color:var(--ink-700);font-weight:500;cursor:pointer;background:none;border:none;padding:0;transition:color .15s}
.filter-group__clear:hover{color:var(--ink-950)}
.check{display:flex;align-items:center;justify-content:space-between;padding:7px 0;cursor:pointer;font-size:.92rem;color:var(--ink-700);transition:color .15s}
.check:hover{color:var(--ink-950)}
.check input{margin-right:12px;accent-color:var(--ink-950);width:14px;height:14px;cursor:pointer}
.check .count{font-size:.78rem;color:var(--ink-400);font-family:'JetBrains Mono'}
.check.checked{color:var(--ink-950);font-weight:500}
/* ========== MAIN AREA ========== */
.main{}
.toolbar{
display:flex;justify-content:space-between;align-items:center;
padding-bottom:18px;margin-bottom:32px;border-bottom:var(--hairline);
font-size:.86rem;color:var(--ink-500);
}
.toolbar__count{}
.toolbar__count strong{color:var(--ink-900);font-weight:600}
.sort-select{
padding:8px 28px 8px 0;background:transparent;font:inherit;font-size:.88rem;color:var(--ink-700);
border:none;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right center;
}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.chip{
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
background:var(--ink-100);color:var(--ink-700);border-radius:4px;
font-size:.82rem;font-weight:500;
}
.chip__key{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.chip button{background:none;border:none;color:var(--ink-500);cursor:pointer;font-size:.95rem;line-height:1;padding:0;display:grid;place-items:center;width:14px;height:14px;transition:color .15s}
.chip button:hover{color:var(--ink-950)}
.chip-clear{
display:inline-flex;align-items:center;padding:6px 12px;font-size:.82rem;font-weight:500;
color:var(--ink-700);background:none;border:none;cursor:pointer;border-bottom:1px solid var(--ink-200);
border-radius:0;padding-bottom:5px;transition:color .15s, border-color .15s;
}
.chip-clear:hover{color:var(--ink-950);border-color:var(--ink-700)}
/* ========== CATEGORY SECTIONS ========== */
.cat-section{padding:0 0 96px;scroll-margin-top:96px}
.cat-section:last-child{padding-bottom:0}
.cat-section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:var(--hairline)}
.cat-section__title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cat-section__title h2{}
.cat-section__count{font-family:'JetBrains Mono';font-size:.78rem;color:var(--ink-500);letter-spacing:.06em}
.cat-section__head p{color:var(--ink-500);font-size:.92rem;margin:0;max-width:380px;text-align:right}
@media (max-width:680px){.cat-section__head p{text-align:left}}
/* ========== PRODUCT GRID — frameless ========== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media (max-width:560px){.grid{grid-template-columns:1fr;gap:32px}}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.card__media{
position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;
background:radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 85%, var(--paper) 100%);
display:flex;align-items:flex-end;justify-content:center;
}
.card__media::before{
content:"";position:absolute;left:50%;top:58%;width:90%;height:80%;transform:translate(-50%,-50%);
background:radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter:blur(14px);pointer-events:none;
}
.card__media img{
position:relative;z-index:1;width:74%;height:96%;object-fit:contain;object-position:center bottom;
margin-bottom:-6%;
filter:drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.14));
transition:transform .7s ease;
}
.card:hover .card__media img{transform:translateY(-4px) scale(1.025)}
.card__name{font-family:'Inter Tight';font-weight:600;font-size:1.05rem;color:var(--ink-950);line-height:1.3;margin:0}
.card__spec{
font-family:'JetBrains Mono';font-size:.78rem;color:var(--ink-500);
letter-spacing:.04em;margin:0;line-height:1.5;
}
.card__flag{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;
font-size:.82rem;color:var(--ink-500);margin:0;
}
.card__oos{
font-family:'JetBrains Mono';font-size:.74rem;color:var(--ink-400);letter-spacing:.06em;text-transform:uppercase;margin:0;
}
.card.is-oos .card__media{opacity:.55}
/* ========== FOOTER ========== */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
}
/* === Shop V2 — colored italic accents matching homepage === */
.tpl-shop h1 em { color: var(--blue-700) !important; }
.tpl-shop .cat-section h2 em { font-family: 'Fraunces', serif !important; font-style: italic; font-weight: 500; color: var(--blue-700); }
/* ===== tpl-shop styles (scoped) ===== */
.tpl-shop {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.6rem,4.5vw,3.6rem);font-weight:700;line-height:1.05}
h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--ink-700)}
h2{font-size:clamp(1.4rem,2vw,1.7rem);font-weight:600;line-height:1.2}
h3{font-size:1.05rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.nav-group a.active{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== PAGE HEAD ========== */
.page-head{padding:32px 0 0}
.page-head__intro{max-width:680px;margin-bottom:48px}
.page-head__intro p{color:var(--ink-700);font-size:1.02rem;line-height:1.7;margin:18px 0 0;max-width:560px}
/* ========== LAYOUT ========== */
.catalog{display:grid;grid-template-columns:240px 1fr;gap:64px;padding-bottom:96px}
@media (max-width:980px){.catalog{grid-template-columns:1fr;gap:32px}}
/* ========== SIDEBAR (no card chrome) ========== */
.filters{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:8px}
@media (max-width:980px){.filters{position:static;max-height:none;padding-right:0}}
.filters::-webkit-scrollbar{width:4px}
.filters::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:2px}
.filter-group{padding:24px 0;border-bottom:var(--hairline)}
.filter-group:first-child{padding-top:0}
.filter-group:last-child{border-bottom:none}
.filter-group__head{
display:flex;justify-content:space-between;align-items:baseline;
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:14px;font-weight:600;
}
.filter-group__clear{font-family:'Inter';text-transform:none;letter-spacing:0;font-size:.78rem;color:var(--ink-700);font-weight:500;cursor:pointer;background:none;border:none;padding:0;transition:color .15s}
.filter-group__clear:hover{color:var(--ink-950)}
.check{display:flex;align-items:center;justify-content:space-between;padding:7px 0;cursor:pointer;font-size:.92rem;color:var(--ink-700);transition:color .15s}
.check:hover{color:var(--ink-950)}
.check input{margin-right:12px;accent-color:var(--ink-950);width:14px;height:14px;cursor:pointer}
.check .count{font-size:.78rem;color:var(--ink-400);font-family:'JetBrains Mono'}
.check.checked{color:var(--ink-950);font-weight:500}
/* ========== MAIN AREA ========== */
.main{}
.toolbar{
display:flex;justify-content:space-between;align-items:center;
padding-bottom:18px;margin-bottom:32px;border-bottom:var(--hairline);
font-size:.86rem;color:var(--ink-500);
}
.toolbar__count{}
.toolbar__count strong{color:var(--ink-900);font-weight:600}
.sort-select{
padding:8px 28px 8px 0;background:transparent;font:inherit;font-size:.88rem;color:var(--ink-700);
border:none;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right center;
}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.chip{
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
background:var(--ink-100);color:var(--ink-700);border-radius:4px;
font-size:.82rem;font-weight:500;
}
.chip__key{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.chip button{background:none;border:none;color:var(--ink-500);cursor:pointer;font-size:.95rem;line-height:1;padding:0;display:grid;place-items:center;width:14px;height:14px;transition:color .15s}
.chip button:hover{color:var(--ink-950)}
.chip-clear{
display:inline-flex;align-items:center;padding:6px 12px;font-size:.82rem;font-weight:500;
color:var(--ink-700);background:none;border:none;cursor:pointer;border-bottom:1px solid var(--ink-200);
border-radius:0;padding-bottom:5px;transition:color .15s, border-color .15s;
}
.chip-clear:hover{color:var(--ink-950);border-color:var(--ink-700)}
/* ========== CATEGORY SECTIONS ========== */
.cat-section{padding:0 0 96px;scroll-margin-top:96px}
.cat-section:last-child{padding-bottom:0}
.cat-section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:var(--hairline)}
.cat-section__title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cat-section__title h2{}
.cat-section__count{font-family:'JetBrains Mono';font-size:.78rem;color:var(--ink-500);letter-spacing:.06em}
.cat-section__head p{color:var(--ink-500);font-size:.92rem;margin:0;max-width:380px;text-align:right}
@media (max-width:680px){.cat-section__head p{text-align:left}}
/* ========== PRODUCT GRID — frameless ========== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media (max-width:560px){.grid{grid-template-columns:1fr;gap:32px}}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.card__media{
position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;
background:radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 85%, var(--paper) 100%);
display:flex;align-items:flex-end;justify-content:center;
}
.card__media::before{
content:"";position:absolute;left:50%;top:58%;width:90%;height:80%;transform:translate(-50%,-50%);
background:radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter:blur(14px);pointer-events:none;
}
.card__media img{
position:relative;z-index:1;width:74%;height:96%;object-fit:contain;object-position:center bottom;
margin-bottom:-6%;
filter:drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.14));
transition:transform .7s ease;
}
.card:hover .card__media img{transform:translateY(-4px) scale(1.025)}
.card__name{font-family:'Inter Tight';font-weight:600;font-size:1.05rem;color:var(--ink-950);line-height:1.3;margin:0}
.card__spec{
font-family:'JetBrains Mono';font-size:.78rem;color:var(--ink-500);
letter-spacing:.04em;margin:0;line-height:1.5;
}
.card__flag{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;
font-size:.82rem;color:var(--ink-500);margin:0;
}
.card__oos{
font-family:'JetBrains Mono';font-size:.74rem;color:var(--ink-400);letter-spacing:.06em;text-transform:uppercase;margin:0;
}
.card.is-oos .card__media{opacity:.55}
/* ========== FOOTER ========== */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ===== MOBILE — Universal fixes (touch targets + hero video) ===== */
@media (max-width: 760px) {
button, .icon-btn, .nav-group a, .qty button, .pdp-qty button, .variant-pill, .pdp-variant-pill { min-height: 44px; }
.qty button, .pdp-qty button { min-width: 44px; width: 44px; height: 44px; font-size: 1.2rem; }
.qty input, .pdp-qty input { min-width: 44px; height: 44px; }
.li-remove, .chip button, .pdp-faq summary { min-height: 44px; }
input[type="number"], input[type="email"], input[type="text"], input[type="search"], select, textarea { font-size: 16px !important; }
.vf-video-wrap video, video.hero-video { display: none; }
.vf-video-wrap, .video-feature .vf-video-wrap { background: radial-gradient(80% 60% at 50% 40%, #1d4ed8 0%, #0a1424 100%) !important; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.vf-video-wrap::after { content: "Tap to play"; color: rgba(255,255,255,.85); font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: absolute; inset: auto; background: rgba(11,23,54,.55); padding: 12px 22px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
}
/* ===== HAMBURGER MENU ===== */
.hamburger { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-950, #0a1424); border-radius: 1px; transition: transform .25s, opacity .2s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,36,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 86%; max-width: 360px; background: var(--paper, #fafbfc); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 88px 32px 32px; box-shadow: -20px 0 60px rgba(15,23,42,.18); overflow-y: auto; }
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-panel a { display: block; padding: 18px 0; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.3rem; color: var(--ink-950, #0a1424); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.08); transition: color .15s, padding-left .2s; }
.mobile-nav-panel a:hover { color: #1e40af; padding-left: 6px; }
.mobile-nav-panel a:last-of-type { border-bottom: none; }
.mobile-nav-panel .panel-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid rgba(15,23,42,.12); cursor: pointer; display: grid; place-items: center; color: var(--ink-700, #3a4252); }
.mobile-nav-panel .panel-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.mobile-nav-panel .panel-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.08); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500, #6b7280); }
@media (max-width: 760px) {
/* Hide ALL nav-groups (including unmodified homepage ones) and show hamburger */
.nav-group, .nav-group--center, .nav-group--right,
.peptigo-nav__group, .peptigo-nav__group--center, .peptigo-nav__group--right { display: none !important; }
.nav, .peptigo-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 12px !important;
padding: 14px 20px !important;
}
.logo { order: -1 !important; flex: 0 0 auto; }
.hamburger { display: flex !important; order: 99 !important; flex: 0 0 auto; }
}
/* ===== MOBILE FILTER / SORT BOTTOM SHEET ===== */
.mobile-filter-bar { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(10,20,36,.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.bottom-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
background: #fff; border-radius: 20px 20px 0 0;
transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1);
display: flex; flex-direction: column; max-height: 85vh;
box-shadow: 0 -10px 40px rgba(15,23,42,.18);
overflow: hidden;
}
.bottom-sheet.is-open { transform: translateY(0); }
.bottom-sheet--sort { max-height: 60vh; }
.sheet-handle { width: 44px; height: 5px; border-radius: 999px; background: var(--ink-200); margin: 10px auto 0; flex-shrink: 0; }
.sheet-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px 12px; flex-shrink: 0;
border-bottom: var(--hairline);
}
.sheet-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--ink-950); margin: 0; }
.sheet-close {
width: 44px; height: 44px; border-radius: 999px;
background: transparent; border: 1px solid rgba(15,23,42,.12);
cursor: pointer; display: grid; place-items: center; color: var(--ink-700);
}
.sheet-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 24px 16px; -webkit-overflow-scrolling: touch; }
.sheet-body .filter-group { padding: 18px 0; }
.sheet-body .filter-group:first-child { padding-top: 6px; }
.sheet-body .filter-group .check { padding: 12px 0; font-size: 1rem; min-height: 44px; }
.sheet-body .filter-group .check input { width: 18px; height: 18px; }
.sheet-footer {
flex-shrink: 0; padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
border-top: var(--hairline); background: #fff;
}
.sheet-apply {
width: 100%; min-height: 48px; border-radius: 999px;
background: var(--ink-950); color: #fff; border: none; cursor: pointer;
font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: .95rem;
letter-spacing: .01em; transition: background .15s;
}
.sheet-apply:hover { background: #1a2540; }
/* Sort sheet list options */
.sort-options { list-style: none; margin: 0; padding: 0; }
.sort-options li { border-bottom: var(--hairline); }
.sort-options li:last-child { border-bottom: none; }
.sort-options button {
width: 100%; text-align: left; background: transparent; border: none; cursor: pointer;
padding: 16px 4px; min-height: 56px; font: inherit; font-size: 1rem; color: var(--ink-700);
display: flex; align-items: center; justify-content: space-between;
transition: color .15s;
}
.sort-options button:hover { color: var(--ink-950); }
.sort-options button.is-selected { color: var(--ink-950); font-weight: 600; }
.sort-options button .check-mark { display: none; color: var(--blue-700, #1d4ed8); }
.sort-options button.is-selected .check-mark { display: inline; }
@media (max-width: 760px) {
.filters { display: none; }
.catalog { gap: 0; }
.mobile-filter-bar {
display: flex; gap: 10px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: #fff; border-top: var(--hairline);
box-shadow: 0 -4px 20px rgba(15,23,42,.06);
}
.mobile-filter-bar button {
flex: 1; min-height: 48px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: .92rem;
cursor: pointer; transition: background .15s, color .15s;
}
.mfb-filter { background: var(--ink-950); color: #fff; border: none; }
.mfb-filter:hover { background: #1a2540; }
.mfb-sort { background: var(--paper); color: var(--ink-950); border: 1px solid rgba(15,23,42,.12); }
.mfb-sort:hover { border-color: var(--ink-700); }
.mfb-filter svg, .mfb-sort svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mfb-badge {
display: inline-grid; place-items: center;
min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
background: #fff; color: var(--ink-950);
font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 600;
margin-left: 4px;
}
.mfb-badge:empty, .mfb-badge[data-count="0"] { display: none; }
/* room for sticky bar so footer/cards don't get covered */
body { padding-bottom: 84px; }
}
}
/* ===== tpl-cart styles (scoped) ===== */
.tpl-cart {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.6rem,4.5vw,3.6rem);font-weight:700;line-height:1.05}
h1 em, h2 em, h3 em, .em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
h2{font-size:clamp(1.4rem,2vw,1.6rem);font-weight:600;line-height:1.2}
h3{font-size:1.05rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.nav-group a.active{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center;letter-spacing:.02em}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== PAGE HEAD ========== */
.page-head{padding:32px 0 48px}
.page-head__intro{max-width:680px}
.page-head__intro .meta{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-top:14px;
}
/* ========== CART LAYOUT ========== */
.cart{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start;padding-bottom:96px}
@media (max-width:980px){.cart{grid-template-columns:1fr;gap:48px}}
/* Body class wrapper */
body.tpl-cart{}
/* ========== LINE ITEMS — frameless, hairline rows ========== */
.items__head{
padding:0 0 18px;border-bottom:var(--hairline);
display:flex;justify-content:space-between;align-items:baseline;
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);font-weight:600;
}
.items__head .count{font-family:'Inter';text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--ink-700);font-weight:500}
.line-item{
display:grid;grid-template-columns:88px 1fr auto;gap:24px;
padding:28px 0;border-bottom:var(--hairline);align-items:center;
transition:max-height .35s ease, opacity .25s ease, padding .35s ease, border-bottom-width .35s ease;
overflow:hidden;max-height:260px;
}
.line-item.removing{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-bottom-width:0}
.li-thumb{
position:relative;width:88px;height:88px;border-radius:6px;overflow:hidden;
background:radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 85%, var(--paper) 100%);
display:flex;align-items:flex-end;justify-content:center;
}
.li-thumb::before{
content:"";position:absolute;left:50%;top:58%;width:90%;height:80%;transform:translate(-50%,-50%);
background:radial-gradient(closest-side, rgba(96,165,250,.4) 0%, rgba(96,165,250,0) 72%);
filter:blur(10px);pointer-events:none;
}
.li-thumb img{
position:relative;z-index:1;width:74%;height:96%;object-fit:contain;object-position:center bottom;
margin-bottom:-6%;
filter:drop-shadow(0 8px 12px rgba(15,23,42,.16));
}
.li-info h3{font-family:'Inter Tight';font-weight:600;font-size:1.05rem;color:var(--ink-950);margin:0 0 4px;line-height:1.3}
.li-info .variant{font-size:.88rem;color:var(--ink-700);margin-bottom:6px}
.li-info .batch{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.06em;
color:var(--ink-500);text-transform:uppercase;
}
.li-right{display:flex;align-items:center;gap:24px;justify-content:flex-end}
.qty{display:flex;align-items:center;border:1px solid var(--ink-200);border-radius:6px;background:#fff}
.qty button{width:32px;height:38px;background:none;border:none;font-size:1rem;cursor:pointer;color:var(--ink-700);transition:color .15s}
.qty button:hover{color:var(--ink-950)}
.qty input{
width:36px;height:38px;text-align:center;border:none;background:none;
font:inherit;font-weight:600;font-size:.92rem;outline:none;color:var(--ink-950);
-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.li-total{
font-family:'Inter Tight';font-weight:700;font-size:1.05rem;
color:var(--ink-950);min-width:78px;text-align:right;font-variant-numeric:tabular-nums;
}
.li-remove{
background:none;border:none;color:var(--ink-400);font-size:1.1rem;line-height:1;
cursor:pointer;padding:6px;width:28px;height:28px;display:grid;place-items:center;
border-radius:4px;transition:color .15s, background .15s;
}
.li-remove:hover{color:var(--ink-900);background:var(--ink-100)}
@media (max-width:600px){
.line-item{grid-template-columns:72px 1fr;gap:16px;padding:22px 0}
.li-thumb{width:72px;height:72px}
.li-right{grid-column:1 / -1;justify-content:space-between;width:100%;gap:14px;padding-top:6px}
.li-total{min-width:auto}
}
.continue-row{padding-top:24px}
.continue-link{
color:var(--blue-700);font-size:.88rem;display:inline-flex;align-items:center;gap:6px;
transition:color .15s, gap .15s;
}
.continue-link:hover{color:var(--ink-950);gap:10px}
/* ========== PROMO ========== */
.promo{margin-top:32px;padding-top:24px;border-top:var(--hairline)}
.promo__applied{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.promo__chip{
display:inline-flex;align-items:center;gap:10px;
background:#eff6ff;color:var(--blue-700);
padding:6px 6px 6px 12px;border-radius:4px;
font-size:.82rem;font-weight:500;
}
.promo__chip .label{font-family:'JetBrains Mono';font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.promo__chip strong{font-family:'Inter Tight';font-weight:600;color:var(--blue-700)}
.promo__chip .x{
background:none;border:none;color:var(--ink-500);cursor:pointer;
font-size:.95rem;line-height:1;padding:0;display:grid;place-items:center;
width:18px;height:18px;border-radius:3px;transition:color .15s, background .15s;
}
.promo__chip .x:hover{color:var(--ink-950);background:rgba(15,23,42,.06)}
.promo__toggle{
background:none;border:none;color:var(--blue-700);font:inherit;font-size:.86rem;font-weight:500;
cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px;
border-bottom:1px solid rgba(29,78,216,.25);padding-bottom:2px;transition:color .15s, border-color .15s;
}
.promo__toggle:hover{color:var(--ink-950);border-color:var(--ink-700)}
.promo__form{display:none;gap:10px;margin-top:14px;max-width:380px}
.promo__form.open{display:flex}
.promo__form input{
flex:1;border:1px solid var(--ink-200);border-radius:6px;padding:10px 14px;
font:inherit;font-size:.9rem;background:#fff;outline:none;color:var(--ink-950);
transition:border-color .2s;
}
.promo__form input:focus{border-color:var(--ink-700)}
.promo__form button{
background:var(--ink-950);color:#fff;border:none;border-radius:6px;
padding:0 20px;font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;
transition:background .2s;
}
.promo__form button:hover{background:#1e40af}
/* ========== UPSELL — simple horizontal frameless ========== */
.upsell{margin-top:48px;padding-top:32px;border-top:var(--hairline)}
.upsell__head{margin-bottom:24px}
.upsell__eyebrow{
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:10px;font-weight:600;
}
.upsell__title{font-family:'Inter Tight';font-weight:600;font-size:1.15rem;color:var(--ink-950);margin:0}
.upsell__title em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
.upsell__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:760px){
.upsell__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:65%;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;gap:16px}
.upsell__item{scroll-snap-align:start}
}
.upsell__item{
display:flex;flex-direction:column;gap:10px;cursor:pointer;
text-decoration:none;color:inherit;
}
.upsell__media{
position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;
background:radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 85%, var(--paper) 100%);
display:flex;align-items:flex-end;justify-content:center;
}
.upsell__media::before{
content:"";position:absolute;left:50%;top:58%;width:90%;height:80%;transform:translate(-50%,-50%);
background:radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter:blur(12px);pointer-events:none;
}
.upsell__media img{
position:relative;z-index:1;width:64%;height:90%;object-fit:contain;object-position:center bottom;
margin-bottom:-6%;
filter:drop-shadow(0 14px 18px rgba(15,23,42,.14));
transition:transform .5s ease;
}
.upsell__item:hover .upsell__media img{transform:translateY(-3px) scale(1.03)}
.upsell__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.upsell__name{font-family:'Inter Tight';font-weight:600;font-size:.95rem;color:var(--ink-950);margin:0}
.upsell__price{font-family:'JetBrains Mono';font-size:.78rem;color:var(--ink-700)}
.upsell__add{
margin-top:6px;background:none;border:none;color:var(--ink-700);font:inherit;font-size:.82rem;font-weight:500;
cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
border-bottom:1px solid var(--ink-200);padding-bottom:2px;transition:color .15s, border-color .15s;
}
.upsell__add:hover{color:var(--ink-950);border-color:var(--ink-700)}
.upsell__add.added{color:var(--ink-950);border-color:var(--ink-700)}
/* ========== SUMMARY ========== */
.summary-wrap{position:sticky;top:96px}
.summary{
background:#fff;border:var(--hairline);border-radius:6px;padding:32px;
box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.summary h2{margin-bottom:24px;font-size:1.15rem;font-family:'Inter Tight';font-weight:600;color:var(--ink-950)}
.sum-row{
display:flex;justify-content:space-between;align-items:baseline;
padding:10px 0;font-size:.92rem;color:var(--ink-700);
}
.sum-row .v{font-weight:500;color:var(--ink-950);font-variant-numeric:tabular-nums}
.sum-row.shipping .v{
font-family:'JetBrains Mono';font-size:.82rem;letter-spacing:.06em;color:var(--ink-700);
}
.ship-note{display:block;font-size:.74rem;color:var(--ink-500);margin-top:2px;font-family:'Inter';font-weight:400;letter-spacing:0;text-transform:none}
.sum-row.discount .v{color:var(--ink-700)}
.sum-divider{border:none;border-top:var(--hairline-strong);margin:18px 0 6px}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0 24px}
.sum-total .lbl{font-family:'Inter Tight';font-weight:600;font-size:1rem;color:var(--ink-950)}
.sum-total .v{
font-family:'Inter Tight';font-weight:700;font-size:1.85rem;
color:var(--ink-950);font-variant-numeric:tabular-nums;line-height:1;
}
.ruo-note{
margin-bottom:16px;padding:14px 16px;background:var(--ink-100);border-radius:6px;
font-size:.82rem;color:var(--ink-700);line-height:1.55;
display:flex;gap:12px;align-items:flex-start;cursor:pointer;
transition:background .15s;
}
.ruo-note:hover{background:#e9ecf2}
.ruo-note input{
margin-top:2px;accent-color:var(--ink-950);
width:14px;height:14px;flex-shrink:0;cursor:pointer;
}
.ruo-note strong{color:var(--ink-950);font-weight:600}
.checkout-btn{
width:100%;background:var(--ink-950);color:#fff;border:none;border-radius:6px;
padding:0 24px;height:50px;font:inherit;font-weight:600;font-size:.92rem;
letter-spacing:.04em;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:10px;
transition:background .25s;
}
.checkout-btn:hover:not(:disabled){background:#1e40af}
.checkout-btn:disabled{background:var(--ink-200);color:var(--ink-500);cursor:not-allowed}
.trust-line{
margin-top:18px;font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.06em;
color:var(--ink-500);text-align:center;line-height:1.6;
}
.trust-line .dot{margin:0 6px;opacity:.6}
.pay-row{
margin-top:18px;padding-top:16px;border-top:var(--hairline);
font-family:'JetBrains Mono';font-size:.7rem;color:var(--ink-400);
letter-spacing:.06em;text-align:center;text-transform:lowercase;
}
/* ========== FAQ ========== */
section.s{padding:96px 0;border-top:var(--hairline)}
.s__head{margin-bottom:48px;max-width:680px}
.s__head--center{text-align:center;margin:0 auto 48px}
.s__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:14px;
}
.faq-list{max-width:720px;margin:0 auto}
.faq-list details{border-bottom:var(--hairline);padding:0}
.faq-list details:first-child{border-top:var(--hairline)}
.faq-list summary{
list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
font-weight:600;font-size:1rem;color:var(--ink-950);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .chev{
width:24px;height:24px;color:var(--ink-500);flex-shrink:0;transition:transform .25s, color .2s;
}
.faq-list details[open] .chev{transform:rotate(180deg);color:var(--ink-950)}
.faq-list .body{padding:0 0 24px;color:var(--ink-700);font-size:.95rem;line-height:1.75;max-width:620px}
/* ========== FOOTER ========== */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
.ruo-pill{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
padding:6px 12px;border-radius:4px;font-size:.7rem;letter-spacing:.1em;color:#cbd5e1;
}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* Empty state */
.cart-empty{padding:64px 0;text-align:center;color:var(--ink-500)}
.cart-empty p{margin:0 0 18px;font-size:.95rem}
.cart-empty a{color:var(--blue-700);border-bottom:1px solid rgba(29,78,216,.25);padding-bottom:2px;transition:color .15s, border-color .15s}
.cart-empty a:hover{color:var(--ink-950);border-bottom-color:var(--ink-700)}
/* ===== MOBILE — Universal fixes (touch targets + hero video) ===== */
@media (max-width: 760px) {
button, .icon-btn, .nav-group a, .qty button, .pdp-qty button, .variant-pill, .pdp-variant-pill { min-height: 44px; }
.qty button, .pdp-qty button { min-width: 44px; width: 44px; height: 44px; font-size: 1.2rem; }
.qty input, .pdp-qty input { min-width: 44px; height: 44px; }
.li-remove, .chip button, .pdp-faq summary { min-height: 44px; }
input[type="number"], input[type="email"], input[type="text"], input[type="search"], select, textarea { font-size: 16px !important; }
.vf-video-wrap video, video.hero-video { display: none; }
.vf-video-wrap, .video-feature .vf-video-wrap { background: radial-gradient(80% 60% at 50% 40%, #1d4ed8 0%, #0a1424 100%) !important; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.vf-video-wrap::after { content: "Tap to play"; color: rgba(255,255,255,.85); font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: absolute; inset: auto; background: rgba(11,23,54,.55); padding: 12px 22px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
}
/* ===== HAMBURGER MENU ===== */
.hamburger { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-950, #0a1424); border-radius: 1px; transition: transform .25s, opacity .2s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,36,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 86%; max-width: 360px; background: var(--paper, #fafbfc); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 88px 32px 32px; box-shadow: -20px 0 60px rgba(15,23,42,.18); overflow-y: auto; }
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-panel a { display: block; padding: 18px 0; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.3rem; color: var(--ink-950, #0a1424); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.08); transition: color .15s, padding-left .2s; }
.mobile-nav-panel a:hover { color: #1e40af; padding-left: 6px; }
.mobile-nav-panel a:last-of-type { border-bottom: none; }
.mobile-nav-panel .panel-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid rgba(15,23,42,.12); cursor: pointer; display: grid; place-items: center; color: var(--ink-700, #3a4252); }
.mobile-nav-panel .panel-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.mobile-nav-panel .panel-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.08); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500, #6b7280); }
@media (max-width: 760px) {
/* Hide ALL nav-groups (including unmodified homepage ones) and show hamburger */
.nav-group, .nav-group--center, .nav-group--right,
.peptigo-nav__group, .peptigo-nav__group--center, .peptigo-nav__group--right { display: none !important; }
.nav, .peptigo-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 12px !important;
padding: 14px 20px !important;
}
.logo { order: -1 !important; flex: 0 0 auto; }
.hamburger { display: flex !important; order: 99 !important; flex: 0 0 auto; }
}
/* ========== STICKY MOBILE CHECKOUT BAR ========== */
.sticky-checkout-bar{
display:none;
position:fixed;left:0;right:0;bottom:0;z-index:80;
background:var(--paper);
border-top:var(--hairline);
box-shadow:0 -4px 20px rgba(15,23,42,.08);
padding:14px 20px;
padding-bottom:max(14px, env(safe-area-inset-bottom));
align-items:center;justify-content:space-between;gap:16px;
transform:translateY(110%);
transition:transform .28s cubic-bezier(.2,.9,.3,1);
pointer-events:none;
}
.sticky-checkout-bar.is-visible{
transform:translateY(0);
pointer-events:auto;
}
.sticky-checkout-bar__total{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.sticky-checkout-bar__label{
font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-500);font-weight:600;
}
.sticky-checkout-bar__value{
font-family:'Inter Tight','Inter',sans-serif;font-weight:700;font-size:1.2rem;
color:var(--ink-950);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.sticky-checkout-bar__btn{
background:var(--ink-950);color:#fff;border:none;border-radius:999px;
height:48px;min-height:48px;padding:0 22px;
font-family:'Inter Tight','Inter',sans-serif;font-weight:600;font-size:.95rem;
letter-spacing:.02em;cursor:pointer;
display:inline-flex;align-items:center;gap:8px;
box-shadow:0 4px 12px rgba(10,20,36,.18);
transition:opacity .2s, transform .15s, box-shadow .2s;
}
.sticky-checkout-bar__btn:active{transform:scale(.98)}
.sticky-checkout-bar__btn[data-locked="true"]{
opacity:.5;cursor:not-allowed;box-shadow:none;
}
.sticky-checkout-bar__btn .arrow{font-size:1rem;line-height:1}
/* RUO attention pulse */
@keyframes ruoPulse{
0%{box-shadow:0 0 0 0 rgba(29,78,216,.55), 0 0 0 0 rgba(201,169,106,.4)}
50%{box-shadow:0 0 0 10px rgba(29,78,216,0), 0 0 0 14px rgba(201,169,106,0)}
100%{box-shadow:0 0 0 0 rgba(29,78,216,0), 0 0 0 0 rgba(201,169,106,0)}
}
.ruo-note.attention{
background:#fef9e7;
animation:ruoPulse 1s ease-out 2;
transition:background .4s ease;
}
.ruo-note.attention input{
outline:2px solid var(--blue-700);outline-offset:2px;border-radius:2px;
}
@media (max-width:760px){
.sticky-checkout-bar{display:flex}
body.tpl-cart{padding-bottom:96px}
}
}
/* ===== tpl-about styles (scoped) ===== */
.tpl-about {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:700;line-height:1.04}
h1 em, h2 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
h2{font-size:clamp(1.6rem,2.4vw,2rem);font-weight:600;line-height:1.15}
h3{font-size:1.05rem;font-weight:600}
h4{font-size:1rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
.wrap, .wrap-narrow{padding:0 24px}
}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.nav-group a.active{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center;letter-spacing:.02em}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== HERO (editorial, paper + soft blue radial) ========== */
.hero{
position:relative;padding:72px 0 112px;overflow:hidden;
background:
radial-gradient(at 50% 0%, rgba(29,78,216,.05) 0%, transparent 60%),
var(--paper);
}
.hero__inner{position:relative;z-index:1;text-align:center}
.hero__mark{
width:96px;height:96px;margin:0 auto 28px;display:block;
filter:drop-shadow(0 12px 24px rgba(29,78,216,.18)) drop-shadow(0 2px 4px rgba(15,23,42,.06));
animation:float 6s ease-in-out infinite;
}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
.hero__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-500);margin-bottom:20px;
}
.hero h1{max-width:880px;margin:0 auto 28px}
.hero__lede{
color:var(--ink-700);font-size:1.08rem;line-height:1.65;
margin:0 auto;max-width:580px;
}
/* Hero stats strip */
.hero__stats{
margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);
border-top:var(--hairline);border-bottom:var(--hairline);
max-width:960px;margin-left:auto;margin-right:auto;
}
.hero__stat{
padding:24px 20px;text-align:center;
border-right:var(--hairline);
}
.hero__stat:last-child{border-right:none}
.hero__stat .v{
font-family:'Inter Tight';font-weight:700;font-size:1.5rem;
color:var(--ink-950);letter-spacing:-.02em;line-height:1;margin-bottom:8px;
}
.hero__stat .k{
font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-500);font-weight:500;
}
@media (max-width:760px){
.hero__stats{grid-template-columns:1fr 1fr}
.hero__stat{padding:20px 12px}
.hero__stat:nth-child(2){border-right:none}
.hero__stat:nth-child(1),.hero__stat:nth-child(2){border-bottom:var(--hairline)}
.hero__stat .v{font-size:1.25rem}
}
/* ========== SECTIONS ========== */
section.s{padding:120px 0;position:relative}
section.s.s--tint{background:var(--blue-tint)}
.s__head{margin-bottom:64px;max-width:680px}
.s__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:20px;
}
.s__head h2{margin-bottom:0}
.s__head p{color:var(--ink-700);margin:14px 0 0;font-size:1.02rem;line-height:1.7;max-width:620px}
@media (max-width:760px){
section.s{padding:80px 0}
.s__head{margin-bottom:48px}
}
/* ========== MISSION SPLIT (60/40) ========== */
.mission{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start}
@media (max-width:920px){.mission{grid-template-columns:1fr;gap:32px}}
.mission__body p{color:var(--ink-700);font-size:1.02rem;line-height:1.85;margin:0 0 20px;max-width:620px}
.mission__body p:last-child{margin-bottom:0}
.mission__body p strong{color:var(--ink-950);font-weight:600}
/* Featured "At a glance" panel */
.key-facts{
background:var(--paper);
border:var(--hairline);
border-radius:6px;
padding:32px;
box-shadow:var(--shadow-card);
position:sticky;top:104px;
}
.key-facts__eyebrow{
font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--blue-700);font-weight:600;margin:0 0 14px;
}
.key-facts h4{
font-family:'Inter Tight';font-size:1.05rem;font-weight:600;letter-spacing:-.015em;
color:var(--ink-950);margin:0 0 22px;
}
.key-facts .row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:var(--hairline);gap:16px}
.key-facts .row:first-of-type{border-top:var(--hairline)}
.key-facts .row:last-of-type{border-bottom:none}
.key-facts .row .k{color:var(--ink-500);font-weight:500;font-size:.92rem}
.key-facts .row .v{
color:var(--ink-950);font-family:'Inter Tight';font-weight:600;
font-size:.95rem;text-align:right;letter-spacing:-.01em;
}
.key-facts .row .v.mono{font-family:'JetBrains Mono';font-weight:600}
@media (max-width:920px){.key-facts{position:static}}
/* ========== COMMITMENTS (3 cards) ========== */
.commitments{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:880px){.commitments{grid-template-columns:1fr}}
.commit{
position:relative;
background:var(--paper);
border:var(--hairline);
border-radius:6px;
padding:40px;
box-shadow:var(--shadow-card);
transition:transform .25s ease, box-shadow .25s ease;
}
.commit::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:var(--blue-700);
border-radius:6px 6px 0 0;
}
.commit:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-card-hover);
}
.commit__icon{
width:52px;height:52px;border-radius:999px;
background:var(--blue-50);
color:var(--blue-700);
display:grid;place-items:center;
margin:8px 0 22px;
}
.commit__icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.commit h3{font-family:'Inter Tight';font-weight:600;font-size:1.2rem;margin:0 0 10px;color:var(--ink-950);letter-spacing:-.015em}
.commit p{color:var(--ink-700);font-size:.94rem;line-height:1.65;margin:0}
/* ========== PROCESS TIMELINE (4 steps) ========== */
.process{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:8px}
.process::before{
content:"";position:absolute;top:28px;left:8%;right:8%;height:2px;background:var(--blue-700);opacity:.85;z-index:0;
}
.step{position:relative;z-index:1;text-align:left}
.step__circle{
width:56px;height:56px;border-radius:999px;background:var(--ink-950);
display:grid;place-items:center;
font-family:'JetBrains Mono';font-weight:600;font-size:1rem;color:#fff;
margin-bottom:22px;
box-shadow:0 4px 14px rgba(10,20,36,.18);
}
.step__no{
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;
color:var(--ink-500);text-transform:uppercase;margin-bottom:8px;
}
.step h4{font-family:'Inter Tight';font-weight:600;font-size:1.1rem;margin:0 0 8px;color:var(--ink-950);letter-spacing:-.015em}
.step h4 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
.step p{margin:0;color:var(--ink-700);font-size:.92rem;line-height:1.6;max-width:240px}
/* Mobile: convert horizontal 4-step timeline into clean vertical timeline */
@media (max-width:760px){
.process{
display:flex;flex-direction:column;gap:0;padding-top:4px;
}
.process::before{display:none}
.step{
display:grid;grid-template-columns:40px 1fr;column-gap:20px;
align-items:start;padding-bottom:32px;
}
.step:last-child{padding-bottom:0}
/* vertical connecting line via per-item ::before, anchored to circle column */
.step::before{
content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;
background:var(--blue-700);opacity:.85;z-index:0;
}
.step:last-child::before{display:none}
.step__circle{
width:40px;height:40px;font-size:.85rem;margin-bottom:0;
grid-column:1;grid-row:1 / span 3;
box-shadow:0 3px 10px rgba(10,20,36,.18);
}
.step__no{
grid-column:2;margin-bottom:6px;line-height:1;padding-top:4px;
}
.step h4{
grid-column:2;font-size:1.05rem;margin:0 0 6px;
}
.step p{
grid-column:2;max-width:none;font-size:.9rem;line-height:1.55;
}
}
/* ========== QUALITY (feature backdrop) ========== */
.quality-feature{
background:var(--blue-50);
border-radius:24px;
padding:80px;
}
@media (max-width:820px){.quality-feature{padding:48px 28px;border-radius:18px}}
.quality-feature .s__head{margin-bottom:48px}
.quality-feature h2{font-size:clamp(1.7rem,2.6vw,2.1rem)}
.quality{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
@media (max-width:820px){.quality{grid-template-columns:1fr;gap:32px}}
.quality__intro p{color:var(--ink-700);font-size:1rem;line-height:1.75;margin:0 0 18px;max-width:480px}
.quality__link{
margin-top:8px;display:inline-flex;align-items:center;gap:8px;
font-size:.92rem;color:var(--blue-700);font-weight:500;
border-bottom:1px solid rgba(29,78,216,.25);padding-bottom:2px;
transition:border-color .2s, color .2s;
}
.quality__link:hover{color:var(--ink-950);border-bottom-color:var(--ink-950)}
.quality__link svg{width:14px;height:14px;color:currentColor}
.quality__results{
background:#fff;border:var(--hairline);border-radius:6px;padding:8px 28px;
box-shadow:var(--shadow-card);
}
.quality__results .row{
display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;
padding:18px 0;border-bottom:var(--hairline);
}
.quality__results .row:last-child{border-bottom:none}
.quality__results .label{color:var(--ink-700);font-size:.92rem;font-weight:500}
.quality__results .value{color:var(--ink-950);font-family:'JetBrains Mono';font-size:.92rem;font-weight:600;text-align:right}
.quality__results .pass{font-size:.7rem;letter-spacing:.12em;color:#0a7f3f;background:#e7f7ee;padding:3px 9px;border-radius:3px;font-family:'JetBrains Mono';font-weight:600}
.quality__results .header-row{padding:14px 0 16px;border-bottom:var(--hairline-strong)}
.quality__results .header-row .h{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);font-weight:600}
.quality__more{
margin-top:24px;display:inline-flex;align-items:center;gap:8px;
font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.08em;
color:var(--blue-700);font-weight:600;text-transform:uppercase;
border-bottom:1px solid rgba(29,78,216,.25);padding-bottom:3px;
transition:border-color .2s, color .2s;
}
.quality__more:hover{color:var(--ink-950);border-bottom-color:var(--ink-950)}
/* ========== VALUES 2x2 (cards) ========== */
.values{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){.values{grid-template-columns:1fr}}
.val{
background:var(--paper);
border:var(--hairline);
border-radius:6px;
padding:32px;
box-shadow:var(--shadow-card);
transition:transform .25s ease, box-shadow .25s ease;
}
.val:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-card-hover);
}
.val__num{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:1.4rem;
color:var(--blue-700);margin-bottom:14px;display:block;line-height:1;letter-spacing:-.01em;
}
.val__icon{
width:48px;height:48px;border-radius:8px;
background:var(--blue-50);
color:var(--blue-700);
display:grid;place-items:center;
margin:0 0 18px;
}
.val__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.val h4{font-family:'Inter Tight';font-weight:600;font-size:1.08rem;margin:0 0 10px;color:var(--ink-950);letter-spacing:-.015em}
.val p{color:var(--ink-700);font-size:.94rem;line-height:1.65;margin:0;max-width:420px}
/* ========== PULL QUOTE (feature panel) ========== */
.pull-quote{
position:relative;
margin:0 auto;max-width:900px;text-align:center;
background:var(--blue-tint);
border-radius:24px;
padding:80px 64px;
overflow:hidden;
}
@media (max-width:760px){.pull-quote{padding:56px 28px;border-radius:18px}}
.pull-quote::before{
content:"\201C";
position:absolute;top:-32px;left:24px;
font-family:'Fraunces',serif;font-style:italic;font-weight:500;
font-size:18rem;line-height:1;
color:var(--blue-700);opacity:.12;
pointer-events:none;
}
@media (max-width:760px){.pull-quote::before{font-size:11rem;top:-12px;left:8px}}
.pull-quote blockquote{
position:relative;z-index:1;
font-family:'Fraunces',serif;font-style:italic;font-weight:500;
font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.5;
color:var(--ink-900);margin:0 0 24px;
}
.pull-quote cite{
position:relative;z-index:1;
font-style:normal;font-size:.78rem;color:var(--ink-500);
letter-spacing:.08em;font-family:'JetBrains Mono',monospace;
}
/* ========== CTA STRIP (feature destination) ========== */
.cta-feature{
background:var(--ink-100);
border-radius:24px;
padding:80px 64px;
text-align:center;
max-width:1080px;margin:0 auto;
}
@media (max-width:760px){.cta-feature{padding:56px 28px;border-radius:18px}}
.cta-feature .s__eyebrow{margin-bottom:20px}
.cta-feature h2{margin:0 auto;max-width:640px}
.cta__buttons{
margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.btn{
display:inline-flex;align-items:center;gap:10px;
font-family:'Inter Tight';font-weight:600;font-size:.98rem;
padding:14px 24px;border-radius:6px;
transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{
background:var(--ink-950);color:#fff;border:1px solid var(--ink-950);
}
.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{
background:transparent;color:var(--ink-950);border:1px solid rgba(15,23,42,.2);
}
.btn-ghost:hover{border-color:var(--ink-950);background:rgba(15,23,42,.03)}
/* ========== FOOTER ========== */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
.ruo-pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:5px 12px;border-radius:4px}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ===== MOBILE — Universal fixes (touch targets + hero video) ===== */
@media (max-width: 760px) {
button, .icon-btn, .nav-group a, .qty button, .pdp-qty button, .variant-pill, .pdp-variant-pill { min-height: 44px; }
.qty button, .pdp-qty button { min-width: 44px; width: 44px; height: 44px; font-size: 1.2rem; }
.qty input, .pdp-qty input { min-width: 44px; height: 44px; }
.li-remove, .chip button, .pdp-faq summary { min-height: 44px; }
input[type="number"], input[type="email"], input[type="text"], input[type="search"], select, textarea { font-size: 16px !important; }
.vf-video-wrap video, video.hero-video { display: none; }
.vf-video-wrap, .video-feature .vf-video-wrap { background: radial-gradient(80% 60% at 50% 40%, #1d4ed8 0%, #0a1424 100%) !important; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.vf-video-wrap::after { content: "Tap to play"; color: rgba(255,255,255,.85); font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: absolute; inset: auto; background: rgba(11,23,54,.55); padding: 12px 22px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
}
/* ===== HAMBURGER MENU ===== */
.hamburger { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-950, #0a1424); border-radius: 1px; transition: transform .25s, opacity .2s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,36,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 86%; max-width: 360px; background: var(--paper, #fafbfc); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 88px 32px 32px; box-shadow: -20px 0 60px rgba(15,23,42,.18); overflow-y: auto; }
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-panel a { display: block; padding: 18px 0; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.3rem; color: var(--ink-950, #0a1424); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.08); transition: color .15s, padding-left .2s; }
.mobile-nav-panel a:hover { color: #1e40af; padding-left: 6px; }
.mobile-nav-panel a:last-of-type { border-bottom: none; }
.mobile-nav-panel .panel-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid rgba(15,23,42,.12); cursor: pointer; display: grid; place-items: center; color: var(--ink-700, #3a4252); }
.mobile-nav-panel .panel-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.mobile-nav-panel .panel-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.08); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500, #6b7280); }
@media (max-width: 760px) {
/* Hide ALL nav-groups (including unmodified homepage ones) and show hamburger */
.nav-group, .nav-group--center, .nav-group--right,
.peptigo-nav__group, .peptigo-nav__group--center, .peptigo-nav__group--right { display: none !important; }
.nav, .peptigo-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 12px !important;
padding: 14px 20px !important;
}
.logo { order: -1 !important; flex: 0 0 auto; }
.hamburger { display: flex !important; order: 99 !important; flex: 0 0 auto; }
}
}
/* ===== tpl-calc styles (scoped) ===== */
.tpl-calc {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.6rem,4.5vw,3.6rem);font-weight:700;line-height:1.05}
h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
h2{font-size:clamp(1.4rem,2vw,1.7rem);font-weight:600;line-height:1.2}
h3{font-size:1.05rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.nav-group a.active{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center;letter-spacing:.02em}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== PAGE HEAD ========== */
.page-head{padding:32px 0 56px}
.page-head__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-500);margin-bottom:20px;
}
.page-head h1{margin-bottom:18px;max-width:780px}
.page-head__lede{color:var(--ink-700);font-size:1.08rem;line-height:1.65;margin:0;max-width:560px}
/* ========== CALCULATOR ========== */
.calc{padding:0 0 112px}
.calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:920px){.calc__grid{grid-template-columns:1fr;gap:24px}}
/* INPUTS PANEL */
.panel{
background:#fff;border:var(--hairline);border-radius:6px;padding:32px;
}
.panel__head{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:24px;font-weight:600;
padding-bottom:16px;border-bottom:var(--hairline);
}
.field{margin-bottom:22px}
.field:last-of-type{margin-bottom:0}
.field__label{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:10px;font-weight:600;
}
.field__hint{font-family:'Inter';text-transform:none;letter-spacing:0;font-size:.78rem;color:var(--ink-400);font-weight:500}
.input,
.select{
width:100%;padding:12px 14px;border:1px solid var(--ink-200);border-radius:6px;
background:#fff;font:inherit;font-size:.95rem;color:var(--ink-950);
outline:none;transition:border-color .15s, box-shadow .15s;
}
.input:focus,
.select:focus{border-color:var(--ink-950);box-shadow:0 0 0 3px rgba(29,78,216,.08)}
.select{
-webkit-appearance:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.input-row{display:flex;gap:8px;align-items:stretch}
.input-row .input{flex:1}
.unit-toggle{
display:flex;border:1px solid var(--ink-200);border-radius:6px;background:#fff;overflow:hidden;
}
.unit-toggle button{
background:none;border:none;padding:0 14px;font:inherit;font-size:.85rem;font-weight:500;
color:var(--ink-500);cursor:pointer;transition:all .15s;letter-spacing:.02em;
}
.unit-toggle button.active{background:var(--ink-950);color:#fff}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
padding:11px 18px;background:#fff;border:1px solid var(--ink-200);border-radius:6px;
font:inherit;font-size:.92rem;font-weight:500;color:var(--ink-700);cursor:pointer;
transition:all .15s;
}
.pill:hover{border-color:var(--ink-700);color:var(--ink-950)}
.pill.active{background:var(--ink-950);border-color:var(--ink-950);color:#fff}
.pill .pill__sub{display:block;font-family:'JetBrains Mono';font-size:.68rem;color:var(--ink-400);margin-top:3px;letter-spacing:.06em;font-weight:500}
.pill.active .pill__sub{color:rgba(255,255,255,.55)}
.toggle-link{
display:inline-flex;align-items:center;gap:6px;margin-top:6px;
font-size:.84rem;color:var(--ink-700);font-weight:500;cursor:pointer;
border-bottom:1px dotted var(--ink-300);padding-bottom:1px;background:none;border-left:none;border-right:none;border-top:none;
transition:color .2s, border-color .2s;
}
.toggle-link:hover{color:var(--ink-950);border-bottom-color:var(--ink-700)}
.cost-block{display:none;margin-top:22px;padding-top:22px;border-top:var(--hairline)}
.cost-block.open{display:block}
/* RESULTS PANEL */
.results{
background:var(--ink-950);color:#e2e8f0;border-radius:6px;padding:36px 32px;
}
.results .panel__head{color:#94a3b8;border-bottom-color:rgba(255,255,255,.08)}
.result{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.result:last-of-type{border-bottom:none}
.result__label{
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:#94a3b8;margin-bottom:10px;font-weight:600;
}
.result__value{
font-family:'Inter Tight','Inter',sans-serif;font-weight:700;color:#fff;line-height:1.1;
display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.result__value .num{font-size:1.5rem;letter-spacing:-.02em}
.result__value .unit{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:1rem;
color:#93c5fd;letter-spacing:0;
}
.result--hero .num{font-size:2.4rem;font-weight:700}
.result--hero .unit{font-size:1.2rem}
.result__sub{
margin-top:6px;font-size:.82rem;color:#64748b;font-family:'JetBrains Mono';letter-spacing:.04em;
}
.results__share{
margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.share-link{
display:inline-flex;align-items:center;gap:8px;background:none;border:none;
color:#cbd5e1;font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
padding:0;border-bottom:1px dotted rgba(255,255,255,.2);padding-bottom:2px;
transition:color .2s, border-color .2s;
}
.share-link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.share-link svg{width:14px;height:14px}
.share-status{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.08em;color:#22c55e;text-transform:uppercase;opacity:0;transition:opacity .25s}
.share-status.show{opacity:1}
.ruo-note{
margin-top:24px;padding:14px 16px;background:rgba(255,255,255,.04);border-radius:6px;
font-size:.78rem;color:#cbd5e1;line-height:1.55;
display:flex;gap:10px;align-items:flex-start;
}
.ruo-note svg{color:#94a3b8;flex-shrink:0;margin-top:1px;width:14px;height:14px;stroke-width:1.7}
/* ========== HOW TO ========== */
section.s{padding:96px 0;border-top:var(--hairline)}
.s__head{margin-bottom:48px;max-width:680px}
.s__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:14px;
}
.s__head p{color:var(--ink-700);margin:14px 0 0;font-size:1.02rem;line-height:1.7;max-width:580px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
@media (max-width:780px){.steps{grid-template-columns:1fr;gap:32px}}
.step{padding-top:24px;border-top:1px solid var(--ink-200)}
.step__num{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:14px;
}
.step h3{margin-bottom:10px;font-size:1.1rem}
.step p{color:var(--ink-700);margin:0;font-size:.94rem;line-height:1.65;max-width:320px}
/* ========== REFERENCE TABLE ========== */
.ref-table{
background:#fff;border:var(--hairline);border-radius:6px;overflow:hidden;
}
.ref-row{
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:24px;
padding:16px 24px;border-bottom:var(--hairline);align-items:baseline;
}
.ref-row:last-child{border-bottom:none}
.ref-row.head{
background:var(--ink-100);
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-500);font-weight:600;padding:14px 24px;
}
.ref-row .name{font-weight:600;color:var(--ink-950);font-size:.94rem}
.ref-row .val{font-family:'JetBrains Mono';font-size:.86rem;color:var(--ink-700)}
@media (max-width:780px){
.ref-row{grid-template-columns:1fr 1fr;gap:8px;padding:14px 18px}
.ref-row.head{display:none}
.ref-row .val::before{content:attr(data-label);display:block;font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);margin-bottom:2px;font-weight:600}
.ref-row .name{grid-column:1 / -1;border-bottom:var(--hairline);padding-bottom:8px;margin-bottom:4px}
}
.ref-note{margin-top:20px;font-size:.82rem;color:var(--ink-500);line-height:1.6;max-width:680px}
/* ========== FOOTER ========== */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
.ruo-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#cbd5e1}
.ruo-pill .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ===== MOBILE — Universal fixes (touch targets + hero video) ===== */
@media (max-width: 760px) {
button, .icon-btn, .nav-group a, .qty button, .pdp-qty button, .variant-pill, .pdp-variant-pill { min-height: 44px; }
.qty button, .pdp-qty button { min-width: 44px; width: 44px; height: 44px; font-size: 1.2rem; }
.qty input, .pdp-qty input { min-width: 44px; height: 44px; }
.li-remove, .chip button, .pdp-faq summary { min-height: 44px; }
input[type="number"], input[type="email"], input[type="text"], input[type="search"], select, textarea { font-size: 16px !important; }
.vf-video-wrap video, video.hero-video { display: none; }
.vf-video-wrap, .video-feature .vf-video-wrap { background: radial-gradient(80% 60% at 50% 40%, #1d4ed8 0%, #0a1424 100%) !important; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.vf-video-wrap::after { content: "Tap to play"; color: rgba(255,255,255,.85); font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: absolute; inset: auto; background: rgba(11,23,54,.55); padding: 12px 22px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
}
/* ===== HAMBURGER MENU ===== */
.hamburger { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-950, #0a1424); border-radius: 1px; transition: transform .25s, opacity .2s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,36,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 86%; max-width: 360px; background: var(--paper, #fafbfc); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 88px 32px 32px; box-shadow: -20px 0 60px rgba(15,23,42,.18); overflow-y: auto; }
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-panel a { display: block; padding: 18px 0; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.3rem; color: var(--ink-950, #0a1424); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.08); transition: color .15s, padding-left .2s; }
.mobile-nav-panel a:hover { color: #1e40af; padding-left: 6px; }
.mobile-nav-panel a:last-of-type { border-bottom: none; }
.mobile-nav-panel .panel-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid rgba(15,23,42,.12); cursor: pointer; display: grid; place-items: center; color: var(--ink-700, #3a4252); }
.mobile-nav-panel .panel-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.mobile-nav-panel .panel-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.08); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500, #6b7280); }
@media (max-width: 760px) {
/* Hide ALL nav-groups (including unmodified homepage ones) and show hamburger */
.nav-group, .nav-group--center, .nav-group--right,
.peptigo-nav__group, .peptigo-nav__group--center, .peptigo-nav__group--right { display: none !important; }
.nav, .peptigo-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 12px !important;
padding: 14px 20px !important;
}
.logo { order: -1 !important; flex: 0 0 auto; }
.hamburger { display: flex !important; order: 99 !important; flex: 0 0 auto; }
}
}
/* ===== MOBILE — Universal fixes ===== */
@media (max-width: 760px) {
button, .icon-btn, .peptigo-nav a, .qty button, .pdp-qty button, .variant-pill, .pdp-variant-pill { min-height: 44px; }
.qty button, .pdp-qty button { min-width: 44px; width: 44px; height: 44px; font-size: 1.2rem; }
.qty input, .pdp-qty input { min-width: 44px; height: 44px; }
input[type="number"], input[type="email"], input[type="text"], input[type="search"], select, textarea { font-size: 16px !important; }
/* v1.3.24: Static hero image on mobile instead of video (autoplay unreliable on iOS) */
.peptigo-vf__video-wrap video,
.peptigo-vf__replay { display: none !important; }
.peptigo-vf__video-wrap {
background: url('/wp-content/themes/peptigo/assets/images/hero-mobile.jpg') center/cover no-repeat !important;
aspect-ratio: 16/9;
display: block;
}
/* Remove the old "Tap to play" overlay */
.peptigo-vf__video-wrap::after { content: none !important; }
}
/* Hamburger button + mobile panel (peptigo-prefixed for WP) */
.peptigo-hamburger { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.peptigo-hamburger span { display: block; width: 22px; height: 2px; background: #0a1424; border-radius: 1px; transition: transform .25s, opacity .2s; }
.peptigo-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.peptigo-hamburger.is-open span:nth-child(2) { opacity: 0; }
.peptigo-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.peptigo-mobile-nav-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,36,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.peptigo-mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.peptigo-mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 86%; max-width: 360px; background: #fafbfc; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 88px 32px 32px; box-shadow: -20px 0 60px rgba(15,23,42,.18); overflow-y: auto; }
.peptigo-mobile-nav-panel.is-open { transform: translateX(0); }
.peptigo-mobile-nav-panel a { display: block; padding: 18px 0; font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 1.3rem; color: #0a1424; text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.08); transition: color .15s, padding-left .2s; }
.peptigo-mobile-nav-panel a:hover { color: #1e40af; padding-left: 6px; }
.peptigo-mobile-nav-panel a:last-of-type { border-bottom: none; }
.peptigo-mobile-nav-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid rgba(15,23,42,.12); cursor: pointer; display: grid; place-items: center; color: #3a4252; }
.peptigo-mobile-nav-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.08); font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
@media (max-width: 760px) {
.peptigo-nav__group, .peptigo-nav__group--center, .peptigo-nav__group--right { display: none !important; }
.peptigo-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; padding: 14px 20px !important; grid-template-columns: none !important; }
.peptigo-nav .peptigo-logo { order: -1 !important; flex: 0 0 auto; }
.peptigo-hamburger { display: flex !important; order: 99 !important; flex: 0 0 auto; }
}
/* ===== tpl-pdp styles (scoped) ===== */
.tpl-pdp {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.6rem,4.5vw,3.8rem);font-weight:700;line-height:1.02}
h2{font-size:clamp(1.6rem,2.4vw,2rem);font-weight:600;line-height:1.15}
h3{font-size:1.05rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center;letter-spacing:.02em}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== ABOVE-THE-FOLD HERO ========== */
.pdp{padding:32px 0 96px}
.pdp__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
@media (max-width:920px){.pdp__grid{grid-template-columns:1fr;gap:32px}}
/* GALLERY — full bleed within column, no card frame */
.gallery{position:sticky;top:96px}
.gallery__main{
position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;
background:radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 85%, var(--paper) 100%);
display:flex;align-items:flex-end;justify-content:center;
}
.gallery__main::before{
content:"";position:absolute;left:50%;top:58%;width:90%;height:80%;transform:translate(-50%,-50%);
background:radial-gradient(closest-side, rgba(96,165,250,.4) 0%, rgba(96,165,250,0) 72%);
filter:blur(16px);pointer-events:none;
}
.gallery__main img{
position:relative;z-index:1;width:74%;height:96%;object-fit:contain;object-position:center bottom;
margin-bottom:-6%;
filter:drop-shadow(0 32px 40px rgba(15,23,42,.16)) drop-shadow(0 8px 16px rgba(29,78,216,.16));
transition:transform .8s ease;
}
.gallery__main:hover img{transform:translateY(-4px) scale(1.02)}
.gallery__rate{
position:absolute;top:20px;right:20px;font-size:.72rem;color:var(--ink-500);
font-family:'JetBrains Mono';letter-spacing:.08em;display:flex;align-items:center;gap:6px;z-index:2;
}
.gallery__rate .star{color:var(--gold);font-size:.85rem}
.gallery__thumbs{display:flex;gap:10px;margin-top:14px}
.thumb{
flex:1;aspect-ratio:1/1;max-width:90px;border-radius:4px;overflow:hidden;cursor:pointer;
background:radial-gradient(60% 60% at 50% 50%, #e9eff9 0%, #f5f7fb 100%);
display:grid;place-items:center;border:1px solid transparent;transition:border-color .2s, transform .2s;
}
.thumb img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(15,23,42,.1))}
.thumb.active{border-color:var(--ink-900)}
.thumb:hover{transform:translateY(-1px)}
.gallery__coa{
margin-top:18px;display:inline-flex;align-items:center;gap:8px;
font-size:.84rem;color:var(--ink-700);
border-bottom:1px dotted var(--ink-200);padding-bottom:2px;
transition:color .2s, border-color .2s;
}
.gallery__coa:hover{color:var(--ink-950);border-color:var(--ink-700)}
.gallery__coa svg{color:var(--ink-500);width:16px;height:16px}
/* INFO COLUMN — minimal */
.info__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-500);margin-bottom:20px;
}
.info h1{margin-bottom:14px}
.info h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--ink-700)}
.info__sub{
color:var(--ink-700);font-size:1.08rem;line-height:1.55;
margin:0 0 28px;max-width:440px;
}
.info__rating{
display:flex;align-items:center;gap:10px;margin-bottom:36px;
padding-bottom:28px;border-bottom:var(--hairline);font-size:.92rem;color:var(--ink-700);
}
.info__rating .stars{color:var(--gold);letter-spacing:1px;font-size:1rem}
.info__rating a{color:var(--ink-700);border-bottom:1px solid var(--ink-200);padding-bottom:1px}
.info__rating a:hover{color:var(--ink-950);border-color:var(--ink-700)}
/* PRICE */
.price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.price-current{font-family:'Inter Tight';font-weight:700;font-size:2.2rem;line-height:1;color:var(--ink-950)}
.price-was{font-size:.95rem;color:var(--ink-400);text-decoration:line-through}
/* VARIANT — single line pills */
.variant-block{margin-bottom:28px}
.variant-label{
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;
}
.variant-label .selected{color:var(--ink-900);font-family:'Inter';font-size:.85rem;letter-spacing:0;text-transform:none;font-weight:600}
.variant-pills{display:flex;gap:8px;flex-wrap:wrap}
.variant-pill{
padding:11px 18px;background:#fff;border:1px solid var(--ink-200);border-radius:6px;
font:inherit;font-size:.92rem;font-weight:500;color:var(--ink-700);cursor:pointer;
transition:all .15s;
}
.variant-pill:hover{border-color:var(--ink-700);color:var(--ink-950)}
.variant-pill.active{background:var(--ink-950);border-color:var(--ink-950);color:#fff}
/* CTA */
.add-row{display:flex;gap:10px;margin-bottom:24px}
.qty{
display:flex;align-items:center;border:1px solid var(--ink-200);border-radius:6px;background:#fff;
}
.qty button{width:42px;height:50px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--ink-700);transition:color .15s}
.qty button:hover{color:var(--ink-950)}
.qty input{width:42px;height:50px;text-align:center;border:none;background:none;font:inherit;font-weight:600;font-size:.95rem;outline:none;color:var(--ink-950)}
.add-cart{
flex:1;background:var(--ink-950);color:#fff;border:none;border-radius:6px;
padding:0 24px;height:50px;font:inherit;font-weight:600;font-size:.92rem;
letter-spacing:.04em;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:10px;
transition:background .25s;
}
.add-cart:hover{background:#1e40af}
/* TRUST LINE — text only, no cards */
.trust-text{
font-size:.82rem;color:var(--ink-500);line-height:1.7;
padding-top:24px;border-top:var(--hairline);
}
.trust-text strong{color:var(--ink-900);font-weight:600}
/* RUO inline note (footer of right column) */
.ruo-note{
margin-top:20px;padding:14px 16px;background:var(--ink-100);border-radius:6px;
font-size:.78rem;color:var(--ink-700);line-height:1.55;
display:flex;gap:10px;align-items:flex-start;
}
.ruo-note svg{color:var(--ink-500);flex-shrink:0;margin-top:1px;width:14px;height:14px;stroke-width:1.7}
/* ========== STICKY SUB-NAV ========== */
.subnav{
position:sticky;top:64px;z-index:40;background:rgba(250,251,252,.92);backdrop-filter:blur(12px);
border-top:var(--hairline);border-bottom:var(--hairline);margin-top:0;
}
.subnav__inner{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;gap:4px;overflow-x:auto}
.subnav a{
padding:18px 16px;font-size:.86rem;font-weight:500;color:var(--ink-500);
border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s, border-color .15s;
}
.subnav a:hover{color:var(--ink-900)}
.subnav a.active{color:var(--ink-950);border-bottom-color:var(--ink-950)}
/* ========== SECTIONS ========== */
section.s{padding:112px 0;border-top:var(--hairline)}
section.s:first-of-type{border-top:none}
.s__head{margin-bottom:48px;max-width:680px}
.s__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:14px;
}
.s__head p{color:var(--ink-700);margin:14px 0 0;font-size:1.05rem;line-height:1.7;max-width:620px}
/* OVERVIEW long form */
.overview{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start}
@media (max-width:820px){.overview{grid-template-columns:1fr;gap:32px}}
.overview__body p{color:var(--ink-700);font-size:1.02rem;line-height:1.85;margin:0 0 20px;max-width:620px}
.overview__body h3{margin:32px 0 12px;font-size:1.05rem}
.overview__body ul{padding-left:0;list-style:none;margin:0 0 20px}
.overview__body ul li{color:var(--ink-700);padding:8px 0 8px 20px;position:relative;font-size:.96rem;line-height:1.6}
.overview__body ul li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--ink-400)}
.key-facts{
background:transparent;padding:0;
}
.key-facts h4{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin:0 0 18px;font-weight:600;
}
.key-facts dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.key-facts dt, .key-facts dd{margin:0;padding:14px 0;font-size:.92rem;border-bottom:var(--hairline)}
.key-facts dt{color:var(--ink-500);font-weight:500}
.key-facts dd{color:var(--ink-950);font-weight:600;margin-bottom:0;text-align:right;font-family:'JetBrains Mono';font-size:.86rem}
.key-facts .row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:var(--hairline);gap:16px}
.key-facts .row:first-child{border-top:var(--hairline)}
.key-facts .row .k{color:var(--ink-500);font-weight:500;font-size:.92rem}
.key-facts .row .v{color:var(--ink-950);font-weight:600;font-size:.88rem;text-align:right}
.key-facts .row .v.mono{font-family:'JetBrains Mono'}
/* LAB VERIFICATION — clean document feel, no gradient */
.lab{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;padding-top:24px}
@media (max-width:820px){.lab{grid-template-columns:1fr;gap:32px}}
.lab__intro h3{font-family:'Inter Tight';font-weight:600;font-size:1.4rem;margin-bottom:16px;color:var(--ink-950)}
.lab__intro p{color:var(--ink-700);font-size:1rem;line-height:1.75;margin:0 0 20px;max-width:480px}
.lab__partner{
display:inline-flex;align-items:center;gap:10px;padding:10px 14px;
border:var(--hairline);border-radius:6px;font-size:.85rem;color:var(--ink-700);background:#fff;
}
.lab__partner svg{color:var(--ink-500)}
.lab__partner strong{color:var(--ink-950);font-weight:600}
.lab__pdf{
margin-top:20px;display:inline-flex;align-items:center;gap:8px;
font-size:.88rem;color:var(--ink-950);font-weight:500;
border-bottom:1px solid var(--ink-300);padding-bottom:2px;
}
.lab__pdf:hover{border-bottom-color:var(--ink-950)}
.lab__pdf svg{width:16px;height:16px;color:var(--ink-500)}
.lab__results{
background:#fff;border:var(--hairline);border-radius:8px;padding:8px 24px;
}
.lab__results .row{
display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;
padding:18px 0;border-bottom:var(--hairline);
}
.lab__results .row:last-child{border-bottom:none}
.lab__results .label{color:var(--ink-700);font-size:.92rem;font-weight:500}
.lab__results .value{color:var(--ink-950);font-family:'JetBrains Mono';font-size:.92rem;font-weight:600;text-align:right}
.lab__results .pass{font-size:.7rem;letter-spacing:.12em;color:#0a7f3f;background:#e7f7ee;padding:3px 9px;border-radius:3px;font-family:'JetBrains Mono';font-weight:600}
.lab__results .header-row{padding:14px 0 16px;border-bottom:var(--hairline-strong)}
.lab__results .header-row .h{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);font-weight:600}
/* PULL QUOTE bridge */
.pull-quote{
margin:64px auto 0;max-width:720px;text-align:center;padding-top:40px;border-top:var(--hairline);
}
.pull-quote blockquote{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:1.4rem;line-height:1.5;
color:var(--ink-900);margin:0 0 20px;
}
.pull-quote cite{font-style:normal;font-size:.84rem;color:var(--ink-500);letter-spacing:.04em}
/* SPECIFICATIONS — definition list */
.specs-table{
background:transparent;
}
.spec-row{
display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:baseline;
padding:22px 0;border-bottom:var(--hairline);
}
@media (max-width:680px){.spec-row{grid-template-columns:1fr;gap:6px;padding:18px 0}}
.spec-row .k{
font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-500);font-weight:500;
}
.spec-row .v{font-size:.98rem;color:var(--ink-950);font-weight:500}
.spec-row .v.mono{font-family:'JetBrains Mono';font-size:.92rem}
.sequence-display{
margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.sequence-display .aa{
display:inline-block;padding:6px 12px;border:var(--hairline);border-radius:4px;
font-family:'JetBrains Mono';font-size:.84rem;color:var(--ink-700);font-weight:500;
transition:all .15s;background:#fff;
}
.sequence-display .aa:hover{border-color:var(--ink-900);color:var(--ink-950);transform:translateY(-1px)}
/* STORAGE */
.storage{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
@media (max-width:680px){.storage{grid-template-columns:1fr;gap:32px}}
.storage__item h4{font-family:'Inter Tight';font-weight:600;font-size:1.05rem;margin-bottom:8px;color:var(--ink-950)}
.storage__item .temp{
display:inline-block;font-family:'JetBrains Mono';font-size:.78rem;
color:var(--ink-700);background:#f1f3f7;padding:3px 10px;border-radius:4px;margin-bottom:12px;
}
.storage__item p{color:var(--ink-700);margin:0;font-size:.94rem;line-height:1.7;max-width:380px}
/* REVIEWS */
.reviews{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
@media (max-width:760px){.reviews{grid-template-columns:1fr;gap:32px}}
.rs-summary .num{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:4.5rem;color:var(--ink-950);line-height:1;margin-bottom:12px}
.rs-summary .stars{color:var(--gold);font-size:1.05rem;letter-spacing:2px;margin-bottom:6px}
.rs-summary .total{color:var(--ink-500);font-size:.88rem}
.rs-bars{margin-top:20px;display:flex;flex-direction:column;gap:6px}
.rs-bar{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--ink-500)}
.rs-bar .label{width:14px;text-align:right;color:var(--ink-700);font-weight:500}
.rs-bar .track{flex:1;height:4px;background:var(--ink-100);border-radius:2px;overflow:hidden}
.rs-bar .fill{height:100%;background:var(--ink-700);border-radius:2px}
.rs-bar .pct{width:32px;text-align:right;font-family:'JetBrains Mono';font-size:.76rem}
.review-list{display:flex;flex-direction:column;gap:0}
.review{padding:32px 0;border-bottom:var(--hairline)}
.review:first-child{padding-top:0}
.review:last-child{border-bottom:none}
.review-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.review-head .avatar{
width:34px;height:34px;border-radius:999px;background:var(--ink-100);color:var(--ink-700);
display:grid;place-items:center;font-size:.78rem;font-weight:600;font-family:'JetBrains Mono';
}
.review-head .who{font-size:.92rem;font-weight:600;color:var(--ink-950)}
.review-head .meta{font-size:.78rem;color:var(--ink-500)}
.review-head .verify{margin-left:auto;font-size:.7rem;color:var(--ink-500);font-family:'JetBrains Mono';letter-spacing:.08em}
.review .stars{color:var(--gold);font-size:.88rem;letter-spacing:1px;margin-bottom:10px}
.review .title{font-family:'Inter Tight';font-weight:600;font-size:1rem;color:var(--ink-950);margin:0 0 8px}
.review p{margin:0;color:var(--ink-700);font-size:.95rem;line-height:1.7}
/* FAQ */
.faq-list{max-width:720px;margin:0 auto}
.faq-list details{
border-bottom:var(--hairline);padding:0;
}
.faq-list details:first-child{border-top:var(--hairline)}
.faq-list summary{
list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
font-weight:600;font-size:1rem;color:var(--ink-950);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .chev{
width:24px;height:24px;color:var(--ink-500);flex-shrink:0;transition:transform .25s, color .2s;
}
.faq-list details[open] .chev{transform:rotate(180deg);color:var(--ink-950)}
.faq-list .body{padding:0 0 24px;color:var(--ink-700);font-size:.95rem;line-height:1.75;max-width:620px}
/* FOOTER */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ===== MOBILE — Universal fixes (touch targets + hero video) ===== */
@media (max-width: 760px) {
button, .icon-btn, .nav-group a, .qty button, .pdp-qty button, .variant-pill, .pdp-variant-pill { min-height: 44px; }
.qty button, .pdp-qty button { min-width: 44px; width: 44px; height: 44px; font-size: 1.2rem; }
.qty input, .pdp-qty input { min-width: 44px; height: 44px; }
.li-remove, .chip button, .pdp-faq summary { min-height: 44px; }
input[type="number"], input[type="email"], input[type="text"], input[type="search"], select, textarea { font-size: 16px !important; }
.vf-video-wrap video, video.hero-video { display: none; }
.vf-video-wrap, .video-feature .vf-video-wrap { background: radial-gradient(80% 60% at 50% 40%, #1d4ed8 0%, #0a1424 100%) !important; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.vf-video-wrap::after { content: "Tap to play"; color: rgba(255,255,255,.85); font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: absolute; inset: auto; background: rgba(11,23,54,.55); padding: 12px 22px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
/* ----- PDP TIER 2 MOBILE POLISH ----- */
/* 1. Drop sticky gallery — let it scroll naturally */
.gallery { position: static; top: auto; }
/* 2. Drop sticky sub-nav — horizontal scroller, non-sticky, hairline separation */
.subnav {
position: static; top: auto;
background: var(--paper);
backdrop-filter: none; -webkit-backdrop-filter: none;
border-top: var(--hairline);
border-bottom: var(--hairline);
}
.subnav__inner { padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a { padding: 14px 14px; }
/* 3. Spec rows — clean stacked rows, key on top, value below */
.spec-row,
.spec-row[style] {
grid-template-columns: 1fr !important;
gap: 6px !important;
padding: 18px 0 !important;
border-bottom: var(--hairline);
}
.spec-row .k { color: var(--ink-500); }
.spec-row .v, .spec-row .v.mono { color: var(--ink-950); }
/* Sequence chips wrap freely with tighter padding so 6-7 fit per row at 390px */
.sequence-display { gap: 5px; margin-top: 4px; }
.sequence-display .aa { padding: 6px 10px; font-size: .8rem; }
/* 5. Touch target — bump variant pill vertical padding */
.variant-pill { padding: 14px 18px; }
/* Reduce section vertical padding a touch on mobile so content breathes */
section.s { padding: 72px 0; }
}
/* 6. Typography — extra-narrow viewport tuning */
@media (max-width: 480px) {
h1 { font-size: 2.2rem; }
h2 { font-size: 1.4rem; }
}
/* ===== HAMBURGER MENU ===== */
.hamburger { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-950, #0a1424); border-radius: 1px; transition: transform .25s, opacity .2s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,36,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 86%; max-width: 360px; background: var(--paper, #fafbfc); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 88px 32px 32px; box-shadow: -20px 0 60px rgba(15,23,42,.18); overflow-y: auto; }
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-panel a { display: block; padding: 18px 0; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.3rem; color: var(--ink-950, #0a1424); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.08); transition: color .15s, padding-left .2s; }
.mobile-nav-panel a:hover { color: #1e40af; padding-left: 6px; }
.mobile-nav-panel a:last-of-type { border-bottom: none; }
.mobile-nav-panel .panel-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid rgba(15,23,42,.12); cursor: pointer; display: grid; place-items: center; color: var(--ink-700, #3a4252); }
.mobile-nav-panel .panel-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.mobile-nav-panel .panel-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.08); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500, #6b7280); }
@media (max-width: 760px) {
/* Hide ALL nav-groups (including unmodified homepage ones) and show hamburger */
.nav-group, .nav-group--center, .nav-group--right,
.peptigo-nav__group, .peptigo-nav__group--center, .peptigo-nav__group--right { display: none !important; }
.nav, .peptigo-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 12px !important;
padding: 14px 20px !important;
}
.logo { order: -1 !important; flex: 0 0 auto; }
.hamburger { display: flex !important; order: 99 !important; flex: 0 0 auto; }
}
}
/* ===== tpl-lab styles (scoped) ===== */
.tpl-lab {
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.022em;margin:0;color:var(--ink-950)}
h1{font-size:clamp(2.6rem,4.5vw,3.8rem);font-weight:700;line-height:1.02}
h1 em, h2 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
h2{font-size:clamp(1.7rem,2.5vw,2.1rem);font-weight:600;line-height:1.15}
h3{font-size:1.05rem;font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ========== ANNOUNCEMENT BAR ========== */
.announce{background:#0a1424;color:#cbd5e1;font-size:.72rem;letter-spacing:.1em;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.announce__left{display:flex;align-items:center;gap:8px}
.announce__right{display:flex;align-items:center;gap:14px;color:#6b7280}
.announce .adot{width:5px;height:5px;border-radius:999px;background:#94a3b8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:760px){.announce__right{display:none}}
/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1440px;margin:0 auto;gap:16px}
.nav-group{display:flex;gap:2px;align-items:center}
.nav-group a{padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--ink-700);transition:color .2s}
.nav-group a:hover{color:var(--ink-950)}
.nav-group a.active{color:var(--ink-950)}
.logo{display:inline-flex;align-items:center;gap:12px;padding:4px 8px}
.logo img{width:36px;height:36px;transition:transform .5s ease}
.logo:hover img{transform:rotate(-6deg)}
.logo-word{font-family:'Inter Tight';font-weight:800;font-size:1rem;letter-spacing:.22em;color:var(--ink-950)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:var(--ink-700);transition:color .2s}
.icon-btn:hover{color:var(--ink-950)}
.cart-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:500;font-size:.9rem;color:var(--ink-900)}
.cart-count{color:var(--ink-500);font-family:'JetBrains Mono';font-size:.78rem}
/* ========== BREADCRUMB ========== */
.breadcrumb{padding:24px 32px 0;max-width:1280px;margin:0 auto;font-size:.78rem;color:var(--ink-500);display:flex;gap:10px;align-items:center;letter-spacing:.02em}
.breadcrumb a{color:var(--ink-500);transition:color .2s}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-900)}
/* ========== HERO ========== */
.hero{position:relative;padding:64px 0 96px;overflow:hidden}
.hero__bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(900px 480px at 12% 0%, rgba(29,78,216,.06), transparent 70%),
radial-gradient(700px 420px at 100% 30%, rgba(29,78,216,.04), transparent 70%);
}
.hero__pattern{
position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;
background-image:url("data:image/svg+xml;utf8,");
background-size:280px 280px;
}
.hero .wrap{position:relative;z-index:1}
.hero__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-500);margin-bottom:20px;
}
.hero h1{margin-bottom:24px;max-width:880px}
.hero p.lede{
color:var(--ink-700);font-size:1.15rem;line-height:1.65;margin:0;max-width:640px;
}
/* Hero stats strip */
.hero-stats{
margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);
background:#fff;border:var(--hairline);border-radius:6px;
box-shadow:var(--shadow-card);overflow:hidden;
}
.hero-stats__cell{
padding:28px 28px;border-left:var(--hairline);
display:flex;flex-direction:column;gap:6px;
}
.hero-stats__cell:first-child{border-left:none}
.hero-stats__label{
font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-500);font-weight:600;
}
.hero-stats__value{
font-family:'Inter Tight';font-weight:700;font-size:1.5rem;color:var(--ink-950);
letter-spacing:-.02em;line-height:1.1;
}
.hero-stats__value em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
@media (max-width:880px){
.hero-stats{grid-template-columns:repeat(2,1fr)}
.hero-stats__cell:nth-child(3){border-left:none;border-top:var(--hairline)}
.hero-stats__cell:nth-child(4){border-top:var(--hairline)}
}
@media (max-width:520px){
.hero-stats{grid-template-columns:1fr}
.hero-stats__cell{border-left:none}
.hero-stats__cell + .hero-stats__cell{border-top:var(--hairline)}
}
/* Soft gradient hairline divider below hero */
.hero-divider{
height:1px;max-width:1280px;margin:0 auto;
background:linear-gradient(to right, transparent, rgba(29,78,216,.4), transparent);
}
/* ========== SECTIONS — alternating backgrounds, no hairline rules between ========== */
section.s{padding:120px 0;border-top:none;position:relative}
section.s.bg-paper{background:var(--paper)}
section.s.bg-tint{background:var(--blue-tint)}
.s__head{margin-bottom:64px;max-width:680px}
.s__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-500);margin-bottom:20px;
}
.s__head p{color:var(--ink-700);margin:14px 0 0;font-size:1.05rem;line-height:1.7;max-width:620px}
/* ========== METHODOLOGY — proper card frames ========== */
.meth-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
@media (max-width:980px){.meth-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
.meth-grid{grid-template-columns:1fr;gap:16px}
.meth-col{padding:24px 22px;gap:14px}
}
.meth-col{
background:var(--paper);border:var(--hairline);border-radius:6px;
padding:32px;display:flex;flex-direction:column;gap:16px;
box-shadow:var(--shadow-card);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.meth-col:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-card-hover);
border-color:rgba(29,78,216,.18);
}
.meth-col__icon{
color:var(--blue-700);width:56px;height:56px;
background:var(--blue-50);border-radius:999px;
display:grid;place-items:center;
}
.meth-col__icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.meth-col__eyebrow{
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-500);
}
.meth-col h3{font-family:'Inter Tight';font-weight:600;font-size:1.05rem;color:var(--ink-950);margin:0}
.meth-col p{margin:0;color:var(--ink-700);font-size:.94rem;line-height:1.65;flex:1}
.meth-col__std{
font-family:'JetBrains Mono';font-size:.78rem;color:var(--ink-500);letter-spacing:.04em;
padding-top:14px;border-top:var(--hairline);margin-top:8px;
}
/* ========== PROCESS TIMELINE — bigger numbered circles, blue line ========== */
.timeline{position:relative;padding:24px 0 8px}
.timeline-track{display:grid;grid-template-columns:repeat(5,1fr);gap:40px;position:relative}
.timeline-track::before{
content:"";position:absolute;left:28px;right:28px;top:28px;height:2px;
background:var(--blue-700);opacity:.85;z-index:0;
}
.tl-step{position:relative;display:flex;flex-direction:column;gap:18px;z-index:1}
.tl-num{
width:56px;height:56px;border-radius:999px;background:var(--ink-950);
color:#fff;
display:grid;place-items:center;
font-family:'JetBrains Mono';font-weight:600;font-size:.92rem;
flex-shrink:0;
box-shadow:0 4px 12px rgba(10,20,36,.18);
}
.tl-body{display:flex;flex-direction:column;gap:8px}
.tl-title{
font-family:'Inter Tight';font-weight:600;font-size:1.1rem;color:var(--ink-950);
line-height:1.2;
}
.tl-title em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--blue-700)}
.tl-cap{font-size:.92rem;color:var(--ink-700);line-height:1.55;margin:0;max-width:220px}
/* Mobile: convert horizontal 5-step timeline into clean vertical timeline */
@media (max-width:760px){
.timeline{padding:16px 0 4px}
.timeline-track{
display:flex;flex-direction:column;gap:0;
}
.timeline-track::before{display:none}
.tl-step{
flex-direction:row;align-items:flex-start;gap:20px;
padding-bottom:30px;
}
.tl-step:last-child{padding-bottom:0}
/* per-step vertical connector line (skips the last step) */
.tl-step::before{
content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;
background:var(--blue-700);opacity:.85;z-index:0;
}
.tl-step:last-child::before{display:none}
.tl-num{
width:40px;height:40px;font-size:.82rem;
box-shadow:0 3px 10px rgba(10,20,36,.18);
}
.tl-body{gap:6px;padding-top:4px;flex:1}
.tl-title{font-size:1.05rem}
.tl-cap{max-width:none;font-size:.9rem;line-height:1.55}
}
/* ========== LAB PARTNER — feature card treatment ========== */
.partner-card{
background:var(--blue-tint);border-radius:24px;padding:64px;
border:1px solid rgba(29,78,216,.08);
}
@media (max-width:780px){.partner-card{padding:40px 28px;border-radius:18px}}
.partner{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
@media (max-width:880px){.partner{grid-template-columns:1fr;gap:40px}}
.partner__intro h3{font-family:'Inter Tight';font-weight:600;font-size:1.4rem;margin-bottom:16px;color:var(--ink-950)}
.partner__intro p{color:var(--ink-700);font-size:1rem;line-height:1.75;margin:0 0 18px;max-width:480px}
.partner__brand{
font-family:'Inter Tight';font-weight:700;font-style:italic;font-size:1.4rem;
color:var(--blue-700);letter-spacing:-.01em;margin:8px 0 20px;display:block;
}
.partner__pill{
display:inline-flex;align-items:center;gap:10px;padding:10px 14px;
background:#fff;border:var(--hairline);border-radius:6px;
font-size:.86rem;color:var(--ink-700);
}
.partner__pill strong{color:var(--ink-950);font-weight:600;font-family:'Inter Tight'}
.partner__pill svg{color:var(--blue-700);width:16px;height:16px;stroke-width:1.7}
.partner__link{
display:inline-flex;align-items:center;gap:6px;
margin-top:18px;font-size:.88rem;color:var(--blue-700);font-weight:500;
border-bottom:1px solid rgba(29,78,216,.25);padding-bottom:2px;transition:border-color .2s, color .2s;
}
.partner__link:hover{color:var(--ink-950);border-bottom-color:var(--ink-700)}
/* Stat tiles — proper cards, 2x2 */
.partner__tiles{
display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.stat-tile{
background:#fff;border:var(--hairline);border-radius:6px;padding:24px;
box-shadow:var(--shadow-card);
display:flex;flex-direction:column;gap:8px;
}
.stat-tile__label{
font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-500);font-weight:600;
}
.stat-tile__value{
font-family:'Inter Tight';font-weight:700;font-size:1.6rem;
color:var(--ink-950);letter-spacing:-.02em;line-height:1;
}
.stat-tile__badge{
align-self:flex-start;margin-top:6px;
font-size:.66rem;letter-spacing:.12em;color:#0a7f3f;background:#e7f7ee;
padding:3px 9px;border-radius:3px;font-family:'JetBrains Mono';font-weight:600;
}
.stat-tile__badge.live{color:var(--blue-700);background:rgba(29,78,216,.08)}
/* ========== COA PREVIEW — paper-feel document, prominent VERIFIED ========== */
.coa-preview{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:880px){.coa-preview{grid-template-columns:1fr;gap:48px}}
.coa-doc{
background:var(--paper-doc);border:var(--hairline);border-radius:6px;padding:36px;
border-left:4px solid var(--blue-700);position:relative;
box-shadow:0 1px 3px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
.coa-doc__verified{
position:absolute;top:18px;right:-12px;
font-family:'JetBrains Mono';font-size:.9rem;letter-spacing:.18em;font-weight:700;
color:#fff;background:var(--blue-700);padding:8px 16px;border-radius:4px;
transform:rotate(4deg);
box-shadow:0 0 16px rgba(29,78,216,.18), 0 4px 10px rgba(29,78,216,.25);
}
.coa-doc__batch-id{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;
font-size:1.4rem;color:var(--blue-700);
margin:0 0 18px;letter-spacing:-.01em;
}
.coa-doc__head{
display:flex;justify-content:space-between;align-items:flex-start;
padding-bottom:18px;border-bottom:var(--hairline);margin-bottom:20px;
}
.coa-doc__head .lab-name{
font-family:'Inter Tight';font-weight:700;font-size:.92rem;letter-spacing:.06em;color:var(--ink-950);
}
.coa-doc__head .lab-name small{
display:block;font-family:'JetBrains Mono';font-size:.66rem;font-weight:500;
letter-spacing:.14em;color:var(--ink-500);margin-top:6px;text-transform:uppercase;
}
.coa-doc__stamp{
font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.14em;
color:#0a7f3f;background:#e7f7ee;padding:5px 10px;border-radius:4px;font-weight:600;
}
.coa-doc__meta{
display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:20px;
}
.coa-doc__meta .row{
display:flex;justify-content:space-between;font-size:.82rem;
padding:8px 0;border-bottom:var(--hairline);
}
.coa-doc__meta .row .k{
color:var(--ink-500);font-family:'JetBrains Mono';font-size:.7rem;
text-transform:uppercase;letter-spacing:.08em;
}
.coa-doc__meta .row .v{color:var(--ink-950);font-weight:600;font-family:'JetBrains Mono';font-size:.78rem}
.coa-doc__table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.84rem}
.coa-doc__table th{
text-align:left;padding:10px 0;font-family:'JetBrains Mono';font-size:.66rem;
text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--ink-500);
border-bottom:var(--hairline-strong);
}
.coa-doc__table td{padding:12px 0;border-bottom:var(--hairline);color:var(--ink-700)}
.coa-doc__table td:last-child{text-align:right}
.coa-doc__table .result{font-family:'JetBrains Mono';color:var(--ink-950);font-weight:600}
.coa-doc__sig{
display:flex;justify-content:space-between;align-items:flex-end;
padding-top:16px;font-size:.74rem;color:var(--ink-500);
}
.coa-doc__sig .name{
font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--ink-900);font-size:1.05rem;
border-bottom:1px solid var(--ink-700);padding-bottom:2px;display:inline-block;margin-bottom:6px;
}
.coa-doc__sig .right{font-family:'JetBrains Mono';font-size:.66rem;text-align:right;letter-spacing:.06em}
.coa-callouts h3{font-family:'Inter Tight';font-weight:600;font-size:1.4rem;margin-bottom:20px;color:var(--ink-950)}
.coa-callouts ul{margin:0 0 24px;padding:0;list-style:none}
.coa-callouts li{
padding:18px 0 18px 32px;border-bottom:var(--hairline);
position:relative;
}
.coa-callouts li:first-child{border-top:var(--hairline)}
.coa-callouts li::before{
content:"";position:absolute;left:0;top:22px;width:18px;height:18px;
border-radius:999px;background:var(--blue-50);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}
.coa-callouts li strong{display:block;font-size:.95rem;color:var(--ink-950);margin-bottom:4px;font-weight:600;font-family:'Inter Tight'}
.coa-callouts li span{font-size:.92rem;color:var(--ink-700);line-height:1.6}
.coa-callouts__dl{
display:inline-flex;align-items:center;gap:8px;
font-size:.88rem;color:var(--blue-700);font-weight:500;
border-bottom:1px solid rgba(29,78,216,.25);padding-bottom:2px;transition:border-color .2s, color .2s;
}
.coa-callouts__dl:hover{color:var(--ink-950);border-bottom-color:var(--ink-700)}
.coa-callouts__dl svg{width:16px;height:16px;color:currentColor}
/* ========== BATCH ARCHIVE TABLE — panelled with zebra rows ========== */
.batch-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.batch-head__meta{font-family:'JetBrains Mono';font-size:.74rem;color:var(--ink-500);letter-spacing:.08em;text-transform:uppercase}
.batch-link{
font-size:.88rem;color:var(--blue-700);font-weight:500;
border-bottom:1px solid rgba(29,78,216,.25);padding-bottom:2px;transition:color .2s, border-color .2s;
}
.batch-link:hover{color:var(--ink-950);border-bottom-color:var(--ink-700)}
.batch-panel{
background:#fff;border:var(--hairline);border-radius:6px;
box-shadow:var(--shadow-card);overflow:hidden;
}
.batch-table{width:100%;border-collapse:collapse}
.batch-table thead{background:var(--paper)}
.batch-table th{
text-align:left;padding:18px 16px;font-family:'JetBrains Mono';font-size:.74rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);font-weight:600;
border-bottom:var(--hairline-strong);
}
.batch-table th:last-child, .batch-table td:last-child{text-align:right}
.batch-table td{padding:18px 16px;border-bottom:var(--hairline);font-size:.92rem;color:var(--ink-700);transition:background .2s ease}
.batch-table tbody tr:nth-child(even) td{background:var(--paper-doc)}
.batch-table tbody tr:hover td{background:var(--blue-tint)}
.batch-table tr:last-child td{border-bottom:none}
.batch-table .bid{font-family:'JetBrains Mono';font-weight:600;color:var(--ink-950);font-size:.86rem;letter-spacing:.02em}
.batch-table .product{color:var(--ink-950);font-weight:500}
.batch-table .purity{color:var(--ink-950);font-family:'JetBrains Mono';font-weight:600;font-size:.88rem}
.batch-table .dl{
display:inline-flex;align-items:center;gap:6px;color:var(--blue-700);
font-size:.82rem;font-weight:500;
background:var(--blue-50);padding:5px 10px;border-radius:4px;
transition:background .2s, color .2s;
}
.batch-table .dl:hover{background:var(--blue-700);color:#fff}
.batch-table .dl svg{width:14px;height:14px;color:currentColor}
/* ----- Tier 2 mobile table treatment: stacked-card layout below 760px ----- */
@media (max-width:760px){
/* Reflow the table from row-based into block-based stacked cards.
HTML is unchanged — pure display reassignment via CSS.
Outer .batch-panel keeps its frame, defined further down in this query. */
.batch-table,
.batch-table tbody,
.batch-table tr,
.batch-table td{
display:block;width:100%;
}
/* Hide the original table header row — labels move inline per card */
.batch-table thead{
position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}
/* Each row becomes a vertical mini-card with hairline separation */
.batch-table tbody tr{
background:#fff;
padding:24px 18px 22px;
border-bottom:1px solid rgba(15,23,42,.08);
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:
"bid purity"
"product product"
"rule rule"
"dl dl";
column-gap:14px;
row-gap:10px;
}
/* First card gets a top hairline; container provides outer frame */
.batch-table tbody tr:first-child{
border-top:1px solid rgba(15,23,42,.08);
border-top-left-radius:6px;border-top-right-radius:6px;
}
.batch-table tbody tr:last-child{
border-bottom-left-radius:6px;border-bottom-right-radius:6px;
}
/* Remove the desktop zebra and hover styling on cards */
.batch-table tbody tr:nth-child(even) td,
.batch-table tbody tr:hover td{background:transparent}
/* Strip per-cell borders/padding — the row IS the card now */
.batch-table td{
padding:0;border:none;font-size:1rem;color:var(--ink-700);
text-align:left;
}
.batch-table td:last-child{text-align:left}
/* Batch ID — large mono, top-left, with a small "BATCH" mono label above */
.batch-table .bid{
grid-area:bid;
font-family:'JetBrains Mono';font-weight:600;
color:var(--ink-950);font-size:1.02rem;letter-spacing:.02em;
line-height:1.15;
}
.batch-table .bid::before{
content:"BATCH";display:block;
font-family:'JetBrains Mono';font-size:.62rem;font-weight:600;
letter-spacing:.16em;color:var(--ink-500);
margin-bottom:4px;
}
/* Purity moves to the top-right as the at-a-glance signal */
.batch-table .purity{
grid-area:purity;align-self:start;justify-self:end;
font-family:'JetBrains Mono';font-weight:600;
color:var(--ink-950);font-size:.95rem;
text-align:right;line-height:1.15;
}
.batch-table .purity::before{
content:"PURITY";display:block;
font-family:'JetBrains Mono';font-size:.62rem;font-weight:600;
letter-spacing:.16em;color:var(--ink-500);
margin-bottom:4px;text-align:right;
}
/* Product name — second row, full width, Inter Tight 600 */
.batch-table .product{
grid-area:product;display:block;
font-family:'Inter Tight',sans-serif;font-weight:600;
color:var(--ink-950);font-size:1.05rem;line-height:1.3;
margin-top:2px;
}
/* Hairline divider between metadata and the download CTA */
.batch-table tbody tr::after{
content:"";grid-area:rule;display:block;height:1px;
background:rgba(15,23,42,.08);margin:6px 0 2px;
}
/* Download COA — text link, generous 44px touch target, dotted underline */
.batch-table td:last-child{grid-area:dl}
.batch-table .dl{
display:inline-flex;align-items:center;gap:8px;
min-height:44px;padding:10px 0;
background:transparent;border-radius:0;
color:var(--blue-700);font-size:.95rem;font-weight:600;
border-bottom:1px dotted rgba(29,78,216,.45);
align-self:start;
}
.batch-table .dl:hover,
.batch-table .dl:focus-visible{
background:transparent;color:var(--ink-950);
border-bottom-color:var(--ink-700);
}
.batch-table .dl svg{width:16px;height:16px}
/* Outer frame so the stack reads as one panel */
.batch-panel{
border:1px solid rgba(15,23,42,.08);
border-radius:6px;background:#fff;
box-shadow:var(--shadow-card);
overflow:hidden;
}
.batch-table tbody tr:first-child{border-top:none}
.batch-table tbody tr:last-child{border-bottom:none}
}
/* ========== TRUST PILLARS — card treatment ========== */
.pillars{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media (max-width:880px){.pillars{grid-template-columns:1fr}}
.pillar{
background:var(--paper);border:var(--hairline);border-radius:6px;
padding:32px;display:flex;flex-direction:column;gap:14px;
box-shadow:var(--shadow-card);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-card-hover);
border-color:rgba(29,78,216,.18);
}
.pillar__icon{
width:48px;height:48px;border-radius:999px;background:var(--blue-50);
color:var(--blue-700);display:grid;place-items:center;
}
.pillar__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pillar__eyebrow{
font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--blue-700);font-weight:600;
}
.pillar h3{font-family:'Inter Tight';font-weight:600;font-size:1.1rem;color:var(--ink-950);margin:0}
.pillar p{color:var(--ink-700);font-size:.94rem;line-height:1.65;margin:0}
/* ========== FAQ ========== */
.faq-list{max-width:720px;margin:0 auto;background:#fff;border:var(--hairline);border-radius:6px;box-shadow:var(--shadow-card);padding:0 28px}
.faq-list details{border-bottom:var(--hairline);padding:0}
.faq-list details:last-child{border-bottom:none}
.faq-list summary{
list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
font-weight:600;font-size:1rem;color:var(--ink-950);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .chev{width:24px;height:24px;color:var(--ink-500);flex-shrink:0;transition:transform .25s, color .2s}
.faq-list details[open] .chev{transform:rotate(180deg);color:var(--ink-950)}
.faq-list .body{padding:0 0 24px;color:var(--ink-700);font-size:.95rem;line-height:1.75;max-width:620px}
/* ========== CTA STRIP — feature card destination ========== */
.cta{padding:120px 0;background:var(--paper)}
.cta__card{
background:linear-gradient(180deg, var(--ink-100), var(--blue-tint));
border:1px solid rgba(29,78,216,.1);
border-radius:24px;padding:80px 48px;text-align:center;
}
@media (max-width:680px){.cta__card{padding:56px 24px;border-radius:18px}}
.cta__eyebrow{
font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-500);margin-bottom:20px;
}
.cta h2{margin-bottom:36px;font-size:clamp(1.9rem,3vw,2.5rem)}
.cta__row{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta__btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 24px;border-radius:999px;font-size:.95rem;font-weight:500;
transition:transform .2s, background .2s, color .2s, border-color .2s;
}
.cta__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cta__btn--primary{background:var(--ink-950);color:#fff}
.cta__btn--primary:hover{background:var(--blue-700);transform:translateY(-1px)}
.cta__btn--ghost{background:transparent;color:var(--ink-950);border:1px solid var(--ink-200)}
.cta__btn--ghost:hover{border-color:var(--ink-950);transform:translateY(-1px)}
/* ========== FOOTER ========== */
footer.site{background:var(--ink-950);color:#94a3b8;padding:80px 32px 32px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.foot-grid .logo .logo-word{color:#fff}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#94a3b8;font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bar{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#6b7280;flex-wrap:wrap;gap:16px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.foot-bar a{color:#94a3b8}
.ruo-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:6px 14px;border-radius:999px;font-size:.7rem;letter-spacing:.1em;color:#cbd5e1}
/* ========== REVEAL ========== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ===== MOBILE — Universal fixes (touch targets + hero video) ===== */
@media (max-width: 760px) {
button, .icon-btn, .nav-group a, .qty button, .pdp-qty button, .variant-pill, .pdp-variant-pill { min-height: 44px; }
.qty button, .pdp-qty button { min-width: 44px; width: 44px; height: 44px; font-size: 1.2rem; }
.qty input, .pdp-qty input { min-width: 44px; height: 44px; }
.li-remove, .chip button, .pdp-faq summary { min-height: 44px; }
input[type="number"], input[type="email"], input[type="text"], input[type="search"], select, textarea { font-size: 16px !important; }
.vf-video-wrap video, video.hero-video { display: none; }
.vf-video-wrap, .video-feature .vf-video-wrap { background: radial-gradient(80% 60% at 50% 40%, #1d4ed8 0%, #0a1424 100%) !important; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.vf-video-wrap::after { content: "Tap to play"; color: rgba(255,255,255,.85); font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: absolute; inset: auto; background: rgba(11,23,54,.55); padding: 12px 22px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
}
/* ===== HAMBURGER MENU ===== */
.hamburger { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-950, #0a1424); border-radius: 1px; transition: transform .25s, opacity .2s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,36,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 86%; max-width: 360px; background: var(--paper, #fafbfc); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 88px 32px 32px; box-shadow: -20px 0 60px rgba(15,23,42,.18); overflow-y: auto; }
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-panel a { display: block; padding: 18px 0; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.3rem; color: var(--ink-950, #0a1424); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,.08); transition: color .15s, padding-left .2s; }
.mobile-nav-panel a:hover { color: #1e40af; padding-left: 6px; }
.mobile-nav-panel a:last-of-type { border-bottom: none; }
.mobile-nav-panel .panel-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid rgba(15,23,42,.12); cursor: pointer; display: grid; place-items: center; color: var(--ink-700, #3a4252); }
.mobile-nav-panel .panel-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.mobile-nav-panel .panel-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.08); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500, #6b7280); }
@media (max-width: 760px) {
/* Hide ALL nav-groups (including unmodified homepage ones) and show hamburger */
.nav-group, .nav-group--center, .nav-group--right,
.peptigo-nav__group, .peptigo-nav__group--center, .peptigo-nav__group--right { display: none !important; }
.nav, .peptigo-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 12px !important;
padding: 14px 20px !important;
}
.logo { order: -1 !important; flex: 0 0 auto; }
.hamburger { display: flex !important; order: 99 !important; flex: 0 0 auto; }
}
}
/* ===== TIER 3 — Universal mobile polish ===== */
/* Safe-area insets for fixed bottom bars (iPhone notch/home indicator) */
.sticky-checkout-bar, .mobile-filter-bar { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
/* Smoother font fallback while Google Fonts load */
@font-face { font-family: 'Inter'; font-display: swap; src: local('Inter'); }
@font-face { font-family: 'Inter Tight'; font-display: swap; src: local('Inter Tight'); }
@font-face { font-family: 'Fraunces'; font-display: swap; src: local('Fraunces'); }
@font-face { font-family: 'JetBrains Mono'; font-display: swap; src: local('JetBrains Mono'); }
/* Reduce hero animations + heavy backdrop filters on mobile to save battery */
@media (max-width: 760px) {
.peptigo-hero__molecule { animation-duration: 80s; opacity: .25; }
.peptigo-atom { animation-duration: 6s; }
.peptigo-shimmer { display: none; }
.peptigo-header { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
}
/* Honor reduced-motion preference fully */
@media (prefers-reduced-motion: reduce) {
.peptigo-hero__molecule, .peptigo-atom, .peptigo-shimmer,
.peptigo-hero__brand-mark, .peptigo-hero__brand-word { animation: none !important; }
* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ============================================================ */
/* RESEARCH / BLOG -- v0.8.0 */
/* ============================================================ */
.tpl-research { background: var(--paper, #fafbfc); color: var(--ink-950, #0a1424); }
.tpl-research .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tpl-research .breadcrumb { padding: 24px 32px 0; max-width: 1280px; margin: 0 auto; font-size: .78rem; color: var(--ink-500, #64748b); display: flex; gap: 10px; align-items: center; letter-spacing: .02em; }
.tpl-research .breadcrumb a { color: var(--ink-500, #64748b); text-decoration: none; transition: color .2s; }
.tpl-research .breadcrumb a:hover { color: var(--ink-900, #0f172a); }
.tpl-research .breadcrumb .sep { opacity: .5; }
.tpl-research .breadcrumb .current { color: var(--ink-900, #0f172a); }
.tpl-article .breadcrumb { padding: 24px 32px 0; max-width: 1280px; margin: 0 auto; font-size: .78rem; color: var(--ink-500, #64748b); display: flex; gap: 10px; align-items: center; letter-spacing: .02em; }
.tpl-article .breadcrumb a { color: var(--ink-500, #64748b); text-decoration: none; transition: color .2s; }
.tpl-article .breadcrumb a:hover { color: var(--ink-900, #0f172a); }
.tpl-article .breadcrumb .sep { opacity: .5; }
.tpl-article .breadcrumb .current { color: var(--ink-900, #0f172a); }
.tpl-research .r-hero { padding: 64px 0 40px; border-bottom: 1px solid rgba(10,20,36,.06); }
.tpl-research .r-hero__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); margin-bottom: 16px; }
.tpl-research .r-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.05; margin: 0 0 20px; font-weight: 600; letter-spacing: -.02em; }
.tpl-research .r-hero h1 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--blue-700, #1d4ed8); }
.tpl-research .r-hero__lede { max-width: 640px; font-size: 1.1rem; line-height: 1.6; color: #475569; margin: 0 0 28px; }
.tpl-research .r-hero__meta { display: flex; gap: 32px; flex-wrap: wrap; }
.tpl-research .r-hero__meta-item { font-size: .85rem; color: #64748b; }
.tpl-research .r-hero__meta-item strong { color: var(--ink-950, #0a1424); font-weight: 600; }
.tpl-research .r-filter { padding: 24px 0; background: #fff; border-bottom: 1px solid rgba(10,20,36,.06); position: sticky; top: 0; z-index: 10; }
.tpl-research .r-filter__row { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-research .r-chip { padding: 8px 16px; font-size: .85rem; font-weight: 500; background: #fff; border: 1px solid rgba(10,20,36,.12); border-radius: 100px; cursor: pointer; color: #475569; transition: all .15s; }
.tpl-research .r-chip:hover { border-color: var(--blue-700, #1d4ed8); color: var(--blue-700, #1d4ed8); }
.tpl-research .r-chip.is-active { background: var(--ink-950, #0a1424); color: #fff; border-color: var(--ink-950, #0a1424); }
.tpl-research .r-featured { padding: 48px 0 24px; }
.tpl-research .r-feat { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; text-decoration: none; color: inherit; padding: 32px; background: #fff; border-radius: 16px; border: 1px solid rgba(10,20,36,.06); transition: transform .2s, box-shadow .2s; }
.tpl-research .r-feat:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -20px rgba(29,78,216,.2); }
.tpl-research .r-feat__media { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: #f1f5f9; }
.tpl-research .r-feat__media img { width: 100%; height: 100%; object-fit: contain; }
.tpl-research .r-feat__tag { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); margin-bottom: 14px; }
.tpl-research .r-feat h2 { font-size: 1.85rem; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.02em; }
.tpl-research .r-feat p { color: #475569; line-height: 1.6; margin: 0 0 20px; }
.tpl-research .r-feat__meta { font-size: .82rem; color: #64748b; }
.tpl-research .r-grid-wrap { padding: 32px 0 64px; }
.tpl-research .r-section-title { font-size: 1.35rem; margin: 0 0 28px; font-weight: 600; padding-top: 24px; border-top: 1px solid rgba(10,20,36,.08); }
.tpl-research .r-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tpl-research .r-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid rgba(10,20,36,.06); transition: transform .2s, box-shadow .2s; }
.tpl-research .r-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -12px rgba(10,20,36,.12); }
.tpl-research .r-card__link { text-decoration: none; color: inherit; display: block; }
.tpl-research .r-card__media { aspect-ratio: 4/3; background: #f8fafc; }
.tpl-research .r-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.tpl-research .r-card__body { padding: 20px 22px 24px; }
.tpl-research .r-card__tag { font-family: 'JetBrains Mono', monospace; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); margin-bottom: 10px; }
.tpl-research .r-card h3 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.01em; }
.tpl-research .r-card p { color: #64748b; font-size: .88rem; line-height: 1.55; margin: 0 0 14px; }
.tpl-research .r-card__meta { font-size: .75rem; color: #94a3b8; font-family: 'JetBrains Mono', monospace; }
.tpl-research .r-news { padding: 48px 0 80px; }
.tpl-research .r-news__inner { background: var(--ink-950, #0a1424); color: #fff; padding: 48px; border-radius: 16px; text-align: center; }
.tpl-research .r-news h2 { font-size: 1.8rem; margin: 0 0 12px; }
.tpl-research .r-news p { color: #cbd5e1; margin: 0 0 24px; }
.tpl-research .r-news__form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.tpl-research .r-news__form input { flex: 1; padding: 14px 18px; border-radius: 8px; border: none; font-size: .95rem; background: rgba(255,255,255,.1); color: #fff; }
.tpl-research .r-news__form input::placeholder { color: #94a3b8; }
.tpl-research .r-news__form button { padding: 14px 28px; background: var(--blue-700, #1d4ed8); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.tpl-research .r-news__mini { font-size: .75rem; color: #64748b; margin-top: 14px; }
@media (max-width: 900px) {
.tpl-research .r-feat { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
.tpl-research .r-feat h2 { font-size: 1.4rem; }
.tpl-research .r-grid { grid-template-columns: 1fr; }
.tpl-research .r-news__inner { padding: 32px 20px; }
.tpl-research .r-news__form { flex-direction: column; }
}
/* ============================================================ */
/* SINGLE ARTICLE */
/* ============================================================ */
.tpl-article { background: var(--paper, #fafbfc); color: var(--ink-950, #0a1424); }
.tpl-article .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* v1.7.14: hero featured image at top of article */
.tpl-article .art__hero {
margin: 32px 0 0;
padding: 0;
}
.tpl-article .art__hero img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
aspect-ratio: 16 / 9;
object-fit: cover;
box-shadow: 0 24px 60px -20px rgba(10, 20, 36, 0.25), 0 4px 16px -4px rgba(10, 20, 36, 0.10);
}
@media (max-width: 600px) {
.tpl-article .art__hero { margin-top: 20px; }
.tpl-article .art__hero img { border-radius: 10px; }
}
.tpl-article .art__head { padding: 40px 0 32px; max-width: 760px; margin: 0 auto; text-align: center; }
.tpl-article .art__tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); padding: 6px 14px; background: rgba(29,78,216,.08); border-radius: 100px; margin-bottom: 20px; }
.tpl-article .art__title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; margin: 0 0 20px; letter-spacing: -.02em; font-weight: 600; }
.tpl-article .art__lede { font-size: 1.15rem; line-height: 1.55; color: #475569; margin: 0 0 36px; }
.tpl-article .art__byline { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(10,20,36,.08); }
.tpl-article .art__author { display: flex; align-items: center; gap: 12px; }
.tpl-article .art__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-700, #1d4ed8); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .8rem; }
.tpl-article .art__author-name { font-weight: 600; font-size: .9rem; }
.tpl-article .art__author-role { font-size: .78rem; color: #64748b; }
.tpl-article .art__dates { font-size: .82rem; color: #64748b; text-align: right; line-height: 1.5; }
.tpl-article .art__feature { max-width: 900px; margin: 0 auto 48px; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(10,20,36,.06); }
.tpl-article .art__feature img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.tpl-article .art__body { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding-bottom: 48px; }
.tpl-article .art__toc { position: sticky; top: 100px; align-self: start; }
.tpl-article .art__toc-title { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #64748b; margin-bottom: 12px; }
.tpl-article .art__toc ol { list-style: none; padding: 0; margin: 0; }
.tpl-article .art__toc li { padding: 6px 0; font-size: .88rem; border-left: 2px solid rgba(10,20,36,.08); padding-left: 14px; }
.tpl-article .art__toc li a { color: #475569; text-decoration: none; }
.tpl-article .art__toc li a:hover { color: var(--blue-700, #1d4ed8); }
.tpl-article .art__prose { font-size: 1.05rem; line-height: 1.7; color: #1e293b; max-width: 680px; }
.tpl-article .art__prose h2 { font-size: 1.75rem; margin: 48px 0 16px; letter-spacing: -.01em; }
.tpl-article .art__prose h3 { font-size: 1.25rem; margin: 32px 0 12px; color: var(--blue-700, #1d4ed8); }
.tpl-article .art__prose p { margin: 0 0 18px; }
.tpl-article .art__prose ul, .tpl-article .art__prose ol { margin: 0 0 20px; padding-left: 24px; }
.tpl-article .art__prose li { margin-bottom: 8px; }
.tpl-article .art__prose a { color: var(--blue-700, #1d4ed8); }
.tpl-article .art__prose blockquote { margin: 28px 0; padding: 20px 28px; border-left: 3px solid var(--blue-700, #1d4ed8); background: #f1f5f9; font-family: 'Fraunces', serif; font-style: italic; font-size: 1.1rem; }
.tpl-article .art__prose blockquote p { margin: 0; color: #334155; }
.tpl-article .art__refs { counter-reset: ref; list-style: none; padding: 0; font-size: .9rem; color: #475569; }
.tpl-article .art__refs li { counter-increment: ref; padding-left: 32px; position: relative; margin-bottom: 10px; }
.tpl-article .art__refs li::before { content: counter(ref); position: absolute; left: 0; top: 0; font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--blue-700, #1d4ed8); font-weight: 600; }
.tpl-article .art__author-card { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start; max-width: 680px; margin: 0 auto 48px; padding: 28px; background: #fff; border-radius: 12px; border: 1px solid rgba(10,20,36,.08); }
.tpl-article .art__avatar--lg { width: 64px; height: 64px; font-size: 1.1rem; }
.tpl-article .art__author-card p { margin: 6px 0 0; color: #475569; font-size: .92rem; line-height: 1.6; }
.tpl-article .art__related { padding: 32px 0 48px; border-top: 1px solid rgba(10,20,36,.08); max-width: 900px; margin: 0 auto; }
.tpl-article .art__related h2 { font-size: 1.3rem; margin: 0 0 24px; }
.tpl-article .art__related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tpl-article .art__related-card { padding: 18px; background: #fff; border-radius: 10px; border: 1px solid rgba(10,20,36,.06); text-decoration: none; color: inherit; text-align: center; transition: transform .15s, border-color .15s; }
.tpl-article .art__related-card:hover { transform: translateY(-2px); border-color: var(--blue-700, #1d4ed8); }
.tpl-article .art__related-card img { width: 80%; max-height: 140px; object-fit: contain; margin: 0 auto 10px; display: block; }
.tpl-article .art__related-name { font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.tpl-article .art__related-spec { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #64748b; }
.tpl-article .art__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 0 80px; max-width: 900px; margin: 0 auto; }
.tpl-article .art__nav a { padding: 20px 24px; background: #fff; border-radius: 10px; border: 1px solid rgba(10,20,36,.08); text-decoration: none; color: inherit; transition: border-color .15s; }
.tpl-article .art__nav a:hover { border-color: var(--blue-700, #1d4ed8); }
.tpl-article .art__nav-next { text-align: right; }
.tpl-article .art__nav-label { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #64748b; margin-bottom: 6px; letter-spacing: .08em; }
.tpl-article .art__nav-title { font-weight: 600; font-size: .95rem; }
@media (max-width: 900px) {
.tpl-article .art__body { grid-template-columns: 1fr; }
.tpl-article .art__toc { position: static; margin-bottom: 24px; }
.tpl-article .art__related-grid { grid-template-columns: 1fr; }
.tpl-article .art__nav { grid-template-columns: 1fr; }
.tpl-article .art__nav-next { text-align: left; }
}
/* ============================================================ */
/* CALCULATOR — supplies + trust strip extension v0.8.1 */
/* ============================================================ */
.tpl-calc .calc-supplies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.tpl-calc .calc-supply { display: block; background: #fff; border: 1px solid rgba(10,20,36,.08); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tpl-calc .calc-supply:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(29,78,216,.18); border-color: var(--blue-700, #1d4ed8); }
.tpl-calc .calc-supply__media { aspect-ratio: 4/3; background: #f8fafc; padding: 20px; }
.tpl-calc .calc-supply__media img { width: 100%; height: 100%; object-fit: contain; }
.tpl-calc .calc-supply__body { padding: 22px 24px 26px; }
.tpl-calc .calc-supply__sku { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .14em; color: var(--blue-700, #1d4ed8); margin-bottom: 8px; text-transform: uppercase; }
.tpl-calc .calc-supply h3 { font-size: 1.15rem; margin: 0 0 10px; letter-spacing: -.01em; }
.tpl-calc .calc-supply p { color: #64748b; font-size: .9rem; line-height: 1.55; margin: 0 0 14px; }
.tpl-calc .calc-supply__cta { font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: var(--blue-700, #1d4ed8); font-weight: 600; letter-spacing: .04em; }
.tpl-calc .calc-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.tpl-calc .calc-trust__item { text-align: left; }
.tpl-calc .calc-trust__icon { width: 40px; height: 40px; color: var(--blue-700, #1d4ed8); margin-bottom: 16px; }
.tpl-calc .calc-trust__icon svg { width: 100%; height: 100%; }
.tpl-calc .calc-trust__title { font-weight: 600; font-size: 1rem; margin-bottom: 8px; color: var(--ink-950, #0a1424); }
.tpl-calc .calc-trust__text { font-size: .88rem; line-height: 1.55; color: #64748b; }
@media (max-width: 900px) {
.tpl-calc .calc-supplies { grid-template-columns: 1fr; }
.tpl-calc .calc-trust { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 540px) {
.tpl-calc .calc-trust { grid-template-columns: 1fr; }
}
/* Calculator CTA buttons + tile (mirrors tpl-about styling) v0.8.2 */
.tpl-calc .cta-feature { background: #fff; border: 1px solid rgba(10,20,36,.08); border-radius: 18px; padding: 64px 48px; text-align: center; }
.tpl-calc .cta-feature .s__eyebrow { margin-bottom: 20px; font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); }
.tpl-calc .cta-feature h2 { margin: 0 auto 32px; max-width: 640px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; }
.tpl-calc .cta-feature h2 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--blue-700, #1d4ed8); }
.tpl-calc .cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tpl-calc .btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: .98rem; padding: 14px 24px; border-radius: 6px; text-decoration: none; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; cursor: pointer; }
.tpl-calc .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tpl-calc .btn-primary { background: var(--ink-950, #0a1424); color: #fff; border: 1px solid var(--ink-950, #0a1424); }
.tpl-calc .btn-primary:hover { background: #000; transform: translateY(-1px); }
.tpl-calc .btn-ghost { background: transparent; color: var(--ink-950, #0a1424); border: 1px solid rgba(15,23,42,.2); }
.tpl-calc .btn-ghost:hover { border-color: var(--ink-950, #0a1424); background: rgba(15,23,42,.03); }
/* Trust strip now 3 cols not 4 */
.tpl-calc .calc-trust { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tpl-calc .calc-trust { grid-template-columns: 1fr; } }
/* Calculator "How to use" steps as branded cards v0.8.3 */
.tpl-calc .steps { gap: 24px; margin-top: 40px; }
.tpl-calc .step {
position: relative;
padding: 36px 28px 30px;
background: #fff;
border: 1px solid rgba(10,20,36,.08);
border-top: 3px solid var(--blue-700, #1d4ed8);
border-radius: 12px;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tpl-calc .step:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px -16px rgba(29,78,216,.18);
}
.tpl-calc .step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: linear-gradient(135deg, var(--blue-700, #1d4ed8), #2563eb);
color: #fff;
border-radius: 50%;
font-family: 'JetBrains Mono', monospace;
font-size: .82rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
margin-bottom: 18px;
box-shadow: 0 6px 16px -4px rgba(29,78,216,.4);
}
.tpl-calc .step h3 {
font-size: 1.15rem;
margin: 0 0 10px;
letter-spacing: -.01em;
color: var(--ink-950, #0a1424);
}
.tpl-calc .step p {
color: #64748b;
margin: 0;
font-size: .92rem;
line-height: 1.6;
max-width: none;
}
/* ============================================================ */
/* SUPPORT / HELP CENTER -- v0.8.4 */
/* ============================================================ */
.tpl-support { background: var(--paper, #fafbfc); color: var(--ink-950, #0a1424); }
.tpl-support .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tpl-support .breadcrumb { padding: 24px 32px 0; max-width: 1280px; margin: 0 auto; font-size: .78rem; color: var(--ink-500, #64748b); display: flex; gap: 10px; align-items: center; letter-spacing: .02em; }
.tpl-support .breadcrumb a { color: var(--ink-500, #64748b); text-decoration: none; transition: color .2s; }
.tpl-support .breadcrumb a:hover { color: var(--ink-900, #0f172a); }
.tpl-support .breadcrumb .sep { opacity: .5; }
.tpl-support .breadcrumb .current { color: var(--ink-900, #0f172a); }
/* Hero */
.tpl-support .sup-hero { padding: 56px 0 48px; text-align: center; border-bottom: 1px solid rgba(10,20,36,.06); }
.tpl-support .sup-hero__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); margin-bottom: 16px; }
.tpl-support .sup-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.05; margin: 0 0 18px; font-weight: 600; letter-spacing: -.02em; }
.tpl-support .sup-hero h1 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--blue-700, #1d4ed8); }
.tpl-support .sup-hero__lede { max-width: 600px; margin: 0 auto 32px; font-size: 1.05rem; line-height: 1.6; color: #475569; }
.tpl-support .sup-hero__search { display: flex; align-items: center; gap: 12px; max-width: 540px; margin: 0 auto; padding: 14px 22px; background: #fff; border: 1px solid rgba(10,20,36,.1); border-radius: 100px; box-shadow: 0 4px 16px -8px rgba(10,20,36,.08); }
.tpl-support .sup-hero__search svg { width: 18px; height: 18px; color: #64748b; flex-shrink: 0; }
.tpl-support .sup-hero__search input { flex: 1; border: none; outline: none; font-size: .95rem; background: transparent; color: var(--ink-950, #0a1424); }
.tpl-support .sup-hero__search input::placeholder { color: #94a3b8; }
/* Section title */
.tpl-support .sup-section-title { font-size: 1.35rem; font-weight: 600; margin: 0 0 28px; }
.tpl-support .sup-section-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); margin-bottom: 14px; }
/* Topics grid */
.tpl-support .sup-topics { padding: 56px 0 32px; }
.tpl-support .sup-topics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tpl-support .sup-topic { display: block; padding: 28px 26px; background: #fff; border: 1px solid rgba(10,20,36,.08); border-radius: 12px; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s, box-shadow .2s; }
.tpl-support .sup-topic:hover { transform: translateY(-3px); border-color: var(--blue-700, #1d4ed8); box-shadow: 0 16px 40px -16px rgba(29,78,216,.18); }
.tpl-support .sup-topic__icon { width: 40px; height: 40px; color: var(--blue-700, #1d4ed8); margin-bottom: 16px; }
.tpl-support .sup-topic__icon svg { width: 100%; height: 100%; }
.tpl-support .sup-topic h3 { font-size: 1.05rem; margin: 0 0 8px; letter-spacing: -.01em; }
.tpl-support .sup-topic p { font-size: .88rem; color: #64748b; line-height: 1.55; margin: 0; }
/* FAQ */
.tpl-support .sup-faq { padding: 48px 0 32px; }
.tpl-support .sup-faq__head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.tpl-support .sup-faq__head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.tpl-support .sup-faq__head h2 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--blue-700, #1d4ed8); }
.tpl-support .sup-faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tpl-support .sup-q { background: #fff; border: 1px solid rgba(10,20,36,.08); border-radius: 10px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.tpl-support .sup-q[open] { border-color: var(--blue-700, #1d4ed8); box-shadow: 0 8px 24px -12px rgba(29,78,216,.15); }
.tpl-support .sup-q summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--ink-950, #0a1424); list-style: none; }
.tpl-support .sup-q summary::-webkit-details-marker { display: none; }
.tpl-support .sup-q__chev { font-size: 1.6rem; line-height: 1; color: var(--blue-700, #1d4ed8); font-weight: 300; transition: transform .2s; flex-shrink: 0; margin-left: 16px; }
.tpl-support .sup-q[open] .sup-q__chev { transform: rotate(45deg); }
.tpl-support .sup-q__body { padding: 0 26px 22px; color: #475569; line-height: 1.65; font-size: .94rem; }
.tpl-support .sup-q__body p { margin: 0; }
.tpl-support .sup-q__body a { color: var(--blue-700, #1d4ed8); }
/* Contact cards */
.tpl-support .sup-contact { padding: 48px 0; }
.tpl-support .sup-contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tpl-support .sup-contact__card { padding: 32px 28px; background: #fff; border: 1px solid rgba(10,20,36,.08); border-radius: 12px; text-align: left; }
.tpl-support .sup-contact__icon { width: 36px; height: 36px; color: var(--blue-700, #1d4ed8); margin-bottom: 18px; }
.tpl-support .sup-contact__icon svg { width: 100%; height: 100%; }
.tpl-support .sup-contact__card h3 { font-size: 1.1rem; margin: 0 0 10px; }
.tpl-support .sup-contact__card p { font-size: .88rem; color: #64748b; line-height: 1.55; margin: 0 0 16px; }
.tpl-support .sup-contact__link { font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: var(--blue-700, #1d4ed8); font-weight: 600; text-decoration: none; }
.tpl-support .sup-contact__link:hover { text-decoration: underline; }
/* Research use notice */
.tpl-support .sup-notice { padding: 24px 0 48px; }
.tpl-support .sup-notice__inner { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 24px 28px; background: #fffaeb; border: 1px solid #fde68a; border-radius: 10px; }
.tpl-support .sup-notice__icon { width: 28px; height: 28px; color: #b45309; }
.tpl-support .sup-notice__icon svg { width: 100%; height: 100%; }
.tpl-support .sup-notice h3 { font-size: 1rem; margin: 0 0 8px; color: #92400e; }
.tpl-support .sup-notice p { font-size: .88rem; line-height: 1.6; color: #78350f; margin: 0; }
/* CTA strip — reuse calc pattern */
.tpl-support .sup-cta { padding: 32px 0 80px; }
.tpl-support .cta-feature { background: #fff; border: 1px solid rgba(10,20,36,.08); border-radius: 18px; padding: 64px 48px; text-align: center; }
.tpl-support .cta-feature .s__eyebrow { margin-bottom: 20px; font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-700, #1d4ed8); }
.tpl-support .cta-feature h2 { margin: 0 auto 32px; max-width: 640px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; }
.tpl-support .cta-feature h2 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--blue-700, #1d4ed8); }
.tpl-support .cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tpl-support .btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: .98rem; padding: 14px 24px; border-radius: 6px; text-decoration: none; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.tpl-support .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tpl-support .btn-primary { background: var(--ink-950, #0a1424); color: #fff; border: 1px solid var(--ink-950, #0a1424); }
.tpl-support .btn-primary:hover { background: #000; transform: translateY(-1px); }
.tpl-support .btn-ghost { background: transparent; color: var(--ink-950, #0a1424); border: 1px solid rgba(15,23,42,.2); }
.tpl-support .btn-ghost:hover { border-color: var(--ink-950, #0a1424); background: rgba(15,23,42,.03); }
@media (max-width: 900px) {
.tpl-support .sup-topics__grid { grid-template-columns: 1fr; }
.tpl-support .sup-contact__grid { grid-template-columns: 1fr; }
.tpl-support .cta-feature { padding: 48px 24px; }
}
/* Featured cards -- full bleed image (no alpha, white-bg PNGs) v0.8.5 */
.peptigo-card__media {
aspect-ratio: 1/1;
background: #ffffff;
overflow: hidden;
display: block;
position: relative;
}
.peptigo-card__media::before,
.peptigo-card__media::after { display: none !important; content: none !important; }
.peptigo-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
margin: 0;
padding: 0;
filter: none;
transition: transform .5s ease;
}
.peptigo-card:hover .peptigo-card__media img {
transform: scale(1.04);
}
/* LAB TESTED badge stays readable */
.peptigo-card__tested {
background: rgba(255,255,255,.9);
padding: 4px 10px;
border-radius: 4px;
bottom: 10px;
backdrop-filter: blur(2px);
}
/* ============================================================ */
/* INDIVIDUAL PRODUCT PAGES (default page template) v0.9.0 */
/* ============================================================ */
.product-detail { max-width: 1100px; margin: 48px auto 24px; padding: 0 24px; }
.product-detail__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px; background: #fff; border-radius: 16px; border: 1px solid rgba(10,20,36,.06); box-shadow: 0 12px 40px -24px rgba(10,20,36,.1); }
.product-detail__image { width: 100%; max-width: 360px; margin: 0 auto; display: block; }
.product-detail__info { padding: 20px 0; }
.product-detail__sku { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #64748b; margin-bottom: 14px; }
.product-detail__name { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 12px; letter-spacing: -.02em; font-weight: 600; color: #0a1424; }
.product-detail__category { display: inline-block; background: rgba(29,78,216,.08); color: #1d4ed8; padding: 4px 12px; border-radius: 100px; font-size: .78rem; font-weight: 600; margin-bottom: 16px; }
.product-detail__dose { font-size: 1.1rem; color: #475569; margin-bottom: 20px; font-family: 'JetBrains Mono', monospace; }
.product-detail__price { font-size: 2rem; font-weight: 700; color: #0a1424; margin-bottom: 28px; }
.product-detail__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.product-detail__badges .badge { background: #f1f5f9; color: #334155; padding: 6px 12px; border-radius: 6px; font-size: .78rem; font-weight: 600; }
/* body content (headings, paragraphs, lists in the page content) sit below the hero */
.product-detail ~ .entry-content,
.product-detail + * { max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 24px; }
/* headings inside page content */
body.single .wp-block-heading,
body.page .wp-block-heading,
body.single h2,
body.page h2 { font-size: 1.6rem; margin: 36px 0 14px; letter-spacing: -.01em; }
body.single h3,
body.page h3 { font-size: 1.2rem; margin: 28px 0 10px; color: #1d4ed8; }
@media (max-width: 800px) {
.product-detail__hero { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
.product-detail__image { max-width: 240px; }
}
/* ============================================================ */
/* UNIFIED PRODUCT CARDS -- v0.9.1 */
/* Homepage .peptigo-card + shop .card now share styling. */
/* Alpha-transparent vials centered on soft blue gradient. */
/* ============================================================ */
/* --- Homepage featured cards (.peptigo-card) --- */
.peptigo-card__media {
aspect-ratio: 1/1;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.peptigo-card__media::before {
content: "";
position: absolute; left: 50%; top: 55%;
width: 85%; height: 75%;
transform: translate(-50%,-50%);
background: radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter: blur(14px);
pointer-events: none;
z-index: 0;
display: block !important;
content: "" !important;
}
.peptigo-card__media::after { display: none !important; content: none !important; }
.peptigo-card__media img {
position: relative;
inset: auto;
z-index: 1;
width: 70%;
height: 88%;
max-width: 260px;
object-fit: contain;
object-position: center center;
margin: 0;
padding: 0;
filter: drop-shadow(0 18px 24px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18));
transition: transform .5s ease;
}
.peptigo-card:hover .peptigo-card__media img {
transform: translateY(-4px) scale(1.04);
}
.peptigo-card__tested {
background: rgba(255,255,255,.92);
padding: 4px 10px;
border-radius: 4px;
bottom: 12px;
backdrop-filter: blur(2px);
}
/* category badge -- blue instead of navy */
.peptigo-card__cat { background: var(--blue-700, #1d4ed8) !important; }
/* --- Shop page grid cards (.card inside .tpl-shop) --- */
.tpl-shop .card__media {
aspect-ratio: 1/1;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.tpl-shop .card__media::before {
content: "";
position: absolute; left: 50%; top: 55%;
width: 85%; height: 75%;
transform: translate(-50%,-50%);
background: radial-gradient(closest-side, rgba(96,165,250,.32) 0%, rgba(96,165,250,0) 72%);
filter: blur(14px);
pointer-events: none;
z-index: 0;
}
.tpl-shop .card__media img {
position: relative;
z-index: 1;
width: 72%;
height: 88%;
max-width: 220px;
object-fit: contain;
object-position: center center;
margin: 0;
filter: drop-shadow(0 16px 22px rgba(15,23,42,.12)) drop-shadow(0 5px 10px rgba(29,78,216,.16));
transition: transform .5s ease;
}
.tpl-shop .card:hover .card__media img {
transform: translateY(-3px) scale(1.03);
}
/* Shop badges (Best Seller, New) -- blue */
.tpl-shop .card-corner {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
background: var(--blue-700, #1d4ed8);
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: .68rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
}
.tpl-shop .card-corner.new {
background: #0ea5e9;
}
.tpl-shop .card-corner.save {
background: linear-gradient(135deg,#f59e0b,#d97706);
}
/* Individual product page hero image */
.product-detail__image {
filter: drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18));
}
/* ============================================================ */
/* LARGER PRODUCT CARD IMAGES -- v0.9.2 */
/* Scale vials ~50% larger on homepage + shop + product pages */
/* ============================================================ */
.peptigo-card__media img {
width: 100% !important;
height: 110% !important;
max-width: 400px !important;
}
.tpl-shop .card__media img {
width: 100% !important;
height: 110% !important;
max-width: 340px !important;
}
/* Individual product page hero image */
.product-detail__image {
max-width: 520px !important;
width: 100%;
}
/* ============================================================ */
/* CARDS v0.9.3 -- tight-cropped vials sit above LAB TESTED */
/* ============================================================ */
/* Homepage featured cards */
.peptigo-card__media {
aspect-ratio: 1/1;
align-items: flex-end !important;
justify-content: center !important;
padding: 8px 8px 34px !important;
box-sizing: border-box;
}
.peptigo-card__media img {
width: auto !important;
height: auto !important;
max-width: 85% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
margin: 0 !important;
padding: 0 !important;
}
.peptigo-card__tested {
bottom: 8px !important;
}
/* Shop page grid cards */
.tpl-shop .card__media {
aspect-ratio: 1/1;
align-items: flex-end !important;
justify-content: center !important;
padding: 8px 8px 12px !important;
box-sizing: border-box;
}
.tpl-shop .card__media img {
width: auto !important;
height: auto !important;
max-width: 80% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
margin: 0 !important;
}
/* Individual product page hero */
.product-detail__hero {
align-items: center;
}
.product-detail__image {
max-width: 100% !important;
max-height: 520px;
width: auto !important;
height: auto !important;
margin: 0 auto !important;
}
/* ============================================================ */
/* PRODUCT DETAIL PAGE v0.9.4 */
/* Full PDP layout for individual product pages */
/* ============================================================ */
/* hide the auto-rendered post title since we have our own h1 */
body.page .wp-block-post-title { display: none !important; }
.pdp {
max-width: 1180px;
margin: 32px auto 40px;
padding: 0 24px;
}
.pdp__hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 48px;
align-items: start;
background: #fff;
border-radius: 18px;
border: 1px solid rgba(10,20,36,.06);
padding: 40px;
box-shadow: 0 12px 40px -20px rgba(10,20,36,.1);
}
.pdp__media {
aspect-ratio: 1/1;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%);
border-radius: 14px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 24px 24px 40px;
position: relative;
overflow: hidden;
}
.pdp__media::before {
content: "";
position: absolute; left: 50%; top: 55%;
width: 85%; height: 75%;
transform: translate(-50%,-50%);
background: radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter: blur(16px);
pointer-events: none;
z-index: 0;
}
.pdp__image {
position: relative;
z-index: 1;
width: auto !important;
height: auto !important;
max-width: 75%;
max-height: 100%;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18));
}
.pdp__info { padding-top: 8px; }
.pdp__eyebrow {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 14px;
}
.pdp__category {
display: inline-block;
background: rgba(29,78,216,.1);
color: #1d4ed8;
padding: 4px 12px;
border-radius: 100px;
font-size: .76rem;
font-weight: 600;
letter-spacing: .02em;
}
.pdp__sku {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: #64748b;
}
.pdp__name {
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
margin: 0 0 8px;
letter-spacing: -.02em;
font-weight: 600;
color: #0a1424;
line-height: 1.1;
}
.pdp__dose {
font-family: 'JetBrains Mono', monospace;
font-size: .95rem;
color: #475569;
margin-bottom: 24px;
}
.pdp__price-row {
display: flex;
align-items: baseline;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(10,20,36,.08);
}
.pdp__price {
font-size: 2.4rem;
font-weight: 700;
color: #0a1424;
letter-spacing: -.02em;
}
.pdp__stock {
font-size: .88rem;
color: #475569;
display: flex;
align-items: center;
gap: 8px;
}
.pdp__stock-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 3px rgba(22,163,74,.2);
display: inline-block;
}
.pdp__purchase {
display: flex;
gap: 12px;
align-items: stretch;
margin-bottom: 24px;
}
.pdp__qty {
display: flex;
align-items: center;
border: 1px solid rgba(10,20,36,.15);
border-radius: 10px;
overflow: hidden;
background: #fff;
flex-shrink: 0;
}
.pdp__qty-btn {
width: 44px;
height: 52px;
border: none;
background: transparent;
font-size: 1.2rem;
font-weight: 600;
color: #1d4ed8;
cursor: pointer;
transition: background .15s;
}
.pdp__qty-btn:hover { background: #f1f5f9; }
.pdp__qty-input {
width: 48px;
height: 52px;
border: none;
border-left: 1px solid rgba(10,20,36,.1);
border-right: 1px solid rgba(10,20,36,.1);
text-align: center;
font-size: 1rem;
font-weight: 600;
font-family: inherit;
color: #0a1424;
background: transparent;
-moz-appearance: textfield;
}
.pdp__qty-input::-webkit-outer-spin-button,
.pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__add {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 28px;
background: #1d4ed8;
color: #fff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
letter-spacing: .02em;
cursor: pointer;
transition: background .2s, transform .15s, box-shadow .2s;
box-shadow: 0 8px 22px -10px rgba(29,78,216,.5);
}
.pdp__add:hover { background: #1e40af; transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(29,78,216,.6); }
.pdp__add:active { transform: translateY(0); }
.pdp__add.is-added {
background: #16a34a;
box-shadow: 0 8px 22px -10px rgba(22,163,74,.5);
}
.pdp__add-arrow { transition: transform .2s; font-size: 1.1rem; }
.pdp__add:hover .pdp__add-arrow { transform: translateX(4px); }
.pdp__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.pdp__badge {
background: #f1f5f9;
color: #334155;
padding: 6px 12px;
border-radius: 6px;
font-size: .76rem;
font-weight: 600;
letter-spacing: .02em;
}
.pdp__features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
.pdp__features li {
font-size: .92rem;
color: #475569;
padding-left: 28px;
position: relative;
line-height: 1.5;
}
.pdp__features li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
}
/* Body content sits below the hero */
body.page .wp-block-heading,
body.single .wp-block-heading { max-width: 820px; margin-left: auto; margin-right: auto; padding: 0 24px; }
body.page .wp-block-paragraph,
body.single .wp-block-paragraph,
body.page p:not(.pdp *),
body.page ul:not(.pdp *) { max-width: 820px; margin-left: auto !important; margin-right: auto !important; padding: 0 24px; }
@media (max-width: 900px) {
.pdp__hero { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
.pdp__name { font-size: 1.8rem; }
.pdp__price { font-size: 2rem; }
.pdp__purchase { flex-direction: column; }
}
/* ============================================================ */
/* v0.9.7 — PDP v2 (matches original BPC-157 demo) + */
/* cross-sell + shop card title+dose merge */
/* ============================================================ */
/* ---- Shop card title now includes dose as smaller span ---- */
.tpl-shop .card__name { line-height: 1.3; margin: 14px 0 2px; }
.tpl-shop .card__dose {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: .78rem;
font-weight: 400;
color: var(--ink-500, #64748b);
letter-spacing: .04em;
margin-top: 2px;
}
/* ---- Inline PDP2 on individual product pages ---- */
.tpl-pdp-inline { background: var(--paper, #fafbfc); margin: 0 -9999px; padding: 0 9999px; }
.tpl-pdp-inline .breadcrumb { padding: 24px 32px 0; max-width: 1280px; margin: 0 auto; font-size: .78rem; color: #64748b; display: flex; gap: 10px; letter-spacing: .02em; }
.tpl-pdp-inline .breadcrumb a { color: #64748b; text-decoration: none; }
.tpl-pdp-inline .breadcrumb a:hover { color: #0f172a; }
.tpl-pdp-inline .breadcrumb .sep { opacity: .5; }
.tpl-pdp-inline .breadcrumb .current { color: #0f172a; }
.pdp2 { padding: 32px 0 48px; }
.pdp2 .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.pdp2__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.pdp2__gallery { position: sticky; top: 80px; }
.pdp2__main {
position: relative;
aspect-ratio: 1/1;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%);
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 24px 24px 40px;
box-shadow: 0 12px 40px -20px rgba(10,20,36,.1);
}
.pdp2__main::before {
content: "";
position: absolute; left: 50%; top: 55%;
width: 85%; height: 75%;
transform: translate(-50%,-50%);
background: radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter: blur(16px);
pointer-events: none;
z-index: 0;
}
.pdp2__main img {
position: relative;
z-index: 1;
width: auto;
height: auto;
max-width: 70%;
max-height: 100%;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18));
}
.pdp2__rate {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
background: #fff;
padding: 6px 12px;
border-radius: 100px;
font-size: .78rem;
font-weight: 600;
color: #334155;
box-shadow: 0 4px 12px -4px rgba(10,20,36,.15);
display: flex;
align-items: center;
gap: 6px;
}
.pdp2__rate .star { color: #eab308; }
.pdp2__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pdp2__thumb {
aspect-ratio: 1/1;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%);
border-radius: 10px;
border: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
cursor: pointer;
transition: border-color .15s;
}
.pdp2__thumb.active { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29,78,216,.1); }
.pdp2__thumb:hover { border-color: #1d4ed8; }
.pdp2__thumb img { max-width: 85%; max-height: 85%; object-fit: contain; }
.pdp2__coa {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 10px 14px;
background: #fff;
border: 1px dashed rgba(10,20,36,.15);
border-radius: 8px;
font-size: .82rem;
color: #475569;
text-decoration: none;
font-family: 'JetBrains Mono', monospace;
}
.pdp2__coa:hover { border-color: #1d4ed8; color: #1d4ed8; }
.pdp2__coa svg { width: 16px; height: 16px; flex-shrink: 0; }
.pdp2__info { padding-top: 8px; }
.pdp2__eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #1d4ed8;
margin-bottom: 14px;
}
.pdp2__info h1 {
font-size: clamp(2rem, 3.6vw, 3rem);
margin: 0 0 12px;
letter-spacing: -.02em;
font-weight: 600;
color: #0a1424;
line-height: 1.08;
}
.pdp2__sub {
font-size: 1.02rem;
color: #475569;
line-height: 1.55;
margin: 0 0 20px;
}
.pdp2__rating {
display: flex;
align-items: center;
gap: 10px;
font-size: .88rem;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(10,20,36,.08);
}
.pdp2__rating .stars { color: #eab308; letter-spacing: .1em; }
.pdp2__rating a { color: #475569; text-decoration: underline; }
.pdp2__price-row {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 24px;
}
.pdp2__price-row .price-current { font-size: 2.4rem; font-weight: 700; color: #0a1424; letter-spacing: -.02em; }
.pdp2__price-row .price-was { font-size: 1.1rem; color: #94a3b8; text-decoration: line-through; }
.pdp2__price-row .price-save { font-size: .8rem; background: #dcfce7; color: #166534; padding: 3px 10px; border-radius: 6px; font-weight: 600; }
.pdp2__variant { margin-bottom: 24px; }
.variant-label { font-size: .85rem; color: #64748b; margin-bottom: 10px; }
.variant-label .selected { color: #0a1424; font-weight: 600; }
.variant-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pill {
padding: 10px 16px;
background: #fff;
border: 1px solid rgba(10,20,36,.15);
border-radius: 8px;
font-family: inherit;
font-size: .88rem;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: all .15s;
}
.variant-pill:hover { border-color: #1d4ed8; color: #1d4ed8; }
.variant-pill.active { border-color: #1d4ed8; background: rgba(29,78,216,.05); color: #1d4ed8; font-weight: 600; }
.pdp2__purchase {
display: flex;
gap: 12px;
margin-bottom: 28px;
}
.pdp2__qty {
display: flex;
align-items: center;
border: 1px solid rgba(10,20,36,.15);
border-radius: 10px;
overflow: hidden;
background: #fff;
flex-shrink: 0;
}
.pdp2__qty-btn { width: 44px; height: 54px; border: none; background: transparent; font-size: 1.2rem; font-weight: 600; color: #1d4ed8; cursor: pointer; }
.pdp2__qty-btn:hover { background: #f1f5f9; }
.pdp2__qty-input { width: 52px; height: 54px; border: none; border-left: 1px solid rgba(10,20,36,.1); border-right: 1px solid rgba(10,20,36,.1); text-align: center; font-size: 1rem; font-weight: 600; -moz-appearance: textfield; background: transparent; color: #0a1424; font-family: inherit; }
.pdp2__qty-input::-webkit-outer-spin-button,
.pdp2__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp2__add {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 28px;
background: #0a1424;
color: #fff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
letter-spacing: .02em;
cursor: pointer;
transition: background .2s, transform .15s;
box-shadow: 0 8px 22px -10px rgba(10,20,36,.4);
}
.pdp2__add:hover { background: #1d4ed8; transform: translateY(-1px); }
.pdp2__add.is-added { background: #16a34a !important; }
.pdp2__trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px 0;
border-top: 1px solid rgba(10,20,36,.08);
border-bottom: 1px solid rgba(10,20,36,.08);
}
.pdp2__trust-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #475569; font-weight: 500; }
.pdp2__trust-item svg { width: 20px; height: 20px; color: #1d4ed8; flex-shrink: 0; }
.pdp2__pay { font-size: .8rem; color: #475569; text-align: center; margin: 16px 0 0; line-height: 1.5; }
/* ---- Cross-sell row ---- */
.cross-sell { padding: 56px 0; background: #f8fafc; margin: 48px 0 0; }
.cross-sell .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cross-sell__title { font-size: 1.6rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.cross-sell__sub { font-size: .95rem; color: #64748b; margin: 0 0 28px; }
.cross-sell__grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.cross-sell__grid::-webkit-scrollbar { height: 7px; }
.cross-sell__grid::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.cross-sell__grid::-webkit-scrollbar-track { background: transparent; }
.cross-sell__grid > * { flex: 0 0 210px; scroll-snap-align: start; }
.cross-card {
background: #fff;
border-radius: 12px;
border: 1px solid rgba(10,20,36,.06);
padding: 20px;
text-decoration: none;
color: inherit;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cross-card:hover { transform: translateY(-3px); border-color: #1d4ed8; box-shadow: 0 12px 28px -12px rgba(29,78,216,.18); }
.cross-card__media {
aspect-ratio: 4/5;
background: radial-gradient(70% 60% at 50% 42%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin-bottom: 12px;
}
.cross-card__media img { max-width: 86%; max-height: 96%; object-fit: contain; object-position: center; }
.cross-card__name { font-size: 1rem; font-weight: 600; color: #0a1424; margin-bottom: 2px; }
.cross-card__dose { font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: #64748b; margin-bottom: 8px; }
.cross-card__price { font-size: 1.1rem; font-weight: 700; color: #1d4ed8; }
/* Hide the duplicate post title since our own h1 is inside .pdp2 */
body.page .wp-block-post-title { display: none !important; }
/* Article body paragraphs constrain below hero */
body.page .wp-block-heading,
body.page .wp-block-paragraph,
body.page p:not(.tpl-pdp-inline *):not(.cross-sell *),
body.page ul:not(.tpl-pdp-inline *):not(.cross-sell *) {
max-width: 820px;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 24px;
}
.tpl-pdp-inline ~ * { max-width: 820px; margin-left: auto !important; margin-right: auto !important; padding: 0 24px; }
.cross-sell { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 900px) {
.pdp2__grid { grid-template-columns: 1fr; gap: 32px; }
.pdp2__gallery { position: static; }
.pdp2__trust { grid-template-columns: 1fr; gap: 12px; }
}
/* ============================================================ */
/* v0.9.8 -- fix PDP width pinched by theme contentSize 780px */
/* Break .pdp2 and cross-sell out of constrained layout */
/* ============================================================ */
/* Break out to full viewport width, then re-center a 1280px wrap */
.tpl-pdp-inline {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
padding: 0 !important;
}
.cross-sell {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
padding: 56px 0 !important;
}
/* PDP gallery + info room to breathe */
.pdp2 { padding: 32px 0 48px !important; }
.pdp2 .wrap {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
.pdp2__grid {
display: grid !important;
grid-template-columns: 1.1fr 1fr !important;
gap: 64px !important;
}
/* Body content (About, Reconstitution sections) stays readable width */
.tpl-pdp-inline ~ .wp-block-heading,
.tpl-pdp-inline ~ .wp-block-paragraph,
.tpl-pdp-inline ~ .wp-block-list,
.tpl-pdp-inline ~ p,
.tpl-pdp-inline ~ ul,
.tpl-pdp-inline ~ h2,
.tpl-pdp-inline ~ h3 {
max-width: 780px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Cross-sell inner also re-contained */
.cross-sell .wrap {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
/* kill the body.page constraints I added before (they were too aggressive) */
body.page .wp-block-heading:not(.tpl-pdp-inline *):not(.cross-sell *),
body.page .wp-block-paragraph:not(.tpl-pdp-inline *):not(.cross-sell *) {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
/* Mobile */
@media (max-width: 900px) {
.pdp2__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
.pdp2 .wrap, .cross-sell .wrap { padding: 0 24px !important; }
}
/* ============================================================ */
/* Cross-sell cards v0.9.9 -- with Add to Cart button */
/* ============================================================ */
.cross-card {
background: #fff;
border-radius: 12px;
border: 1px solid rgba(10,20,36,.06);
padding: 20px;
display: flex;
flex-direction: column;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cross-card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
.cross-card__link {
display: block;
text-decoration: none;
color: inherit;
flex: 1;
}
.cross-card__add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: 14px;
padding: 10px 16px;
background: #0a1424;
color: #fff;
border: none;
border-radius: 8px;
font-family: inherit;
font-size: .86rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, transform .15s;
}
.cross-card__add:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
.cross-card__add.is-added {
background: #16a34a !important;
}
/* ============================================================ */
/* Legal pages (Terms, Privacy, RUA) v0.9.10 */
/* ============================================================ */
.legal {
max-width: 780px;
margin: 48px auto 32px;
padding: 0 24px;
}
.legal__head {
margin-bottom: 40px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(10,20,36,.08);
}
.legal__eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: #1d4ed8;
margin-bottom: 14px;
}
.legal__head h1 {
font-size: clamp(2.2rem, 4vw, 3rem);
margin: 0 0 16px;
letter-spacing: -.02em;
font-weight: 600;
color: #0a1424;
}
.legal__effective {
font-size: .88rem;
color: #64748b;
margin: 0;
}
.legal__disclaimer {
background: #fffaeb;
border: 1px solid #fde68a;
border-radius: 8px;
padding: 16px 20px;
font-size: .92rem;
color: #78350f;
line-height: 1.6;
margin-top: 24px;
}
.legal__footnote {
margin-top: 48px;
padding: 20px;
background: #f1f5f9;
border-radius: 8px;
font-size: .85rem;
color: #64748b;
}
/* Legal body content — reuse page body styling */
body.page-terms h2, body.page-privacy h2, body.page-research-use-agreement h2,
body[class*="page-id-"] h2 {
font-size: 1.4rem;
margin: 40px 0 14px;
letter-spacing: -.01em;
}
body.page-terms h3, body.page-privacy h3, body.page-research-use-agreement h3,
body[class*="page-id-"] h3 {
font-size: 1.1rem;
margin: 24px 0 8px;
}
/* Constrain legal page content width */
body.page-terms .wp-block-heading,
body.page-privacy .wp-block-heading,
body.page-research-use-agreement .wp-block-heading,
body.page-terms .wp-block-paragraph,
body.page-privacy .wp-block-paragraph,
body.page-research-use-agreement .wp-block-paragraph,
body.page-terms p, body.page-terms ul, body.page-terms ol,
body.page-privacy p, body.page-privacy ul, body.page-privacy ol,
body.page-research-use-agreement p, body.page-research-use-agreement ul, body.page-research-use-agreement ol {
max-width: 780px;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 24px;
}
/* ============================================================ */
/* v1.0.0 -- Restyle WooCommerce PDP to match original PDP */
/* ============================================================ */
/* Outer layout */
body.single-product .wp-block-woocommerce-single-product { max-width: none; }
.pdp2-wrap { background: var(--paper, #fafbfc); padding-bottom: 40px; }
/* Constrain WC product image block */
.pdp2__main .wp-block-woocommerce-product-image,
.pdp2__main .wc-block-components-product-image {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
border-radius: 16px !important;
overflow: hidden !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 24px 24px 40px !important;
position: relative !important;
box-shadow: 0 12px 40px -20px rgba(10,20,36,.1) !important;
margin: 0 !important;
}
.pdp2__main .wc-block-components-product-image::before,
.pdp2__main .wp-block-woocommerce-product-image::before {
content: "";
position: absolute; left: 50%; top: 55%;
width: 85%; height: 75%;
transform: translate(-50%,-50%);
background: radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter: blur(16px);
pointer-events: none;
z-index: 0;
}
.pdp2__main img {
position: relative !important;
z-index: 1 !important;
width: auto !important;
height: auto !important;
max-width: 70% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
filter: drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18)) !important;
margin: 0 !important;
}
/* Sale badge positioning */
.pdp2__main .wc-block-components-product-sale-badge {
position: absolute !important;
top: 16px !important;
left: 16px !important;
right: auto !important;
z-index: 3 !important;
background: #1d4ed8 !important;
color: #fff !important;
padding: 5px 11px !important;
border-radius: 6px !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .7rem !important;
letter-spacing: .08em !important;
}
/* Info panel typography */
.pdp2__info { padding-top: 0; }
.pdp2__info .wc-block-components-product-sku,
.pdp2__info .product_meta { font-family: 'JetBrains Mono', monospace; font-size: .72rem !important; letter-spacing: .18em; text-transform: uppercase; color: #1d4ed8 !important; margin-bottom: 14px !important; }
.pdp2__title, body.single-product h1.entry-title, body.single-product .wp-block-post-title {
font-size: clamp(2rem, 3.6vw, 3rem) !important;
margin: 0 0 12px !important;
letter-spacing: -.02em !important;
font-weight: 600 !important;
color: #0a1424 !important;
line-height: 1.08 !important;
}
.pdp2__info .wp-block-woocommerce-product-summary,
.pdp2__info .woocommerce-product-details__short-description {
font-size: 1.02rem !important;
color: #475569 !important;
line-height: 1.55 !important;
margin: 0 0 20px !important;
}
/* Price row - big price with strikethrough */
.pdp2__price-row { margin: 16px 0 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(10,20,36,.08); }
.pdp2__price-row .wp-block-woocommerce-product-price { font-size: 2rem !important; }
.pdp2__price-row .woocommerce-Price-amount { font-weight: 700; color: #0a1424; letter-spacing: -.02em; }
.pdp2__price-row del { color: #94a3b8 !important; font-weight: 400 !important; margin-right: 10px; font-size: 1.1rem !important; }
.pdp2__price-row ins { text-decoration: none !important; font-size: 2.4rem !important; }
/* Stock indicator */
.pdp2__stock-row { margin-bottom: 20px; }
.pdp2__stock-row .wc-block-components-product-stock-indicator--in-stock {
color: #16a34a !important;
font-weight: 500;
font-size: .9rem;
}
.pdp2__stock-row .wc-block-components-product-stock-indicator--in-stock::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 3px rgba(22,163,74,.2);
margin-right: 8px;
vertical-align: middle;
}
/* Purchase / Add to Cart form */
.pdp2__purchase { margin: 0 0 28px; }
.pdp2__purchase form.cart {
display: flex !important;
gap: 12px !important;
align-items: stretch !important;
margin: 0 !important;
}
.pdp2__purchase .quantity {
display: flex !important;
align-items: center !important;
border: 1px solid rgba(10,20,36,.15) !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #fff !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
.pdp2__purchase .quantity input {
width: 52px !important;
height: 54px !important;
border: none !important;
text-align: center !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
background: transparent !important;
font-family: inherit !important;
padding: 0 !important;
-moz-appearance: textfield;
}
.pdp2__purchase .quantity input::-webkit-outer-spin-button,
.pdp2__purchase .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp2__purchase button.single_add_to_cart_button,
.pdp2__purchase .single_add_to_cart_button {
flex: 1 !important;
padding: 14px 28px !important;
background: #0a1424 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
cursor: pointer !important;
transition: background .2s, transform .15s !important;
box-shadow: 0 8px 22px -10px rgba(10,20,36,.4) !important;
text-transform: none !important;
width: auto !important;
line-height: 1.2 !important;
}
.pdp2__purchase button.single_add_to_cart_button:hover {
background: #1d4ed8 !important;
transform: translateY(-1px) !important;
}
/* Trust row */
.pdp2__trust {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
padding: 20px 0 !important;
border-top: 1px solid rgba(10,20,36,.08) !important;
border-bottom: 1px solid rgba(10,20,36,.08) !important;
margin-top: 0 !important;
}
.pdp2__trust-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #475569; font-weight: 500; }
.pdp2__trust-item svg { width: 20px; height: 20px; color: #1d4ed8; flex-shrink: 0; }
/* Tabs (Description / Reviews) */
.pdp2-description { padding: 48px 0 32px; background: #fff; }
.pdp2-description .wrap { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.woocommerce-tabs .tabs {
border-bottom: 1px solid rgba(10,20,36,.1) !important;
padding: 0 !important;
margin: 0 0 32px !important;
background: transparent !important;
}
.woocommerce-tabs .tabs::before,
.woocommerce-tabs .tabs::after { display: none !important; }
.woocommerce-tabs .tabs li {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
margin: 0 28px 0 0 !important;
padding: 0 !important;
}
.woocommerce-tabs .tabs li a {
padding: 14px 0 !important;
color: #64748b !important;
font-weight: 500 !important;
font-size: .98rem !important;
border-bottom: 2px solid transparent !important;
transition: color .15s, border-color .15s;
text-transform: none !important;
}
.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li:hover a {
color: #0a1424 !important;
border-bottom-color: #1d4ed8 !important;
}
.woocommerce-Tabs-panel h2:first-child { display: none !important; }
.woocommerce-Tabs-panel h3 { font-size: 1.15rem; margin: 24px 0 10px; color: #1d4ed8; }
.woocommerce-Tabs-panel p { line-height: 1.7; color: #334155; }
/* Related products (cross-sell style) */
.wp-block-woocommerce-related-products {
padding: 56px 0 40px !important;
background: #f8fafc !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
}
.wp-block-woocommerce-related-products > * { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; padding: 0 32px !important; }
.wp-block-woocommerce-related-products .cross-sell__title { font-size: 1.6rem !important; margin: 0 0 24px !important; font-weight: 600 !important; letter-spacing: -.01em; }
.wp-block-woocommerce-related-products .cross-card {
background: #fff !important;
border-radius: 12px !important;
border: 1px solid rgba(10,20,36,.06) !important;
padding: 20px !important;
gap: 10px !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.wp-block-woocommerce-related-products .cross-card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
.wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
border-radius: 8px !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 10px 10px 20px !important;
}
.wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image img {
max-width: 65% !important;
max-height: 90% !important;
object-fit: contain !important;
object-position: center bottom !important;
}
.wp-block-woocommerce-related-products .cross-card .cross-card__name { font-size: 1rem !important; font-weight: 600; margin: 0; }
.wp-block-woocommerce-related-products .cross-card .cross-card__name a { color: #0a1424 !important; text-decoration: none; }
.wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-price { font-size: 1.1rem !important; font-weight: 700; color: #1d4ed8 !important; }
.wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a,
.wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button button {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 16px !important;
border-radius: 8px !important;
font-size: .86rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
margin-top: 10px !important;
text-transform: none !important;
}
.wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a:hover { background: #1d4ed8 !important; }
/* Hide WC's duplicate breadcrumb */
body.single-product .wp-block-breadcrumbs,
body.single-product .woocommerce-breadcrumb { display: none !important; }
/* Hide default WC gallery thumbnails (we're using single image for now) */
body.single-product .flex-control-thumbs { display: none !important; }
/* Hide the page title auto-render since post-title is inside pdp2__info.
Exempt cross-sell card titles (.card__name) — we want those to show. */
body.single-product .wp-block-post-title:not(.pdp2__title):not(.card__name) { display: none !important; }
@media (max-width: 900px) {
.pdp2__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
.pdp2__gallery { position: static !important; }
.pdp2__purchase form.cart { flex-direction: column !important; }
.pdp2__trust { grid-template-columns: 1fr !important; gap: 12px !important; }
.wp-block-woocommerce-related-products { padding: 32px 0 !important; }
}
/* ============================================================ */
/* v1.0.1 -- Fix WC image sizing on PDP + cross-sell cards */
/* ============================================================ */
/* Main PDP image — FORCE contain, not cover */
body.single-product .pdp2__main,
body.single-product .pdp2__main .wp-block-woocommerce-product-image,
body.single-product .pdp2__main .wc-block-components-product-image,
body.single-product .pdp2__main .wc-block-components-product-image__inner-container,
body.single-product .pdp2__main a {
aspect-ratio: 1/1 !important;
width: 100% !important;
max-width: 520px !important;
margin: 0 auto !important;
display: block !important;
position: relative !important;
overflow: hidden !important;
}
body.single-product .pdp2__main {
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
border-radius: 16px !important;
padding: 32px 24px 40px !important;
box-shadow: 0 12px 40px -20px rgba(10,20,36,.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* strip wrappers inside the image block */
body.single-product .pdp2__main .wp-block-woocommerce-product-image,
body.single-product .pdp2__main .wc-block-components-product-image,
body.single-product .pdp2__main .wc-block-components-product-image__inner-container {
background: none !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
aspect-ratio: auto !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.single-product .pdp2__main img,
body.single-product .pdp2__main picture,
body.single-product .pdp2__main picture img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter: drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18)) !important;
aspect-ratio: auto !important;
}
/* Cross-sell cards — make images NORMAL SIZE, not giant */
.wp-block-woocommerce-related-products .wc-block-components-product-image,
.wp-block-woocommerce-related-products .wp-block-woocommerce-product-image,
.wp-block-woocommerce-related-products .cross-card > div:first-child,
.wp-block-woocommerce-related-products .cross-card a {
aspect-ratio: 1/1 !important;
max-width: 100% !important;
width: 100% !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
overflow: hidden !important;
box-shadow: none !important;
}
.wp-block-woocommerce-related-products .wc-block-components-product-image__inner-container,
.wp-block-woocommerce-related-products .wc-block-components-product-image a {
background: transparent !important;
padding: 0 !important;
aspect-ratio: auto !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.wp-block-woocommerce-related-products .cross-card img,
.wp-block-woocommerce-related-products .cross-card picture,
.wp-block-woocommerce-related-products .cross-card picture img {
width: auto !important;
height: auto !important;
max-width: 65% !important;
max-height: 90% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter: drop-shadow(0 12px 16px rgba(15,23,42,.12)) drop-shadow(0 3px 8px rgba(29,78,216,.12)) !important;
aspect-ratio: auto !important;
}
/* Sale badge on cross-sell cards */
.wp-block-woocommerce-related-products .wc-block-components-product-sale-badge {
position: absolute !important;
top: 10px !important;
right: 10px !important;
background: #1d4ed8 !important;
color: #fff !important;
border: none !important;
border-radius: 4px !important;
padding: 3px 8px !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .64rem !important;
letter-spacing: .08em !important;
z-index: 5 !important;
}
/* Cross-card title link */
.wp-block-woocommerce-related-products .cross-card .wp-block-post-title {
font-size: 1rem !important;
margin: 12px 0 6px !important;
padding: 0 !important;
}
.wp-block-woocommerce-related-products .cross-card .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
}
/* Hide additional info tab, keep description + reviews */
body.single-product li.additional_information_tab,
body.single-product li.woocommerce-tabs-panel--additional_information,
body.single-product .woocommerce-Tabs-panel--additional_information { display: none !important; }
/* Breadcrumb position tweak */
.tpl-pdp-inline .breadcrumb { padding: 20px 32px 0 !important; }
/* Container width — make PDP grid wider */
body.single-product .pdp2 { padding: 24px 0 48px !important; }
body.single-product .pdp2 .wrap {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
body.single-product .pdp2__grid {
display: grid !important;
grid-template-columns: 1.1fr 1fr !important;
gap: 64px !important;
align-items: start !important;
background: transparent !important;
}
@media (max-width: 900px) {
body.single-product .pdp2__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
body.single-product .pdp2__main { max-width: 420px !important; }
}
/* ============================================================ */
/* v1.0.2 -- Force PDP full width, override contentSize cap */
/* ============================================================ */
/* Single product page: outer wrappers break out to full viewport */
body.single-product .pdp2-wrap,
body.single-product .wp-block-woocommerce-single-product,
body.single-product .pdp2 {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Kill the inherited --wp--style--global--content-size on PDP containers */
body.single-product .wp-block-group,
body.single-product .wp-container-core-group-is-layout-flow {
max-width: none !important;
}
/* Re-apply controlled wrap ONLY inside .pdp2 .wrap */
body.single-product .pdp2 .wrap {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
/* PDP grid — wider image column, more gap */
body.single-product .pdp2__grid {
display: grid !important;
grid-template-columns: 1.2fr 1fr !important;
gap: 80px !important;
align-items: start !important;
max-width: 1200px !important;
margin: 0 auto !important;
}
/* Main image: bigger, centered in its column */
body.single-product .pdp2__main {
max-width: 100% !important;
width: 100% !important;
min-height: 480px !important;
aspect-ratio: 1/1 !important;
margin: 0 !important;
}
body.single-product .pdp2__main img,
body.single-product .pdp2__main picture img {
max-width: 78% !important;
max-height: 95% !important;
}
/* Info panel: let it use its full column */
body.single-product .pdp2__info {
max-width: 100% !important;
padding-top: 8px !important;
}
/* Description area below — proper container */
body.single-product .pdp2-description {
background: #fff;
margin-top: 40px;
padding: 48px 0 !important;
max-width: none !important;
}
body.single-product .pdp2-description .wrap {
max-width: 980px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
/* Related products full-viewport section */
body.single-product .wp-block-woocommerce-related-products {
padding: 56px 0 64px !important;
background: #f8fafc !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
body.single-product .wp-block-woocommerce-related-products > * {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
max-width: 1200px !important;
padding: 0 40px !important;
}
/* Mobile */
@media (max-width: 900px) {
body.single-product .pdp2__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
body.single-product .pdp2 .wrap,
body.single-product .pdp2-description .wrap,
body.single-product .wp-block-woocommerce-related-products > * { padding: 0 24px !important; }
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template { grid-template-columns: 1fr !important; padding: 0 24px !important; }
body.single-product .pdp2__main { min-height: 360px !important; }
}
/* ============================================================ */
/* v1.1.0 -- PDP image sizing, cross-sell cards, hero CTAs */
/* ============================================================ */
/* ---- 1. Shrink main PDP image ~40-50% smaller, force center ---- */
body.single-product .pdp2__main {
max-width: 420px !important;
min-height: 380px !important;
aspect-ratio: 1/1 !important;
margin: 0 auto !important;
padding: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.single-product .pdp2__main img,
body.single-product .pdp2__main picture img {
max-width: 65% !important;
max-height: 80% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
display: block !important;
}
/* wrapper around image needs center alignment too */
body.single-product .pdp2__gallery {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* ---- 2. Cross-sell cards: consistent size + full vials ---- */
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template,
body.single-product .wp-block-woocommerce-related-products ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 32px !important;
list-style: none !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card,
body.single-product .wp-block-woocommerce-related-products .product {
background: #fff !important;
border-radius: 12px !important;
border: 1px solid rgba(10,20,36,.06) !important;
padding: 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
min-height: 420px;
}
body.single-product .wp-block-woocommerce-related-products .cross-card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* image container inside each cross card — FORCE consistent square */
body.single-product .wp-block-woocommerce-related-products .cross-card > * {
width: 100% !important;
}
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-image,
body.single-product .wp-block-woocommerce-related-products .wc-block-components-product-image,
body.single-product .wp-block-woocommerce-related-products .wc-block-components-product-image__inner-container,
body.single-product .wp-block-woocommerce-related-products .wc-block-components-product-image a {
aspect-ratio: 1/1 !important;
width: 100% !important;
max-width: 100% !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
border-radius: 8px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
box-shadow: none !important;
margin: 0 !important;
position: relative !important;
}
/* v1.3.11: legacy rule removed -- capped vials to 65%/90%, making them tiny.
Final rules at end of file with higher specificity now control sizing. */
/* card meta below image */
body.single-product .wp-block-woocommerce-related-products .cross-card__name,
body.single-product .wp-block-woocommerce-related-products .wp-block-post-title {
font-size: 1rem !important;
font-weight: 600 !important;
margin: 12px 0 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card__name a,
body.single-product .wp-block-woocommerce-related-products .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
}
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-price {
font-size: 1.05rem !important;
margin: 0 0 12px !important;
color: #1d4ed8 !important;
font-weight: 700 !important;
}
/* Cross-sell add-to-cart button: keep consistent */
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-button,
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-button a,
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-button button {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 16px !important;
border-radius: 8px !important;
font-size: .86rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
border: none !important;
margin-top: auto !important;
text-transform: none !important;
}
/* sale badge positioning on cross cards */
body.single-product .wp-block-woocommerce-related-products .wc-block-components-product-sale-badge {
position: absolute !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .6rem !important;
letter-spacing: .1em !important;
padding: 3px 8px !important;
border-radius: 4px !important;
z-index: 5 !important;
}
/* ---- 3. Hero CTA buttons + category pills — premium glass feel ---- */
.peptigo-hero__cta {
display: flex;
gap: 14px;
justify-content: center;
margin: 32px 0 20px;
}
.peptigo-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
font-size: .95rem;
letter-spacing: .01em;
border-radius: 6px;
text-decoration: none;
transition: all .25s cubic-bezier(.2,.8,.2,1);
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.peptigo-btn--primary {
background: #fff;
color: #0a1424;
box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 24px -12px rgba(255,255,255,.4);
}
.peptigo-btn--primary:hover {
background: #f1f5f9;
transform: translateY(-1px);
box-shadow: 0 12px 32px -12px rgba(255,255,255,.5);
}
.peptigo-btn--ghost {
background: rgba(255,255,255,.06);
color: #fff;
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.peptigo-btn--ghost:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.35);
transform: translateY(-1px);
}
/* Category pills — replace generic arrow chips with categorical pills */
.peptigo-cats {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 18px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.peptigo-cats a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.15);
border-radius: 100px;
font-family: 'JetBrains Mono', monospace;
font-size: .76rem;
letter-spacing: .16em;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: all .2s;
}
.peptigo-cats a:hover {
background: rgba(255,255,255,.1);
border-color: rgba(96,165,250,.5);
color: #fff;
}
.peptigo-cats a .arrow {
opacity: .5;
transition: transform .2s, opacity .2s;
font-family: system-ui;
letter-spacing: 0;
}
.peptigo-cats a:hover .arrow {
opacity: 1;
transform: translateX(3px);
}
/* make the Most-Ordered card "Starting at" behavior cleaner — consistent CTA */
.peptigo-card__cta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: calc(100% - 28px) !important;
margin: 14px !important;
}
/* ============================================================ */
/* v1.1.1 -- Article TOC active state + Related products row */
/* ============================================================ */
/* TOC active link highlight */
.tpl-article .art__toc li a.is-active {
color: #1d4ed8 !important;
font-weight: 600 !important;
}
.tpl-article .art__toc li {
border-left: 2px solid rgba(10,20,36,.08);
padding: 6px 0 6px 14px;
transition: border-color .15s;
}
.tpl-article .art__toc li:has(a.is-active) {
border-left-color: #1d4ed8;
}
/* TOC responsive: hide on mobile */
@media (max-width: 900px) {
.tpl-article .art__body { grid-template-columns: 1fr !important; }
.tpl-article .art__toc { display: none !important; }
}
/* Related products at bottom of article */
.art__related-wrap {
background: #f8fafc;
padding: 56px 0 64px;
margin-top: 48px;
border-top: 1px solid rgba(10,20,36,.08);
}
.art__related-wrap .wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
.art__related-heading {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -.01em;
margin: 0 0 28px;
text-align: center;
}
/* Product collection grid */
.tpl-article .art__related-grid,
.tpl-article .wp-block-woocommerce-product-collection {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
max-width: 1100px !important;
margin: 0 auto !important;
list-style: none !important;
padding: 0 !important;
}
.tpl-article .art__related-grid .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
width: 100% !important;
list-style: none !important;
padding: 0 !important;
}
.tpl-article .art__related-card,
.tpl-article .art__related-grid .product,
.tpl-article .art__related-grid .wp-block-woocommerce-product-template > * {
background: #fff !important;
border-radius: 12px !important;
border: 1px solid rgba(10,20,36,.06) !important;
padding: 18px !important;
display: flex !important;
flex-direction: column !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
text-decoration: none !important;
}
.tpl-article .art__related-card:hover,
.tpl-article .art__related-grid .product:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* Image in related product card */
.tpl-article .art__related-grid .wp-block-woocommerce-product-image,
.tpl-article .art__related-grid .wc-block-components-product-image,
.tpl-article .art__related-grid .wc-block-components-product-image__inner-container {
aspect-ratio: 1/1 !important;
width: 100% !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
border-radius: 8px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px !important;
margin: 0 0 12px !important;
position: relative !important;
}
.tpl-article .art__related-grid img {
width: auto !important;
height: auto !important;
max-width: 65% !important;
max-height: 90% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
aspect-ratio: auto !important;
}
.tpl-article .art__related-grid .art__related-name,
.tpl-article .art__related-grid .wp-block-post-title {
font-size: 1rem !important;
font-weight: 600 !important;
margin: 4px 0 !important;
line-height: 1.3 !important;
}
.tpl-article .art__related-grid .art__related-name a,
.tpl-article .art__related-grid .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
}
.tpl-article .art__related-grid .wp-block-woocommerce-product-price {
font-size: 1rem !important;
color: #1d4ed8 !important;
font-weight: 700 !important;
margin: 0 0 10px !important;
}
.tpl-article .art__related-grid .wp-block-woocommerce-product-button a,
.tpl-article .art__related-grid .wp-block-woocommerce-product-button button {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 16px !important;
border-radius: 8px !important;
font-size: .86rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
border: none !important;
margin-top: auto !important;
text-transform: none !important;
}
.tpl-article .art__related-grid .wp-block-woocommerce-product-button a:hover {
background: #1d4ed8 !important;
}
/* Sale badge on related products */
.tpl-article .art__related-grid .wc-block-components-product-sale-badge {
position: absolute !important;
top: 8px !important;
right: 8px !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .6rem !important;
letter-spacing: .1em !important;
padding: 3px 8px !important;
border-radius: 4px !important;
z-index: 5 !important;
}
/* Wide article body - allow prose room to breathe */
.tpl-article .art__body {
display: grid !important;
grid-template-columns: 220px 1fr !important;
gap: 48px !important;
padding-bottom: 48px !important;
}
.tpl-article .art__prose {
max-width: 720px !important;
font-size: 1.05rem !important;
line-height: 1.7 !important;
color: #1e293b !important;
}
.tpl-article .art__prose > * {
max-width: 720px !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (max-width: 900px) {
.tpl-article .art__related-grid,
.tpl-article .wp-block-woocommerce-product-collection,
.tpl-article .art__related-grid .wc-block-product-template {
grid-template-columns: 1fr !important;
}
.art__related-wrap .wrap { padding: 0 24px; }
.tpl-article .art__prose { max-width: 100% !important; }
}
/* ============================================================ */
/* v1.1.2 -- Card heights, hero pill contrast, research styling */
/* ============================================================ */
/* ---- 1. Homepage "Most-Ordered" cards: equal heights, no CTA overflow ---- */
.peptigo-grid { align-items: stretch !important; }
.peptigo-card {
display: flex !important;
flex-direction: column !important;
height: 100%;
}
.peptigo-card__media { flex-shrink: 0; }
.peptigo-card__body {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding: 18px 20px 10px !important;
}
.peptigo-card__body h3 {
font-size: 1.05rem !important;
margin: 0 0 4px !important;
line-height: 1.3 !important;
}
.peptigo-card__body p {
flex: 1 !important;
color: var(--ink-500, #64748b) !important;
font-size: .88rem !important;
line-height: 1.45 !important;
margin: 0 !important;
}
.peptigo-card__cta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin: 12px 14px 14px !important;
padding: 13px 16px !important;
background: #0a1424 !important;
color: #fff !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: .78rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
width: calc(100% - 28px) !important;
transition: background .25s;
text-decoration: none !important;
}
.peptigo-card__cta:hover { background: #1d4ed8 !important; }
.peptigo-card__cta > span {
font-weight: 700;
font-size: .86rem;
letter-spacing: .02em;
text-transform: none;
}
/* ---- 2. Hero category pills: fix text contrast ---- */
.peptigo-cats a {
background: rgba(10, 20, 36, .35) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, .2) !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .74rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
padding: 10px 18px !important;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.peptigo-cats a:hover {
background: rgba(29, 78, 216, .4) !important;
border-color: rgba(96, 165, 250, .6) !important;
color: #fff !important;
}
.peptigo-cats a .arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
background: rgba(255,255,255,.12);
border-radius: 50%;
font-size: .72rem;
opacity: 1;
margin-left: 4px;
color: #fff;
font-family: system-ui;
letter-spacing: 0;
}
/* Hero CTAs — slightly refined */
.peptigo-btn--primary {
background: #fff !important;
color: #0a1424 !important;
border: 1px solid rgba(10,20,36,.1) !important;
font-family: 'Inter Tight', system-ui !important;
box-shadow: 0 4px 20px -8px rgba(0,0,0,.15) !important;
}
.peptigo-btn--primary:hover {
background: #f8fafc !important;
transform: translateY(-1px) !important;
}
.peptigo-btn--ghost {
background: rgba(10,20,36,.25) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.25) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.peptigo-btn--ghost:hover {
background: rgba(29,78,216,.3) !important;
border-color: rgba(96,165,250,.5) !important;
}
/* ---- 3. Research archive page: dark titles, blue as accent only ---- */
.tpl-research .r-card h3,
.tpl-research .r-card__link h3 {
color: #0a1424 !important;
font-family: 'Inter Tight', system-ui, sans-serif !important;
}
.tpl-research .r-card:hover h3 { color: #1d4ed8 !important; }
.tpl-research .r-feat h2 { color: #0a1424 !important; }
.tpl-research .r-feat:hover h2 { color: #1d4ed8 !important; }
.tpl-research .r-card__link,
.tpl-research .r-feat { text-decoration: none !important; }
/* Article cards on research page — polish */
.tpl-research .r-card {
background: #fff;
border: 1px solid rgba(10,20,36,.08);
border-radius: 12px;
overflow: hidden;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tpl-research .r-card:hover {
transform: translateY(-3px);
border-color: rgba(29,78,216,.3);
box-shadow: 0 12px 32px -14px rgba(10,20,36,.15);
}
.tpl-research .r-card__body {
padding: 20px 22px 22px;
}
.tpl-research .r-card__tag {
font-family: 'JetBrains Mono', monospace;
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #1d4ed8;
margin-bottom: 10px;
display: inline-block;
}
.tpl-research .r-card h3 {
font-size: 1.12rem !important;
line-height: 1.3 !important;
margin: 0 0 10px !important;
letter-spacing: -.005em !important;
font-weight: 600 !important;
}
.tpl-research .r-card p {
color: #475569 !important;
font-size: .9rem !important;
line-height: 1.55 !important;
margin: 0 0 12px !important;
}
.tpl-research .r-card__meta {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
color: #94a3b8;
letter-spacing: .04em;
}
.tpl-research .r-card__media {
aspect-ratio: 4/3;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 55%, #f8fafc 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
.tpl-research .r-card__media img {
max-width: 60%;
max-height: 90%;
object-fit: contain;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.1));
}
/* Archive date-style instead of raw date dump */
.tpl-research .r-card .r-card__meta {
display: flex;
align-items: center;
gap: 8px;
}
/* If posts are rendered via native WP loop (block template), style them too */
.tpl-research .wp-block-post-title a,
.tpl-research .wp-block-post-title {
color: #0a1424 !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 1.2rem !important;
line-height: 1.3 !important;
letter-spacing: -.01em !important;
}
.tpl-research .wp-block-post-title:hover a,
.tpl-research a:hover .wp-block-post-title { color: #1d4ed8 !important; }
.tpl-research .wp-block-post-excerpt p,
.tpl-research .wp-block-post-excerpt {
color: #475569 !important;
font-size: .92rem !important;
line-height: 1.6 !important;
}
.tpl-research .wp-block-post-date {
font-family: 'JetBrains Mono', monospace !important;
font-size: .72rem !important;
color: #94a3b8 !important;
letter-spacing: .04em !important;
}
/* ============================================================ */
/* v1.1.3 -- Research cards layout + CTA overflow fix */
/* ============================================================ */
/* ---- 1. Research page: wider 3-column grid, no excerpt clutter ---- */
.tpl-research .wp-block-query.r-grid,
.tpl-research .r-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
list-style: none !important;
}
.tpl-research .wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.tpl-research .wp-block-post-template > li,
.tpl-research .wp-block-post-template > * {
list-style: none !important;
margin: 0 !important;
}
/* Research card styling for block-rendered posts */
.tpl-research .r-card {
background: #fff !important;
border: 1px solid rgba(10,20,36,.08) !important;
border-radius: 12px !important;
padding: 24px 26px !important;
display: flex !important;
flex-direction: column !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
min-height: 220px;
height: 100%;
text-decoration: none !important;
}
.tpl-research .r-card:hover {
transform: translateY(-3px);
border-color: rgba(29,78,216,.3);
box-shadow: 0 12px 32px -14px rgba(10,20,36,.15);
}
.tpl-research .r-card__body {
padding: 0 !important;
gap: 12px !important;
display: flex !important;
flex-direction: column !important;
flex: 1;
}
/* Hide excerpt on listing — cleaner look */
.tpl-research .r-card .wp-block-post-excerpt,
.tpl-research .r-grid .wp-block-post-excerpt {
display: none !important;
}
/* Tag */
.tpl-research .r-card .wp-block-post-terms,
.tpl-research .r-card__tag {
font-family: 'JetBrains Mono', monospace !important;
font-size: .66rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: #1d4ed8 !important;
margin: 0 0 4px !important;
order: 1;
}
.tpl-research .r-card .wp-block-post-terms a {
color: #1d4ed8 !important;
text-decoration: none !important;
}
/* Title — dominant, dark, wraps freely */
.tpl-research .r-card .wp-block-post-title {
font-size: 1.25rem !important;
line-height: 1.25 !important;
margin: 0 !important;
letter-spacing: -.01em !important;
font-weight: 600 !important;
color: #0a1424 !important;
order: 2;
flex: 1;
}
.tpl-research .r-card .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
font-family: 'Inter Tight', system-ui, sans-serif !important;
}
.tpl-research .r-card:hover .wp-block-post-title a { color: #1d4ed8 !important; }
/* Date — pushed to bottom */
.tpl-research .r-card .wp-block-post-date,
.tpl-research .r-card__meta {
font-family: 'JetBrains Mono', monospace !important;
font-size: .7rem !important;
color: #94a3b8 !important;
letter-spacing: .04em !important;
margin: 16px 0 0 !important;
order: 3;
}
/* Mobile */
@media (max-width: 900px) {
.tpl-research .wp-block-query.r-grid,
.tpl-research .wp-block-post-template,
.tpl-research .r-grid {
grid-template-columns: 1fr !important;
}
}
/* ---- 2. Homepage "Most-Ordered" cards: shrink CTA to always fit ---- */
.peptigo-card__cta {
padding: 11px 14px !important;
font-size: .7rem !important;
letter-spacing: .08em !important;
margin: 12px 14px 14px !important;
width: calc(100% - 28px) !important;
gap: 8px !important;
min-height: 44px;
}
.peptigo-card__cta > span {
font-weight: 700 !important;
font-size: .82rem !important;
letter-spacing: .01em !important;
text-transform: none !important;
flex-shrink: 0;
}
/* On narrower cards, allow stacking cleanly */
@media (max-width: 1100px) {
.peptigo-card__cta {
font-size: .66rem !important;
padding: 10px 12px !important;
}
.peptigo-card__cta > span {
font-size: .78rem !important;
}
}
/* Make featured grid have more room per card */
.peptigo-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 20px !important;
}
/* ============================================================ */
/* v1.1.4 -- Fix research archive grid nesting (cards were 1/9) */
/* ============================================================ */
/* OUTER query wrapper — just a flow container, NOT a grid */
.tpl-research .wp-block-query.r-grid {
display: block !important;
grid-template-columns: none !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
}
/* INNER post-template — THIS is the grid */
.tpl-research .wp-block-post-template,
.tpl-research .wp-block-post-template.is-flex-container,
.tpl-research .wp-block-post-template.is-flex-container.columns-3 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
flex-wrap: unset !important;
}
/* post items inside — no width cap */
.tpl-research .wp-block-post-template > li,
.tpl-research .wp-block-post-template > * {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100% !important;
flex: unset !important;
min-width: 0 !important;
}
/* Card inside each post iteration */
.tpl-research .wp-block-post-template .r-card {
width: 100% !important;
min-height: 200px;
}
@media (max-width: 900px) {
.tpl-research .wp-block-post-template,
.tpl-research .wp-block-post-template.is-flex-container.columns-3 {
grid-template-columns: 1fr !important;
}
}
/* 2-col at medium screens */
@media (max-width: 1100px) and (min-width: 901px) {
.tpl-research .wp-block-post-template,
.tpl-research .wp-block-post-template.is-flex-container.columns-3 {
grid-template-columns: 1fr 1fr !important;
}
}
/* ============================================================ */
/* v1.1.5 -- Cart page polish + ensure cross-sell clickable */
/* ============================================================ */
/* WC cart page container */
.tpl-cart-wc {
background: var(--paper, #fafbfc);
min-height: 60vh;
padding-bottom: 60px;
}
.tpl-cart-wc .wrap {
max-width: 1100px;
margin: 0 auto;
padding: 32px 32px 40px;
background: #fff;
border-radius: 16px;
border: 1px solid rgba(10,20,36,.06);
margin-top: 24px;
box-shadow: 0 12px 40px -24px rgba(10,20,36,.1);
}
.tpl-cart-wc .breadcrumb {
padding: 24px 32px 0;
max-width: 1100px;
margin: 0 auto;
font-size: .78rem;
color: #64748b;
display: flex;
gap: 10px;
align-items: center;
}
.tpl-cart-wc .breadcrumb a { color: #64748b; text-decoration: none; }
.tpl-cart-wc .breadcrumb a:hover { color: #0a1424; }
.tpl-cart-wc .breadcrumb .sep { opacity: .5; }
.tpl-cart-wc .breadcrumb .current { color: #0f172a; }
/* Style WC cart/checkout output */
.tpl-cart-wc .woocommerce,
.tpl-cart-wc .woocommerce-cart-form,
.tpl-cart-wc .woocommerce-checkout {
font-family: inherit;
}
.tpl-cart-wc .shop_table {
border: 1px solid rgba(10,20,36,.08) !important;
border-radius: 10px !important;
overflow: hidden;
}
.tpl-cart-wc .shop_table th {
background: #f8fafc !important;
color: #0a1424 !important;
font-weight: 600 !important;
text-transform: none !important;
font-size: .85rem !important;
padding: 14px !important;
}
.tpl-cart-wc .shop_table td {
padding: 16px 14px !important;
border-top: 1px solid rgba(10,20,36,.06) !important;
}
.tpl-cart-wc .cart_item .product-thumbnail img {
/* v1.3.43: force uniform 80x80 thumbnails (was only max-width,
which let images render at different heights based on aspect ratio) */
width: 80px !important;
height: 80px !important;
max-width: 80px !important;
max-height: 80px !important;
min-width: 80px !important;
min-height: 80px !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 8px !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
padding: 4px !important;
box-sizing: border-box !important;
display: block;
}
.tpl-cart-wc td.product-thumbnail {
width: 100px !important;
}
.tpl-cart-wc .product-name a {
color: #0a1424 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.tpl-cart-wc .button,
.tpl-cart-wc button.checkout-button,
.tpl-cart-wc .checkout-button {
background: #0a1424 !important;
color: #fff !important;
padding: 12px 24px !important;
border-radius: 8px !important;
border: none !important;
font-weight: 600 !important;
font-size: .95rem !important;
cursor: pointer !important;
text-transform: none !important;
text-shadow: none !important;
transition: background .15s;
}
.tpl-cart-wc .button:hover,
.tpl-cart-wc .checkout-button:hover {
background: #1d4ed8 !important;
}
.tpl-cart-wc .cart_totals h2 {
font-size: 1.3rem !important;
margin: 0 0 16px !important;
}
.tpl-cart-wc .woocommerce-message,
.tpl-cart-wc .woocommerce-notice,
.tpl-cart-wc .woocommerce-info {
background: #f1f5f9 !important;
border-left: 4px solid #1d4ed8 !important;
color: #0a1424 !important;
padding: 14px 18px !important;
border-radius: 0 8px 8px 0 !important;
margin-bottom: 20px !important;
}
.tpl-cart-wc .quantity input {
width: 60px;
padding: 8px;
border: 1px solid rgba(10,20,36,.15);
border-radius: 6px;
}
.tpl-cart-wc .coupon input[type="text"] {
padding: 10px 12px;
border: 1px solid rgba(10,20,36,.15);
border-radius: 6px;
margin-right: 8px;
}
/* Ensure cross-sell links on product pages are fully clickable */
body.single-product .wp-block-woocommerce-related-products a,
body.single-product .wp-block-woocommerce-related-products .wc-block-components-product-image a {
pointer-events: auto !important;
cursor: pointer !important;
position: relative;
z-index: 2;
}
body.single-product .wp-block-woocommerce-related-products .cross-card {
cursor: pointer;
position: relative;
}
body.single-product .wp-block-woocommerce-related-products .wp-block-post-title a {
display: block !important;
pointer-events: auto !important;
}
/* Empty cart state */
.tpl-cart-wc .cart-empty,
.tpl-cart-wc .wc-empty-cart-message,
.tpl-cart-wc .return-to-shop {
text-align: center;
padding: 48px 24px;
}
.tpl-cart-wc .cart-empty {
font-size: 1.1rem;
color: #475569;
}
.tpl-cart-wc .return-to-shop a {
display: inline-block;
background: #1d4ed8;
color: #fff;
padding: 12px 28px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
margin-top: 16px;
}
.tpl-cart-wc .return-to-shop a:hover { background: #1e40af; }
/* ============================================================ */
/* v1.1.6 -- Final fix: CTA overflow on .peptigo-card */
/* ============================================================ */
/* Reset and use box-model that ALWAYS fits within card */
.peptigo-card {
overflow: hidden !important; /* safety — nothing escapes the card */
}
.peptigo-card__cta {
box-sizing: border-box !important;
width: auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin: 12px 14px 14px !important;
padding: 11px 16px !important;
min-height: 44px !important;
background: #0a1424 !important;
color: #fff !important;
border-radius: 10px !important;
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: .72rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.peptigo-card__cta:hover { background: #1d4ed8 !important; }
.peptigo-card__cta > span {
font-weight: 700 !important;
font-size: .82rem !important;
letter-spacing: .01em !important;
text-transform: none !important;
flex-shrink: 0 !important;
}
/* the label "Add to Cart" part needs room to breathe but never overflow */
.peptigo-card__cta::before {
content: none !important; /* no faux content */
}
/* Explicitly ensure no pseudo-elements from theme base break this */
.peptigo-card > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Bigger min card width so text always fits comfortably */
.peptigo-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 20px !important;
}
@media (max-width: 1100px) {
.peptigo-card__cta {
padding: 10px 12px !important;
font-size: .66rem !important;
letter-spacing: .06em !important;
}
.peptigo-card__cta > span { font-size: .76rem !important; }
}
/* ============================================================ */
/* v1.2.0 -- MOBILE REBUILD */
/* Unified breakpoints, touch targets, sticky CTA, filter */
/* drawer, TOC bottom sheet, lazy load, dark mode baseline */
/* ============================================================ */
/* ---- 1. Unified breakpoint system + CSS custom props ---- */
:root {
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--tap-min: 44px;
}
/* ---- 2. Global mobile baseline (≤767px) ---- */
@media (max-width: 767px) {
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
input, textarea, select, button { font-size: 16px !important; } /* prevent iOS zoom */
:where(.wrap, .peptigo-wrap) { padding-left: 16px !important; padding-right: 16px !important; }
/* enforce touch-target minimum */
:where(a.btn, .btn, button:not([aria-hidden])):not(.pdp__qty-btn):not(.pdp2__qty-btn) {
min-height: var(--tap-min);
min-width: var(--tap-min);
}
/* haptic-style feedback on any tappable */
a:active:not(:disabled),
button:active:not(:disabled),
[role="button"]:active {
transform: scale(.97);
transition: transform .08s;
}
/* Hero tighten */
.peptigo-hero { padding: 56px 16px 40px !important; }
.peptigo-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem) !important; line-height: 1.05 !important; }
.peptigo-hero__lede { font-size: .95rem !important; padding: 0 8px; }
.peptigo-hero__cta { flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
.peptigo-hero__cta .peptigo-btn { width: 100%; justify-content: center; }
.peptigo-cats { gap: 8px; }
.peptigo-cats a { font-size: .66rem !important; padding: 8px 14px !important; }
/* Homepage featured grid → 2 col */
.peptigo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}
@media (max-width: 480px) {
.peptigo-grid { grid-template-columns: 1fr !important; }
}
/* ---- 3. Product page (PDP) mobile ---- */
@media (max-width: 767px) {
.tpl-pdp-inline .breadcrumb { padding: 16px 16px 0 !important; font-size: .74rem !important; }
body.single-product .pdp2 { padding: 16px 0 100px !important; }
body.single-product .pdp2 .wrap { padding: 0 16px !important; }
body.single-product .pdp2__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
body.single-product .pdp2__gallery { position: static !important; }
body.single-product .pdp2__main {
max-width: 100% !important;
min-height: 300px !important;
padding: 20px !important;
}
body.single-product .pdp2__main img { max-width: 60% !important; max-height: 260px !important; }
body.single-product .pdp2__info h1,
body.single-product .pdp2__title,
body.single-product h1.entry-title { font-size: 1.8rem !important; }
body.single-product .pdp2__price-row .woocommerce-Price-amount,
body.single-product .pdp2__price-row ins { font-size: 1.8rem !important; }
body.single-product .pdp2__purchase form.cart { flex-direction: column !important; gap: 10px !important; }
body.single-product .pdp2__purchase .quantity { align-self: start; }
body.single-product .pdp2__trust { grid-template-columns: 1fr !important; gap: 10px !important; padding: 16px 0 !important; }
}
/* ---- 4. Sticky Add to Cart bar on mobile ---- */
.pdp-sticky-bar {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 100;
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(10,20,36,.1);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 24px -12px rgba(10,20,36,.15);
animation: pdpStickySlide .3s ease;
}
@keyframes pdpStickySlide {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.pdp-sticky-bar__inner {
display: flex; align-items: center; gap: 10px;
max-width: 600px; margin: 0 auto;
}
.pdp-sticky-bar__info { flex: 1; min-width: 0; }
.pdp-sticky-bar__name {
font-weight: 600; font-size: .88rem; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: #0a1424;
}
.pdp-sticky-bar__price { font-size: .82rem; color: #64748b; font-weight: 500; }
.pdp-sticky-bar__add {
background: #0a1424; color: #fff;
border: none; border-radius: 10px;
padding: 12px 20px;
font-weight: 600; font-size: .88rem;
cursor: pointer;
white-space: nowrap;
min-height: 44px;
}
.pdp-sticky-bar__add:active { transform: scale(.96); background: #1d4ed8; }
@media (max-width: 767px) {
body.single-product .pdp-sticky-bar.is-visible { display: block; }
}
/* ---- 5. Cart icon with count badge (header) ---- */
.peptigo-cart-pill, a[href="/cart"]:not(.btn) {
position: relative;
}
.peptigo-cart-count-badge {
position: absolute;
top: -6px; right: -10px;
background: #1d4ed8;
color: #fff;
font-size: .66rem;
font-weight: 700;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
box-shadow: 0 2px 4px rgba(29,78,216,.3);
}
/* ---- 6. Cart page mobile ---- */
@media (max-width: 767px) {
.tpl-cart-wc .wrap { padding: 18px 16px 28px !important; margin: 12px 0 !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
.tpl-cart-wc .shop_table,
.tpl-cart-wc .shop_table thead { display: block !important; border: none !important; }
.tpl-cart-wc .shop_table thead { display: none !important; }
.tpl-cart-wc .shop_table tbody,
.tpl-cart-wc .shop_table tr { display: block !important; }
.tpl-cart-wc .shop_table tr {
padding: 14px 0;
border-bottom: 1px solid rgba(10,20,36,.08) !important;
display: grid !important;
grid-template-columns: 72px 1fr !important;
gap: 12px;
align-items: center;
}
.tpl-cart-wc .shop_table td {
display: block !important;
padding: 4px 0 !important;
border: none !important;
}
.tpl-cart-wc .product-thumbnail { grid-row: span 4; }
.tpl-cart-wc .product-thumbnail img { max-width: 100% !important; }
.tpl-cart-wc .cart_totals { margin-top: 20px; }
.tpl-cart-wc .button,
.tpl-cart-wc .checkout-button {
width: 100% !important;
padding: 14px 20px !important;
min-height: 52px !important;
}
.tpl-cart-wc .coupon input[type="text"] { width: 100%; margin-bottom: 8px; }
}
/* ---- 7. Checkout mobile ---- */
@media (max-width: 767px) {
body.woocommerce-checkout .col2-set { display: block !important; }
body.woocommerce-checkout .col2-set > .col-1,
body.woocommerce-checkout .col2-set > .col-2 { width: 100% !important; float: none !important; }
body.woocommerce-checkout .form-row { margin-bottom: 14px; }
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout select {
width: 100% !important;
padding: 12px 14px !important;
border: 1px solid rgba(10,20,36,.15) !important;
border-radius: 8px !important;
min-height: 48px !important;
}
body.woocommerce-checkout #place_order {
width: 100% !important;
min-height: 56px !important;
font-size: 1rem !important;
}
}
/* ---- 8. Shop page mobile + filter drawer ---- */
@media (max-width: 767px) {
.tpl-shop .catalog { display: block !important; }
.tpl-shop .filters { display: none !important; }
.tpl-shop .filters.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 1000 !important;
background: #fff !important;
padding: 20px !important;
overflow-y: auto !important;
animation: drawerSlide .3s ease;
}
@keyframes drawerSlide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.tpl-shop .filter-drawer-btn {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: #fff;
border: 1px solid rgba(10,20,36,.15);
border-radius: 100px;
font-size: .88rem;
font-weight: 600;
min-height: 44px;
}
.tpl-shop .filter-drawer-close {
display: inline-flex !important;
position: absolute;
top: 16px; right: 16px;
width: 40px; height: 40px;
border-radius: 50%;
background: #f1f5f9;
border: none;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
}
.tpl-shop .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.tpl-shop .cat-section__head h2 { font-size: 1.4rem !important; }
.tpl-shop .card__name { font-size: .92rem !important; }
.tpl-shop .card__dose { font-size: .68rem !important; }
}
@media (max-width: 480px) {
.tpl-shop .grid { grid-template-columns: 1fr !important; }
}
.tpl-shop .filter-drawer-btn { display: none; }
.tpl-shop .filter-drawer-close { display: none; }
/* ---- 9. Research article TOC: bottom sheet on mobile ---- */
@media (max-width: 900px) {
.tpl-article .art__body { grid-template-columns: 1fr !important; }
.tpl-article .art__toc {
position: fixed !important;
left: 0; right: 0;
bottom: 0;
background: #fff !important;
border-top: 1px solid rgba(10,20,36,.1) !important;
padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
max-height: 50vh;
overflow-y: auto;
z-index: 90;
transform: translateY(calc(100% - 56px));
transition: transform .3s ease;
box-shadow: 0 -8px 24px -12px rgba(10,20,36,.15);
display: block !important;
}
.tpl-article .art__toc.is-expanded { transform: translateY(0); }
.tpl-article .art__toc-title {
margin-bottom: 0 !important;
padding: 4px 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.tpl-article .art__toc-title::after {
content: "▲";
font-size: .8rem;
transition: transform .3s;
}
.tpl-article .art__toc.is-expanded .art__toc-title::after { transform: rotate(180deg); }
.tpl-article .art__toc ol { margin-top: 12px; padding-left: 0; }
.tpl-article .art__prose { padding-bottom: 80px; }
}
/* ---- 10. Cross-sell horizontal scroll on mobile ---- */
@media (max-width: 767px) {
.wp-block-woocommerce-related-products .wc-block-product-template,
.tpl-article .wp-block-woocommerce-product-collection,
.cross-sell__grid {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 16px !important;
gap: 14px !important;
grid-template-columns: none !important;
margin: 0 -16px !important;
max-width: none !important;
}
.wp-block-woocommerce-related-products .wc-block-product-template::-webkit-scrollbar,
.tpl-article .wp-block-woocommerce-product-collection::-webkit-scrollbar,
.cross-sell__grid::-webkit-scrollbar { display: none; }
.wp-block-woocommerce-related-products .cross-card,
.tpl-article .art__related-card,
.cross-sell__grid > * {
flex: 0 0 75% !important;
scroll-snap-align: start !important;
min-width: 75% !important;
max-width: 75% !important;
}
}
/* ---- 11. Research archive mobile ---- */
@media (max-width: 767px) {
.tpl-research .r-hero { padding: 40px 16px 24px !important; }
.tpl-research .r-hero h1 { font-size: 2rem !important; }
.tpl-research .wp-block-post-template,
.tpl-research .wp-block-post-template.is-flex-container.columns-3 {
grid-template-columns: 1fr !important;
}
.tpl-research .r-card { padding: 18px 20px !important; min-height: 160px !important; }
.tpl-research .r-news__inner { padding: 32px 20px !important; }
.tpl-research .r-news__form { flex-direction: column !important; }
.tpl-research .r-news__form input,
.tpl-research .r-news__form button { width: 100% !important; min-height: 48px; }
}
/* ---- 12. Other templates mobile cleanup ---- */
@media (max-width: 767px) {
/* About */
.tpl-about .hero { padding: 40px 16px 32px !important; }
.tpl-about .s { padding: 40px 16px !important; }
/* Calculator */
.tpl-calc .calc__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.tpl-calc .calc-supplies { grid-template-columns: 1fr !important; }
.tpl-calc .calc-trust { grid-template-columns: 1fr !important; }
.tpl-calc .cta-feature { padding: 40px 20px !important; }
.tpl-calc .cta__buttons { flex-direction: column !important; }
.tpl-calc .cta__buttons .btn { width: 100% !important; justify-content: center !important; }
/* Support */
.tpl-support .sup-topics__grid { grid-template-columns: 1fr !important; }
.tpl-support .sup-contact__grid { grid-template-columns: 1fr !important; }
.tpl-support .sup-hero { padding: 40px 16px 32px !important; }
.tpl-support .sup-faq__list { padding: 0 !important; }
.tpl-support .sup-q summary { padding: 16px 18px !important; font-size: .92rem !important; }
/* Lab Testing */
.tpl-lab .hero { padding: 40px 16px 32px !important; }
.tpl-lab .s { padding: 40px 16px !important; }
/* Legal pages */
.legal { padding: 0 16px !important; margin: 24px auto 20px !important; }
.legal__head h1 { font-size: 1.8rem !important; }
}
/* ---- 13. Cross-card link clickable full card on mobile ---- */
@media (max-width: 767px) {
.wp-block-woocommerce-related-products .cross-card a,
.tpl-article .art__related-card {
touch-action: manipulation;
}
}
/* ---- 14. Dark mode (basic, respects OS pref) ---- */
@media (prefers-color-scheme: dark) {
html.peptigo-dark-mode-auto,
html.peptigo-dark-mode-auto body {
background: #0a1424;
color: #e2e8f0;
}
html.peptigo-dark-mode-auto .peptigo-card,
html.peptigo-dark-mode-auto .card,
html.peptigo-dark-mode-auto .r-card {
background: #1e293b;
border-color: rgba(255,255,255,.08);
}
/* note: dark mode not auto-enabled; set .peptigo-dark-mode-auto on to opt in */
}
/* ---- 15. Performance: fade in images on load ---- */
img[loading="lazy"] {
transition: opacity .3s;
}
/* ---- 16. Reduce layout shift: aspect ratios on known image containers ---- */
.tpl-research .wp-block-post-featured-image,
.tpl-research .r-card__media,
.peptigo-card__media,
.card__media,
.cross-card__media {
contain: layout style;
}
/* ---- 17. CTA consistency: ensure no button cuts off on any screen ---- */
.peptigo-card__cta,
.cross-card__cta,
.pdp__add,
.pdp2__add {
max-width: 100% !important;
min-height: 44px;
}
/* ============================================================ */
/* v1.2.2 -- Shop archive (archive-product.html) styling */
/* Constrains WC default product archive to match card design */
/* ============================================================ */
/* Breadcrumb + hero for WC shop */
.tpl-shop .page-head { padding: 32px 0 24px; text-align: center; }
.tpl-shop .page-head__intro { margin-left: auto; margin-right: auto; }
.tpl-shop .page-head h1 {
font-size: clamp(2.2rem, 5vw, 3.2rem);
margin: 0 0 8px;
font-weight: 700;
letter-spacing: -.02em;
}
.tpl-shop .page-head h1 em {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 500;
color: var(--blue-700, #1d4ed8);
}
.tpl-shop .page-head p {
font-size: 1rem;
color: #475569;
margin: 0 auto;
max-width: 640px;
}
/* Shop catalog product collection */
.tpl-shop .shop-catalog,
.tpl-shop .wp-block-woocommerce-product-collection {
margin: 24px 0 48px;
}
.tpl-shop .wp-block-woocommerce-product-collection > .wc-block-product-template,
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-post-template,
.tpl-shop .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.tpl-shop .wc-block-product-template > li,
.tpl-shop .wp-block-post-template > li,
.tpl-shop .wp-block-woocommerce-product-collection > ul > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
flex: unset !important;
}
/* Shop card */
.tpl-shop .wp-block-woocommerce-product-collection .card,
.tpl-shop .wp-block-group.card {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
border-radius: 12px !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
height: 100%;
}
.tpl-shop .wp-block-woocommerce-product-collection .card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* Card media */
.tpl-shop .wp-block-woocommerce-product-collection .card__media {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
margin: 0 !important;
position: relative !important;
overflow: hidden !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .card__media .wp-block-woocommerce-product-image,
.tpl-shop .wp-block-woocommerce-product-collection .card__media .wc-block-components-product-image,
.tpl-shop .wp-block-woocommerce-product-collection .card__media .wc-block-components-product-image__inner-container {
aspect-ratio: auto !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
overflow: hidden !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .card__media img {
width: auto !important;
height: auto !important;
max-width: 70% !important;
max-height: 90% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
aspect-ratio: auto !important;
}
/* Sale badge as corner pill */
.tpl-shop .wp-block-woocommerce-product-collection .card-corner,
.tpl-shop .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .64rem !important;
letter-spacing: .14em !important;
padding: 4px 10px !important;
border-radius: 4px !important;
z-index: 5 !important;
text-transform: uppercase !important;
}
/* Card title */
.tpl-shop .wp-block-woocommerce-product-collection .card__name,
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-post-title {
font-size: 1rem !important;
font-weight: 600 !important;
margin: 14px 16px 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
letter-spacing: -.005em !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .card__name a,
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .card:hover .wp-block-post-title a {
color: #1d4ed8 !important;
}
/* Card price */
.tpl-shop .wp-block-woocommerce-product-collection .card__price,
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
font-size: .95rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 16px 12px !important;
padding: 0 !important;
}
.tpl-shop .wp-block-woocommerce-product-collection del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 6px !important;
font-size: .85rem !important;
}
/* Add to cart button */
.tpl-shop .wp-block-woocommerce-product-collection .card__addcart,
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button {
margin: auto 14px 14px !important;
padding: 0 !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button a,
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button button {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 8px !important;
font-size: .84rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
border: none !important;
text-transform: none !important;
min-height: 40px !important;
letter-spacing: .02em !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button a:hover,
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button button:hover {
background: #1d4ed8 !important;
}
/* "Customer matched zone" notice — subtle */
.tpl-shop .wc-block-store-notices,
.tpl-shop .woocommerce-message,
.tpl-shop .woocommerce-info {
background: #f1f5f9 !important;
border-left: 3px solid #1d4ed8 !important;
padding: 12px 16px !important;
font-size: .88rem !important;
color: #334155 !important;
border-radius: 0 6px 6px 0 !important;
margin: 16px 0 !important;
}
/* Result count + sort dropdown */
.tpl-shop .woocommerce-result-count,
.tpl-shop .woocommerce-ordering {
font-size: .88rem !important;
color: #64748b !important;
}
.tpl-shop .woocommerce-ordering select {
padding: 8px 14px !important;
border: 1px solid rgba(10,20,36,.15) !important;
border-radius: 8px !important;
font-size: .88rem !important;
background: #fff !important;
}
/* Pagination */
.tpl-shop .wp-block-query-pagination {
margin: 32px 0 !important;
gap: 8px !important;
}
.tpl-shop .wp-block-query-pagination a,
.tpl-shop .wp-block-query-pagination span {
padding: 8px 14px !important;
border-radius: 6px !important;
border: 1px solid rgba(10,20,36,.15) !important;
text-decoration: none !important;
color: #0a1424 !important;
font-weight: 500 !important;
min-width: 40px !important;
text-align: center !important;
}
.tpl-shop .wp-block-query-pagination a:hover { border-color: #1d4ed8; color: #1d4ed8; }
.tpl-shop .wp-block-query-pagination .current,
.tpl-shop .wp-block-query-pagination-numbers .current {
background: #0a1424 !important;
color: #fff !important;
border-color: #0a1424 !important;
}
/* Responsive */
@media (max-width: 1100px) {
.tpl-shop .wc-block-product-template,
.tpl-shop .wp-block-woocommerce-product-collection > .wc-block-product-template {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px) {
.tpl-shop .wc-block-product-template,
.tpl-shop .wp-block-woocommerce-product-collection > .wc-block-product-template {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .card__name { font-size: .9rem !important; margin: 10px 12px 2px !important; }
.tpl-shop .wp-block-woocommerce-product-collection .card__price { font-size: .85rem !important; margin: 0 12px 8px !important; }
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button {
margin: auto 10px 10px !important;
}
.tpl-shop .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button a {
padding: 9px 10px !important;
font-size: .76rem !important;
}
}
@media (max-width: 480px) {
.tpl-shop .wc-block-product-template,
.tpl-shop .wp-block-woocommerce-product-collection > .wc-block-product-template {
grid-template-columns: 1fr !important;
}
}
/* ============================================================ */
/* v1.2.3 -- Cart cross-sell card sizing fix */
/* WC renders "You may be interested in" with default images */
/* at full resolution. Force our card sizing everywhere it */
/* appears outside single-product pages. */
/* ============================================================ */
/* Cart page cross-sells */
.tpl-cart-wc .cross-sells,
.tpl-cart-wc .wc-cross-sells,
.tpl-cart-wc .products,
.tpl-cart-wc .wp-block-woocommerce-product-collection,
body.woocommerce-cart .cross-sells,
body.woocommerce-cart .products {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 24px 0 !important;
max-width: 900px !important;
}
.tpl-cart-wc .cross-sells > h2,
body.woocommerce-cart .cross-sells > h2 {
grid-column: 1 / -1 !important;
font-size: 1.4rem !important;
margin: 0 0 12px !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
}
.tpl-cart-wc .cross-sells > h2 em,
body.woocommerce-cart .cross-sells > h2 em {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
color: #1d4ed8 !important;
}
/* Cross-sell product tile on cart */
.tpl-cart-wc .cross-sells .product,
body.woocommerce-cart .cross-sells .product,
body.woocommerce-cart ul.products li.product,
.tpl-cart-wc ul.products li.product {
background: #fff !important;
border: 1px solid rgba(10,20,36,.08) !important;
border-radius: 12px !important;
padding: 16px !important;
display: flex !important;
flex-direction: column !important;
list-style: none !important;
margin: 0 !important;
width: auto !important;
float: none !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
overflow: hidden !important;
}
.tpl-cart-wc .cross-sells .product:hover,
body.woocommerce-cart .cross-sells .product:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* Image tile inside cross-sell */
.tpl-cart-wc .cross-sells .product a img,
body.woocommerce-cart .cross-sells .product a img,
body.woocommerce-cart ul.products li.product img,
.tpl-cart-wc ul.products li.product img,
.tpl-cart-wc .cross-sells .product img,
body.woocommerce-cart .cross-sells .product img {
width: auto !important;
height: auto !important;
max-width: 65% !important;
max-height: 180px !important;
margin: 0 auto 10px !important;
display: block !important;
object-fit: contain !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
}
/* Image WRAPPER container — give it the gradient background */
.tpl-cart-wc .cross-sells .product a,
body.woocommerce-cart .cross-sells .product a,
body.woocommerce-cart ul.products li.product > a,
.tpl-cart-wc ul.products li.product > a {
display: block !important;
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
border-radius: 8px !important;
margin-bottom: 12px !important;
padding: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
overflow: hidden !important;
text-decoration: none !important;
}
/* Sale badge inside cross-sell card */
.tpl-cart-wc .cross-sells .onsale,
body.woocommerce-cart .cross-sells .onsale,
.tpl-cart-wc ul.products li.product .onsale,
body.woocommerce-cart ul.products li.product .onsale {
position: absolute !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .6rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
padding: 3px 8px !important;
border-radius: 4px !important;
min-height: 0 !important;
min-width: 0 !important;
line-height: 1.2 !important;
font-weight: 600 !important;
z-index: 5 !important;
margin: 0 !important;
}
/* Product name */
.tpl-cart-wc .cross-sells .product h2,
.tpl-cart-wc .cross-sells .product .woocommerce-loop-product__title,
body.woocommerce-cart .cross-sells .product h2,
body.woocommerce-cart ul.products li.product .woocommerce-loop-product__title {
font-size: 1rem !important;
font-weight: 600 !important;
margin: 0 0 6px !important;
padding: 0 !important;
line-height: 1.3 !important;
color: #0a1424 !important;
}
.tpl-cart-wc .cross-sells .product h2 a,
body.woocommerce-cart .cross-sells .product h2 a,
body.woocommerce-cart ul.products li.product a:not(.button) {
color: #0a1424 !important;
text-decoration: none !important;
}
/* Price */
.tpl-cart-wc .cross-sells .product .price,
body.woocommerce-cart .cross-sells .product .price,
body.woocommerce-cart ul.products li.product .price {
font-size: 1rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 0 10px !important;
display: block !important;
}
.tpl-cart-wc .cross-sells .product .price del,
body.woocommerce-cart .cross-sells .product .price del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 6px !important;
font-size: .85rem !important;
}
/* Add to cart button */
.tpl-cart-wc .cross-sells .product .button,
body.woocommerce-cart .cross-sells .product .button,
body.woocommerce-cart ul.products li.product .button {
background: #0a1424 !important;
color: #fff !important;
padding: 9px 14px !important;
border-radius: 8px !important;
font-size: .82rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
border: none !important;
margin-top: auto !important;
text-transform: none !important;
min-height: 40px !important;
text-shadow: none !important;
box-shadow: none !important;
}
.tpl-cart-wc .cross-sells .product .button:hover,
body.woocommerce-cart .cross-sells .product .button:hover { background: #1d4ed8 !important; }
/* Cart totals block polish */
.tpl-cart-wc .cart_totals h2 em {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
color: #1d4ed8 !important;
}
@media (max-width: 900px) {
.tpl-cart-wc .cross-sells,
body.woocommerce-cart .cross-sells { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.tpl-cart-wc .cross-sells,
body.woocommerce-cart .cross-sells { grid-template-columns: 1fr !important; }
}
/* ============================================================ */
/* v1.2.4 -- shop categorized + cart cross-sell + badge fix */
/* ============================================================ */
/* ---- 1. Shop catalog layout: restore sidebar + category sections ---- */
.tpl-shop .catalog {
display: grid;
grid-template-columns: 260px 1fr;
gap: 48px;
align-items: start;
padding: 0 0 64px;
}
.tpl-shop .filters {
position: sticky;
top: 100px;
max-height: calc(100vh - 140px);
overflow-y: auto;
padding-right: 8px;
}
.tpl-shop .filter-group {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(10,20,36,.08);
}
.tpl-shop .filter-group:last-child { border-bottom: 0; }
.tpl-shop .filter-group__head {
display: flex; justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.tpl-shop .filter-group__head span {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #64748b;
}
.tpl-shop .filter-group__clear {
background: none; border: 0; color: #1d4ed8;
font-size: .74rem; cursor: pointer; padding: 0;
}
.tpl-shop .check {
display: flex; justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: .88rem;
color: #334155;
cursor: pointer;
}
.tpl-shop .check a { color: inherit; text-decoration: none; flex: 1; }
.tpl-shop .check a:hover { color: #1d4ed8; }
.tpl-shop .check.checked a { color: #0a1424; font-weight: 500; }
.tpl-shop .check input[type="checkbox"] { margin-right: 8px; }
.tpl-shop .check .count {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
color: #94a3b8;
}
/* Main content */
.tpl-shop .main .toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 20px;
margin-bottom: 24px;
border-bottom: 1px solid rgba(10,20,36,.08);
}
.tpl-shop .toolbar__count {
font-family: 'JetBrains Mono', monospace;
font-size: .78rem;
letter-spacing: .08em;
color: #64748b;
text-transform: uppercase;
}
.tpl-shop .toolbar__count strong {
color: #0a1424;
font-weight: 700;
font-size: 1.1rem;
margin-right: 4px;
}
/* Category sections */
.tpl-shop .cat-section { margin-bottom: 48px; scroll-margin-top: 100px; }
.tpl-shop .cat-section__head { margin-bottom: 20px; }
.tpl-shop .cat-section__title {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 4px;
}
.tpl-shop .cat-section__title h2 {
font-size: 1.8rem;
font-weight: 700;
margin: 0;
letter-spacing: -.02em;
}
.tpl-shop .cat-section__title h2 em {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 500;
color: #1d4ed8;
}
.tpl-shop .cat-section__count {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
color: #94a3b8;
letter-spacing: .08em;
text-transform: uppercase;
}
.tpl-shop .cat-section__head p {
color: #64748b;
font-size: .92rem;
margin: 0;
}
/* Category grid per section */
.tpl-shop .cat-section .wp-block-woocommerce-product-collection,
.tpl-shop .cat-section .wp-block-woocommerce-product-collection > .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.tpl-shop .cat-section .wc-block-product-template > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Card inside category grid */
.tpl-shop .cat-section .card {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
height: 100%;
min-height: 340px;
}
.tpl-shop .cat-section .card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
.tpl-shop .cat-section .card__media {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
position: relative !important;
overflow: hidden !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
margin: 0 !important;
}
.tpl-shop .cat-section .card__media .wp-block-woocommerce-product-image,
.tpl-shop .cat-section .card__media .wc-block-components-product-image,
.tpl-shop .cat-section .card__media .wc-block-components-product-image__inner-container {
aspect-ratio: auto !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.tpl-shop .cat-section .card__media img {
width: auto !important;
height: auto !important;
max-width: 60% !important;
max-height: 85% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
}
/* Sale badge — SINGLE element, no nested duplicates */
.tpl-shop .cat-section .card-corner,
.tpl-shop .cat-section .wc-block-components-product-sale-badge {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .62rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 4px !important;
z-index: 5 !important;
line-height: 1.2 !important;
border: none !important;
box-shadow: none !important;
}
/* prevent duplicate pill rendering */
.tpl-shop .cat-section .card-corner span,
.tpl-shop .cat-section .wc-block-components-product-sale-badge__text {
background: transparent !important;
border: none !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
}
.tpl-shop .cat-section .card-corner > .wc-block-components-product-sale-badge {
position: static !important;
background: transparent !important;
padding: 0 !important;
color: inherit !important;
}
/* Title / price / button in card */
.tpl-shop .cat-section .card .wp-block-post-title,
.tpl-shop .cat-section .card .card__name {
font-size: .98rem !important;
font-weight: 600 !important;
margin: 14px 16px 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
letter-spacing: -.005em !important;
}
.tpl-shop .cat-section .card .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
}
.tpl-shop .cat-section .card:hover .wp-block-post-title a { color: #1d4ed8 !important; }
.tpl-shop .cat-section .card .wp-block-woocommerce-product-price {
font-size: .94rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 16px 12px !important;
}
.tpl-shop .cat-section .card del { color: #94a3b8 !important; font-weight: 400 !important; margin-right: 6px !important; font-size: .84rem !important; }
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button {
margin: auto 14px 14px !important;
padding: 0 !important;
}
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button a,
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button button {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 8px !important;
font-size: .82rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
border: none !important;
text-transform: none !important;
min-height: 40px !important;
}
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button a:hover { background: #1d4ed8 !important; }
/* Responsive shop */
@media (max-width: 1100px) {
.tpl-shop .cat-section .wp-block-woocommerce-product-collection,
.tpl-shop .cat-section .wp-block-woocommerce-product-collection > .wc-block-product-template {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px) {
.tpl-shop .catalog { grid-template-columns: 1fr; }
.tpl-shop .filters { position: static; max-height: none; margin-bottom: 24px; padding: 16px; border: 1px solid rgba(10,20,36,.08); border-radius: 12px; }
}
@media (max-width: 767px) {
.tpl-shop .cat-section .wp-block-woocommerce-product-collection,
.tpl-shop .cat-section .wp-block-woocommerce-product-collection > .wc-block-product-template {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
}
@media (max-width: 480px) {
.tpl-shop .cat-section .wp-block-woocommerce-product-collection,
.tpl-shop .cat-section .wp-block-woocommerce-product-collection > .wc-block-product-template {
grid-template-columns: 1fr !important;
}
}
/* ---- 2. Cart cross-sells: position full-width BELOW cart items ---- */
.tpl-cart-wc .wrap,
body.woocommerce-cart .wrap {
display: block !important;
}
/* WC default cart uses .cart-collaterals for totals on the right. We want totals inline */
body.woocommerce-cart .cart-collaterals {
width: 100% !important;
max-width: 500px !important;
margin-left: auto !important;
float: none !important;
clear: both !important;
}
/* Cross-sells section full width below */
body.woocommerce-cart .cross-sells,
.tpl-cart-wc .cross-sells {
clear: both !important;
width: 100% !important;
max-width: none !important;
margin: 40px 0 24px !important;
padding-top: 32px !important;
border-top: 1px solid rgba(10,20,36,.08) !important;
display: block !important;
float: none !important;
}
body.woocommerce-cart .cross-sells > h2 {
font-size: 1.4rem !important;
margin: 0 0 20px !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
}
body.woocommerce-cart .cross-sells > ul.products,
body.woocommerce-cart .cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.woocommerce-cart .cross-sells ul.products li.product {
background: #fff !important;
border: 1px solid rgba(10,20,36,.08) !important;
border-radius: 12px !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
width: auto !important;
margin: 0 !important;
float: none !important;
list-style: none !important;
}
/* FIX: WC renders an wrapper containing image+title. Style that as the image tile, then floating children separately */
body.woocommerce-cart .cross-sells ul.products li.product > a {
display: block !important;
text-decoration: none !important;
color: inherit !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
aspect-ratio: 1/1 !important;
padding: 16px !important;
position: relative !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
}
/* v1.3.10: removed old rule that set img to position:absolute (overlapped title/price) */
/* v1.3.9: old display:none rule removed */
/* Product name (rendered outside the , after image) */
body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
display: block !important;
font-size: .94rem !important;
font-weight: 600 !important;
margin: 12px 16px 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
color: #0a1424 !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price {
font-size: .9rem !important;
color: #1d4ed8 !important;
font-weight: 700 !important;
margin: 0 16px 10px !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 6px !important;
font-size: .82rem !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .button,
body.woocommerce-cart .cross-sells ul.products li.product .added_to_cart {
background: #0a1424 !important;
color: #fff !important;
padding: 9px 14px !important;
border-radius: 8px !important;
font-size: .8rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
margin: auto 14px 14px !important;
border: none !important;
text-transform: none !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .button:hover { background: #1d4ed8 !important; }
/* Sale badge on cross-sell tile */
body.woocommerce-cart .cross-sells ul.products li.product .onsale {
position: absolute !important;
top: 10px !important;
right: auto !important;
left: 10px !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .6rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 3px 8px !important;
border-radius: 4px !important;
min-height: 0 !important;
min-width: 0 !important;
line-height: 1.2 !important;
margin: 0 !important;
z-index: 5 !important;
}
@media (max-width: 900px) {
body.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
body.woocommerce-cart .cross-sells ul.products { grid-template-columns: 1fr !important; }
}
/* ============================================================ */
/* v1.3.0 -- Shop grid un-nest + cart cross-sell + polish */
/* ============================================================ */
/* CRITICAL FIX: un-nest the grid. Only .wc-block-product-template is the grid,
NOT the .wp-block-woocommerce-product-collection wrapper (that was making
each card render as 1/16th of the viewport). */
.tpl-shop .cat-section .wp-block-woocommerce-product-collection {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
max-width: none !important;
}
.tpl-shop .cat-section .wp-block-woocommerce-product-collection > .wc-block-product-template,
.tpl-shop .cat-section .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
flex-wrap: unset !important;
}
.tpl-shop .cat-section .wc-block-product-template > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: unset !important;
}
/* Sidebar bolder/darker labels */
.tpl-shop .filter-group__head span {
color: #0a1424 !important;
font-weight: 700 !important;
font-size: .74rem !important;
letter-spacing: .2em !important;
}
.tpl-shop .filter-group__clear {
font-weight: 600 !important;
color: #1d4ed8 !important;
}
.tpl-shop .check {
font-weight: 500 !important;
color: #1e293b !important;
}
.tpl-shop .check a { color: #1e293b !important; font-weight: 500 !important; }
.tpl-shop .check a:hover { color: #1d4ed8 !important; }
.tpl-shop .check.checked a { color: #0a1424 !important; font-weight: 600 !important; }
.tpl-shop .toolbar__count {
color: #334155 !important;
font-weight: 600 !important;
}
.tpl-shop .toolbar__count strong {
color: #0a1424 !important;
font-weight: 700 !important;
}
/* Responsive shop grid */
@media (max-width: 1200px) {
.tpl-shop .cat-section .wc-block-product-template {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px) {
.tpl-shop .cat-section .wc-block-product-template {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 480px) {
.tpl-shop .cat-section .wc-block-product-template {
grid-template-columns: 1fr !important;
}
}
/* ---- Cart cross-sells: proper positioning BELOW everything ---- */
/* WC default layout: .woocommerce has .woocommerce-cart-form (items) +
.cart-collaterals (totals) as siblings, then .cross-sells outside */
body.woocommerce-cart .cart-collaterals::after,
body.woocommerce-cart .woocommerce-cart-form::after {
content: "";
display: table;
clear: both;
}
/* Move cross-sells outside the float flow, below everything */
body.woocommerce-cart .cross-sells,
.tpl-cart-wc .cross-sells {
float: none !important;
clear: both !important;
width: 100% !important;
max-width: none !important;
margin: 48px 0 24px !important;
padding: 32px 0 0 !important;
border-top: 2px solid rgba(10,20,36,.08) !important;
order: 99 !important;
display: block !important;
}
body.woocommerce-cart .cross-sells > h2,
.tpl-cart-wc .cross-sells > h2 {
font-size: 1.5rem !important;
margin: 0 0 24px !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
text-align: center !important;
}
/* Cross-sell grid — match shop card design exactly */
body.woocommerce-cart .cross-sells > ul.products,
body.woocommerce-cart .cross-sells ul.products,
.tpl-cart-wc .cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
clear: both !important;
float: none !important;
}
body.woocommerce-cart .cross-sells ul.products li.product {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
width: auto !important;
margin: 0 !important;
float: none !important;
list-style: none !important;
min-height: 340px;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.woocommerce-cart .cross-sells ul.products li.product:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* The wrapping image becomes the image tile */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type {
display: block !important;
text-decoration: none !important;
color: inherit !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
aspect-ratio: 1/1 !important;
padding: 16px !important;
position: relative !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* v1.3.10: removed old absolute-positioned img rule */
/* v1.3.9: old display:none rule removed — title and price are now shown below image */
/* Title rendered outside the by some themes / below */
body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
font-size: .95rem !important;
font-weight: 600 !important;
margin: 12px 16px 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
color: #0a1424 !important;
display: block !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price {
font-size: .92rem !important;
color: #1d4ed8 !important;
font-weight: 700 !important;
margin: 0 16px 10px !important;
display: block !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 6px !important;
font-size: .82rem !important;
}
/* Add to Cart */
body.woocommerce-cart .cross-sells ul.products li.product .button,
body.woocommerce-cart .cross-sells ul.products li.product .added_to_cart {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 8px !important;
font-size: .82rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: calc(100% - 28px) !important;
margin: auto 14px 14px !important;
border: none !important;
text-transform: none !important;
min-height: 40px !important;
text-shadow: none !important;
box-shadow: none !important;
line-height: 1.4 !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .button:hover { background: #1d4ed8 !important; }
/* Sale badge */
body.woocommerce-cart .cross-sells ul.products li.product .onsale {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .6rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 3px 8px !important;
border-radius: 4px !important;
min-height: 0 !important;
min-width: 0 !important;
line-height: 1.2 !important;
margin: 0 !important;
z-index: 5 !important;
}
@media (max-width: 900px) {
body.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
body.woocommerce-cart .cross-sells ul.products { grid-template-columns: 1fr !important; }
}
/* ============================================================ */
/* v1.3.1 -- PDP cross-sell grid fix + misc polish */
/* ============================================================ */
/* Related products on single-product page — force proper grid */
body.single-product .wp-block-woocommerce-related-products {
padding: 48px 0 32px !important;
background: #f8fafc !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
}
body.single-product .wp-block-woocommerce-related-products > * {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 32px !important;
}
body.single-product .wp-block-woocommerce-related-products > h2,
body.single-product .wp-block-woocommerce-related-products .cross-sell__title {
font-size: 1.5rem !important;
font-weight: 700 !important;
margin: 0 0 24px !important;
text-align: center !important;
}
/* Force grid on the PRODUCT-TEMPLATE only, not the wrapper */
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-collection {
display: block !important;
padding: 0 32px !important;
max-width: 1100px !important;
margin: 0 auto !important;
}
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template,
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex-wrap: unset !important;
width: 100% !important;
}
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template > li,
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template > * {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: unset !important;
}
/* Each cross-sell card — uniform structure */
body.single-product .wp-block-woocommerce-related-products .cross-card {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
border-radius: 12px !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 340px !important;
gap: 0 !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.single-product .wp-block-woocommerce-related-products .cross-card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* Image tile */
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image__inner-container,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image a {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px !important;
margin: 0 !important;
position: relative !important;
overflow: hidden !important;
box-shadow: none !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card img {
width: auto !important;
height: auto !important;
max-width: 60% !important;
max-height: 85% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
aspect-ratio: auto !important;
}
/* Sale badge */
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-sale-badge {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .6rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 3px 8px !important;
border-radius: 4px !important;
min-height: 0 !important;
min-width: 0 !important;
line-height: 1.2 !important;
margin: 0 !important;
z-index: 5 !important;
border: none !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-sale-badge__text {
background: transparent !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
}
/* Title */
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-post-title,
body.single-product .wp-block-woocommerce-related-products .cross-card .cross-card__name {
font-size: 1rem !important;
font-weight: 600 !important;
margin: 12px 16px 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card:hover .wp-block-post-title a {
color: #1d4ed8 !important;
}
/* Price */
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-price {
font-size: .95rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 16px 10px !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 6px !important;
font-size: .84rem !important;
}
/* Add to Cart — locked width inside card */
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button {
margin: auto 14px 14px !important;
padding: 0 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button button {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 8px !important;
font-size: .84rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
border: none !important;
text-transform: none !important;
min-height: 40px !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a:hover {
background: #1d4ed8 !important;
}
@media (max-width: 900px) {
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template,
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 480px) {
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template,
body.single-product .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template {
grid-template-columns: 1fr !important;
}
}
/* ============================================================ */
/* v1.3.2 -- SITE-WIDE product card normalization */
/* Applies to shop, PDP cross-sell, cart cross-sell, related. */
/* ============================================================ */
/* ---- UNIVERSAL IMAGE CONTAINER: 1:1 square with soft gradient bg ---- */
/* Apply to ANY WC product image rendered in block contexts */
.wp-block-woocommerce-product-image,
.wc-block-components-product-image,
.wc-block-grid__product-image,
.wc-block-components-product-image__inner-container {
position: relative !important;
box-shadow: none !important;
}
/* v1.3.11: removed global WC img normalizer that forced position:absolute
and 65%/85% max sizes on ALL product images across the site.
Per-context rules handle image sizing now. */
/* Apply aspect-ratio wrapper to the innermost container (what holds the image) */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-collection .wc-block-components-product-image,
.wc-block-grid .wc-block-grid__product-image,
body.woocommerce-cart ul.products li.product > a:first-of-type {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
border-radius: 8px !important;
display: block !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* ---- KILL DUPLICATE SALE BADGES ---- */
/* WC product-sale-badge block sometimes wraps another WC badge span inside.
Show only the OUTER badge, hide nested duplicates. */
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
display: none !important;
}
/* Hide any deeply nested badge siblings */
.wc-block-components-product-sale-badge .wc-block-components-product-sale-badge {
display: none !important;
}
/* Hide WC classic theme `.onsale` if a block badge also renders */
.wp-block-woocommerce-product-sale-badge + .onsale,
.onsale + .wp-block-woocommerce-product-sale-badge,
.wc-block-components-product-sale-badge + .onsale,
.onsale + .wc-block-components-product-sale-badge {
display: none !important;
}
/* Single authoritative sale badge styling */
.wp-block-woocommerce-product-sale-badge,
.wc-block-components-product-sale-badge,
.card-corner,
li.product .onsale {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .62rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 4px !important;
z-index: 5 !important;
line-height: 1.2 !important;
min-height: 0 !important;
min-width: 0 !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
display: inline-block !important;
}
.wc-block-components-product-sale-badge__text {
background: transparent !important;
padding: 0 !important;
color: inherit !important;
font: inherit !important;
}
/* ---- SHOP CARDS (archive-product) ---- */
.tpl-shop .cat-section .card {
min-height: 360px !important;
}
.tpl-shop .cat-section .card__media {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
position: relative !important;
display: block !important;
padding: 0 !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
}
/* v1.3.10: removed old absolute-positioned image block (shrunk vial to 60%/82% and used position:absolute which conflicted with flex layout). Flow-positioned rules below handle it correctly. */
/* ---- PDP "Often researched together" ---- */
/* Reset the previous min-height; just let each card auto-size */
body.single-product .wp-block-woocommerce-related-products .cross-card {
min-height: 0 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
position: relative !important;
width: 100% !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
display: block !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card img {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: 60% !important;
max-height: 85% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* ---- CART CROSS-SELLS ---- */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
display: block !important;
position: relative !important;
padding: 0 !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
overflow: hidden !important;
}
/* v1.3.11: another legacy position:absolute rule removed (line 8489). */
/* Fallback: any img tag inside a product-related WC block gets constrained */
.wp-block-woocommerce-product-collection img,
.cross-sells img,
li.product img {
max-width: 100% !important;
height: auto !important;
}
/* ============================================================ */
/* v1.3.3 -- CLEAN REBUILD: undo broken abs positioning + */
/* fix duplicate SALE badges + override inline object-fit:cover */
/* ============================================================ */
/* ---- STEP 1: undo v1.3.2 broken absolute-positioning rules ---- */
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img,
.wc-block-components-product-image__inner-container img,
.wc-block-grid__product-image img {
position: static !important;
transform: none !important;
top: auto !important;
left: auto !important;
inset: auto !important;
margin: 0 auto !important;
max-width: 100% !important;
max-height: 100% !important;
}
/* ---- STEP 2: Hide WC's AUTO-NESTED duplicate sale badge ---- */
/* WC inserts a sale-badge INSIDE the product-image block automatically.
We only want our explicit one at card__media top-level. */
.wp-block-woocommerce-product-image .wp-block-woocommerce-product-sale-badge,
.wp-block-woocommerce-product-image .wc-block-components-product-sale-badge,
.wc-block-components-product-image .wp-block-woocommerce-product-sale-badge {
display: none !important;
}
/* Also hide screen-reader text duplicates */
.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
/* ---- STEP 3: Force object-fit: contain over WC's inline object-fit: cover ---- */
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img,
.card__media img,
.cross-card img,
ul.products li.product img,
.tpl-shop img[data-testid="product-image"],
body.single-product .wp-block-woocommerce-related-products img,
body.woocommerce-cart .cross-sells img {
object-fit: contain !important;
object-position: center center !important;
}
/* ============================================================ */
/* SHOP PAGE (archive-product) — card image tile */
/* ============================================================ */
.tpl-shop .cat-section .card {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
border-radius: 12px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
height: 100%;
}
.tpl-shop .cat-section .card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* The IMAGE TILE — card__media is the 1:1 square with gradient */
.tpl-shop .cat-section .card__media {
position: relative !important;
aspect-ratio: 1 / 1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* The WC image wrapper is transparent — just a flex pass-through */
.tpl-shop .cat-section .card__media .wp-block-woocommerce-product-image,
.tpl-shop .cat-section .card__media .wc-block-components-product-image {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: auto !important;
border-radius: 0 !important;
box-shadow: none !important;
position: static !important;
}
.tpl-shop .cat-section .card__media .wp-block-woocommerce-product-image a,
.tpl-shop .cat-section .card__media .wc-block-components-product-image a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
.tpl-shop .cat-section .card__media .wc-block-components-product-image__inner-container {
display: none !important;
}
/* The IMAGE — contained within 60%/85% of the tile, centered */
.tpl-shop .cat-section .card__media img {
width: auto !important;
height: auto !important;
max-width: 62% !important;
max-height: 85% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
display: block !important;
}
/* Shop SALE badge (single, absolute on card__media) */
.tpl-shop .cat-section .card__media > .wp-block-woocommerce-product-sale-badge,
.tpl-shop .cat-section .card__media > .card-corner {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .62rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 4px !important;
z-index: 5 !important;
line-height: 1.2 !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
}
/* Strip the nested WC badge component inside our wrapper */
.tpl-shop .cat-section .card__media > .wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
all: unset !important;
display: inline !important;
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
}
/* Shop card text below image */
.tpl-shop .cat-section .card .card__name,
.tpl-shop .cat-section .card .wp-block-post-title {
font-size: 1rem !important;
font-weight: 600 !important;
margin: 14px 16px 4px !important;
line-height: 1.3 !important;
color: #0a1424 !important;
}
.tpl-shop .cat-section .card .card__name a,
.tpl-shop .cat-section .card .wp-block-post-title a {
color: #0a1424 !important;
text-decoration: none !important;
}
.tpl-shop .cat-section .card:hover .wp-block-post-title a { color: #1d4ed8 !important; }
.tpl-shop .cat-section .card .card__price,
.tpl-shop .cat-section .card .wp-block-woocommerce-product-price {
font-size: .95rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 16px 12px !important;
}
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button {
margin: auto 14px 14px !important;
}
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button a,
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button button {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 8px !important;
font-size: .84rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
border: none !important;
text-transform: none !important;
min-height: 40px !important;
box-shadow: none !important;
text-shadow: none !important;
}
.tpl-shop .cat-section .card .wp-block-woocommerce-product-button a:hover { background: #1d4ed8 !important; }
/* ============================================================ */
/* PDP MAIN IMAGE — hide sale badge (not useful on main image) */
/* ============================================================ */
body.single-product .pdp2__main .wp-block-woocommerce-product-sale-badge,
body.single-product .pdp2__main .wc-block-components-product-sale-badge {
display: none !important;
}
/* ============================================================ */
/* PDP "Often researched together" cross-sell cards */
/* ============================================================ */
body.single-product .wp-block-woocommerce-related-products .cross-card {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 0 !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.single-product .wp-block-woocommerce-related-products .cross-card:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image {
aspect-ratio: 1/1 !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
overflow: hidden !important;
margin: 0 !important;
width: 100% !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
border-radius: 0 !important;
position: relative !important;
box-sizing: border-box !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card img {
width: auto !important;
height: auto !important;
max-width: 62% !important;
max-height: 85% !important;
object-fit: contain !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
}
/* ============================================================ */
/* CART cross-sells: "You may be interested in..." */
/* ============================================================ */
body.woocommerce-cart .cross-sells ul.products li.product {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.woocommerce-cart .cross-sells ul.products li.product:hover {
transform: translateY(-3px);
border-color: #1d4ed8;
box-shadow: 0 12px 28px -12px rgba(29,78,216,.18);
}
/* The product wraps the image, title, and price */
body.woocommerce-cart .cross-sells ul.products li.product > a {
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: inherit !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
aspect-ratio: auto !important;
position: static !important;
overflow: visible !important;
border: 0 !important;
}
/* Image tile — the img is the visual element */
body.woocommerce-cart .cross-sells ul.products li.product img {
display: block !important;
width: 100% !important;
aspect-ratio: 1 !important;
object-fit: contain !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
padding: 18px !important;
margin: 0 !important;
box-sizing: border-box !important;
border-bottom: 1px solid rgba(10,20,36,.06) !important;
position: static !important;
transform: none !important;
max-width: none !important;
max-height: none !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.12)) !important;
}
/* Show title + price inside the */
body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-cart .cross-sells ul.products li.product h2 {
display: block !important;
font-size: .95rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
margin: 12px 16px 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price {
display: block !important;
font-size: .92rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 16px 12px !important;
padding: 0 !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 6px !important;
font-size: .82rem !important;
}
/* Add to cart button — rendered as sibling of , make it stick to bottom */
body.woocommerce-cart .cross-sells ul.products li.product .button,
body.woocommerce-cart .cross-sells ul.products li.product .added_to_cart {
background: #0a1424 !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 8px !important;
font-size: .82rem !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
margin: auto 14px 14px !important;
border: 0 !important;
text-transform: none !important;
min-height: 40px !important;
box-shadow: none !important;
text-shadow: none !important;
line-height: 1.4 !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .button:hover { background: #1d4ed8 !important; }
/* Sale badge on cart cross-sell */
body.woocommerce-cart .cross-sells ul.products li.product .onsale {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
z-index: 5 !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .6rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 3px 8px !important;
border-radius: 4px !important;
min-height: 0 !important;
min-width: 0 !important;
line-height: 1.2 !important;
margin: 0 !important;
}
/* ============================================================================
v1.3.6 FINAL: UNIFY ALL PRODUCT CARDS -- mirror homepage .peptigo-card
=========================================================================
Confirmed via Chrome MCP live DOM inspection:
- PDP cross-sells had phantom 391x391 .wc-block-components-notices inflating cards
- PDP cross-sell h3.cross-card__name was display:none
- Cart cross-sells had h2/price hidden, and stuck in cart-collaterals 500px col
- Shop cards structurally OK but image framing could be tighter
Strategy: one nuclear override block at end of file -- wins the cascade.
========================================================================== */
/* 1) Kill the phantom notices box in PDP cross-sells */
.cross-card > .wc-block-components-notices,
body.single-product .cross-card > .wc-block-components-notices,
body.single-product .wp-block-woocommerce-related-products .wc-block-components-notices {
display: none !important;
}
/* 2) PDP cross-sell: card container (match homepage .peptigo-card) */
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template > li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card {
background: #fff !important;
border-radius: 16px !important;
border: 1px solid rgba(15,23,42,.06) !important;
box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
overflow: hidden !important;
padding: 0 !important;
gap: 0 !important;
transition: transform .35s, box-shadow .35s !important;
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: inherit !important;
height: auto !important;
min-height: 0 !important;
width: 100% !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 14px 28px -10px rgba(15,23,42,.18) !important;
}
/* 3) PDP cross-sell: image wrap framed like .peptigo-card__media */
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image {
aspect-ratio: 1/1 !important;
width: 100% !important;
height: auto !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 10px 10px 36px !important;
overflow: hidden !important;
position: relative !important;
margin: 0 !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image::before {
content: "";
position: absolute; left: 50%; top: 55%;
width: 85%; height: 75%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter: blur(14px);
pointer-events: none;
z-index: 0;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image__inner-container {
display: contents !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card img {
width: auto !important;
height: auto !important;
max-width: 82% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 1 !important;
aspect-ratio: auto !important;
filter: drop-shadow(0 18px 24px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18)) !important;
}
/* LAB TESTED badge at bottom of image wrap */
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image::after {
content: "LAB TESTED";
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,.92);
padding: 4px 10px;
border-radius: 4px;
font-size: .65rem;
color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: .12em;
z-index: 3;
backdrop-filter: blur(2px);
pointer-events: none;
}
/* Sale badge on PDP cross-sell card (nested one) */
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-sale-badge {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: #1d4ed8 !important;
color: #fff !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: .62rem !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
padding: 4px 9px !important;
border-radius: 5px !important;
min-height: 0 !important;
min-width: 0 !important;
line-height: 1.2 !important;
z-index: 4 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-sale-badge__text {
font-size: inherit !important;
color: inherit !important;
}
/* 4) PDP cross-sell: unhide + style title/price/button */
body.single-product .wp-block-woocommerce-related-products .cross-card .cross-card__name,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-post-title {
display: block !important;
visibility: visible !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
margin: 16px 16px 2px !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.3 !important;
width: auto !important;
height: auto !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .cross-card__name a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-post-title a {
color: inherit !important;
text-decoration: none !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-price {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
text-align: center !important;
padding: 0 16px 14px !important;
margin: 0 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-price del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 8px !important;
font-size: .85em !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button {
padding: 0 16px 16px !important;
margin: 0 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button button {
display: block !important;
width: 100% !important;
background: #0f172a !important;
color: #fff !important;
border-radius: 12px !important;
padding: 12px 18px !important;
font-weight: 600 !important;
font-size: .82rem !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
text-align: center !important;
text-decoration: none !important;
border: 0 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a:hover,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button button:hover {
background: #1d4ed8 !important;
}
/* 5) Mobile PDP cross-sell: 1 column */
@media (max-width: 700px) {
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template {
grid-template-columns: 1fr !important;
}
}
/* =========================================================================
CART CROSS-SELLS: full width below cart, peptigo-card visual
========================================================================= */
/* Break cross-sells out of the 500px cart-collaterals column */
body.woocommerce-cart .cart-collaterals {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: none !important;
float: none !important;
gap: 56px !important;
}
body.woocommerce-cart .cart-collaterals::before,
body.woocommerce-cart .cart-collaterals::after { display: none !important; content: none !important; }
body.woocommerce-cart .cart-collaterals .cart_totals {
max-width: 480px !important;
width: 100% !important;
margin-left: auto !important;
float: none !important;
order: 1 !important;
}
body.woocommerce-cart .cart-collaterals .cross-sells {
order: 2 !important;
width: 100% !important;
max-width: none !important;
float: none !important;
clear: both !important;
margin: 0 !important;
}
/* Cross-sells title */
body.woocommerce-cart .cross-sells > h2 {
font-size: 1.6rem !important;
text-align: left !important;
margin: 0 0 24px !important;
font-weight: 600 !important;
color: #0a1424 !important;
}
/* Card grid */
body.woocommerce-cart .cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
float: none !important;
}
body.woocommerce-cart .cross-sells ul.products::before,
body.woocommerce-cart .cross-sells ul.products::after { display: none !important; content: none !important; }
/* Each card */
body.woocommerce-cart .cross-sells ul.products li.product {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
background: #fff !important;
border-radius: 16px !important;
border: 1px solid rgba(15,23,42,.06) !important;
box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
overflow: hidden !important;
transition: transform .35s, box-shadow .35s !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
list-style: none !important;
}
body.woocommerce-cart .cross-sells ul.products li.product:hover {
transform: translateY(-5px) !important;
box-shadow: 0 14px 28px -10px rgba(15,23,42,.18) !important;
}
/* First link holds image + title + price: make it flex column card body */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type {
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: inherit !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
position: relative !important;
}
/* Image -- use radial gradient backdrop directly on img (transparent PNGs) */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1 !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
object-position: center bottom !important;
object-position: center 85% !important;
margin: 0 !important;
padding: 14px 14px 40px !important;
box-sizing: border-box !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
filter: drop-shadow(0 18px 24px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18)) !important;
}
/* Title */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type h2,
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .woocommerce-loop-product__title,
body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
display: block !important;
visibility: visible !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
margin: 14px 0 2px !important;
padding: 0 16px !important;
text-align: center !important;
line-height: 1.3 !important;
width: auto !important;
height: auto !important;
text-transform: none !important;
}
/* Price */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .price,
body.woocommerce-cart .cross-sells ul.products li.product .price {
display: block !important;
visibility: visible !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
text-align: center !important;
padding: 0 16px 14px !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price del {
color: #94a3b8 !important;
font-weight: 400 !important;
margin-right: 8px !important;
font-size: .85em !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price ins {
background: transparent !important;
text-decoration: none !important;
}
/* Add to cart button */
body.woocommerce-cart .cross-sells ul.products li.product .button,
body.woocommerce-cart .cross-sells ul.products li.product .added_to_cart {
display: block !important;
margin: auto 16px 16px !important;
padding: 12px 18px !important;
background: #0f172a !important;
color: #fff !important;
border-radius: 12px !important;
text-align: center !important;
font-weight: 600 !important;
font-size: .82rem !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
text-decoration: none !important;
border: 0 !important;
width: auto !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .button:hover,
body.woocommerce-cart .cross-sells ul.products li.product .added_to_cart:hover {
background: #1d4ed8 !important;
}
/* LAB TESTED pill under the image */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type::after {
content: "LAB TESTED";
position: absolute;
top: calc((100% / var(--c, 1)) * 0);
left: 50%;
transform: translateX(-50%);
margin-top: 0;
background: rgba(255,255,255,.92);
padding: 4px 10px;
border-radius: 4px;
font-size: .62rem;
color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: .12em;
z-index: 3;
backdrop-filter: blur(2px);
pointer-events: none;
display: none; /* disabled -- image doesn't have fixed container to hook to cleanly */
}
/* Responsive */
@media (max-width: 900px) {
body.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 540px) {
body.woocommerce-cart .cross-sells ul.products { grid-template-columns: 1fr !important; }
}
/* =========================================================================
SHOP CAT-SECTION cards: tighten framing to match homepage exactly
========================================================================= */
.tpl-shop .cat-section .card__media {
aspect-ratio: 1/1 !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 10px 10px 36px !important;
overflow: hidden !important;
box-sizing: border-box !important;
position: relative !important;
border-radius: 12px 12px 0 0 !important;
}
.tpl-shop .cat-section .card__media::before {
content: "";
position: absolute; left: 50%; top: 55%;
width: 85%; height: 75%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 72%);
filter: blur(14px);
pointer-events: none;
z-index: 0;
}
.tpl-shop .cat-section .card__media .wp-block-woocommerce-product-image,
.tpl-shop .cat-section .card__media .wc-block-components-product-image,
.tpl-shop .cat-section .card__media .wc-block-components-product-image__inner-container,
.tpl-shop .cat-section .card__media .wc-block-components-product-image a {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
overflow: visible !important;
border-radius: 0 !important;
position: relative !important;
z-index: 1 !important;
}
.tpl-shop .cat-section .card__media img {
width: auto !important;
height: auto !important;
max-width: 82% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: contain !important;
object-position: center bottom !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: auto !important;
position: relative !important;
z-index: 1 !important;
filter: drop-shadow(0 18px 24px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18)) !important;
}
/* LAB TESTED pill on shop cards */
.tpl-shop .cat-section .card__media::after {
content: "LAB TESTED";
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,.92);
padding: 4px 10px;
border-radius: 4px;
font-size: .62rem;
color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: .12em;
z-index: 3;
backdrop-filter: blur(2px);
pointer-events: none;
white-space: nowrap;
}
/* =========================================================================
PDP HERO IMAGE: add LAB TESTED pill under vial (matches homepage cards)
========================================================================= */
.pdp2__main {
position: relative !important;
padding-bottom: 42px !important;
}
.pdp2__main::after {
content: "LAB TESTED";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,.92);
padding: 6px 14px;
border-radius: 6px;
font-size: .72rem;
color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: .14em;
font-weight: 600;
z-index: 3;
backdrop-filter: blur(2px);
pointer-events: none;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
/* ============================================================================
v1.3.7: CENTER VIALS + WIRE FILTERS
-------------------------------------------------------------------------
Issue: shop card vials were shifted right because intermediate wrappers
(A, .wc-block-components-product-image__inner-container) had width:auto
causing the flex parent to only partially center the content.
Fix: force every wrapper in the chain to width:100% + flex center, and
put margin:0 auto on IMG as the final horizontal centering safety net.
========================================================================== */
.tpl-shop .cat-section .card__media,
.tpl-shop .cat-section .card__media * {
box-sizing: border-box !important;
}
/* Every wrapper in the image chain: full-width, flex-end / center */
.tpl-shop .cat-section .card__media .wp-block-woocommerce-product-image,
.tpl-shop .cat-section .card__media .wp-block-woocommerce-product-image > a,
.tpl-shop .cat-section .card__media .wp-block-woocommerce-product-image a,
.tpl-shop .cat-section .card__media .wc-block-components-product-image,
.tpl-shop .cat-section .card__media .wc-block-components-product-image > a,
.tpl-shop .cat-section .card__media .wc-block-components-product-image a,
.tpl-shop .cat-section .card__media .wc-block-components-product-image__inner-container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
aspect-ratio: auto !important;
background: transparent !important;
border-radius: 0 !important;
overflow: visible !important;
position: relative !important;
text-align: center !important;
}
/* The IMG — center with margin auto AND object-position */
.tpl-shop .cat-section .card__media img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 82% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center bottom !important;
aspect-ratio: auto !important;
position: relative !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/* Same nuclear centering for PDP cross-sells (was shifted too) */
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image > a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image > a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image__inner-container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
aspect-ratio: auto !important;
background: transparent !important;
position: relative !important;
text-align: center !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card img {
margin: 0 auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/* =========================================================================
v1.3.7: Sidebar filter checkbox layout
========================================================================= */
.tpl-shop .filters .check {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
cursor: pointer !important;
padding: 7px 0 !important;
font-size: .92rem !important;
color: #334155 !important;
transition: color .15s !important;
}
.tpl-shop .filters .check:hover { color: #0a1424 !important; }
.tpl-shop .filters .check__lbl {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
flex: 1 !important;
min-width: 0 !important;
}
.tpl-shop .filters .check__lbl input[type="checkbox"] {
width: 14px !important;
height: 14px !important;
accent-color: #1d4ed8 !important;
margin: 0 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.tpl-shop .filters .check .count {
font-size: .78rem !important;
color: #94a3b8 !important;
font-family: 'JetBrains Mono', monospace !important;
flex-shrink: 0 !important;
}
.tpl-shop .filters .filter-group__clear {
background: none !important;
border: 0 !important;
color: #1d4ed8 !important;
font-size: .78rem !important;
font-weight: 600 !important;
cursor: pointer !important;
padding: 0 !important;
}
.tpl-shop .filters .filter-group__clear:hover { color: #0a1424 !important; }
/* ============================================================================
v1.3.8: FINAL PASS
- Source vials are 289x607 tall; WC was cropping to 289x300 (cuts bottle).
PHP filter in functions.php now serves full-size PNG to browsers.
- With full 2:1 aspect PNG, use object-position center center so the WHOLE
bottle fits inside our 1:1 frames.
- Shrink padding so image fills more of the card frame (bigger bottles).
- LAB TESTED pill moves up next to bottle, not at very bottom of card.
- PDP cross-sells: fix uniform heights, ensure Add-to-Cart renders.
- Cart cross-sells: unhide title & price (nuclear !important), hide SALE.
========================================================================== */
/* ---- SHOP CAT CARDS ---- */
.tpl-shop .cat-section .card__media {
padding: 6px 6px 26px !important; /* tight padding so vial fills frame */
}
.tpl-shop .cat-section .card__media img {
object-position: center center !important; /* whole bottle shows */
max-width: 72% !important;
max-height: 94% !important;
}
.tpl-shop .cat-section .card__media::after {
bottom: 6px !important;
font-size: .6rem !important;
padding: 3px 8px !important;
}
/* ---- PDP MAIN IMAGE: LAB TESTED pill closer to bottle ---- */
.pdp2__main {
padding-bottom: 8px !important;
}
.pdp2__main::after {
bottom: 10% !important; /* near bottle base, not at very bottom of whitespace */
font-size: .68rem !important;
padding: 4px 11px !important;
}
/* ---- PDP CROSS-SELLS: uniform heights, full bottle, ADD TO CART visible ---- */
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 20px !important;
}
body.single-product .wp-block-woocommerce-related-products .wc-block-product-template > li {
display: flex !important;
height: auto !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-height: 0 !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-image {
flex: 0 0 auto !important; /* don't grow — let image area be fixed */
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
padding: 6px 6px 26px !important;
align-items: center !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card img {
object-position: center center !important;
max-width: 72% !important;
max-height: 94% !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wc-block-components-product-image::after {
bottom: 6px !important;
font-size: .6rem !important;
padding: 3px 8px !important;
}
/* Force title/price/button to show + take remaining space */
body.single-product .wp-block-woocommerce-related-products .cross-card .cross-card__name,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-post-title {
flex: 0 0 auto !important;
margin: 14px 14px 2px !important;
font-size: 1rem !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-price {
flex: 0 0 auto !important;
padding: 0 14px 10px !important;
font-size: 1rem !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button {
flex: 0 0 auto !important;
display: block !important;
margin: auto 14px 14px !important;
padding: 0 !important;
visibility: visible !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button button {
display: block !important;
width: 100% !important;
padding: 11px 16px !important;
background: #0f172a !important;
color: #fff !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: .78rem !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
text-align: center !important;
text-decoration: none !important;
border: 0 !important;
visibility: visible !important;
}
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button a:hover,
body.single-product .wp-block-woocommerce-related-products .cross-card .wp-block-woocommerce-product-button button:hover {
background: #1d4ed8 !important;
}
/* ---- CART CROSS-SELLS: remove SALE, show title+price, show full bottle ---- */
body.woocommerce-cart .cross-sells ul.products li.product .onsale,
body.woocommerce-cart .cross-sells ul.products li.product span.onsale {
display: none !important; /* user requested removal */
}
body.woocommerce-cart .cross-sells ul.products li.product {
position: relative !important;
}
/* First link holds [img][h2][price]. Use flex-column so they stack. */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
object-position: center center !important; /* whole bottle */
padding: 8px 12px 14px !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
display: block !important;
box-sizing: border-box !important;
}
/* NUCLEAR: unhide title + price regardless of any previous rule */
body.woocommerce-cart .cross-sells ul.products li.product h2,
body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-cart .cross-sells ul.products li.product > a h2,
body.woocommerce-cart .cross-sells ul.products li.product > a .woocommerce-loop-product__title,
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type h2,
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .woocommerce-loop-product__title {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
clip: auto !important;
clip-path: none !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
margin: 12px 14px 2px !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.3 !important;
text-transform: none !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price,
body.woocommerce-cart .cross-sells ul.products li.product > a .price,
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .price {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
clip: auto !important;
clip-path: none !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 !important;
padding: 0 14px 12px !important;
text-align: center !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price del {
color: #94a3b8 !important;
font-weight: 400 !important;
font-size: .85em !important;
margin-right: 8px !important;
text-decoration: line-through !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price ins {
background: transparent !important;
text-decoration: none !important;
}
/* ---- CART TABLE line-item thumbnails: show full bottle ---- */
body.woocommerce-cart table.shop_table img,
body.woocommerce-cart .cart_item img,
body.woocommerce-cart .woocommerce-cart-form img {
object-fit: contain !important;
object-position: center center !important;
}
/* ============================================================================
v1.3.9
- PDP "Often researched together" now uses the SAME .card markup as the
shop archive (via .tpl-shop .cat-section .card), so it inherits all the
shop-card CSS -- matches visually. See templates/single-product.html.
- PDP cross-sells grid = 3 columns (shop is 4 columns on desktop).
- Neutralized two legacy `display:none` rules that were hiding cart
cross-sell titles & prices (the ones on `> a:first-of-type h2/.price`).
- Uses flex `order` to guarantee image / title / price stack in that order
inside the cart cross-sell `` wrapper.
========================================================================== */
/* ---- PDP cross-sells section wrapper ---- */
.pdp-related {
margin: 56px 0 24px !important;
padding: 0 !important;
}
.pdp-related .wrap {
max-width: 1100px !important;
padding: 0 24px !important;
margin: 0 auto !important;
}
.pdp-related .cat-section__head {
margin-bottom: 24px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
.pdp-related .cat-section__head h2 {
font-family: 'Inter Tight', sans-serif !important;
font-size: 1.6rem !important;
font-weight: 700 !important;
color: #0a1424 !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.pdp-related .cat-section__head h2 em {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
color: #1d4ed8 !important;
font-weight: 500 !important;
}
/* Override the shop's 4-col grid to 3 for PDP related */
.pdp-related .wp-block-woocommerce-product-collection.grid,
.pdp-related .wp-block-woocommerce-product-collection > .wc-block-product-template,
.pdp-related .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.pdp-related .wc-block-product-template > li {
list-style: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Kill any leftover .cross-card styling if something matches */
.pdp-related .cross-card { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
/* Mobile: 1 col */
@media (max-width: 720px) {
.pdp-related .wp-block-woocommerce-product-collection.grid,
.pdp-related .wc-block-product-template {
grid-template-columns: 1fr !important;
}
}
/* ---- CART CROSS-SELLS: force stack order image→title→price ---- */
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type > img,
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type img {
order: 1 !important;
}
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type h2,
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .woocommerce-loop-product__title,
body.woocommerce-cart .cross-sells ul.products li.product h2.woocommerce-loop-product__title {
order: 2 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
width: auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
margin: 12px 14px 2px !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .price,
body.woocommerce-cart .cross-sells ul.products li.product .price {
order: 3 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
width: auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 !important;
padding: 0 14px 12px !important;
text-align: center !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price del {
color: #94a3b8 !important;
font-weight: 400 !important;
font-size: .85em !important;
margin-right: 8px !important;
text-decoration: line-through !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price ins {
background: transparent !important;
text-decoration: none !important;
color: inherit !important;
font-weight: 700 !important;
}
/* ============================================================================
v1.3.10 — Final overrides after live DOM inspection:
- Legacy rules set cart cross-sell img to position:absolute (overlaps title)
→ removed both (lines 7818, 8051).
- Legacy shop rule at 8457 also set card img to position:absolute w/
max-width:60% max-height:82% → removed.
- body.single-product rule hid ALL wp-block-post-title except .pdp2__title,
which also hid our PDP cross-sell card titles → added :not(.card__name).
- WC screen-reader-text ("Original price was:", "Current price is:") was
rendering as visible text inside price spans → hidden now.
========================================================================== */
/* Ensure accessible labels inside prices stay hidden visually */
.screen-reader-text,
.cross-sells .screen-reader-text,
.card .screen-reader-text,
.price .screen-reader-text,
.wc-block-components-product-price .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Image sizing: shop + PDP cross-sells (final, wins cascade) */
.tpl-shop .cat-section .card__media img,
.pdp-related .card__media img,
body.single-product .pdp-related .card__media img {
width: auto !important;
height: auto !important;
max-width: 78% !important;
max-height: 94% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
aspect-ratio: auto !important;
filter: drop-shadow(0 14px 18px rgba(15,23,42,.14)) drop-shadow(0 6px 10px rgba(29,78,216,.16)) !important;
}
/* ============================================================================
v1.3.11 -- HARDWIRED OVERRIDE. Last rule in the file, highest specificity
with html body prefix, wins over every legacy rule.
Confirmed root cause via live DOM inspection:
- Line 8347: global WC img normalizer had position:absolute + 65/85 max --
caused cart cross-sell img to overlay title/price + PDP vial too small
- Line 5540: body.single-product .wp-block-woocommerce-related-products img
rule capped PDP cross-sell vial to 65%/90%.
Both removed + this override now sets correct sizes.
========================================================================== */
/* Shop archive + PDP cross-sells card__media centering (not flex-end) */
html body .tpl-shop .cat-section .card .card__media,
html body.single-product .pdp-related .card .card__media {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px 14px 30px !important;
position: relative !important;
overflow: hidden !important;
box-sizing: border-box !important;
aspect-ratio: 1 / 1 !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
}
/* The WC block wrappers inside card__media must NOT constrain */
html body .tpl-shop .cat-section .card .card__media .wp-block-woocommerce-product-image,
html body .tpl-shop .cat-section .card .card__media .wc-block-components-product-image,
html body .tpl-shop .cat-section .card .card__media .wc-block-components-product-image__inner-container,
html body .tpl-shop .cat-section .card .card__media .wc-block-components-product-image a,
html body.single-product .pdp-related .card .card__media .wp-block-woocommerce-product-image,
html body.single-product .pdp-related .card .card__media .wc-block-components-product-image,
html body.single-product .pdp-related .card .card__media .wc-block-components-product-image__inner-container,
html body.single-product .pdp-related .card .card__media .wc-block-components-product-image a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border-radius: 0 !important;
overflow: visible !important;
position: relative !important;
aspect-ratio: auto !important;
flex: 1 1 auto !important;
}
/* The IMG itself -- let it grow to fit the full frame */
html body .tpl-shop .cat-section .card .card__media img,
html body.single-product .pdp-related .card .card__media img {
display: block !important;
width: auto !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
aspect-ratio: auto !important;
filter: drop-shadow(0 14px 18px rgba(15,23,42,.14)) drop-shadow(0 6px 10px rgba(29,78,216,.16)) !important;
}
/* LAB TESTED pill on card__media - attach to bottom nicely */
html body .tpl-shop .cat-section .card .card__media::after,
html body.single-product .pdp-related .card .card__media::after {
content: "LAB TESTED";
position: absolute !important;
bottom: 6px !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: rgba(255,255,255,.92) !important;
padding: 3px 9px !important;
border-radius: 4px !important;
font-size: .6rem !important;
color: #64748b !important;
font-family: 'JetBrains Mono', monospace !important;
letter-spacing: .12em !important;
z-index: 3 !important;
pointer-events: none !important;
white-space: nowrap !important;
backdrop-filter: blur(2px) !important;
}
/* Make card a fixed min-height so Add to Cart never gets cut */
html body .tpl-shop .cat-section .card,
html body.single-product .pdp-related .card {
display: flex !important;
flex-direction: column !important;
min-height: 420px !important;
background: #fff !important;
border: 1px solid rgba(15,23,42,.06) !important;
border-radius: 14px !important;
overflow: hidden !important;
}
html body.single-product .pdp-related .card .card__addcart,
html body.single-product .pdp-related .card .wp-block-woocommerce-product-button {
margin-top: auto !important;
}
/* CART CROSS-SELLS img: ensure in-flow, no overlap */
html body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type img,
html body.woocommerce-cart .cross-sells ul.products li.product > a img,
html body.woocommerce-cart .cross-sells ul.products li.product img {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
object-position: center center !important;
padding: 8px 12px 14px !important;
margin: 0 !important;
box-sizing: border-box !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
display: block !important;
order: 1 !important;
}
html body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type h2,
html body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .woocommerce-loop-product__title,
html body.woocommerce-cart .cross-sells ul.products li.product h2.woocommerce-loop-product__title {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
margin: 12px 14px 2px !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.3 !important;
order: 2 !important;
}
html body.woocommerce-cart .cross-sells ul.products li.product > a:first-of-type .price,
html body.woocommerce-cart .cross-sells ul.products li.product .price {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
margin: 0 !important;
padding: 0 14px 12px !important;
text-align: center !important;
order: 3 !important;
}
/* ============================================================================
v1.3.12 — CLEAN SLATE
Cart cross-sells + PDP cross-sells now generated via PHP with brand-new
`.peptigo-product-card` class. This class is NOT used anywhere else, so no
legacy rule fights with it. Full structural + visual control.
PDP template: uses [peptigo_related_products] shortcode (see functions.php).
Cart template: woocommerce/cart/cross-sells.php (overrides WC default).
Shop archive still uses existing .card structure (already working per user).
========================================================================== */
.peptigo-product-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(15,23,42,.06);
border-radius: 14px;
overflow: hidden;
transition: transform .35s, box-shadow .35s;
text-decoration: none;
color: inherit;
min-height: 420px;
}
.peptigo-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 28px -10px rgba(15,23,42,.18);
}
/* Image area -- square, gradient backdrop, vial centered */
.peptigo-product-card__media {
display: flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: 1 / 1;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%);
position: relative;
overflow: hidden;
padding: 12px 12px 28px;
box-sizing: border-box;
text-decoration: none;
border-radius: 0;
}
.peptigo-product-card__img {
display: block !important;
width: auto !important;
height: 100% !important;
max-width: 82% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
position: relative !important;
aspect-ratio: auto !important;
filter: drop-shadow(0 14px 18px rgba(15,23,42,.14)) drop-shadow(0 6px 10px rgba(29,78,216,.16));
}
.peptigo-product-card__sale {
position: absolute;
top: 12px;
left: 12px;
background: #1d4ed8;
color: #fff;
font-size: .62rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 5px;
z-index: 3;
font-family: 'JetBrains Mono', monospace;
}
.peptigo-product-card__tested {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,.92);
padding: 3px 10px;
border-radius: 4px;
font-size: .6rem;
color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: .12em;
z-index: 3;
pointer-events: none;
white-space: nowrap;
backdrop-filter: blur(2px);
}
.peptigo-product-card__name {
font-size: 1rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
margin: 14px 14px 4px !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.3 !important;
font-family: 'Inter Tight', sans-serif !important;
background: transparent !important;
}
.peptigo-product-card__name a {
color: inherit !important;
text-decoration: none !important;
}
.peptigo-product-card:hover .peptigo-product-card__name a {
color: #1d4ed8 !important;
}
.peptigo-product-card__price {
font-size: 1rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
text-align: center !important;
padding: 0 14px 12px !important;
margin: 0 !important;
background: transparent !important;
}
.peptigo-product-card__price del {
color: #94a3b8 !important;
font-weight: 400 !important;
font-size: .85em !important;
margin-right: 8px !important;
text-decoration: line-through !important;
}
.peptigo-product-card__price ins {
background: transparent !important;
text-decoration: none !important;
color: inherit !important;
font-weight: 700 !important;
}
.peptigo-product-card__price .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.peptigo-product-card__cta {
margin: auto 14px 14px !important;
padding: 0 !important;
}
.peptigo-product-card__cta .button,
.peptigo-product-card__cta a.button,
.peptigo-product-card__cta .added_to_cart {
display: block !important;
width: 100% !important;
padding: 12px 16px !important;
background: #0f172a !important;
color: #fff !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: .82rem !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
text-align: center !important;
text-decoration: none !important;
border: 0 !important;
transition: background .2s !important;
cursor: pointer !important;
box-sizing: border-box !important;
line-height: 1 !important;
}
.peptigo-product-card__cta .button:hover {
background: #1d4ed8 !important;
}
/* ---- Grid containers ---- */
.peptigo-card-grid {
display: grid;
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.peptigo-card-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) {
.peptigo-card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.peptigo-card-grid--3 { grid-template-columns: 1fr; }
}
/* 4-column grid for shop archive */
.peptigo-card-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.peptigo-card-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.peptigo-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
.peptigo-card-grid--4 { grid-template-columns: 1fr; }
}
/* Cat-section spacing inside shop (the filter sidebar still uses .cat-section) */
.tpl-shop .cat-section .peptigo-card-grid {
margin-top: 8px;
}
/* ---- PDP "Often researched together" section wrap ---- */
.peptigo-related-wrap {
max-width: 1100px;
margin: 56px auto 24px;
padding: 0 24px;
}
.peptigo-related-head {
margin: 0 0 24px;
padding: 0 0 14px;
border-bottom: 1px solid rgba(15,23,42,.08);
}
.peptigo-related-head h2 {
font-family: 'Inter Tight', sans-serif;
font-size: 1.6rem;
font-weight: 700;
color: #0a1424;
margin: 0;
line-height: 1.2;
}
.peptigo-related-head h2 em {
font-family: 'Fraunces', serif;
font-style: italic;
color: #1d4ed8;
font-weight: 500;
}
/* ---- Cart cross-sells wrapper (override layout) ---- */
body.woocommerce-cart .cart-collaterals {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 48px !important;
width: 100% !important;
max-width: none !important;
}
body.woocommerce-cart .cart-collaterals::before,
body.woocommerce-cart .cart-collaterals::after {
display: none !important;
content: none !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals {
max-width: 480px !important;
width: 100% !important;
margin-left: auto !important;
float: none !important;
order: 1 !important;
}
body.woocommerce-cart .cart-collaterals .cross-sells {
order: 2 !important;
width: 100% !important;
max-width: none !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important;
}
.peptigo-xsells {
width: 100%;
padding: 0;
}
.peptigo-xsells > h2 {
font-family: 'Inter Tight', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: #0a1424;
margin: 0 0 24px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(15,23,42,.08);
text-align: left;
}
.peptigo-xsells__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
@media (max-width: 900px) { .peptigo-xsells__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .peptigo-xsells__grid { grid-template-columns: 1fr; } }
/* ============================================================================
v1.3.14 — Hero category cards redesign
----------------------------------------------------------------------------
Old: simple white pill with text + arrow
New: horizontal card with solid-blue icon tile + title + compound count +
navy arrow button. Blue gradient fill background. Strong click
affordance (lifts, icon rotates, arrow slides + glows on hover).
Structure:
Name
X COMPOUNDS
========================================================================== */
/* Tighter grid than the old pills */
.peptigo-hero .peptigo-cats {
margin-top: 36px !important;
gap: 12px !important;
max-width: 820px !important;
}
/* Card — blue gradient fill, high click affordance */
.peptigo-hero .peptigo-cats a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
padding: 14px 18px !important;
border-radius: 14px !important;
text-decoration: none !important;
color: var(--ink-900) !important;
background: linear-gradient(135deg, #ffffff 0%, #eff6ff 55%, #dbeafe 100%) !important;
border: 1px solid rgba(255,255,255,.85) !important;
box-shadow:
0 4px 14px rgba(29,78,216,.18),
0 1px 3px rgba(15,23,42,.06),
inset 0 1px 0 rgba(255,255,255,.95) !important;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
overflow: visible !important;
font-weight: initial !important;
}
.peptigo-hero .peptigo-cats a:hover {
transform: translateY(-4px) !important;
background: linear-gradient(135deg, #ffffff 0%, #dbeafe 55%, #bfdbfe 100%) !important;
box-shadow:
0 12px 32px rgba(29,78,216,.28),
0 2px 6px rgba(15,23,42,.08),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* Icon tile — solid blue gradient, pops on white */
.peptigo-hero .peptigo-cats__icon {
flex-shrink: 0;
width: 40px; height: 40px; border-radius: 11px;
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: #fff;
box-shadow: 0 4px 10px rgba(29,78,216,.35), inset 0 1px 0 rgba(255,255,255,.2);
display: grid; place-items: center;
transition: transform .25s ease, box-shadow .25s ease;
}
.peptigo-hero .peptigo-cats a:hover .peptigo-cats__icon {
transform: scale(1.06) rotate(-3deg);
box-shadow: 0 6px 14px rgba(29,78,216,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.peptigo-hero .peptigo-cats__icon svg { width: 20px; height: 20px; }
/* Label block — title + count stacked */
.peptigo-hero .peptigo-cats__label {
flex: 1;
text-align: left;
line-height: 1.2;
display: flex; flex-direction: column; gap: 2px;
}
.peptigo-hero .peptigo-cats__label-title {
font-weight: 700;
font-size: .93rem;
font-family: 'Inter Tight', sans-serif;
color: var(--ink-900);
letter-spacing: -.005em;
}
.peptigo-hero .peptigo-cats__label-count {
color: var(--blue-700);
font-size: .68rem;
font-family: 'JetBrains Mono', monospace;
letter-spacing: .08em;
font-weight: 600;
}
/* Arrow button — navy, with hover glow */
.peptigo-hero .peptigo-cats__arrow {
width: 30px; height: 30px; border-radius: 999px;
background: var(--navy-900);
color: #fff;
display: grid; place-items: center;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(11,23,54,.3);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.peptigo-hero .peptigo-cats a:hover .peptigo-cats__arrow {
background: var(--blue-600);
transform: translateX(3px);
box-shadow: 0 5px 14px rgba(29,78,216,.45);
}
.peptigo-hero .peptigo-cats__arrow svg { width: 14px; height: 14px; }
/* Responsive: stack below 640px */
@media (max-width: 640px) {
.peptigo-hero .peptigo-cats {
grid-template-columns: 1fr !important;
max-width: 360px !important;
}
.peptigo-hero .peptigo-cats a {
padding: 12px 14px !important;
}
}
/* ============================================================
v1.3.28 — MOBILE REFINEMENTS (<=760px) [replaces v1.3.27]
Changes vs v1.3.27:
* Shop categories + homepage featured now horizontal scroll
(matching "often researched together" pattern)
* "You may be interested in" also horizontal scroll
* PDP image: override inline object-fit:cover -> contain
and use portrait-friendly container so image isn't cropped
* PDP: tighten gap between add-to-cart panel and description
* Cart totals: proper 2-col table layout on mobile (label left,
amount right, full width), buttons box-sizing correct so they
can't overflow the card
+ NEW desktop cart re-layout (>=761px): totals spans full width
below items, proceed-to-checkout is a compact right-aligned
button instead of full-width stripe
============================================================ */
@media (max-width: 760px) {
/* ---- HERO (homepage) ---- */
.peptigo-hero .peptigo-cats { display: none !important; }
.peptigo-hero__cta,
body .peptigo-hero__cta {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: auto !important;
max-width: none !important;
margin: 24px 20px 0 !important;
padding: 0 !important;
gap: 10px !important;
}
.peptigo-hero__cta .peptigo-btn,
body .peptigo-hero__cta .peptigo-btn {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
justify-content: center !important;
padding: 14px 20px !important;
}
/* ============================================================
HORIZONTAL SCROLL CAROUSEL — shared pattern
Applies to: homepage featured, cart cross-sells, PDP related
products. Curated sets (≤8 items) where swipe makes sense.
Shop archive is excluded — it gets a 2-col grid below so users
can browse all 33 products at once.
============================================================ */
.peptigo-grid,
.peptigo-xsells__grid,
.peptigo-card-grid--3 {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: 12px !important;
padding: 4px 16px 18px !important;
margin-left: -16px !important;
margin-right: -16px !important;
scrollbar-width: none !important;
}
.peptigo-grid::-webkit-scrollbar,
.peptigo-xsells__grid::-webkit-scrollbar,
.peptigo-card-grid--3::-webkit-scrollbar { display: none !important; }
.peptigo-grid > *,
.peptigo-xsells__grid > *,
.peptigo-card-grid--3 > * {
flex: 0 0 70% !important;
min-width: 0 !important;
scroll-snap-align: start !important;
}
/* ============================================================
v1.3.69: Shop archive — 2-col grid on mobile.
Replaces the old 70% horizontal carousel so users can scan
all 33 products without swiping. Smaller cards = more visible
at once = faster product discovery.
============================================================ */
.tpl-shop .peptigo-card-grid--4 {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 4px 0 18px !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: visible !important;
}
.tpl-shop .peptigo-card-grid--4 > * {
flex: initial !important;
min-width: 0 !important;
width: 100% !important;
}
/* Tighten card typography & spacing for the smaller 2-col layout */
.tpl-shop .peptigo-card-grid--4 .peptigo-card__body {
padding: 10px 10px 2px !important;
}
.tpl-shop .peptigo-card-grid--4 .peptigo-card__body h3 {
font-size: .85rem !important;
line-height: 1.15 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.tpl-shop .peptigo-card-grid--4 .peptigo-card__body p {
font-size: .68rem !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.tpl-shop .peptigo-card-grid--4 .peptigo-card__cat,
.tpl-shop .peptigo-card-grid--4 .peptigo-card__rate {
font-size: .55rem !important;
padding: 3px 6px !important;
}
.tpl-shop .peptigo-card-grid--4 .peptigo-card__tested {
font-size: .54rem !important;
}
.tpl-shop .peptigo-card-grid--4 .peptigo-card__cta {
margin: 8px !important;
padding: 9px 10px !important;
width: calc(100% - 16px) !important;
}
.tpl-shop .peptigo-card-grid--4 .peptigo-card__cta * {
font-size: .78rem !important;
}
/* Homepage "most-ordered" card polish at carousel width */
.peptigo-card__body { padding: 12px 12px 2px !important; }
.peptigo-card__body h3 { font-size: .96rem !important; line-height: 1.2 !important; }
.peptigo-card__body p { font-size: .74rem !important; }
.peptigo-card__cat,
.peptigo-card__rate { font-size: .6rem !important; padding: 4px 8px !important; }
.peptigo-card__tested { font-size: .58rem !important; }
.peptigo-card__cta {
margin: 10px !important;
padding: 10px 12px !important;
font-size: 0 !important;
justify-content: center !important;
width: calc(100% - 20px) !important;
}
.peptigo-card__cta * { font-size: .86rem !important; }
/* Shop card polish */
.tpl-shop .card__name { font-size: .94rem !important; }
.tpl-shop .card__dose { font-size: .7rem !important; }
/* Cross-sell card polish (template uses .peptigo-product-card) */
.peptigo-product-card { padding: 10px !important; }
.peptigo-product-card__media {
aspect-ratio: 1/1 !important;
padding: 10px !important;
overflow: hidden !important;
}
.peptigo-product-card__img {
width: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.peptigo-product-card__name { font-size: .9rem !important; margin: 10px 0 4px !important; }
.peptigo-product-card__price { font-size: .86rem !important; }
.peptigo-product-card__cta .button {
padding: 10px 12px !important;
font-size: .72rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ============================================================
PRODUCT PAGE (PDP)
============================================================ */
body.single-product .pdp2__gallery {
padding: 0 !important;
margin: 0 auto !important;
width: 100% !important;
}
/* Portrait-friendly container (product images are 324x643, ~1:2).
A square container with object-fit:cover crops the middle — that
is the "halfway down cut off" the user was seeing. */
body.single-product .pdp2__main {
aspect-ratio: auto !important;
max-width: 100% !important;
width: calc(100% - 24px) !important;
margin: 12px auto !important;
padding: 14px !important;
min-height: 0 !important;
max-height: 62vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* WC injects inline style="object-fit:cover" — must use !important */
body.single-product .pdp2__main img,
body.single-product .pdp2__main picture img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 58vh !important;
margin: 0 auto !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
}
/* Kill the 40px top-margin + 48px top-padding stack on description
that created the gap below the add-to-cart area. */
body.single-product .pdp2-description {
margin-top: 0 !important;
padding: 20px 0 24px !important;
}
body.single-product .pdp2-description .wrap { padding: 0 16px !important; }
body.single-product .pdp2__trust { padding: 12px 0 0 !important; gap: 8px !important; }
.peptigo-related-wrap { padding: 0 16px !important; }
/* ============================================================
CART PAGE — mobile layout
============================================================ */
body.woocommerce-cart .tpl-cart-wc,
.tpl-cart-wc { padding: 0 !important; }
.tpl-cart-wc .wrap {
padding: 16px !important;
margin: 8px 0 0 !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
box-shadow: none !important;
max-width: 100% !important;
}
.tpl-cart-wc .breadcrumb { padding: 12px 16px 0 !important; }
/* Cart ITEMS table -> stacked cards (scoped to cart-form contents, NOT totals) */
.tpl-cart-wc .woocommerce-cart-form__contents,
.tpl-cart-wc .woocommerce-cart-form__contents thead,
.tpl-cart-wc .woocommerce-cart-form__contents tbody,
.tpl-cart-wc .woocommerce-cart-form__contents tr,
.tpl-cart-wc .woocommerce-cart-form__contents td,
.tpl-cart-wc .woocommerce-cart-form__contents th {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.tpl-cart-wc .woocommerce-cart-form__contents thead { display: none !important; }
.tpl-cart-wc .woocommerce-cart-form__contents { border: 0 !important; border-radius: 0 !important; }
.tpl-cart-wc .woocommerce-cart-form__contents tr.cart_item {
background: #fff !important;
border: 1px solid rgba(10,20,36,.08) !important;
border-radius: 12px !important;
padding: 14px !important;
margin-bottom: 14px !important;
display: grid !important;
grid-template-columns: 80px 1fr !important;
grid-template-areas:
"thumb name"
"thumb price"
"qty subtotal"
"remove remove" !important;
gap: 6px 14px !important;
align-items: start !important;
}
.tpl-cart-wc .woocommerce-cart-form__contents td {
padding: 0 !important;
border: 0 !important;
text-align: left !important;
}
.tpl-cart-wc .woocommerce-cart-form__contents td.product-thumbnail { grid-area: thumb !important; width: 80px !important; }
.tpl-cart-wc .woocommerce-cart-form__contents td.product-thumbnail img {
width: 80px !important; max-width: 80px !important; height: 80px !important;
border-radius: 8px !important;
background: radial-gradient(70% 55% at 50% 45%, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
object-fit: contain !important;
}
.tpl-cart-wc .woocommerce-cart-form__contents td.product-name { grid-area: name !important; }
.tpl-cart-wc .woocommerce-cart-form__contents td.product-price { grid-area: price !important; color: #64748b; font-size: .9rem; }
.tpl-cart-wc .woocommerce-cart-form__contents td.product-quantity { grid-area: qty !important; }
.tpl-cart-wc .woocommerce-cart-form__contents td.product-subtotal { grid-area: subtotal !important; text-align: right !important; font-weight: 600; }
.tpl-cart-wc .woocommerce-cart-form__contents td.product-remove { grid-area: remove !important; text-align: right !important; padding-top: 4px !important; }
.tpl-cart-wc .woocommerce-cart-form__contents td.product-quantity::before,
.tpl-cart-wc .woocommerce-cart-form__contents td.product-subtotal::before {
content: attr(data-title);
font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
color: #94a3b8; font-weight: 500; display: block; margin-bottom: 4px;
}
.tpl-cart-wc .woocommerce-cart-form__contents td.product-quantity .quantity { display: inline-flex !important; align-items: center; }
.tpl-cart-wc .woocommerce-cart-form__contents td.product-quantity input { width: 60px !important; min-width: 60px !important; }
/* Actions row (coupon + update cart) */
.tpl-cart-wc .actions {
display: flex !important; flex-direction: column !important;
gap: 10px !important; padding: 14px !important;
}
.tpl-cart-wc .coupon {
display: flex !important; flex-direction: row !important;
gap: 8px !important; width: 100% !important;
}
.tpl-cart-wc .coupon input[type="text"] {
flex: 1 1 auto !important; margin-right: 0 !important; min-width: 0 !important;
}
.tpl-cart-wc .actions button,
.tpl-cart-wc .actions .button {
width: 100% !important;
box-sizing: border-box !important;
}
/* Cart TOTALS panel — full-width card with 2-col table inside */
.tpl-cart-wc .cart-collaterals,
.tpl-cart-wc .cart_totals {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 16px 0 0 !important;
}
.tpl-cart-wc .cart_totals {
background: #fff;
border: 1px solid rgba(10,20,36,.08);
border-radius: 12px;
padding: 16px !important;
box-sizing: border-box !important;
}
.tpl-cart-wc .cart_totals > h2 {
font-size: 1.15rem !important;
margin: 0 0 12px !important;
text-align: left !important;
}
/* The cart_totals table is ALSO a shop_table — override the "cart items
become stacked cards" rule so the totals table stays a real 2-col table. */
.tpl-cart-wc .cart_totals table,
.tpl-cart-wc .cart_totals tbody {
display: table !important;
width: 100% !important;
border: 0 !important;
border-radius: 0 !important;
}
.tpl-cart-wc .cart_totals tbody { display: table-row-group !important; }
.tpl-cart-wc .cart_totals tr {
display: table-row !important;
width: auto !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.tpl-cart-wc .cart_totals th,
.tpl-cart-wc .cart_totals td {
display: table-cell !important;
padding: 10px 0 !important;
border-top: 1px solid rgba(10,20,36,.06) !important;
background: transparent !important;
}
.tpl-cart-wc .cart_totals th {
width: 50% !important;
text-align: left !important;
font-weight: 500 !important;
color: #475569 !important;
}
.tpl-cart-wc .cart_totals td {
width: 50% !important;
text-align: right !important;
font-weight: 600 !important;
color: #0f172a !important;
}
.tpl-cart-wc .cart_totals td::before { content: none !important; display: none !important; }
.tpl-cart-wc .cart_totals .order-total th,
.tpl-cart-wc .cart_totals .order-total td {
font-size: 1.05rem !important;
color: #0f172a !important;
font-weight: 700 !important;
}
/* Proceed-to-checkout: full-width inside the totals card on mobile */
.tpl-cart-wc .wc-proceed-to-checkout {
padding: 14px 0 0 !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.tpl-cart-wc .wc-proceed-to-checkout .checkout-button {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 14px 16px !important;
text-align: center !important;
font-size: 1rem !important;
margin: 0 !important;
}
/* "You may be interested in..." — carousel pattern applied above; trim heading */
.peptigo-xsells { margin-top: 24px !important; padding: 0 !important; }
.peptigo-xsells > h2 { font-size: 1.1rem !important; padding: 0 4px 10px !important; }
}
/* ============================================================
v1.3.28 — DESKTOP CART RE-LAYOUT (>=761px)
Cart totals span full width (matching cart items dimensions).
Proceed-to-checkout is a compact right-aligned button instead
of a full-width stripe.
============================================================ */
@media (min-width: 761px) {
.tpl-cart-wc .cart-collaterals {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin-top: 24px !important;
}
.tpl-cart-wc .cart-collaterals .cart_totals {
width: 100% !important;
max-width: 100% !important;
float: none !important;
background: #fff;
border: 1px solid rgba(10,20,36,.08);
border-radius: 12px;
padding: 20px !important;
box-sizing: border-box;
}
.tpl-cart-wc .cart_totals > h2 {
font-size: 1.15rem !important;
margin: 0 0 14px !important;
}
.tpl-cart-wc .cart_totals table {
width: 100% !important;
border: 0 !important;
}
.tpl-cart-wc .cart_totals table th {
width: 60% !important;
text-align: left !important;
padding: 12px 0 !important;
font-weight: 500;
color: #475569;
}
.tpl-cart-wc .cart_totals table td {
width: 40% !important;
text-align: right !important;
padding: 12px 0 !important;
font-weight: 600;
color: #0f172a;
}
.tpl-cart-wc .wc-proceed-to-checkout {
display: flex !important;
justify-content: flex-end !important;
padding: 16px 0 0 !important;
margin: 4px 0 0 !important;
border-top: 1px solid rgba(10,20,36,.06);
}
.tpl-cart-wc .wc-proceed-to-checkout .checkout-button {
display: inline-flex !important;
width: auto !important;
padding: 12px 28px !important;
font-size: .95rem !important;
text-align: center !important;
}
}
/* ============================================================
v1.3.29 — DESKTOP CART TOTALS WIDTH FIX (>=761px)
An earlier "cart cross-sells layout" block at line ~10341 has
specificity (0,3,1) — `body.woocommerce-cart .cart-collaterals
.cart_totals { max-width: 480px; margin-left: auto; }` — that
beats my v1.3.28 rule's (0,3,0) even with !important.
This override uses (0,4,1) to finally win the cascade so the
totals panel spans the full cart width as requested.
============================================================ */
@media (min-width: 761px) {
body.woocommerce-cart .tpl-cart-wc .cart-collaterals {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 24px 0 0 !important;
padding: 0 !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 20px !important;
float: none !important;
order: 0 !important;
background: #fff;
border: 1px solid rgba(10,20,36,.08);
border-radius: 12px;
box-sizing: border-box;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals table {
width: 100% !important;
max-width: 100% !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cross-sells {
margin-top: 32px !important;
}
}
/* ============================================================
v1.3.29 — MOBILE POLISH PASS (<=760px)
Targeted fixes for issues surfaced during iPhone testing
after v1.3.28 went live:
1. Homepage featured cards now match shop card visual
(image scale, padding, equal heights, aligned content)
2. Shop categories stack tighter (less dead space)
3. Cart totals forced into viewport bounds (table-layout:fixed,
explicit widths, word-break to handle long currency values)
4. "You may be interested in" image sizing — make images
fully contained + visible at 2x/3x DPR
============================================================ */
@media (max-width: 760px) {
/* ---- 1. Homepage featured cards: match shop card styling ---- */
/* Outer carousel: enforce equal-height stretching of cards. */
.peptigo-grid {
align-items: stretch !important;
}
.peptigo-grid > .peptigo-card {
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
/* v1.3.69: Mobile featured cards now match shop archive cards exactly —
white-bg edge-to-edge with the same scale/translate transform.
Previously this rule reset transform to none and used contain-80% which
made featured images look small + off-center vs the rest of the site. */
.peptigo-grid .peptigo-card__media {
aspect-ratio: 832 / 1248 !important;
background: #fff !important;
background-image: none !important;
padding: 0 !important;
overflow: hidden !important;
display: block !important;
}
.peptigo-grid .peptigo-card__media img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
margin: 0 !important;
padding: 0 !important;
transform: translate(2.5%, 5%) scale(1.77) !important;
transform-origin: center center !important;
filter: none !important;
}
/* Body fills vertical space so CTA pins to card bottom.
Line-clamp h3 + p so text takes a consistent height across cards. */
.peptigo-grid .peptigo-card__body {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.peptigo-grid .peptigo-card__body h3 {
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.peptigo-grid .peptigo-card__body p {
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.peptigo-grid .peptigo-card__cta {
margin-top: auto !important;
}
/* ---- 2. Shop categories: tighter vertical stacking ---- */
.tpl-shop .cat-section {
padding: 0 0 20px !important;
margin-bottom: 16px !important;
}
.tpl-shop .cat-section__head {
margin-bottom: 12px !important;
padding-bottom: 10px !important;
gap: 6px !important;
}
.tpl-shop .cat-section__head h2 { font-size: 1.3rem !important; }
.tpl-shop .cat-section__head p {
margin: 0 !important;
font-size: .8rem !important;
text-align: left !important;
}
.tpl-shop .cat-section__count { font-size: .7rem !important; }
/* ---- 3. Cart totals: nuclear lock into viewport bounds ---- */
/* The 48%-float-right default from WooCommerce core CSS is what
pushes the totals half off-screen. Force every cart panel child
to respect the viewport and box-size properly. */
body.woocommerce-cart .tpl-cart-wc .woocommerce,
.tpl-cart-wc .woocommerce { display: block !important; }
body.woocommerce-cart .tpl-cart-wc .cart-collaterals,
.tpl-cart-wc .cart-collaterals {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
display: block !important;
margin: 16px 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .tpl-cart-wc .cart_totals,
.tpl-cart-wc .cart_totals {
width: 100% !important;
max-width: 100% !important;
float: none !important;
display: block !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.tpl-cart-wc .cart_totals * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Fixed table layout so a long currency value can't blow out column width */
.tpl-cart-wc .cart_totals table {
table-layout: fixed !important;
width: 100% !important;
}
.tpl-cart-wc .cart_totals th,
.tpl-cart-wc .cart_totals td {
word-break: break-word !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
}
/* Proceed-to-checkout: hard-constrain the button width */
.tpl-cart-wc .wc-proceed-to-checkout {
width: 100% !important;
max-width: 100% !important;
padding: 14px 0 0 !important;
box-sizing: border-box !important;
}
.tpl-cart-wc .wc-proceed-to-checkout .checkout-button {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 14px 12px !important;
box-sizing: border-box !important;
white-space: normal !important;
}
/* ---- 4. "You may be interested in" — cross-sell image fix ---- */
/* The media container was cropping the image on iPhone. Force the
image to sit fully inside the square media area. */
.peptigo-xsells .peptigo-product-card {
padding: 10px !important;
}
.peptigo-xsells .peptigo-product-card__media {
aspect-ratio: 1/1 !important;
padding: 12px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.peptigo-xsells .peptigo-product-card__img {
position: static !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
}
/* ============================================================
v1.3.31 — COMPREHENSIVE POLISH
Based on live-HTML inspection of homepage, PDP, cart:
DESKTOP (>=761px):
1. Cart totals internal layout — flex rows so label/value pairs
sit close together, no big middle "divider" gap
2. Cart totals above cross-sells (backed by PHP priority swap)
MOBILE (<=760px):
3. PDP image: nuclear-specificity fix — images were still being
cropped because WC block-theme rules were winning the cascade
4. PDP add-to-cart BESIDE quantity (not stacked below)
5. Homepage section vertical padding: 88px -> 32px
6. Homepage Purity/Clinically cards: fixed-width (300px/280px)
illustrations overflow viewport; constrain + center them
7. "You may be interested in" images: more aggressive fix —
explicit sizing overriding all base rules
8. Cart totals above cross-sells (CSS flex-order fallback)
============================================================ */
/* ---- DESKTOP (1, 2) ---- */
@media (min-width: 761px) {
/* Totals card: constrain inner content so label/value pairs are
visually close, not spread across 1000px with white void. */
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals table,
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals tbody {
display: block !important;
width: 100% !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals tr {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
padding: 12px 0 !important;
border-top: 1px solid rgba(10,20,36,.06) !important;
width: 100% !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals tr:first-child {
border-top: 0 !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals th,
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals td {
display: inline !important;
width: auto !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
font-weight: 500 !important;
color: #475569 !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals td {
text-align: right !important;
font-weight: 600 !important;
color: #0f172a !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals .order-total th,
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals .order-total td {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #0f172a !important;
}
/* CSS fallback for order (PHP handles it; this is belt-and-suspenders) */
body.woocommerce-cart .tpl-cart-wc .cart-collaterals {
display: flex !important;
flex-direction: column !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals { order: 1 !important; }
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cross-sells,
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .peptigo-xsells { order: 2 !important; }
}
/* ---- MOBILE (3-8) ---- */
@media (max-width: 760px) {
/* 3. PDP image — force-fit, no crop, give container a real height */
html body.single-product .pdp2__main,
body.single-product .pdp2__gallery .pdp2__main {
height: auto !important;
min-height: 360px !important;
max-height: 70vh !important;
aspect-ratio: auto !important;
width: calc(100% - 24px) !important;
margin: 12px auto !important;
padding: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
/* Strip all aspect-ratio constraints on nested image wrappers */
body.single-product .pdp2__main *,
body.single-product .pdp2__main .wc-block-components-product-image,
body.single-product .pdp2__main .wp-block-woocommerce-product-image,
body.single-product .pdp2__main .wc-block-components-product-image__inner-container {
aspect-ratio: auto !important;
}
body.single-product .pdp2__main .wc-block-components-product-image,
body.single-product .pdp2__main .wp-block-woocommerce-product-image,
body.single-product .pdp2__main .wc-block-components-product-image a,
body.single-product .pdp2__main .wp-block-woocommerce-product-image a {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: none !important;
padding: 0 !important;
}
/* Image itself — nuclear sizing (overrides inline object-fit:cover) */
html body.single-product .pdp2__main img,
html body.single-product .pdp2__main picture img,
html body.single-product .pdp2__main .wc-block-components-product-image img,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 auto !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
/* 4. PDP add-to-cart BESIDE quantity (not stacked) */
/* Simple product form (.quantity + button as direct children of form.cart) */
body.single-product .pdp2__purchase form.cart {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: stretch !important;
}
body.single-product .pdp2__purchase form.cart .quantity {
flex: 0 0 auto !important;
width: auto !important;
}
body.single-product .pdp2__purchase form.cart .single_add_to_cart_button {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
}
/* Variable product form (qty + button inside .woocommerce-variation-add-to-cart) */
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart,
body.single-product .pdp2__purchase .variations_button {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
gap: 10px !important;
width: 100% !important;
}
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart .quantity,
body.single-product .pdp2__purchase .variations_button .quantity {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
}
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.single-product .pdp2__purchase .variations_button .single_add_to_cart_button {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
}
body.single-product .pdp2__purchase .quantity input {
width: 72px !important;
min-width: 72px !important;
height: 48px !important;
text-align: center !important;
}
/* 5. Homepage section vertical padding — collapse dead space */
.peptigo-section { padding: 32px 0 !important; }
.peptigo-section.no-top-pad { padding-top: 0 !important; padding-bottom: 32px !important; }
.peptigo-video-feature { padding: 32px 0 !important; }
.peptigo-newsletter { padding: 40px 16px !important; }
/* 6. Homepage Purity/Clinically feature cards — prevent overflow + center */
.peptigo-features { gap: 20px !important; }
.peptigo-feature {
padding: 28px 20px !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.peptigo-feature p {
max-width: 100% !important;
font-size: .92rem !important;
margin-bottom: 20px !important;
}
.peptigo-feature__illu {
height: 180px !important;
max-width: 100% !important;
overflow: hidden !important;
}
.peptigo-lab-grid {
width: min(260px, 100%) !important;
margin: 0 auto !important;
}
.peptigo-purity-stack {
position: relative !important;
width: min(280px, 100%) !important;
height: 180px !important;
margin: 0 auto !important;
}
.peptigo-purity-card.left {
width: 58% !important;
top: 20px !important;
left: 0 !important;
}
.peptigo-purity-card.right {
width: 44% !important;
height: 155px !important;
right: 0 !important;
top: 0 !important;
}
/* 7. "You may be interested in" images — force contain, no crop */
html .peptigo-xsells .peptigo-product-card__media {
aspect-ratio: 1/1 !important;
padding: 10px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html .peptigo-xsells .peptigo-product-card__media img,
html .peptigo-xsells .peptigo-product-card__img {
position: static !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
aspect-ratio: auto !important;
}
/* 8. Cart totals above cross-sells on mobile (fallback) */
body.woocommerce-cart .tpl-cart-wc .cart-collaterals {
display: flex !important;
flex-direction: column !important;
}
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cart_totals { order: 1 !important; }
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .cross-sells,
body.woocommerce-cart .tpl-cart-wc .cart-collaterals .peptigo-xsells { order: 2 !important; }
}
/* ============================================================
v1.3.32 — MOBILE FINAL POLISH (<=760px)
1. Newsletter form: stack input + button vertically so the
Subscribe button can't push off-screen right
2. Hide "Crafted with precision" badge on mobile hero image
3. PDP image: force centering through every nested wrapper
4. Cross-sells: stronger image sizing + kill any pseudo-element
that could render a stray ":" above the image
============================================================ */
@media (max-width: 760px) {
/* 1. Newsletter — stack input + button, no off-screen overflow */
.peptigo-newsletter .peptigo-nl-form,
.peptigo-nl-form {
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 14px !important;
}
.peptigo-nl-form input,
.peptigo-nl-form button {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
}
.peptigo-nl-form input {
padding: 12px 14px !important;
font-size: 16px !important;
background: #f8fafc !important;
border-radius: 8px !important;
}
.peptigo-nl-form button {
padding: 14px 18px !important;
border-radius: 8px !important;
font-size: .85rem !important;
}
/* 2. Hide "Crafted with precision" badge on mobile hero image */
.peptigo-vf__video-wrap .peptigo-vf__badge,
.peptigo-video-feature .peptigo-vf__badge {
display: none !important;
}
/* 3. PDP image — force center through every container level */
body.single-product .pdp2__gallery {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
html body.single-product .pdp2__main {
margin-left: auto !important;
margin-right: auto !important;
align-self: center !important;
}
html body.single-product .pdp2__main .wc-block-components-product-image,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image,
html body.single-product .pdp2__main .wc-block-components-product-image a,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image a {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html body.single-product .pdp2__main img,
html body.single-product .pdp2__main picture img {
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
position: relative !important;
left: auto !important;
right: auto !important;
transform: none !important;
object-position: center center !important;
}
/* 4. Cross-sells "You may be interested in" — stronger image sizing */
html body .peptigo-xsells .peptigo-product-card__media {
aspect-ratio: 1/1 !important;
padding: 14px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
html body .peptigo-xsells .peptigo-product-card__media img,
html body .peptigo-xsells .peptigo-product-card__img {
position: static !important;
width: auto !important;
height: auto !important;
max-width: 85% !important;
max-height: 85% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
aspect-ratio: auto !important;
}
/* Kill any pseudo-element on xsell cards — source of the stray ":" */
.peptigo-xsells .peptigo-product-card::before,
.peptigo-xsells .peptigo-product-card::after,
.peptigo-xsells .peptigo-product-card__media::before,
.peptigo-xsells .peptigo-product-card__media::after,
.peptigo-xsells .peptigo-product-card__name::before,
.peptigo-xsells .peptigo-product-card__name::after,
.peptigo-xsells .peptigo-product-card__price::before,
.peptigo-xsells .peptigo-product-card__price::after {
content: none !important;
display: none !important;
}
/* Hide any screen-reader-text in xsells (price-range readout with ":") */
.peptigo-xsells .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
}
/* ============================================================
v1.3.34 — Quantity quick-select chips for per-unit supply
products (alcohol pads + insulin syringes). Injected via JS.
Desktop + mobile both see these; they only render on the
2 specific PDPs where the JS appends them.
============================================================ */
.peptigo-qty-presets {
display: flex;
flex-direction: column;
gap: 6px;
flex-basis: 100%; /* force its own row inside the flex-wrap form */
width: 100%;
margin: 0 0 14px;
}
.peptigo-qty-presets__label {
font-family: 'JetBrains Mono', monospace;
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #64748b;
font-weight: 600;
}
.peptigo-qty-presets__row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.peptigo-qty-preset {
min-height: 44px;
min-width: 64px;
padding: 10px 18px;
border: 1px solid rgba(10,20,36,.15);
background: #fff;
color: #0a1424;
border-radius: 8px;
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-weight: 600;
font-size: .95rem;
letter-spacing: .01em;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, transform .08s;
-webkit-tap-highlight-color: transparent;
flex: 0 0 auto;
box-sizing: border-box;
}
.peptigo-qty-preset:hover {
border-color: #1d4ed8;
background: #f1f5f9;
}
.peptigo-qty-preset:active {
transform: scale(.97);
}
.peptigo-qty-preset.is-active {
background: #1d4ed8;
color: #fff;
border-color: #1d4ed8;
}
.peptigo-qty-preset.is-active:hover {
background: #1e40af;
border-color: #1e40af;
}
@media (max-width: 760px) {
.peptigo-qty-preset {
flex: 1 1 calc(50% - 4px);
min-width: 0;
}
}
/* ============================================================
v1.3.35 — Variable-product Add-to-Cart button width fix
On variable products (BPC-157, TB-500, Semaglutide, etc.),
form.cart contains +
as siblings. The mobile rule that made form.cart flex-wrap put
them on the same row, squishing the quantity+button wrapper.
Fix: keep variable-form.cart as block (vertical stack) and
flex only the inner .woocommerce-variation-add-to-cart so the
button grows to fill its own row at all viewport widths.
============================================================ */
body.single-product .pdp2__purchase form.cart.variations_form {
display: block !important;
flex-direction: unset !important;
flex-wrap: unset !important;
}
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart,
body.single-product .pdp2__purchase .variations_button {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
gap: 12px !important;
width: 100% !important;
margin-top: 14px !important;
box-sizing: border-box !important;
}
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart .quantity,
body.single-product .pdp2__purchase .variations_button .quantity {
flex: 0 0 auto !important;
margin: 0 !important;
}
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.single-product .pdp2__purchase .variations_button .single_add_to_cart_button {
flex: 1 1 200px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 14px 32px !important;
font-size: 1rem !important;
box-sizing: border-box !important;
white-space: nowrap !important;
}
/* Hidden inputs (add-to-cart, product_id, variation_id) inside the wrapper
get flex-basis 0 so they don't steal row space. */
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart input[type="hidden"],
body.single-product .pdp2__purchase .variations_button input[type="hidden"] {
flex: 0 0 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ============================================================
v1.3.36 — Final polish
1. PDP image: force center with text-align + explicit block
margins so the flex-based centering isn't fighting anchor
default alignment (was still sitting slightly left)
3. Cross-sell images on CART page: fill container with
object-fit:contain so the whole bottle shows letterboxed
and centered (was scaling too big and cropping)
4. Add-to-cart button states: loading / success / error
============================================================ */
/* --- 1. PDP image centering (all widths, not just mobile) --- */
html body.single-product .pdp2__main,
html body.single-product .pdp2__main > *,
html body.single-product .pdp2__main .wc-block-components-product-image,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image,
html body.single-product .pdp2__main .wc-block-components-product-image__inner-container {
text-align: center !important;
}
html body.single-product .pdp2__main .wc-block-components-product-image a,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image a,
html body.single-product .pdp2__main > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
float: none !important;
}
html body.single-product .pdp2__main img,
html body.single-product .pdp2__main picture img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
position: relative !important;
left: auto !important;
right: auto !important;
inset: auto !important;
transform: none !important;
object-position: center center !important;
}
/* --- 3. Cart cross-sell images: whole bottle visible, centered --- */
/* Media container: square with padding, overflow hidden for clean edges */
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media,
html body .peptigo-xsells .peptigo-product-card__media {
aspect-ratio: 1/1 !important;
padding: 16px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
background: radial-gradient(75% 60% at 50% 45%, #dbeafe 0%, #eff6ff 45%, #f8fafc 85%, #ffffff 100%) !important;
border-radius: 10px !important;
}
/* Image: fill container, contain-scale so whole bottle shows */
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__img,
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media img,
html body .peptigo-xsells .peptigo-product-card__img,
html body .peptigo-xsells .peptigo-product-card__media img {
position: static !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
aspect-ratio: auto !important;
filter: drop-shadow(0 10px 14px rgba(15,23,42,.10)) !important;
}
/* --- 4. Add-to-cart button AJAX states --- */
.pdp2__purchase .single_add_to_cart_button.is-loading {
opacity: .75 !important;
cursor: wait !important;
}
.pdp2__purchase .single_add_to_cart_button.is-added {
background: #10b981 !important;
color: #fff !important;
border-color: #10b981 !important;
}
.pdp2__purchase .single_add_to_cart_button.is-error {
background: #dc2626 !important;
color: #fff !important;
border-color: #dc2626 !important;
}
/* Archive "Add to cart" buttons: AJAX states (v1.3.44 — matches PDP) */
/* Use high-specificity selectors to beat .peptigo-product-card__cta .button cascade
and ensure transition applies for smooth fade to green, just like PDP/homepage */
.peptigo-product-card__cta .button,
.peptigo-product-card__cta a.button {
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .12s !important;
}
.add_to_cart_button.is-loading,
.peptigo-product-card__cta .button.is-loading {
opacity: .8 !important;
cursor: wait !important;
}
.add_to_cart_button.is-added,
.peptigo-product-card__cta .button.is-added,
.peptigo-product-card__cta a.button.is-added {
background: #10b981 !important;
color: #fff !important;
border-color: #10b981 !important;
}
.peptigo-product-card__cta .button.is-added:hover,
.peptigo-product-card__cta a.button.is-added:hover {
background: #10b981 !important;
}
.add_to_cart_button.is-error,
.peptigo-product-card__cta .button.is-error,
.peptigo-product-card__cta a.button.is-error {
background: #dc2626 !important;
color: #fff !important;
border-color: #dc2626 !important;
}
/* Homepage featured card CTA: AJAX feedback states (matches PDP) */
.peptigo-card__cta.is-loading {
opacity: .8 !important;
cursor: wait !important;
}
.peptigo-card__cta.is-added {
background: #10b981 !important;
color: #fff !important;
justify-content: center !important;
}
.peptigo-card__cta.is-added > span {
color: #fff !important;
}
.peptigo-card__cta.is-error {
background: #dc2626 !important;
color: #fff !important;
justify-content: center !important;
}
.peptigo-card__cta.is-error > span {
color: #fff !important;
}
/* ============================================================
v1.3.37 — Comprehensive polish (inspected before writing)
Addresses these specific findings:
* PDP image was off-center because .wc-block-components-product-image
has an empty __inner-container sibling inside the anchor that was
stealing flex space. Nuclear fix: absolute-positioned wrapper with
inset:16px + flex-center. Hides __inner-container entirely.
* Category pills had gradient at line 10417 (highest-specificity rule).
Replace with solid white + Shop Catalog button font.
* Homepage section padding 88px x 2 between hero/video/most-ordered
was 176px dead gap. Reduce to 40px each on desktop.
* Variant dropdown replaced with buttons (JS). CSS styles the buttons.
* Desktop simple-product form.cart lacked a flex row rule, so qty+button
stacked. Added inline flex rule so they match variable products.
============================================================ */
/* ---- 1 & 4. PDP image — absolute-position centering (all widths) ---- */
html body.single-product .pdp2__main {
position: relative !important;
}
/* Hide the empty inner-container sibling that was skewing the anchor's flex layout */
html body.single-product .pdp2__main .wc-block-components-product-image__inner-container {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Image wrapper: fill the padded box, flex-center contents */
html body.single-product .pdp2__main .wc-block-components-product-image,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image {
position: absolute !important;
inset: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
aspect-ratio: auto !important;
width: auto !important;
max-width: calc(100% - 32px) !important;
height: auto !important;
max-height: calc(100% - 32px) !important;
}
/* Anchor: flex-center its img (single child after we hide __inner-container) */
html body.single-product .pdp2__main .wc-block-components-product-image a,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
}
/* Image: contain-fit inside anchor, no margins */
html body.single-product .pdp2__main img,
html body.single-product .pdp2__main picture img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
position: static !important;
inset: auto !important;
float: none !important;
transform: none !important;
filter: drop-shadow(0 22px 28px rgba(15,23,42,.14)) drop-shadow(0 6px 12px rgba(29,78,216,.18)) !important;
}
/* ---- 2. Hero category pills: remove gradient, match Shop Catalog font ---- */
.peptigo-hero .peptigo-cats a {
background: #ffffff !important;
border: 1px solid rgba(10,20,36,.08) !important;
box-shadow: 0 4px 14px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04) !important;
}
.peptigo-hero .peptigo-cats a:hover {
background: #f8fafc !important;
box-shadow: 0 10px 24px rgba(29,78,216,.15), 0 2px 4px rgba(15,23,42,.06) !important;
}
.peptigo-hero .peptigo-cats__label-title {
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: .95rem !important;
letter-spacing: .01em !important;
text-transform: none !important;
color: #0a1424 !important;
}
.peptigo-hero .peptigo-cats__label-count {
font-size: .7rem !important;
letter-spacing: .08em !important;
}
/* ---- 3. Homepage section spacing (desktop only) ---- */
@media (min-width: 761px) {
.peptigo-section { padding: 40px 0 !important; }
.peptigo-section.no-top-pad { padding-top: 0 !important; padding-bottom: 40px !important; }
.peptigo-video-feature { padding: 40px 0 !important; }
}
/* ---- 5 & 6. Variant buttons (replace Size dropdown) ---- */
.peptigo-variant-buttons {
margin: 0 0 20px;
}
.peptigo-variant-label {
font-family: 'JetBrains Mono', monospace;
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #64748b;
font-weight: 600;
margin-bottom: 10px;
}
.peptigo-variant-buttons__row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.peptigo-variant-btn {
min-height: 48px;
min-width: 76px;
padding: 12px 24px;
background: #ffffff;
border: 2px solid rgba(10,20,36,.15);
border-radius: 8px;
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-weight: 600;
font-size: .95rem;
letter-spacing: .01em;
color: #0a1424;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, transform .08s;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
.peptigo-variant-btn:hover {
border-color: #1d4ed8;
background: #f1f5f9;
}
.peptigo-variant-btn:active { transform: scale(.97); }
.peptigo-variant-btn.is-active {
background: #1d4ed8;
color: #ffffff;
border-color: #1d4ed8;
}
/* Hide the original variation table (the JS also hides its ) */
body.single-product .pdp2__purchase table.variations {
display: none !important;
}
/* ---- Desktop simple-product PDP form: qty + button inline ---- */
@media (min-width: 761px) {
body.single-product .pdp2__purchase form.cart:not(.variations_form) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
gap: 12px !important;
}
body.single-product .pdp2__purchase form.cart:not(.variations_form) .quantity {
flex: 0 0 auto !important;
margin: 0 !important;
}
body.single-product .pdp2__purchase form.cart:not(.variations_form) .single_add_to_cart_button {
flex: 1 1 240px !important;
min-width: 0 !important;
padding: 14px 32px !important;
font-size: 1rem !important;
margin: 0 !important;
box-sizing: border-box !important;
}
}
/* ============================================================
v1.3.38 — Inline qty+button via CSS grid + font fixes
1. Replaced flex-wrap approach with CSS grid (auto / 1fr) for
the qty+button row. Grid is deterministic — qty always in
column 1 (content width), button in column 2 (fills rest).
No wrap, no stacking, works on every viewport.
2. "X COMPOUNDS" text on hero category cards: font-family was
still JetBrains Mono from an older rule — switched to
Inter Tight to match the main site font.
3. Homepage now has 4 category cards (added Performance).
Widened .peptigo-cats max-width so they fit on desktop.
============================================================ */
/* 1. Qty + Add to Cart — always inline via grid */
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart,
body.single-product .pdp2__purchase .variations_button,
body.single-product .pdp2__purchase form.cart:not(.variations_form) {
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-auto-flow: row !important;
gap: 12px !important;
align-items: stretch !important;
width: 100% !important;
flex-direction: unset !important;
flex-wrap: unset !important;
}
/* Quick-qty chips span both grid columns */
body.single-product .pdp2__purchase form.cart .peptigo-qty-presets {
grid-column: 1 / -1 !important;
flex-basis: auto !important;
width: auto !important;
margin-bottom: 6px !important;
}
/* Quantity field in column 1 */
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart .quantity,
body.single-product .pdp2__purchase .variations_button .quantity,
body.single-product .pdp2__purchase form.cart:not(.variations_form) .quantity {
grid-column: 1 !important;
flex: unset !important;
width: auto !important;
margin: 0 !important;
}
/* Add to Cart button in column 2, fills remaining width */
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.single-product .pdp2__purchase .variations_button .single_add_to_cart_button,
body.single-product .pdp2__purchase form.cart:not(.variations_form) .single_add_to_cart_button {
grid-column: 2 !important;
flex: unset !important;
width: auto !important;
min-width: 0 !important;
padding: 14px 32px !important;
font-size: 1rem !important;
margin: 0 !important;
box-sizing: border-box !important;
white-space: nowrap !important;
}
/* Hidden inputs don't need grid cells */
body.single-product .pdp2__purchase .woocommerce-variation-add-to-cart input[type="hidden"],
body.single-product .pdp2__purchase .variations_button input[type="hidden"] {
display: none !important;
}
/* 2. "X COMPOUNDS" font — match main site (was JetBrains Mono) */
.peptigo-hero .peptigo-cats__label-count {
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif !important;
font-weight: 500 !important;
font-size: .7rem !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
color: var(--blue-700, #1d4ed8) !important;
opacity: .85 !important;
}
/* 3. Widen the category row to fit 4 cards comfortably on desktop */
.peptigo-hero .peptigo-cats {
max-width: 1120px !important;
gap: 14px !important;
}
@media (min-width: 1100px) {
.peptigo-hero .peptigo-cats {
flex-wrap: nowrap !important;
}
.peptigo-hero .peptigo-cats a {
flex: 1 1 0 !important;
min-width: 0 !important;
}
}
/* On narrower desktop (say a tablet or small laptop) let them wrap 2x2 */
@media (min-width: 761px) and (max-width: 1099px) {
.peptigo-hero .peptigo-cats a {
flex: 1 1 calc(50% - 12px) !important;
min-width: 0 !important;
}
}
/* ============================================================
v1.3.45 — Mobile header re-layout + cart empty-state fix
1. Mobile header: hamburger LEFT, logo CENTER, cart RIGHT.
Old rule hid .peptigo-nav__group--right (which contains the
cart pill). Now it stays visible on mobile, hamburger moves
to the left side.
2. Empty-cart "Return to shop" button: was inheriting the
generic dark .tpl-cart-wc .button styling (full-width, big
padding) which made it overflow and look misaligned.
============================================================ */
@media (max-width: 760px) {
/* --- Mobile header: hamburger LEFT, cart pill RIGHT --- */
/* Override the older rule that hid the entire --right group */
.peptigo-nav .peptigo-nav__group--right,
header .peptigo-nav .peptigo-nav__group--right {
display: flex !important;
align-items: center !important;
order: 99 !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
/* Center menu group still hidden on mobile */
.peptigo-nav .peptigo-nav__group--center {
display: none !important;
}
/* Hamburger moves to the LEFT (was order: 99 / right) */
.peptigo-nav .peptigo-hamburger {
order: -1 !important;
margin-right: 0 !important;
flex: 0 0 auto !important;
}
/* Logo sits between hamburger and cart — flex space-between
already on .peptigo-nav puts it in the center automatically */
.peptigo-nav .peptigo-logo {
order: 0 !important;
flex: 0 1 auto !important;
margin: 0 !important;
}
/* Compact the cart pill so it pairs nicely with the badge */
.peptigo-nav__group--right .peptigo-cart-pill {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 14px !important;
font-size: .9rem !important;
font-weight: 600 !important;
color: #0a1424 !important;
background: #f1f5f9 !important;
border-radius: 999px !important;
text-decoration: none !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
/* --- Empty-cart "Return to shop" button --- */
.tpl-cart-wc .return-to-shop {
text-align: center !important;
padding: 24px 16px 32px !important;
margin: 0 !important;
}
.tpl-cart-wc .return-to-shop a,
.tpl-cart-wc .return-to-shop a.button,
.tpl-cart-wc .return-to-shop a.wc-backward,
.tpl-cart-wc .return-to-shop a.wp-element-button {
display: inline-block !important;
width: auto !important;
max-width: calc(100% - 16px) !important;
background: #1d4ed8 !important;
color: #fff !important;
padding: 12px 24px !important;
font-size: .9rem !important;
font-weight: 600 !important;
letter-spacing: .01em !important;
text-transform: none !important;
border-radius: 10px !important;
border: 0 !important;
margin: 0 auto !important;
box-sizing: border-box !important;
text-align: center !important;
text-decoration: none !important;
}
/* Empty-cart message centered + readable */
.tpl-cart-wc .wc-empty-cart-message,
.tpl-cart-wc .cart-empty,
.tpl-cart-wc .wc-block-components-notice-banner {
text-align: center !important;
margin: 0 auto 16px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* ============================================================
v1.3.46 — PDP Calculator CTA card
Sits below the trust badges on every product page. Drives
traffic from PDPs into /calculator/ for reconstitution math.
============================================================ */
.pdp2__calc-cta {
display: flex;
align-items: center;
gap: 14px;
margin: 18px 0 0;
padding: 14px 18px;
background: #f1f5f9;
border: 1px solid rgba(29,78,216,.14);
border-radius: 12px;
color: #0f172a;
text-decoration: none;
transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.pdp2__calc-cta:hover {
background: #fff;
border-color: rgba(29,78,216,.4);
box-shadow: 0 8px 22px -12px rgba(29,78,216,.25);
transform: translateY(-1px);
}
.pdp2__calc-cta__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
background: #1d4ed8;
color: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(29,78,216,.3);
}
.pdp2__calc-cta__icon svg { width: 20px; height: 20px; }
.pdp2__calc-cta__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pdp2__calc-cta__title {
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 700;
font-size: .95rem;
color: #0a1424;
letter-spacing: -.005em;
}
.pdp2__calc-cta__sub {
font-size: .82rem;
color: #64748b;
line-height: 1.35;
}
.pdp2__calc-cta__arrow {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: #1d4ed8;
transition: transform .2s;
}
.pdp2__calc-cta:hover .pdp2__calc-cta__arrow { transform: translateX(3px); }
.pdp2__calc-cta__arrow svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
.pdp2__calc-cta {
padding: 12px 14px !important;
gap: 12px !important;
margin: 14px 16px 0 !important;
}
.pdp2__calc-cta__sub { font-size: .76rem !important; }
}
/* ============================================================
v1.3.47 — Feature cards 50% shorter + cart progress + COA modal
============================================================ */
/* Homepage Clinically Documented + Purity Guaranteed cards: cut height ~50%.
Old: padding 52px 44px / illu height 200px → New: 28px 36px / 110px.
Internal graphics scaled proportionally so they don't look squished. */
.peptigo-feature {
padding: 28px 36px !important;
}
.peptigo-feature h2 { margin-bottom: 8px !important; }
.peptigo-feature p {
max-width: 460px !important;
margin: 0 auto 18px !important;
}
.peptigo-feature__illu {
height: 110px !important;
}
.peptigo-lab-grid {
width: 220px !important;
gap: 6px !important;
}
.peptigo-lab-grid div { border-radius: 6px !important; }
.peptigo-purity-stack {
width: 230px !important;
height: 100px !important;
}
.peptigo-purity-card.left {
width: 130px !important;
top: 12px !important;
padding: 10px 12px !important;
}
.peptigo-purity-card.right {
width: 110px !important;
height: 86px !important;
padding: 10px 12px !important;
}
.peptigo-purity-pill {
font-size: .62rem !important;
padding: 2px 8px !important;
margin-bottom: 6px !important;
}
.peptigo-purity-bullets li { font-size: .66rem !important; padding: 1px 0 !important; }
@media (max-width: 760px) {
.peptigo-feature { padding: 22px 18px !important; }
.peptigo-feature__illu { height: 96px !important; }
.peptigo-purity-stack { width: min(220px, 100%) !important; height: 90px !important; }
.peptigo-lab-grid { width: min(200px, 100%) !important; }
}
/* ---- Cart progress bar ---- */
.peptigo-cart-progress {
margin: 0 0 20px;
padding: 14px 18px;
background: #f1f5f9;
border: 1px solid rgba(29,78,216,.18);
border-radius: 12px;
box-sizing: border-box;
transition: background .3s, border-color .3s;
}
.peptigo-cart-progress.is-qualified {
background: #ecfdf5;
border-color: rgba(16,185,129,.5);
}
.peptigo-cart-progress__row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.peptigo-cart-progress__icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: #1d4ed8;
color: #fff;
flex: 0 0 32px;
transition: background .3s;
}
.peptigo-cart-progress.is-qualified .peptigo-cart-progress__icon { background: #10b981; }
.peptigo-cart-progress__text {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: .92rem;
color: #0a1424;
line-height: 1.45;
flex: 1 1 auto;
}
.peptigo-cart-progress__text strong { font-weight: 700; }
.peptigo-cart-progress__track {
height: 8px;
background: rgba(10,20,36,.08);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.peptigo-cart-progress__fill {
height: 100%;
background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
transition: width .45s cubic-bezier(.2,.8,.2,1), background .3s;
border-radius: 999px;
}
.peptigo-cart-progress.is-qualified .peptigo-cart-progress__fill {
background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}
@media (max-width: 760px) {
.peptigo-cart-progress { margin: 0 16px 16px !important; padding: 12px 14px !important; }
.peptigo-cart-progress__text { font-size: .82rem !important; }
}
/* ============================================================
v1.3.48 — White-background product image cards
New product images are 832x1248 (white background, full bottle).
Card aspect-ratio matches the image so the white blends edge-to-edge,
no visible card frame around the image. Bottle scales up to fill the
card the same way the old tight-cropped alpha cutouts did.
Affects: shop archive cards (.peptigo-product-card__media), homepage
featured cards (.peptigo-card__media), cart cross-sell cards.
============================================================ */
/* --- Shop archive + cross-sell cards --- */
html .peptigo-product-card__media,
html body .peptigo-xsells .peptigo-product-card__media,
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media {
aspect-ratio: 832 / 1248 !important;
background: #fff !important;
background-image: none !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
display: block !important;
box-shadow: none !important;
}
html .peptigo-product-card__media::before,
html .peptigo-product-card__media::after,
html body .peptigo-xsells .peptigo-product-card__media::before,
html body .peptigo-xsells .peptigo-product-card__media::after {
display: none !important;
content: none !important;
}
html .peptigo-product-card__img,
html body .peptigo-xsells .peptigo-product-card__img,
html body .peptigo-xsells .peptigo-product-card__media img {
position: static !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
filter: none !important;
aspect-ratio: auto !important;
/* v1.3.50: scale + shift tuned via image_scale_tool.html */
transform: translate(2.5%, 5%) scale(1.77) !important;
transform-origin: center center !important;
}
/* --- Homepage featured cards (.peptigo-card) --- */
.peptigo-card__media {
aspect-ratio: 832 / 1248 !important;
background: #fff !important;
background-image: none !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
display: block !important;
}
.peptigo-card__media::before,
.peptigo-card__media::after {
display: none !important;
content: none !important;
}
.peptigo-card__media img {
position: static !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
filter: none !important;
/* v1.3.50: scale + shift tuned via image_scale_tool.html */
transform: translate(2.5%, 5%) scale(1.77) !important;
transform-origin: center center !important;
}
/* Card containers themselves: keep subtle separation but no big border/shadow
that would create a visible "frame" around the white image area. */
.peptigo-product-card,
.peptigo-card {
background: #fff !important;
border: 1px solid rgba(10,20,36,.06) !important;
box-shadow: 0 4px 14px -8px rgba(15,23,42,.10) !important;
border-radius: 14px !important;
overflow: hidden !important;
}
.peptigo-product-card:hover,
.peptigo-card:hover {
box-shadow: 0 12px 28px -12px rgba(15,23,42,.18) !important;
transform: translateY(-2px) !important;
}
/* Floating overlay badges (LAB TESTED, Sale, category) — keep readable on white */
.peptigo-product-card__tested,
.peptigo-card__tested {
background: rgba(255,255,255,.92) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Shop static cards (page-shop.html / .tpl-shop .card__media) — same treatment */
.tpl-shop .card__media {
aspect-ratio: 832 / 1248 !important;
background: #fff !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.tpl-shop .card__media img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
filter: none !important;
transform: translate(2.5%, 5%) scale(1.77) !important;
transform-origin: center center !important;
}
/* PDP main image: same edge-to-edge + scale treatment as cards (v1.3.51) */
html body.single-product .pdp2__main {
aspect-ratio: 832 / 1248 !important;
background: #fff !important;
background-image: none !important;
background-color: #fff !important;
padding: 0 !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 4px 14px -8px rgba(15,23,42,.10) !important;
max-width: 460px !important;
min-height: 0 !important;
margin: 0 auto !important;
position: relative !important;
display: block !important;
}
/* Kill ALL pseudo-elements + nested wrapper backgrounds + frames */
html body.single-product .pdp2__main::before,
html body.single-product .pdp2__main::after,
html body.single-product .pdp2__gallery::before,
html body.single-product .pdp2__gallery::after,
html body.single-product .pdp2__main .wc-block-components-product-image::before,
html body.single-product .pdp2__main .wc-block-components-product-image::after,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image::before,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image::after {
display: none !important;
content: none !important;
background: none !important;
}
html body.single-product .pdp2__main .wc-block-components-product-image,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image,
html body.single-product .pdp2__main .wc-block-components-product-image__inner-container,
html body.single-product .pdp2__main .wc-block-components-product-image a,
html body.single-product .pdp2__main .wp-block-woocommerce-product-image a {
background: transparent !important;
background-image: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
height: 100% !important;
display: block !important;
aspect-ratio: auto !important;
min-height: 0 !important;
}
/* The image itself gets the SAME scale + translate as the cards */
html body.single-product .pdp2__main img,
html body.single-product .pdp2__main picture img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
filter: none !important;
transform: translate(2.5%, 5%) scale(1.77) !important;
transform-origin: center center !important;
aspect-ratio: auto !important;
float: none !important;
position: static !important;
inset: auto !important;
}
/* Mobile PDP: same treatment, just narrower container */
@media (max-width: 760px) {
html body.single-product .pdp2__main {
max-width: 100% !important;
width: calc(100% - 24px) !important;
max-height: none !important;
}
}
/* ============================================================
v1.3.53 — Widen shop content area instead of reducing to 3 cols
Original .tpl-shop .wrap was max-width 1280px with a 240px sidebar
leaving ~213px per card at 4-up. Bump max-width to 1520px and
trim the sidebar to 220px so 4 cards per row each get ~290px —
matches the tuner tool preview proportions without losing density.
Most desktop screens are 1440-1920 wide so this uses the available
real estate; smaller screens are unaffected (browser caps to viewport).
============================================================ */
@media (min-width: 1100px) {
.tpl-shop .wrap {
max-width: 1520px !important;
}
.tpl-shop .catalog {
grid-template-columns: 220px 1fr !important;
gap: 48px !important;
}
}
/* ============================================================
v1.3.54 — Defeat legacy 420px min-height + margin:auto on cards
The .peptigo-product-card had min-height: 420px (line 10138)
which combined with display:flex flex-direction:column AND
margin:auto on the .peptigo-product-card__cta pushed the button
to the bottom of every card, creating a huge white gap below
the content. This block defeats both with explicit values.
Same care taken on .peptigo-card (homepage featured).
============================================================ */
.peptigo-product-card,
.peptigo-card {
min-height: 0 !important;
}
.peptigo-product-card__name {
font-size: .92rem !important;
margin: 10px 14px 6px !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.3 !important;
}
.peptigo-product-card__price {
font-size: .88rem !important;
margin: 0 14px 6px !important;
padding: 0 !important;
text-align: center !important;
}
.peptigo-product-card__cta {
margin: 0 14px 10px !important;
padding: 0 !important;
}
.peptigo-product-card__cta .button,
.peptigo-product-card__cta a.button {
padding: 10px 16px !important;
font-size: .78rem !important;
}
/* ============================================================
v1.3.57 — Per-product image scale overrides
Some product images need different scaling than the global
transform. Override via [data-product-id] which the shortcode
already emits on every card. Body class postid-X covers the PDP.
============================================================ */
/* Supplies — Insulin Syringe (2221) & Alcohol Prep Pad (2223) — 25% smaller */
.peptigo-product-card[data-product-id="2221"] .peptigo-product-card__img,
.peptigo-product-card[data-product-id="2223"] .peptigo-product-card__img,
.peptigo-card[data-product-id="2221"] .peptigo-card__media img,
.peptigo-card[data-product-id="2223"] .peptigo-card__media img,
body.postid-2221 .pdp2__main img,
body.postid-2223 .pdp2__main img {
transform: translate(2.5%, 5%) scale(1.33) !important;
}
/* Bundle & Save stacks (2866 Performance, 2869 Metabolic, 2870 Body) —
the 832x1248 multi-bottle art already fills the frame, so the global
1.77x zoom over-crops it. Tuned via shop_card_image_tool.html
(cover, scale 1.42, no shift). */
.peptigo-card[data-product-id="2866"] .peptigo-card__media img,
.peptigo-card[data-product-id="2869"] .peptigo-card__media img,
.peptigo-card[data-product-id="2870"] .peptigo-card__media img,
.tpl-shop .card[data-product-id="2866"] .card__media img,
.tpl-shop .card[data-product-id="2869"] .card__media img,
.tpl-shop .card[data-product-id="2870"] .card__media img,
body.postid-2866 .pdp2__main img,
body.postid-2869 .pdp2__main img,
body.postid-2870 .pdp2__main img {
transform: translate(0%, 0%) scale(1.42) !important;
transform-origin: center center !important;
object-fit: cover !important;
}
/* ============================================================
v1.3.60 — PDP polish (revert 10% scale, kill card border)
1. PDP image back to scale 1.77 (matches cards exactly)
2. Kill the visible 1px card border + box-shadow so the white
image meets the page background with no visible frame
3. Sticky gallery + "In stock" text retained from v1.3.58
============================================================ */
/* 1. PDP image scale matches cards (1.77) */
html body.single-product .pdp2__main img,
html body.single-product .pdp2__main picture img {
transform: translate(2.5%, 5%) scale(1.77) !important;
transform-origin: center center !important;
}
/* Per-product PDP overrides keep their 25% reduction */
body.postid-2221 .pdp2__main img,
body.postid-2223 .pdp2__main img {
transform: translate(2.5%, 5%) scale(1.33) !important;
}
/* 2. Kill the visible card border around the PDP image — rounded corners
stay so the image gets clipped to the card shape. */
html body.single-product .pdp2__main {
border: 0 !important;
box-shadow: none !important;
border-radius: 16px !important;
overflow: hidden !important;
}
/* 2. Sticky PDP image gallery on desktop */
@media (min-width: 901px) {
html body.single-product .pdp2__gallery {
position: sticky !important;
top: 80px !important;
align-self: start !important;
}
}
/* ============================================================
v1.3.91: Stock indicator — pill-style badges for each state.
Fixes: WC's actual class is --available-on-backorder (not
--on-backorder), so the previous rule never fired and backorder
products fell through to default tiny grey text.
============================================================ */
.pdp2__stock-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 14px !important;
}
/* Common pill base for all three states — applied via the WC indicator's
modifier classes. We hide WC's default text ("Available on backorder",
"In stock", "Out of stock") and replace with our own via ::after,
keeping a visible dot + clear color-coded label. */
.pdp2__stock-row .wc-block-components-product-stock-indicator {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
letter-spacing: -0.005em !important;
font-size: 0 !important; /* hide WC's default text node */
}
.pdp2__stock-row .wc-block-components-product-stock-indicator::before {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
}
.pdp2__stock-row .wc-block-components-product-stock-indicator::after {
font-size: 0.9rem; /* re-show our own text */
}
/* IN STOCK — green dot + "In stock" label */
.pdp2__stock-row .wc-block-components-product-stock-indicator--in-stock::before {
background: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.pdp2__stock-row .wc-block-components-product-stock-indicator--in-stock::after {
content: "In stock";
color: #10b981;
}
/* OUT OF STOCK — red dot + label */
.pdp2__stock-row .wc-block-components-product-stock-indicator--out-of-stock::before {
background: #94a3b8;
box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22);
}
.pdp2__stock-row .wc-block-components-product-stock-indicator--out-of-stock::after {
content: "Out of stock";
color: #475569;
}
/* AVAILABLE ON BACKORDER — amber dot + clear "Backorder" pill */
.pdp2__stock-row .wc-block-components-product-stock-indicator--available-on-backorder {
background: #fff7e6 !important;
border: 1px solid #ffd591 !important;
border-radius: 999px !important;
padding: 4px 12px !important;
}
.pdp2__stock-row .wc-block-components-product-stock-indicator--available-on-backorder::before {
background: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
animation: peptigo-backorder-pulse 1.6s ease-in-out infinite;
}
.pdp2__stock-row .wc-block-components-product-stock-indicator--available-on-backorder::after {
content: "Backorder — ships when restocked";
color: #b45309;
}
@keyframes peptigo-backorder-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
/* ============================================================
v1.3.94: Variant button — diagonal "BACK ORDER" stamp.
- Dose stays in NORMAL dark color (readable)
- Stamp is transparent: faded red outline + text only (no white fill)
- Stamp sits BELOW the dose layer visually so it doesn't block reading
============================================================ */
body.single-product .peptigo-variant-btn[data-stock="onbackorder"] {
position: relative !important;
background: #fef2f2 !important;
border-color: #fca5a5 !important;
color: #0a1424 !important; /* dose dark + fully readable */
overflow: hidden !important;
z-index: 0 !important;
}
body.single-product .peptigo-variant-btn[data-stock="onbackorder"]::after {
content: "BACK ORDER" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) rotate(-12deg) !important;
font-size: 0.58rem !important;
font-weight: 800 !important;
letter-spacing: 0.12em !important;
color: rgba(220, 38, 38, 0.45) !important; /* faded stamp */
border: 1.5px solid rgba(220, 38, 38, 0.40) !important;
border-radius: 3px !important;
padding: 1px 7px !important;
background: transparent !important; /* no white fill — dose stays visible */
pointer-events: none !important;
white-space: nowrap !important;
margin: 0 !important;
text-transform: uppercase !important;
z-index: -1 !important; /* stamp behind the dose text */
}
body.single-product .peptigo-variant-btn[data-stock="onbackorder"].is-active {
background: #fee2e2 !important;
border-color: #dc2626 !important;
color: #0a1424 !important;
}
/* "Available on backorder" text BELOW the variant buttons — make it loud */
body.single-product .single_variation_wrap p.stock.available-on-backorder,
body.single-product .pdp2__purchase p.stock.available-on-backorder,
body.single-product p.stock.available-on-backorder {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: #fff7e6 !important;
border: 1px solid #ffd591 !important;
border-left: 4px solid #f59e0b !important;
border-radius: 8px !important;
padding: 10px 14px !important;
margin: 12px 0 !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #b45309 !important;
letter-spacing: -0.005em !important;
}
body.single-product p.stock.available-on-backorder::before {
content: '⏳' !important;
font-size: 1.05rem !important;
margin-right: 2px !important;
}
/* v1.3.93: Variation image framing — when the gallery image is swapped
to a variation's specific image (e.g. 30mL Bac Water Pfizer photo),
skip the default 1.77x scale transform that's tuned for the v7
generated bottle renders. The variation image is a real photo with
its own composition. */
html body.single-product .pdp2__main img.peptigo-variation-image,
html body.single-product .pdp2__main picture img.peptigo-variation-image {
transform: none !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
}
/* ============================================================
v1.3.63 — Homepage feature cards: eyebrow badge + tight fit
* Eyebrow as overlay badge (top-left)
* Tightened spacing so heading + paragraph move up
* Illustration constrained + overflow:hidden so the rotated
"Purity 99.4%" card stack can't bleed past the card bottom
============================================================ */
.peptigo-feature {
position: relative !important;
padding: 36px 36px 28px !important;
overflow: hidden !important;
}
.peptigo-feature h2 {
margin: 0 0 10px !important;
}
.peptigo-feature p {
max-width: 460px !important;
margin: 0 auto 16px !important;
font-size: .94rem !important;
line-height: 1.55 !important;
}
.peptigo-feature .peptigo-eyebrow {
position: absolute !important;
top: 14px !important;
left: 14px !important;
margin: 0 !important;
padding: 5px 10px !important;
background: rgba(29,78,216,.10) !important;
color: var(--blue-700, #1d4ed8) !important;
border-radius: 6px !important;
font-size: .62rem !important;
letter-spacing: .14em !important;
font-weight: 600 !important;
font-family: 'JetBrains Mono', monospace !important;
text-transform: uppercase !important;
}
/* Illustration: constrain + clip so rotated children don't overflow card */
.peptigo-feature__illu {
height: 96px !important;
overflow: hidden !important;
position: relative !important;
}
.peptigo-purity-stack {
width: min(220px, 100%) !important;
height: 96px !important;
}
.peptigo-purity-card.left {
top: 8px !important;
width: 120px !important;
padding: 8px 10px !important;
}
.peptigo-purity-card.right {
top: 0 !important;
width: 100px !important;
height: 76px !important;
padding: 8px 10px !important;
}
.peptigo-purity-pill {
font-size: .56rem !important;
padding: 2px 7px !important;
margin-bottom: 4px !important;
}
.peptigo-purity-bullets li {
font-size: .6rem !important;
padding: 0 !important;
gap: 4px !important;
}
.peptigo-lab-grid {
width: 200px !important;
gap: 5px !important;
}
@media (max-width: 760px) {
.peptigo-feature {
padding: 30px 18px 22px !important;
}
.peptigo-feature .peptigo-eyebrow {
top: 10px !important;
left: 10px !important;
padding: 4px 8px !important;
font-size: .58rem !important;
}
.peptigo-feature__illu { height: 88px !important; }
.peptigo-purity-stack { width: min(200px, 100%) !important; height: 88px !important; }
.peptigo-lab-grid { width: min(180px, 100%) !important; }
}
/* ============================================================
v1.3.69: RUO Review Disclaimer
Renders inside the WP/WC review form via comment_form_top hook.
Yellow-amber callout so it reads as a "policy notice", not an
error — friendlier tone but still impossible to miss.
============================================================ */
.peptigo-review-disclaimer {
background: #fffbe6;
border: 1px solid #f5d061;
border-left: 4px solid #d39e00;
border-radius: 8px;
padding: 14px 16px;
margin: 0 0 18px;
font-size: 0.92rem;
line-height: 1.5;
color: #5b4500;
}
.peptigo-review-disclaimer__title {
margin: 0 0 8px !important;
font-weight: 700;
font-size: 0.95rem;
color: #5b4500;
display: flex;
align-items: center;
gap: 6px;
}
.peptigo-review-disclaimer__body {
margin: 0 0 6px !important;
color: #5b4500;
}
.peptigo-review-disclaimer__body:last-child {
margin-bottom: 0 !important;
}
.peptigo-review-disclaimer strong {
color: #3d2e00;
}
@media (max-width: 760px) {
.peptigo-review-disclaimer {
padding: 12px 14px;
font-size: 0.88rem;
}
.peptigo-review-disclaimer__title {
font-size: 0.92rem;
}
}
/* ============================================================
v1.3.71: Interac e-Transfer card
Renders on the Order Received (thank-you) page when the
payment method is BACS. Big, scannable, with copy buttons
so the customer can paste straight into their bank app.
============================================================ */
.peptigo-etransfer-card {
background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
border: 1px solid #c8e1ff;
border-left: 4px solid var(--blue-700, #2563eb);
border-radius: 14px;
padding: 24px 26px;
margin: 0 0 28px;
max-width: 620px;
box-shadow: 0 6px 24px rgba(10, 37, 64, 0.06);
color: #0a2540;
font-family: inherit;
}
.peptigo-etransfer-card__header {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 6px;
}
.peptigo-etransfer-card__icon {
font-size: 1.6rem;
line-height: 1;
}
.peptigo-etransfer-card__heading {
margin: 0 !important;
font-size: 1.25rem;
font-weight: 700;
color: #0a2540 !important;
letter-spacing: -0.01em;
}
.peptigo-etransfer-card__steps {
list-style: none !important;
padding: 0 !important;
margin: 18px 0 16px !important;
display: flex;
flex-direction: column;
gap: 10px;
}
.peptigo-etransfer-card__step {
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 6px;
}
.peptigo-etransfer-card__label {
font-size: 0.72rem;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.peptigo-etransfer-card__hint {
font-size: 0.65rem;
font-weight: 500;
color: #94a3b8;
text-transform: none;
letter-spacing: 0;
margin-left: 4px;
}
.peptigo-etransfer-card__field {
display: flex;
align-items: stretch;
gap: 8px;
background: #fff;
border: 1px solid #d6e4ff;
border-radius: 8px;
padding: 4px 4px 4px 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.peptigo-etransfer-card__field:hover {
border-color: #99c2ff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.peptigo-etransfer-card__value {
flex: 1 1 auto;
display: flex;
align-items: center;
font-family: 'SF Mono', SFMono-Regular, Consolas, Menlo, monospace;
font-size: 0.98rem;
color: #0a2540;
background: transparent !important;
padding: 6px 0 !important;
border: 0 !important;
border-radius: 0 !important;
word-break: break-all;
}
.peptigo-etransfer-card__copy {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: var(--blue-700, #2563eb);
color: #fff;
border: 0;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.05s ease;
font-family: inherit;
line-height: 1;
}
.peptigo-etransfer-card__copy:hover {
background: var(--blue-800, #1e40af);
}
.peptigo-etransfer-card__copy:active {
transform: translateY(1px);
}
.peptigo-etransfer-card__copy.is-copied {
background: #16a34a;
}
.peptigo-etransfer-card__copy.is-failed {
background: #dc2626;
}
.peptigo-etransfer-card__copy-icon {
font-size: 0.95rem;
line-height: 1;
}
.peptigo-etransfer-card__warning {
display: flex;
align-items: flex-start;
gap: 10px;
background: #fff7e6;
border: 1px solid #ffd591;
border-radius: 8px;
padding: 12px 14px;
margin: 0 0 12px;
font-size: 0.9rem;
color: #5b4500;
line-height: 1.5;
}
.peptigo-etransfer-card__warning > span {
flex: 0 0 auto;
font-size: 1.1rem;
line-height: 1.3;
}
.peptigo-etransfer-card__warning strong {
color: #3d2e00;
}
.peptigo-etransfer-card__note {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #0a2540;
margin: 0 0 16px;
padding: 10px 14px;
background: #eff6ff;
border-radius: 8px;
}
.peptigo-etransfer-card__note > span {
flex: 0 0 auto;
}
.peptigo-etransfer-card__timeline {
border-top: 1px solid #d6e4ff;
padding-top: 14px;
}
.peptigo-etransfer-card__timeline-heading {
margin: 0 0 8px !important;
font-size: 0.95rem;
font-weight: 700;
color: #0a2540 !important;
}
.peptigo-etransfer-card__timeline-list {
margin: 0 !important;
padding: 0 0 0 18px !important;
font-size: 0.88rem;
color: #0a2540;
line-height: 1.55;
}
.peptigo-etransfer-card__timeline-list li {
margin: 0 0 4px !important;
padding: 0 !important;
}
.peptigo-etransfer-card__timeline-list code {
font-size: 0.86rem;
background: #f0f7ff;
padding: 1px 6px;
border-radius: 4px;
}
/* Checkout-page BACS blurb (small, doesn't compete with the form) */
.peptigo-bacs-checkout-blurb {
margin: 6px 0 0;
color: inherit;
}
@media (max-width: 760px) {
.peptigo-etransfer-card {
padding: 18px 18px;
border-radius: 12px;
}
.peptigo-etransfer-card__heading {
font-size: 1.1rem;
}
.peptigo-etransfer-card__field {
flex-direction: column;
align-items: stretch;
padding: 10px;
gap: 8px;
}
.peptigo-etransfer-card__value {
padding: 0 !important;
font-size: 0.92rem;
}
.peptigo-etransfer-card__copy {
justify-content: center;
padding: 10px 12px;
}
.peptigo-etransfer-card__copy-label {
font-size: 0.85rem;
}
}
/* ============================================================
v1.3.72: Free Gift badge styling
Used on the auto-added free 30mL Bac Water at $250 threshold.
Shows in cart, checkout, and order summary tables.
============================================================ */
.peptigo-free-gift-badge {
display: inline-block;
background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
.peptigo-free-gift-price {
color: #16a34a !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
}
.peptigo-free-gift-qty {
display: inline-block;
min-width: 32px;
padding: 6px 10px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 4px;
color: #166534;
font-weight: 600;
text-align: center;
}
/* ============================================================
v1.3.73: Floating $250-rewards progress widget
Fixed bottom-right on desktop, bottom-center on mobile.
============================================================ */
.peptigo-rewards-widget {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9998;
width: 296px;
max-width: calc(100vw - 32px);
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(10, 37, 64, 0.18), 0 2px 8px rgba(10, 37, 64, 0.08);
padding: 16px 18px 14px;
display: grid;
grid-template-columns: 32px 1fr;
grid-template-rows: auto;
gap: 10px 12px;
font-family: inherit;
color: #0a2540;
transform-origin: bottom right;
animation: peptigo-rewards-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.peptigo-rewards-widget[hidden] { display: none; }
@keyframes peptigo-rewards-pop {
0% { opacity: 0; transform: translateY(20px) scale(0.92); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.peptigo-rewards-widget__icon {
font-size: 1.5rem;
line-height: 1;
align-self: start;
margin-top: 2px;
}
.peptigo-rewards-widget__body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.peptigo-rewards-widget__heading {
font-size: 0.95rem;
font-weight: 700;
color: #0a2540;
line-height: 1.25;
letter-spacing: -0.01em;
}
.peptigo-rewards-widget__progress {
width: 100%;
height: 7px;
background: #eef2f7;
border-radius: 999px;
overflow: hidden;
}
.peptigo-rewards-widget__progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--blue-700, #2563eb) 0%, var(--blue-500, #3b82f6) 100%);
border-radius: 999px;
transition: width 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.peptigo-rewards-widget__amount {
font-size: 0.78rem;
color: #64748b;
font-variant-numeric: tabular-nums;
}
/* v1.7.55 — Buy-2-Get-3rd sale line inside the rewards widget */
.peptigo-rewards-widget__sale {
margin-top: 10px;
padding: 8px 11px;
border-radius: 9px;
background: rgba(37, 99, 235, 0.09);
border: 1px solid rgba(37, 99, 235, 0.22);
color: #1e3a8a;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.35;
}
.peptigo-rewards-widget__sale[hidden] { display: none !important; }
.peptigo-rewards-widget__perks {
list-style: none !important;
margin: 4px 0 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 5px;
border-top: 1px dashed #e2e8f0;
padding-top: 10px !important;
}
.peptigo-rewards-widget__perk {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
color: #334155;
margin: 0 !important;
padding: 0 !important;
transition: color 0.18s ease, opacity 0.18s ease;
}
.peptigo-rewards-widget__perk-icon {
flex: 0 0 auto;
font-size: 0.95rem;
line-height: 1;
width: 18px;
text-align: center;
}
.peptigo-rewards-widget__cta {
display: none; /* shown only when unlocked */
margin-top: 4px;
padding: 8px 12px;
background: var(--blue-700, #2563eb);
color: #fff !important;
border-radius: 8px;
text-align: center;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none !important;
transition: background-color 0.15s ease;
}
.peptigo-rewards-widget__cta:hover {
background: var(--blue-800, #1e40af);
}
.peptigo-rewards-widget__dismiss {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
padding: 0;
background: transparent;
border: 0;
font-size: 1.2rem;
line-height: 1;
color: #94a3b8;
cursor: pointer;
border-radius: 6px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.peptigo-rewards-widget__dismiss:hover {
background: #f1f5f9;
color: #0a2540;
}
/* State: empty (cart $0) — inviting, dimmed perks, slim look */
.peptigo-rewards-widget[data-state="empty"] {
border-color: #e2e8f0;
}
.peptigo-rewards-widget[data-state="empty"] .peptigo-rewards-widget__heading {
color: #475569;
}
.peptigo-rewards-widget[data-state="empty"] .peptigo-rewards-widget__amount {
color: #94a3b8;
font-style: italic;
}
.peptigo-rewards-widget[data-state="empty"] .peptigo-rewards-widget__perk {
opacity: 0.55;
}
/* State: progress (default — both perks dim, neither earned yet) */
.peptigo-rewards-widget[data-state="progress"] .peptigo-rewards-widget__perk {
opacity: 0.6;
}
/* State: almost-there (subtotal $225+) — heading turns blue, progress almost full */
.peptigo-rewards-widget[data-state="almost-there"] .peptigo-rewards-widget__heading {
color: var(--blue-700, #2563eb);
}
.peptigo-rewards-widget[data-state="almost-there"] .peptigo-rewards-widget__perk {
opacity: 0.75;
}
/* State: unlocked — green palette, perks bold, CTA visible */
.peptigo-rewards-widget[data-state="unlocked"] {
border-color: #bbf7d0;
box-shadow: 0 12px 40px rgba(22, 163, 74, 0.18), 0 2px 8px rgba(22, 163, 74, 0.10);
}
.peptigo-rewards-widget[data-state="unlocked"] .peptigo-rewards-widget__heading {
color: #166534;
}
.peptigo-rewards-widget[data-state="unlocked"] .peptigo-rewards-widget__progress-bar {
background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
}
.peptigo-rewards-widget[data-state="unlocked"] .peptigo-rewards-widget__perk {
color: #166534;
font-weight: 600;
opacity: 1;
}
.peptigo-rewards-widget[data-state="unlocked"] .peptigo-rewards-widget__cta {
display: block;
background: #16a34a;
}
.peptigo-rewards-widget[data-state="unlocked"] .peptigo-rewards-widget__cta:hover {
background: #15803d;
}
/* Mobile: collapsed bubble by default, expands on tap.
On expand: full-width card slides up from bottom corner. */
@media (max-width: 760px) {
/* ---- BUBBLE MODE (default mobile state) ---- */
.peptigo-rewards-widget.peptigo-rewards-bubble {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
padding: 0 !important;
border-radius: 50% !important;
left: auto !important;
right: 14px !important;
bottom: 14px !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-template-areas: none !important;
gap: 0 !important;
cursor: pointer !important;
box-shadow: 0 8px 28px rgba(10,20,36,.22), 0 2px 6px rgba(10,20,36,.12) !important;
transition: transform 0.15s ease !important;
}
.peptigo-rewards-widget.peptigo-rewards-bubble:hover {
transform: scale(1.05) !important;
}
.peptigo-rewards-widget.peptigo-rewards-bubble:active {
transform: scale(0.95) !important;
}
/* Hide all internals when in bubble mode — only show icon */
.peptigo-rewards-widget.peptigo-rewards-bubble .peptigo-rewards-widget__body,
.peptigo-rewards-widget.peptigo-rewards-bubble .peptigo-rewards-widget__dismiss {
display: none !important;
}
/* The icon: stacked column — gift emoji on top, "FREE" label beneath.
Both centered in the bubble. */
.peptigo-rewards-widget.peptigo-rewards-bubble .peptigo-rewards-widget__icon {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
font-size: 1.35rem !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
gap: 1px !important;
align-self: center !important;
justify-self: center !important;
grid-area: auto !important;
grid-column: auto !important;
grid-row: auto !important;
text-align: center !important;
}
/* "FREE" label appended via pseudo-element — no HTML changes needed */
.peptigo-rewards-widget.peptigo-rewards-bubble .peptigo-rewards-widget__icon::after {
content: "FREE";
font-size: 0.55rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--blue-700, #2563eb);
line-height: 1 !important;
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
}
/* Unlocked state: change "FREE" → "GOT IT" so the bubble reads as a celebration */
.peptigo-rewards-widget.peptigo-rewards-bubble[data-state="unlocked"] .peptigo-rewards-widget__icon::after {
content: "UNLOCKED";
color: #16a34a;
font-size: 0.5rem !important;
}
/* Tiny pulse dot on the bubble while there's incremental progress */
.peptigo-rewards-widget.peptigo-rewards-bubble[data-state="progress"]::after,
.peptigo-rewards-widget.peptigo-rewards-bubble[data-state="almost-there"]::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--blue-700, #2563eb);
box-shadow: 0 0 0 2px #fff;
}
.peptigo-rewards-widget.peptigo-rewards-bubble[data-state="almost-there"]::after {
background: #f59e0b;
animation: peptigo-rewards-pulse 1.5s ease-in-out infinite;
}
.peptigo-rewards-widget.peptigo-rewards-bubble[data-state="unlocked"]::after {
content: '✓';
position: absolute;
top: -4px;
right: -4px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
background: #16a34a;
border-radius: 50%;
box-shadow: 0 0 0 2px #fff;
}
@keyframes peptigo-rewards-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
/* ---- EXPANDED MODE (when user taps the bubble) ---- */
.peptigo-rewards-widget:not(.peptigo-rewards-bubble) {
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
max-width: none;
padding: 14px 16px 12px;
border-radius: 12px;
}
.peptigo-rewards-widget__heading {
font-size: 0.92rem;
}
.peptigo-rewards-widget__perk {
font-size: 0.82rem;
}
}
/* ============================================================
v1.3.95: Global mobile horizontal-scroll guard — STRONGER.
iOS Safari sometimes ignores overflow-x on body alone — apply to
html, body, AND the wp-site-blocks container with `position:relative`
to anchor the clipping context. Only on ≤900px. Excludes checkout
(select2 dropdowns need to escape).
============================================================ */
@media (max-width: 900px) {
html {
overflow-x: hidden !important;
max-width: 100vw !important;
}
body {
overflow-x: hidden !important;
max-width: 100vw !important;
position: relative !important;
}
.wp-site-blocks,
body > main,
body > .wp-site-blocks {
overflow-x: hidden !important;
max-width: 100vw !important;
}
}
/* Checkout exception — keep overflow visible so select2 dropdowns escape */
body.woocommerce-checkout,
body.woocommerce-checkout html,
body.woocommerce-checkout .wp-site-blocks {
overflow-x: visible !important;
}
/* ============================================================
v1.3.82: Header visibility — visibility/opacity ONLY, no display
override on .peptigo-nav (the mobile flex layout from line 2447
needs to stay in charge of nav direction).
============================================================ */
html body .wp-block-template-part,
html body div.wp-block-template-part,
html body header.peptigo-header,
html body .peptigo-header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
pointer-events: auto !important;
transform: none !important;
}
html body .peptigo-announce {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
}
html body .peptigo-nav {
visibility: visible !important;
opacity: 1 !important;
/* NO `display:` override — original CSS (grid on desktop, flex on
mobile) needs to stay intact. */
}
/* Center the checkout/cart content area */
body.woocommerce-checkout .tpl-cart-wc .wrap,
body.woocommerce-cart .tpl-cart-wc .wrap,
body.woocommerce-checkout .woocommerce,
body.woocommerce-cart .woocommerce {
max-width: 1180px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
/* ============================================================
v1.3.77: Hybrid Checkout Redesign — REWRITE
Single-row grid: form left, sticky order summary right.
Heading is hidden (JS injects a duplicate inside #order_review)
so the right column is one item, not two — fixes the order
summary appearing far below the form.
============================================================ */
/* ---- Desktop two-column (single-row grid) ---- */
@media (min-width: 901px) {
body.woocommerce-checkout form.checkout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) !important;
gap: 0 48px !important;
max-width: 1180px !important;
margin: 0 auto !important;
align-items: start !important;
}
body.woocommerce-checkout #customer_details {
grid-column: 1 !important;
grid-row: 1 !important;
}
body.woocommerce-checkout #customer_details.col2-set,
body.woocommerce-checkout #customer_details > .col-1,
body.woocommerce-checkout #customer_details > .col-2 {
width: 100% !important;
float: none !important;
display: block !important;
margin: 0 0 24px !important;
}
body.woocommerce-checkout #order_review_heading {
display: none !important; /* JS injects equivalent inside #order_review */
}
body.woocommerce-checkout #order_review {
grid-column: 2 !important;
grid-row: 1 !important;
position: sticky !important;
top: 100px !important;
align-self: start !important;
background: #fff !important;
border: 1px solid rgba(10,20,36,.08) !important;
border-radius: 12px !important;
padding: 22px !important;
box-shadow: 0 6px 28px rgba(10,20,36,.06) !important;
}
}
/* Heading injected by JS into #order_review */
.peptigo-summary-heading {
font-size: 1.15rem !important;
font-weight: 700 !important;
color: #0a1424 !important;
margin: 0 0 14px !important;
padding: 0 !important;
letter-spacing: -0.01em !important;
}
/* ---- Form-row grid + AGGRESSIVE float reset on WC defaults ---- */
/* Reset every form-row regardless of WC's form-row-first/last/wide modifiers */
body.woocommerce-checkout .woocommerce form .form-row,
body.woocommerce-checkout .woocommerce-page form .form-row,
body.woocommerce-checkout form.checkout .form-row,
body.woocommerce-checkout form.woocommerce-checkout .form-row,
body.woocommerce-checkout form .form-row-first,
body.woocommerce-checkout form .form-row-last,
body.woocommerce-checkout form .form-row-wide {
width: 100% !important;
float: none !important;
clear: none !important;
display: block !important;
box-sizing: border-box !important;
}
/* Now turn the field-wrapper into a 2-col grid */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px 16px !important;
margin: 0 !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
grid-column: 1 / -1 !important; /* default: span full width */
margin: 0 !important;
padding: 0 !important;
}
/* Paired rows — explicit grid-column placement */
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #shipping_first_name_field {
grid-column: 1 / 2 !important;
}
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #shipping_last_name_field {
grid-column: 2 / 3 !important;
}
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field {
grid-column: 1 / 2 !important;
}
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #shipping_state_field {
grid-column: 2 / 3 !important;
}
body.woocommerce-checkout #billing_postcode_field {
grid-column: 1 / 2 !important;
}
body.woocommerce-checkout #shipping_postcode_field {
grid-column: 1 / -1 !important; /* full width — no phone in shipping */
}
body.woocommerce-checkout #billing_phone_field {
grid-column: 2 / 3 !important;
}
/* Mobile (≤900px) — paired field layout (1fr 1fr) with proper sizing.
- Address line 1 & subscribe row & email span full width
- First/Last name, City/State, Postal/Phone stay paired (2 columns)
- No overflow-x:hidden hack — that was clipping the right column. */
@media (max-width: 900px) {
/* Container sizing — fit viewport without clipping */
body.woocommerce-checkout .tpl-cart-wc,
body.woocommerce-checkout .tpl-cart-wc .wrap,
body.woocommerce-checkout .woocommerce {
max-width: 100% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout form.checkout {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Paired-grid field wrapper (1fr 1fr) */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* All fields default to FULL WIDTH (span both grid columns) */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
/* Then specific fields opt-in to the paired layout */
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #shipping_first_name_field {
grid-column: 1 / 2 !important;
}
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #shipping_last_name_field {
grid-column: 2 / 3 !important;
}
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field {
grid-column: 1 / 2 !important;
}
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #shipping_state_field {
grid-column: 2 / 3 !important;
}
body.woocommerce-checkout #billing_postcode_field {
grid-column: 1 / 2 !important;
}
body.woocommerce-checkout #billing_phone_field {
grid-column: 2 / 3 !important;
}
/* Newsletter row — explicit FULL WIDTH on mobile (matches address bar) */
body.woocommerce-checkout #peptigo_newsletter_optin_field,
body.woocommerce-checkout .peptigo-newsletter-row {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 8px 0 !important;
}
/* Field input sizing */
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row select {
padding: 10px 12px !important;
font-size: 0.92rem !important;
min-height: 42px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .form-row label {
font-size: 0.78rem !important;
margin-bottom: 4px !important;
}
}
/* Very small phones (<=380px): collapse pairs back to single column to prevent crowding */
@media (max-width: 380px) {
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
grid-template-columns: 1fr !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
grid-column: 1 / -1 !important;
}
}
/* ============================================================
v1.3.80: Newsletter optin row — styled IDENTICAL to the
ship-to-different-address card, full-width across the grid.
============================================================ */
body.woocommerce-checkout #peptigo_newsletter_optin_field,
body.woocommerce-checkout .peptigo-newsletter-row {
grid-column: 1 / -1 !important;
width: 100% !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 14px 16px !important;
margin: 8px 0 !important;
}
body.woocommerce-checkout .peptigo-newsletter-row label,
body.woocommerce-checkout .peptigo-newsletter-row .peptigo-newsletter-label {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: #0f172a !important;
cursor: pointer !important;
line-height: 1.4 !important;
}
body.woocommerce-checkout .peptigo-newsletter-row input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
margin: 0 !important;
flex: 0 0 auto !important;
accent-color: #2563eb !important;
}
/* Select2 wrappers — match input height/width inside grid cells */
body.woocommerce-checkout .form-row .select2-container,
body.woocommerce-checkout .form-row .select2-container--default .select2-selection--single {
width: 100% !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .form-row .select2-container--default .select2-selection--single {
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
padding: 4px 14px !important;
display: flex !important;
align-items: center !important;
}
body.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0 !important;
line-height: 1.4 !important;
}
body.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
right: 8px !important;
}
/* Native select fallback (when Select2 disabled) */
body.woocommerce-checkout .form-row select {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
line-height: 1.4 !important;
-webkit-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 12px 12px !important;
padding-right: 36px !important;
}
/* ---- Field styling ---- */
body.woocommerce-checkout .form-row label {
font-size: .82rem !important;
font-weight: 500 !important;
color: #475569 !important;
margin: 0 0 6px !important;
display: block !important;
}
body.woocommerce-checkout .form-row label .required {
color: #ef4444 !important;
text-decoration: none !important;
margin-left: 2px !important;
}
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row .select2-selection {
width: 100% !important;
padding: 11px 14px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
font-size: 0.95rem !important;
min-height: 44px !important;
background: #fff !important;
color: #0a1424 !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .form-row .input-text:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row .select2-selection:focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
outline: none !important;
}
/* ---- "Ship to a different address?" toggle styling ---- */
body.woocommerce-checkout #ship-to-different-address {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 14px 16px !important;
margin: 8px 0 16px !important;
}
body.woocommerce-checkout #ship-to-different-address h3,
body.woocommerce-checkout #ship-to-different-address label {
display: flex !important;
align-items: center !important;
gap: 10px !important;
cursor: pointer !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: #0f172a !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout #ship-to-different-address-checkbox {
width: 18px !important;
height: 18px !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
body.woocommerce-checkout .shipping_address {
margin-top: 16px !important;
}
/* ---- Order review (right column) refinements ---- */
body.woocommerce-checkout #order_review .shop_table {
border: 0 !important;
margin: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
body.woocommerce-checkout #order_review .shop_table th,
body.woocommerce-checkout #order_review .shop_table td {
padding: 10px 0 !important;
border-top: 1px solid #f1f5f9 !important;
border-bottom: 0 !important;
font-size: 0.9rem !important;
background: transparent !important;
}
body.woocommerce-checkout #order_review .shop_table thead {
display: none !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot th {
font-weight: 600 !important;
}
body.woocommerce-checkout #order_review .order-total .amount {
font-size: 1.15rem !important;
color: #2563eb !important;
}
body.woocommerce-checkout #payment {
background: transparent !important;
border: 0 !important;
margin-top: 16px !important;
padding: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 12px 14px !important;
margin: 0 0 16px !important;
}
body.woocommerce-checkout #payment .payment_methods li {
background: transparent !important;
border-bottom: 0 !important;
}
body.woocommerce-checkout #place_order {
width: 100% !important;
padding: 14px 20px !important;
font-size: 1rem !important;
font-weight: 600 !important;
background: #2563eb !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
margin-top: 16px !important;
cursor: pointer !important;
transition: background-color 0.15s !important;
letter-spacing: 0.01em !important;
}
body.woocommerce-checkout #place_order:hover {
background: #1d4ed8 !important;
}
/* ---- Mobile collapsible order summary toggle ---- */
.peptigo-mobile-order-toggle {
display: none;
width: 100%;
padding: 14px 18px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 10px;
margin: 0 0 18px;
font-size: 0.95rem;
font-weight: 600;
color: #0a1424;
text-align: left;
cursor: pointer;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.peptigo-mobile-order-toggle__label {
display: flex;
align-items: center;
gap: 8px;
}
.peptigo-mobile-order-toggle__total {
color: #2563eb;
font-weight: 700;
}
.peptigo-mobile-order-toggle__chevron {
transition: transform 0.2s;
font-size: 1.05rem;
color: #64748b;
}
.peptigo-mobile-order-toggle[aria-expanded="true"] .peptigo-mobile-order-toggle__chevron {
transform: rotate(180deg);
}
@media (max-width: 900px) {
body.woocommerce-checkout form.checkout {
display: block !important;
max-width: none !important;
}
body.woocommerce-checkout #customer_details {
margin-bottom: 24px !important;
}
body.woocommerce-checkout #customer_details.col2-set,
body.woocommerce-checkout #customer_details > .col-1,
body.woocommerce-checkout #customer_details > .col-2 {
width: 100% !important;
float: none !important;
display: block !important;
}
body.woocommerce-checkout .peptigo-mobile-order-toggle {
display: flex !important;
}
body.woocommerce-checkout #order_review_heading {
display: none !important;
}
/* v1.3.80: order_review STAYS VISIBLE on mobile so the
Place Order button is always reachable. Only the items
table inside it collapses behind the toggle. */
body.woocommerce-checkout #order_review {
display: block !important;
background: #fff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 16px !important;
margin: 0 0 24px !important;
position: static !important; /* not sticky on mobile */
}
/* Hide just the items table by default; toggle expands it */
body.woocommerce-checkout #order_review .shop_table {
display: none !important;
}
body.woocommerce-checkout.peptigo-mobile-order-expanded #order_review .shop_table {
display: table !important;
}
/* Always show payment + place_order on mobile */
body.woocommerce-checkout #order_review #payment,
body.woocommerce-checkout #order_review #place_order {
display: block !important;
}
}
/* ============================================================
v1.3.76: "Customer matched zone" notice — CSS backup hide
(PHP filter is the primary path, this catches edge cases)
============================================================ */
.peptigo-zone-notice-hidden {
display: none !important;
}
/* ============================================================
v1.3.76: Variant button refinement — always side-by-side
Smaller padding so 2–4 dose options fit one row at any size.
============================================================ */
body.single-product .pdp2__purchase .peptigo-variant-buttons__row {
flex-wrap: nowrap !important;
}
body.single-product .pdp2__purchase .peptigo-variant-btn {
min-width: 0 !important;
min-height: 44px !important;
padding: 10px 14px !important;
font-size: 0.88rem !important;
flex: 1 1 0 !important;
}
@media (max-width: 480px) {
body.single-product .pdp2__purchase .peptigo-variant-btn {
min-height: 42px !important;
padding: 9px 8px !important;
font-size: 0.82rem !important;
}
}
/* ============================================================
v1.4.0: Calculator upgrade phase 1
- Quick-dose preset chips (replaces manual entry by default)
- Animated syringe SVG (visual feedback)
- Color-coded zones: optimal/tight/tiny/overflow
============================================================ */
/* Quick-dose chips */
.tpl-calc .quick-doses {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.tpl-calc .quick-dose {
flex: 1 1 auto;
min-width: 70px;
padding: 10px 12px;
background: #fff;
border: 1.5px solid rgba(10, 20, 36, 0.12);
border-radius: 10px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
font-size: 0.86rem;
color: #0a1424;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tpl-calc .quick-dose:hover {
border-color: var(--blue-700, #2563eb);
background: #f0f7ff;
}
.tpl-calc .quick-dose.active {
background: var(--blue-700, #2563eb);
border-color: var(--blue-700, #2563eb);
color: #fff;
}
.tpl-calc .quick-dose--custom {
background: #f8fafc;
color: #475569;
font-weight: 500;
}
.tpl-calc .quick-dose--custom.active {
background: #475569;
border-color: #475569;
}
.tpl-calc .quick-dose-custom {
margin-top: 8px;
}
/* Syringe visualization */
.tpl-calc .syringe-viz {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 14px;
padding: 22px 24px 18px;
margin-bottom: 18px;
box-shadow: 0 4px 18px rgba(10, 20, 36, 0.04);
transition: border-color 0.2s, box-shadow 0.2s;
}
.tpl-calc .syringe-viz[data-zone="tight"] {
border-color: rgba(245, 158, 11, 0.35);
background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}
.tpl-calc .syringe-viz[data-zone="tiny"],
.tpl-calc .syringe-viz[data-zone="overflow"] {
border-color: rgba(220, 38, 38, 0.35);
background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
}
.tpl-calc .syringe-viz__readout {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
margin-bottom: 14px;
}
.tpl-calc .syringe-viz__num {
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 700;
font-size: 2.4rem;
letter-spacing: -0.02em;
color: var(--blue-700, #2563eb);
line-height: 1;
font-variant-numeric: tabular-nums;
transition: color 0.2s;
}
.tpl-calc .syringe-viz[data-zone="tight"] .syringe-viz__num { color: #f59e0b; }
.tpl-calc .syringe-viz[data-zone="tiny"] .syringe-viz__num,
.tpl-calc .syringe-viz[data-zone="overflow"] .syringe-viz__num { color: #dc2626; }
.tpl-calc .syringe-viz__unit {
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
color: #64748b;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tpl-calc .syringe-viz__zone-tag {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
padding: 4px 10px;
background: rgba(37, 99, 235, 0.1);
color: var(--blue-700, #2563eb);
border-radius: 999px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.02em;
text-transform: lowercase;
white-space: nowrap;
}
.tpl-calc .syringe-viz[data-zone="tight"] .syringe-viz__zone-tag {
background: rgba(245, 158, 11, 0.15);
color: #b45309;
}
.tpl-calc .syringe-viz[data-zone="tiny"] .syringe-viz__zone-tag,
.tpl-calc .syringe-viz[data-zone="overflow"] .syringe-viz__zone-tag {
background: rgba(220, 38, 38, 0.12);
color: #b91c1c;
}
.tpl-calc .syringe-svg {
width: 100%;
height: auto;
display: block;
margin: 4px 0 12px;
}
/* Smooth animated transitions on the moving SVG parts */
.tpl-calc .syringe-plunger-seal,
.tpl-calc .syringe-liquid,
.tpl-calc .syringe-indicator {
transition: x 0.4s cubic-bezier(0.4, 0, 0.2, 1),
width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tpl-calc .syringe-viz__caption {
font-size: 0.88rem;
color: #475569;
line-height: 1.5;
padding-top: 10px;
border-top: 1px dashed rgba(10, 20, 36, 0.08);
}
.tpl-calc .syringe-viz__caption strong {
color: var(--blue-700, #2563eb);
font-weight: 700;
}
.tpl-calc .syringe-viz[data-zone="tight"] .syringe-viz__caption strong { color: #b45309; }
.tpl-calc .syringe-viz[data-zone="tiny"] .syringe-viz__caption strong,
.tpl-calc .syringe-viz[data-zone="overflow"] .syringe-viz__caption strong { color: #b91c1c; }
/* Result stats grid (replaces the old vertical result list) */
.tpl-calc .result-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.tpl-calc .result-stat {
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 10px;
padding: 12px 14px;
}
.tpl-calc .result-stat__label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 6px;
}
.tpl-calc .result-stat__value {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 4px;
}
.tpl-calc .result-stat__value .num {
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: #0a1424;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.tpl-calc .result-stat__value .unit {
font-size: 0.78rem;
color: #64748b;
font-weight: 500;
}
.tpl-calc .result-stat__sub {
font-size: 0.7rem;
color: #94a3b8;
}
.tpl-calc .result-stat--cost {
background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
border-color: #c8e1ff;
}
.tpl-calc .result-stat--cost .num {
color: var(--blue-700, #2563eb);
}
/* Mobile: single column for stats and chips */
@media (max-width: 760px) {
.tpl-calc .result-stats {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.tpl-calc .syringe-viz {
padding: 16px 14px 14px;
}
.tpl-calc .syringe-viz__num {
font-size: 2rem;
}
.tpl-calc .syringe-viz__zone-tag {
margin-left: 0;
font-size: 0.68rem;
}
.tpl-calc .quick-dose {
min-width: calc(33.333% - 6px);
padding: 9px 10px;
font-size: 0.84rem;
}
}
/* ============================================================
v1.4.1: Storage countdown card + frequency planner
============================================================ */
/* Storage countdown — sits between result-stats and freq-planner */
.tpl-calc .storage-card {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
border: 1px solid #c8e1ff;
border-left: 4px solid var(--blue-700, #2563eb);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 16px;
}
.tpl-calc .storage-card__icon {
flex: 0 0 auto;
width: 24px;
height: 24px;
color: var(--blue-700, #2563eb);
margin-top: 1px;
}
.tpl-calc .storage-card__icon svg {
width: 100%;
height: 100%;
}
.tpl-calc .storage-card__body {
flex: 1 1 auto;
min-width: 0;
}
.tpl-calc .storage-card__label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blue-700, #2563eb);
font-weight: 600;
margin-bottom: 4px;
}
.tpl-calc .storage-card__primary {
font-size: 0.95rem;
color: #0a1424;
line-height: 1.4;
margin-bottom: 4px;
}
.tpl-calc .storage-card__primary strong {
color: var(--blue-700, #2563eb);
font-weight: 700;
}
.tpl-calc .storage-card__sub {
font-size: 0.78rem;
color: #64748b;
line-height: 1.4;
}
/* Frequency planner */
.tpl-calc .freq-planner {
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(10, 20, 36, 0.03);
}
.tpl-calc .freq-planner__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.tpl-calc .freq-planner__title {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 1rem;
font-weight: 700;
color: #0a1424;
letter-spacing: -0.01em;
}
.tpl-calc .freq-pills {
display: flex;
gap: 4px;
background: #f1f5f9;
border-radius: 999px;
padding: 3px;
}
.tpl-calc .freq-pill {
border: 0;
background: transparent;
padding: 6px 12px;
border-radius: 999px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.78rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.tpl-calc .freq-pill:hover {
color: #0a1424;
}
.tpl-calc .freq-pill.active {
background: #fff;
color: var(--blue-700, #2563eb);
box-shadow: 0 1px 3px rgba(10, 20, 36, 0.06);
}
.tpl-calc .freq-planner__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.tpl-calc .freq-stat {
background: #f8fafc;
border-radius: 8px;
padding: 10px 12px;
}
.tpl-calc .freq-stat__label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 4px;
}
.tpl-calc .freq-stat__value {
display: flex;
align-items: baseline;
gap: 4px;
}
.tpl-calc .freq-stat__value .num {
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 700;
font-size: 1.2rem;
color: #0a1424;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.tpl-calc .freq-stat__value .unit {
font-size: 0.72rem;
color: #64748b;
font-weight: 500;
}
.tpl-calc .freq-stat--cost {
background: linear-gradient(180deg, #f0f7ff 0%, #f8fafc 100%);
border: 1px solid #c8e1ff;
}
.tpl-calc .freq-stat--cost .num {
color: var(--blue-700, #2563eb);
}
/* Mobile: stack the freq stats and planner head */
@media (max-width: 760px) {
.tpl-calc .freq-planner__grid {
grid-template-columns: 1fr 1fr;
}
.tpl-calc .freq-planner__head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.tpl-calc .freq-pills {
width: 100%;
justify-content: space-between;
}
.tpl-calc .freq-pill {
flex: 1;
text-align: center;
padding: 8px 6px;
font-size: 0.74rem;
}
.tpl-calc .storage-card {
padding: 12px 14px;
}
.tpl-calc .storage-card__primary {
font-size: 0.88rem;
}
}
/* ============================================================
v1.4.2: Tap-to-copy + smooth number transitions
============================================================ */
.tpl-calc .peptigo-copyable {
cursor: pointer;
position: relative;
transition: color 0.15s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.tpl-calc .peptigo-copyable:hover {
color: var(--blue-700, #2563eb) !important;
}
.tpl-calc .peptigo-copyable::after {
content: 'copy';
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
background: #0a1424;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
white-space: nowrap;
}
.tpl-calc .peptigo-copyable:hover::after {
opacity: 1;
}
.tpl-calc .peptigo-copyable.is-copied::after {
content: '✓ copied';
background: #16a34a;
opacity: 1;
}
.tpl-calc .peptigo-copyable.is-copied {
color: #16a34a !important;
}
/* ============================================================
v1.4.3: SEO HowTo guide + FAQ — long-form educational content
============================================================ */
.tpl-calc .howto-guide {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
margin-top: 24px;
}
@media (max-width: 760px) {
.tpl-calc .howto-guide {
grid-template-columns: 1fr;
gap: 16px;
}
}
.tpl-calc .howto-step {
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 12px;
padding: 20px 22px;
transition: border-color 0.15s, box-shadow 0.2s;
}
.tpl-calc .howto-step:hover {
border-color: var(--blue-700, #2563eb);
box-shadow: 0 4px 18px rgba(37, 99, 235, 0.06);
}
.tpl-calc .howto-step__num {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--blue-700, #2563eb);
margin-bottom: 10px;
}
.tpl-calc .howto-step h3 {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #0a1424;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.tpl-calc .howto-step p {
font-size: 0.92rem;
line-height: 1.6;
color: #334155;
margin: 0 0 10px;
}
.tpl-calc .howto-step p:last-child {
margin-bottom: 0;
}
.tpl-calc .howto-step a {
color: var(--blue-700, #2563eb);
text-decoration: underline;
text-underline-offset: 2px;
}
.tpl-calc .howto-step strong {
color: #0a1424;
font-weight: 700;
}
/* FAQ accordion */
.tpl-calc .faq-grid {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 24px;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.tpl-calc .faq-item {
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.2s;
}
.tpl-calc .faq-item:hover {
border-color: rgba(37, 99, 235, 0.3);
}
.tpl-calc .faq-item[open] {
border-color: var(--blue-700, #2563eb);
box-shadow: 0 4px 18px rgba(37, 99, 235, 0.06);
}
.tpl-calc .faq-item summary {
list-style: none;
cursor: pointer;
padding: 16px 20px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
font-size: 1rem;
color: #0a1424;
display: flex;
align-items: flex-start;
gap: 14px;
letter-spacing: -0.005em;
-webkit-tap-highlight-color: transparent;
}
.tpl-calc .faq-item summary::-webkit-details-marker {
display: none;
}
.tpl-calc .faq-item summary::after {
content: '+';
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-weight: 400;
font-size: 1.4rem;
line-height: 1;
color: var(--blue-700, #2563eb);
transition: transform 0.2s;
flex: 0 0 auto;
}
.tpl-calc .faq-item[open] summary::after {
content: '−';
}
.tpl-calc .faq-item p {
margin: 0;
padding: 0 20px 18px 20px;
font-size: 0.92rem;
line-height: 1.65;
color: #334155;
}
.tpl-calc .faq-item p a {
color: var(--blue-700, #2563eb);
text-decoration: underline;
text-underline-offset: 2px;
}
.tpl-calc .faq-item p strong {
color: #0a1424;
font-weight: 700;
}
@media (max-width: 760px) {
.tpl-calc .faq-item summary {
padding: 14px 16px;
font-size: 0.95rem;
}
.tpl-calc .faq-item p {
padding: 0 16px 16px 16px;
}
}
/* ============================================================
v1.4.4: Sticky left-nav for the calculator page
- Desktop ≥1100px: floating sidebar fixed-positioned
- 901–1099px: top sticky bar (compact)
- ≤900px: collapsible top drawer
============================================================ */
.tpl-calc .calc-nav {
font-family: 'Inter Tight', system-ui, sans-serif;
}
.tpl-calc .calc-nav__inner {
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 4px 20px rgba(10, 20, 36, 0.06);
}
.tpl-calc .calc-nav__label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
font-weight: 600;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
}
.tpl-calc .calc-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tpl-calc .calc-nav__list li {
margin: 0;
padding: 0;
}
.tpl-calc .calc-nav__divider {
height: 1px;
background: #e2e8f0;
margin: 6px 0;
}
.tpl-calc .calc-nav__link {
display: block;
padding: 7px 10px;
color: #475569;
text-decoration: none;
font-size: 0.88rem;
font-weight: 500;
border-radius: 6px;
border-left: 2px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tpl-calc .calc-nav__link:hover {
background: #f8fafc;
color: #0a1424;
}
.tpl-calc .calc-nav__link.is-active {
background: #f0f7ff;
color: var(--blue-700, #2563eb);
font-weight: 600;
border-left-color: var(--blue-700, #2563eb);
}
.tpl-calc .calc-nav__mobile-toggle {
display: none;
}
/* Desktop ≥1100px: fixed sidebar floating to the left.
Top offset MUST clear the site header (announce bar + nav).
v1.6.4: bumped from 96px → 140px to prevent the header overlapping
the "Jump to" panel. */
@media (min-width: 1100px) {
.tpl-calc .calc-nav {
position: fixed;
top: 140px;
left: 24px;
width: 200px;
max-height: calc(100vh - 160px);
overflow-y: auto;
z-index: 5;
}
/* Push all sections rightward to leave room for the nav */
.tpl-calc .wrap,
.tpl-calc section.wrap {
padding-left: 248px;
max-width: 1280px;
}
.tpl-calc .calc__grid {
max-width: 1000px;
}
/* Page head doesn't need the offset — feels weird otherwise */
.tpl-calc .page-head {
padding-left: 248px !important;
}
}
/* ============================================================
* v1.6.8 — REVERTED to solid background matching rest of site.
*
* Rationale: Aurora gradient (v1.6.4 → v1.6.7) kept producing visible
* seams or thin un-gradient strips because the gradient depended on
* exact wrapper positioning. Cleaner outcome: solid page-bg color
* everywhere. Glass-card calculator design still pops against it.
*
* The .calc-aurora-zone wrapper is preserved (no need to undo HTML)
* but its background is now the same as the rest of the page.
* ============================================================ */
.tpl-calc .calc-aurora-zone {
background: var(--wp--preset--color--bg, #f5f7fb);
}
/* Sections inside the zone are transparent so the page bg shows through */
.tpl-calc .calc-aurora-zone .page-head,
.tpl-calc .calc-aurora-zone .calc.calc-app {
background: transparent !important;
}
/* Page-head was restructured to full-bleed in v1.6.5.
Override the legacy padding-left:248px since the inner .wrap handles it. */
.tpl-calc .page-head {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Tighten the gap between page-head and calc-app — they share one bg */
.tpl-calc .calc.calc-app {
margin-top: 0 !important;
padding-top: 8px !important;
}
/* Mid-screen 901-1099px: nav becomes a sticky top bar */
@media (min-width: 901px) and (max-width: 1099px) {
.tpl-calc .calc-nav {
position: sticky;
top: 80px;
z-index: 5;
margin: 0 auto 24px;
max-width: 1100px;
padding: 0 24px;
}
.tpl-calc .calc-nav__inner {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 16px;
}
.tpl-calc .calc-nav__label {
margin: 0;
padding: 0;
border: 0;
flex: 0 0 auto;
}
.tpl-calc .calc-nav__list {
flex-direction: row;
gap: 4px;
flex: 1 1 auto;
overflow-x: auto;
scrollbar-width: none;
}
.tpl-calc .calc-nav__list::-webkit-scrollbar {
display: none;
}
.tpl-calc .calc-nav__divider {
display: none;
}
.tpl-calc .calc-nav__link {
padding: 6px 10px;
white-space: nowrap;
font-size: 0.82rem;
border-left: 0;
border-bottom: 2px solid transparent;
}
.tpl-calc .calc-nav__link.is-active {
border-left: 0;
border-bottom-color: var(--blue-700, #2563eb);
}
}
/* ============================================================
v1.4.5: IU ↔ mg converter, lead-magnet form, embed code,
cheatsheet print page, embed mode chrome hiding
============================================================ */
/* IU/mg converter (collapsible details inside results panel) */
.tpl-calc .iu-converter {
margin-top: 14px;
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 10px;
overflow: hidden;
}
.tpl-calc .iu-converter__summary {
cursor: pointer;
padding: 12px 16px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
font-size: 0.92rem;
color: #0a1424;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.tpl-calc .iu-converter__summary::-webkit-details-marker { display: none; }
.tpl-calc .iu-converter__summary::after {
content: '+';
font-family: 'JetBrains Mono', monospace;
font-weight: 400;
font-size: 1.2rem;
color: var(--blue-700, #2563eb);
transition: transform 0.2s;
}
.tpl-calc .iu-converter[open] .iu-converter__summary::after { content: '−'; }
.tpl-calc .iu-converter__hint {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.04em;
color: #64748b;
font-weight: 500;
margin-left: auto;
margin-right: 8px;
}
.tpl-calc .iu-converter__body {
padding: 4px 16px 16px;
border-top: 1px dashed rgba(10, 20, 36, 0.08);
}
.tpl-calc .iu-converter__intro {
margin: 12px 0 14px;
font-size: 0.86rem;
color: #475569;
line-height: 1.5;
}
.tpl-calc .iu-converter__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.tpl-calc .iu-converter__field {
display: flex;
flex-direction: column;
gap: 4px;
}
.tpl-calc .iu-converter__field--full {
grid-column: 1 / -1;
}
.tpl-calc .iu-converter__label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
font-weight: 600;
}
.tpl-calc .iu-converter__select,
.tpl-calc .iu-converter__input {
width: 100%;
padding: 9px 12px;
border: 1px solid rgba(10, 20, 36, 0.15);
border-radius: 8px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.92rem;
color: #0a1424;
background: #fff;
box-sizing: border-box;
}
.tpl-calc .iu-converter__direction {
display: flex;
gap: 4px;
background: #f1f5f9;
border-radius: 8px;
padding: 3px;
}
.tpl-calc .iu-converter__direction button {
flex: 1;
padding: 7px 10px;
border: 0;
background: transparent;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
}
.tpl-calc .iu-converter__direction button.active {
background: #fff;
color: var(--blue-700, #2563eb);
box-shadow: 0 1px 3px rgba(10, 20, 36, 0.06);
}
.tpl-calc .iu-converter__result {
background: #f0f7ff;
border: 1px solid #c8e1ff;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.tpl-calc .iu-converter__result-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--blue-700, #2563eb);
font-weight: 600;
}
.tpl-calc .iu-converter__result-value {
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 700;
font-size: 1.4rem;
color: var(--blue-700, #2563eb);
letter-spacing: -0.01em;
}
.tpl-calc .iu-converter__result-value > span:last-child {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
margin-left: 4px;
}
.tpl-calc .iu-converter__note {
margin: 0;
font-size: 0.75rem;
color: #94a3b8;
line-height: 1.5;
}
/* Lead-magnet cheatsheet card */
.tpl-calc .cheatsheet-card {
display: flex;
align-items: flex-start;
gap: 24px;
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
border: 1px solid #c8e1ff;
border-left: 6px solid var(--blue-700, #2563eb);
border-radius: 14px;
padding: 28px 32px;
box-shadow: 0 6px 28px rgba(37, 99, 235, 0.08);
}
.tpl-calc .cheatsheet-card__icon {
flex: 0 0 auto;
width: 52px;
height: 52px;
background: var(--blue-700, #2563eb);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.tpl-calc .cheatsheet-card__icon svg {
width: 26px;
height: 26px;
}
.tpl-calc .cheatsheet-card__body {
flex: 1 1 auto;
min-width: 0;
}
.tpl-calc .cheatsheet-card__title {
margin: 6px 0 8px;
font-size: 1.6rem;
font-weight: 800;
color: #0a1424;
letter-spacing: -0.015em;
line-height: 1.2;
}
.tpl-calc .cheatsheet-card__lede {
margin: 0 0 16px;
font-size: 0.95rem;
color: #334155;
line-height: 1.55;
}
.tpl-calc .cheatsheet-form {
display: flex;
gap: 8px;
background: #fff;
border: 1px solid #c8e1ff;
border-radius: 999px;
padding: 6px;
max-width: 520px;
margin-bottom: 8px;
}
.tpl-calc .cheatsheet-form__input {
flex: 1;
border: 0;
background: transparent;
padding: 10px 16px;
font: inherit;
font-size: 0.95rem;
outline: none;
color: #0a1424;
}
.tpl-calc .cheatsheet-form__btn {
background: var(--blue-700, #2563eb);
color: #fff;
border: 0;
padding: 11px 22px;
border-radius: 999px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
font-size: 0.86rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.tpl-calc .cheatsheet-form__btn:hover { background: #1d4ed8; }
.tpl-calc .cheatsheet-form__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.tpl-calc .cheatsheet-form__msg {
font-size: 0.86rem;
margin-bottom: 8px;
min-height: 22px;
color: #64748b;
}
.tpl-calc .cheatsheet-form__msg.is-success {
color: #166534;
font-weight: 500;
}
.tpl-calc .cheatsheet-form__msg.is-success a {
color: var(--blue-700, #2563eb);
font-weight: 600;
text-decoration: underline;
}
.tpl-calc .cheatsheet-form__msg.is-error { color: #b91c1c; }
.tpl-calc .cheatsheet-card__note {
margin: 0;
font-size: 0.78rem;
color: #94a3b8;
}
@media (max-width: 760px) {
.tpl-calc .cheatsheet-card {
flex-direction: column;
gap: 16px;
padding: 22px 20px;
}
.tpl-calc .cheatsheet-card__title { font-size: 1.3rem; }
.tpl-calc .cheatsheet-form {
flex-direction: column;
border-radius: 12px;
padding: 8px;
}
.tpl-calc .cheatsheet-form__btn {
border-radius: 10px;
padding: 12px 22px;
}
}
/* Embed code generator */
.tpl-calc .embed-card {
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.08);
border-radius: 14px;
padding: 28px 32px;
}
.tpl-calc .embed-card__title {
margin: 6px 0 8px;
font-size: 1.45rem;
font-weight: 700;
color: #0a1424;
letter-spacing: -0.01em;
}
.tpl-calc .embed-card__lede {
margin: 0 0 16px;
font-size: 0.92rem;
color: #475569;
line-height: 1.55;
}
.tpl-calc .embed-card__code {
position: relative;
background: #0a1424;
color: #cbd5e1;
border-radius: 10px;
padding: 18px 56px 18px 22px;
font-family: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;
font-size: 0.78rem;
line-height: 1.55;
overflow-x: auto;
margin-bottom: 12px;
}
.tpl-calc .embed-card__code pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
.tpl-calc .embed-card__copy {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
background: #1e3a8a;
color: #fff;
border: 0;
padding: 8px 12px;
border-radius: 8px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.tpl-calc .embed-card__copy:hover { background: #2563eb; }
.tpl-calc .embed-card__copy.is-copied { background: #16a34a; }
.tpl-calc .embed-card__copy.is-failed { background: #dc2626; }
.tpl-calc .embed-card__copy svg {
width: 14px;
height: 14px;
}
.tpl-calc .embed-card__note {
margin: 0;
font-size: 0.78rem;
color: #94a3b8;
}
/* ============================================================
Embed mode — when ?embed=1 is in URL, hide all chrome
so the calculator can be iframed cleanly into other sites
============================================================ */
body.peptigo-embed-mode .peptigo-header,
body.peptigo-embed-mode .peptigo-announce,
body.peptigo-embed-mode .peptigo-footer,
body.peptigo-embed-mode .breadcrumb,
body.peptigo-embed-mode #howto-guide,
body.peptigo-embed-mode #faq,
body.peptigo-embed-mode #cheatsheet,
body.peptigo-embed-mode #reference,
body.peptigo-embed-mode #embed,
body.peptigo-embed-mode #cta,
body.peptigo-embed-mode #trust,
body.peptigo-embed-mode #how-to-use,
body.peptigo-embed-mode .peptigo-rewards-widget,
body.peptigo-embed-mode .calc-nav {
display: none !important;
}
body.peptigo-embed-mode .tpl-calc .wrap,
body.peptigo-embed-mode .tpl-calc .page-head {
padding-left: 0 !important;
padding-right: 24px !important;
max-width: 100% !important;
}
body.peptigo-embed-mode .tpl-calc {
background: transparent;
padding-top: 12px;
}
/* Tiny "Powered by Peptigo" footer in embed mode */
body.peptigo-embed-mode .calc::after {
content: 'Calculator by Peptigo · peptigopeptides.com';
display: block;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
color: #94a3b8;
padding: 18px 12px 24px;
letter-spacing: 0.05em;
}
/* ============================================================
Cheatsheet print page styles
============================================================ */
.tpl-cheatsheet {
background: #f8fafc;
min-height: 100vh;
padding-bottom: 60px;
}
.tpl-cheatsheet .page-head {
max-width: 880px;
margin: 0 auto;
padding: 32px 24px 12px;
}
.tpl-cheatsheet .breadcrumb {
max-width: 880px;
margin: 24px auto 0;
padding: 0 24px;
font-size: 0.78rem;
color: #64748b;
}
.tpl-cheatsheet .breadcrumb a {
color: #64748b;
text-decoration: none;
}
.tpl-cheatsheet .breadcrumb a:hover { color: #0a1424; }
.cheatsheet-print {
max-width: 880px;
margin: 24px auto;
padding: 32px 36px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(10, 20, 36, 0.06);
color: #0a1424;
}
.cheatsheet-print__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding-bottom: 14px;
border-bottom: 2px solid #0a1424;
margin-bottom: 18px;
}
.cheatsheet-print__brand {
display: flex;
flex-direction: column;
gap: 2px;
}
.cheatsheet-print__logo {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--blue-700, #2563eb);
}
.cheatsheet-print__tag {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
.cheatsheet-print__title {
text-align: right;
}
.cheatsheet-print__title h2 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #0a1424;
letter-spacing: -0.01em;
}
.cheatsheet-print__title p {
margin: 2px 0 0;
font-size: 0.7rem;
color: #64748b;
}
.cheatsheet-print__body {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 24px;
}
.cheatsheet-print h3 {
margin: 0 0 8px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--blue-700, #2563eb);
padding-bottom: 4px;
border-bottom: 1px solid #e2e8f0;
}
.cheatsheet-print__col h3:not(:first-child) {
margin-top: 14px;
}
.cheatsheet-print__math p,
.cheatsheet-print__example p {
margin: 0 0 6px;
font-size: 0.78rem;
line-height: 1.55;
color: #334155;
}
.cheatsheet-print__list {
margin: 0;
padding-left: 16px;
font-size: 0.78rem;
line-height: 1.55;
color: #334155;
}
.cheatsheet-print__list li {
margin-bottom: 4px;
}
.cheatsheet-print__table {
width: 100%;
border-collapse: collapse;
font-size: 0.7rem;
}
.cheatsheet-print__table th,
.cheatsheet-print__table td {
padding: 4px 6px;
border-bottom: 1px solid #e2e8f0;
text-align: left;
}
.cheatsheet-print__table th {
background: #f8fafc;
font-weight: 700;
color: #0a1424;
font-size: 0.66rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cheatsheet-print__table td:first-child {
font-weight: 600;
}
.cheatsheet-print__foot {
margin-top: 18px;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 0.7rem;
color: #64748b;
}
.cheatsheet-print__warning {
font-weight: 700;
color: #b91c1c;
letter-spacing: 0.02em;
}
/* Print stylesheet */
@media print {
@page { size: letter; margin: 0.4in; }
html, body, .tpl-cheatsheet { background: #fff !important; }
.no-print, .peptigo-header, .peptigo-announce, .peptigo-footer { display: none !important; }
.tpl-cheatsheet { padding: 0 !important; }
.cheatsheet-print {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.cheatsheet-print__table { font-size: 0.62rem; }
.cheatsheet-print__list,
.cheatsheet-print__math p,
.cheatsheet-print__example p { font-size: 0.74rem; }
}
@media (max-width: 720px) {
.cheatsheet-print__body { grid-template-columns: 1fr; }
.cheatsheet-print__head { flex-direction: column; align-items: flex-start; }
.cheatsheet-print__title { text-align: left; }
.cheatsheet-print { padding: 22px 18px; }
}
/* Mobile ≤900px: collapsible drawer with a sticky toggle button */
@media (max-width: 900px) {
.tpl-calc .calc-nav {
position: sticky;
top: 60px;
z-index: 6;
margin: 0 0 16px;
padding: 0 14px;
}
.tpl-calc .calc-nav__mobile-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 12px 16px;
background: #fff;
border: 1px solid rgba(10, 20, 36, 0.12);
border-radius: 10px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
font-size: 0.92rem;
color: #0a1424;
cursor: pointer;
box-shadow: 0 2px 12px rgba(10, 20, 36, 0.08);
transition: border-color 0.15s;
}
.tpl-calc .calc-nav__mobile-toggle:hover {
border-color: var(--blue-700, #2563eb);
}
.tpl-calc .calc-nav__mobile-toggle svg {
flex: 0 0 auto;
color: #64748b;
transition: transform 0.2s;
}
.tpl-calc .calc-nav__mobile-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.tpl-calc .calc-nav__inner {
display: none;
margin-top: 6px;
padding: 14px 16px;
}
.tpl-calc .calc-nav.is-open .calc-nav__inner {
display: block;
}
}
/* ============================================================
* v1.4.8 — Cart cross-sell card size match other product cards
*
* v1.4.6/1.4.7 attempted to fix oversized "You may be interested
* in..." cards but targeted the WC default selector ul.products —
* our cart actually uses a CUSTOM cross-sells template that renders
* .peptigo-xsells__grid > .peptigo-product-card structure. This
* version targets the real classes.
*
* Root cause: .peptigo-xsells has no max-width on cart, so at full
* viewport the 4-col grid stretches to ~1280px, making each card
* ~310px wide. Shop cards live in 1200px content area at 4 cols,
* so each is ~290px. The 30% larger card width amplifies the
* 832/1248 (tall) aspect-ratio image area to look enormous.
*
* Fix: cap section width to match shop content width. Cards now
* size identically to shop. Aspect-ratio rules already correct.
* ============================================================ */
/* ============================================================
* v1.5.5 — DEFINITIVE cart cross-sell fix (specificity-aware)
*
* The actual bug across v1.4.6 → v1.5.4: I kept treating this as a
* source-order problem, but it's a SPECIFICITY problem.
*
* At line ~11784 there's a rule with selector
* html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media
* (specificity 0,3,2 = 32)
* that sets the WRONG treatment: 1/1 aspect-ratio + radial gradient bg
* + padding 16px + img object-fit:contain + transform:none.
*
* The alpha cutout rule at line ~12596 uses
* html body .peptigo-xsells .peptigo-product-card__media
* (specificity 0,2,2 = 22)
* with the correct alpha cutout values (832/1248, white bg, scale 1.77).
*
* Higher specificity always wins regardless of source order. So
* line 11784 (specificity 32) beat line 12596 (specificity 22), and
* cart cross-sells got the wrong treatment.
*
* Fix: this rule matches the higher specificity (0,3,2 = 32) AND comes
* later in source order. It applies the alpha cutout properties so cart
* cards render IDENTICALLY to shop cards.
* ============================================================ */
/* Section sizing — match shop's content area width exactly */
body.woocommerce-cart .peptigo-xsells {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}
/* Media container — alpha cutout treatment (832/1248 portrait, white bg) */
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media,
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card .peptigo-product-card__media {
aspect-ratio: 832 / 1248 !important;
background: #fff !important;
background-image: none !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
display: block !important;
box-shadow: none !important;
}
/* Image — scale(1.77) close-up that makes shop cards look the way they do */
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media img,
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__img,
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card .peptigo-product-card__img {
position: static !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
filter: none !important;
aspect-ratio: auto !important;
transform: translate(2.5%, 5%) scale(1.77) !important;
transform-origin: center center !important;
}
/* Per-product overrides for supplies (Insulin Syringe 2221 + Alcohol Pads
2223) — keep their 25% reduction so they don't look comically large */
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card[data-product-id="2221"] .peptigo-product-card__img,
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card[data-product-id="2223"] .peptigo-product-card__img {
transform: translate(2.5%, 5%) scale(1.33) !important;
}
/* Kill any pseudo-elements that earlier rules added to the media area */
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media::before,
html body.woocommerce-cart .peptigo-xsells .peptigo-product-card__media::after {
display: none !important;
content: none !important;
}
/* ============================================================
* v1.5.0 — REVERTED v1.4.9 image overrides
*
* v1.4.9 broke the "alpha cutout" treatment for cart cross-sells.
* Correct approach: leave aspect-ratio + image styling alone.
* Only cap card *width* (already set above). Bottle scale effect
* then renders identically to shop.
* ============================================================ */
/* ============================================================
* v1.5.1 — Tighten calculator page section spacing
*
* section.s rules elsewhere set 96-120px vertical padding (240px
* total dead space between sections). User reports too much air.
* Halve the padding for the calculator page specifically.
* ============================================================ */
.tpl-calc section.s {
padding-top: 56px !important;
padding-bottom: 56px !important;
}
.tpl-calc section.s.s--tint {
padding-top: 56px !important;
padding-bottom: 56px !important;
}
.tpl-calc .s__head {
margin-bottom: 32px !important;
}
/* Calculator block itself sits below the page head — tighten that
gap and the gap below the calculator before the next section. */
.tpl-calc .calc {
padding-top: 24px !important;
padding-bottom: 48px !important;
}
.tpl-calc .page-head {
padding-top: 32px !important;
padding-bottom: 24px !important;
}
@media (max-width: 720px) {
.tpl-calc section.s,
.tpl-calc section.s.s--tint {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.tpl-calc .s__head {
margin-bottom: 24px !important;
}
.tpl-calc .calc {
padding-top: 16px !important;
padding-bottom: 32px !important;
}
.tpl-calc .page-head {
padding-top: 24px !important;
padding-bottom: 16px !important;
}
}
/* ============================================================
* v1.5.7 — Calculator H1 + section H2 brand emphasis treatment
*
* Apply the Fraunces serif + italic + blue accent (same look as
* the existing .cta-feature h2 em rule at line ~3747) to ALL
* tags inside the calculator's H1 and section H2s.
*
* Also harden the H1/H2 base color and weight to ensure they
* inherit the strong brand styling per theme.json (some pages
* were rendering pale grey because of generic block CSS).
* ============================================================ */
/* H1 in the page-head — strong navy, inter tight */
.tpl-calc .page-head h1 {
color: var(--ink-900, #0a1424);
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.04;
font-size: clamp(2.4rem, 5vw, 4.2rem);
margin: 0 0 18px;
}
/* Section H2 base — strong navy, inter tight */
.tpl-calc .s__head h2,
.tpl-calc section.s .s__head h2 {
color: var(--ink-900, #0a1424);
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.1;
font-size: clamp(1.9rem, 3vw, 2.7rem);
margin: 0 0 14px;
}
/* Brand emphasis (Fraunces serif italic, blue) — applies to
inside the page-head H1 and any section H2 on the calculator. */
.tpl-calc .page-head h1 em,
.tpl-calc .s__head h2 em,
.tpl-calc section.s h2 em,
.tpl-calc .calc__grid h2 em {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 400;
color: var(--blue-700, #1d4ed8);
letter-spacing: -0.005em;
}
/* Eyebrow above H2/H1 — mono uppercase blue */
.tpl-calc .s__head .s__eyebrow,
.tpl-calc .page-head__eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-700, #1d4ed8);
margin-bottom: 14px;
display: block;
font-weight: 600;
}
/* ============================================================
* v1.6.0 — F+ Aurora Blue calculator app shell
*
* Glassmorphic two-pane calculator with peptide breadcrumb,
* smart suggestion banner, inline-editable cells, big result
* block with gradient text, animated syringe SVG, vial-state
* dose-mark widget, frequency mini, all in Peptigo brand blues.
* ============================================================ */
/* Background — layered radial gradients in brand blue only */
.tpl-calc .calc.calc-app {
padding: 32px 0 56px !important;
position: relative;
background:
radial-gradient(ellipse 800px 600px at 10% 0%, rgba(29,78,216,0.10), transparent 60%),
radial-gradient(ellipse 700px 500px at 100% 30%, rgba(59,130,246,0.07), transparent 60%),
radial-gradient(ellipse 900px 700px at 50% 100%, rgba(17,34,74,0.08), transparent 70%),
#eff6ff;
}
.tpl-calc .calc-app .wrap {
max-width: 1240px !important;
padding: 0 24px !important;
}
/* Outer shell — glass surface */
.tpl-calc .calc-app__shell {
background: rgba(255,255,255,0.72);
backdrop-filter: blur(40px) saturate(140%);
-webkit-backdrop-filter: blur(40px) saturate(140%);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 22px;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
inset 0 -1px 0 rgba(255,255,255,0.3),
0 1px 0 rgba(255,255,255,0.6),
0 30px 80px -20px rgba(11,34,74,0.18);
}
/* TITLE BAR */
.tpl-calc .calc-app__titlebar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid rgba(11,34,74,0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.20));
flex-wrap: wrap;
}
.tpl-calc .calc-app__brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 13px;
color: #11224a;
font-family: 'Inter Tight', 'Inter', sans-serif;
letter-spacing: -0.01em;
}
.tpl-calc .calc-app__brand span {
color: #64748b;
font-weight: 500;
font-family: 'Inter', sans-serif;
}
.tpl-calc .calc-app__logo {
width: 22px; height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, #60a5fa, #1d4ed8, #11224a);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.40),
0 6px 16px -4px rgba(29,78,216,0.50);
flex-shrink: 0;
}
/* v1.6.4 — actual Peptigo brand mark in the titlebar */
.tpl-calc .calc-app__logo-img {
width: 28px;
height: 28px;
flex-shrink: 0;
display: block;
}
.tpl-calc .calc-app__brand-name {
font-weight: 700;
color: #11224a;
letter-spacing: -0.01em;
}
.tpl-calc .calc-app__brand-sep {
color: #cbd5e1;
margin: 0 2px;
}
.tpl-calc .calc-app__brand-tool {
color: #64748b;
font-weight: 500;
}
/* Breadcrumb is now a button — make sure it looks identical to the old div */
.tpl-calc .calc-app .calc-app__breadcrumb {
font-family: inherit;
cursor: pointer;
}
.tpl-calc .calc-app .calc-app__breadcrumb:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
.tpl-calc .calc-app__sep {
color: #cbd5e1;
font-size: 14px;
}
.tpl-calc .calc-app__breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(11,34,74,0.10);
border-radius: 999px;
cursor: default;
font-size: 13px;
color: #334155;
backdrop-filter: blur(10px);
transition: all .15s;
}
.tpl-calc .calc-app__breadcrumb:hover {
background: rgba(255,255,255,0.9);
border-color: rgba(29,78,216,0.30);
}
.tpl-calc .calc-app__breadcrumb strong {
color: #11224a;
font-weight: 600;
}
.tpl-calc .calc-app__breadcrumb-cat {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.10em;
background: linear-gradient(135deg, #1d4ed8, #11224a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
font-weight: 700;
padding: 2px 5px;
border-radius: 3px;
background-color: rgba(29,78,216,0.10);
}
.tpl-calc .calc-app__breadcrumb-vial {
color: #64748b;
font-size: 12px;
}
.tpl-calc .calc-app__breadcrumb-caret {
color: #94a3b8;
font-size: 10px;
}
.tpl-calc .calc-app__spacer { flex: 1; }
.tpl-calc .calc-app__live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(16,185,129,0.10);
color: #047857;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
border: 1px solid rgba(16,185,129,0.30);
backdrop-filter: blur(10px);
}
.tpl-calc .calc-app__live::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
}
/* TWO COL BODY */
.tpl-calc .calc-app__body {
display: grid;
grid-template-columns: 1.7fr 1fr;
min-height: 580px;
}
/* WORKSPACE */
.tpl-calc .calc-app__workspace {
padding: 24px 28px 28px;
border-right: 1px solid rgba(11,34,74,0.08);
}
/* Smart suggestion */
.tpl-calc .calc-app__suggest {
background: linear-gradient(135deg, rgba(29,78,216,0.08), rgba(59,130,246,0.03));
border: 1px solid rgba(29,78,216,0.16);
border-radius: 12px;
padding: 11px 16px;
margin-bottom: 20px;
font-size: 13px;
color: #334155;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
backdrop-filter: blur(10px);
}
.tpl-calc .calc-app__suggest-icon {
color: #1d4ed8;
margin-right: 6px;
font-size: 14px;
}
.tpl-calc .calc-app__suggest strong {
background: linear-gradient(135deg, #1d4ed8, #11224a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.tpl-calc .calc-app__suggest-action {
background: rgba(255,255,255,0.85);
border: 1px solid rgba(29,78,216,0.30);
color: #1d4ed8;
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
font-family: inherit;
transition: all .15s;
}
.tpl-calc .calc-app__suggest-action:hover {
background: #eff6ff;
border-color: #1d4ed8;
}
/* SETUP — inline cells */
.tpl-calc .calc-app__setup {
display: flex;
border-bottom: 1px solid rgba(11,34,74,0.08);
padding-bottom: 18px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.tpl-calc .calc-app .cell {
padding: 4px 14px;
border-right: 1px solid rgba(11,34,74,0.08);
cursor: pointer;
transition: background .12s;
flex: 1;
min-width: 0;
position: relative;
border-radius: 8px;
}
.tpl-calc .calc-app .cell:first-child { padding-left: 0; }
.tpl-calc .calc-app .cell:last-child { border-right: 0; padding-right: 0; }
.tpl-calc .calc-app .cell:hover { background: rgba(255,255,255,0.5); }
.tpl-calc .calc-app .cell:hover .cell__edit { opacity: 1; }
.tpl-calc .calc-app .cell:focus-within { background: rgba(29,78,216,0.05); }
.tpl-calc .calc-app .cell:focus-within .cell__edit { opacity: 1; color: #1d4ed8; }
.tpl-calc .calc-app .cell__edit {
position: absolute;
top: 6px; right: 6px;
font-size: 9px;
background: linear-gradient(135deg, #1d4ed8, #11224a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0;
transition: opacity .12s;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.10em;
font-weight: 700;
}
.tpl-calc .calc-app .cell__label {
font-size: 11px;
color: #64748b;
margin-bottom: 3px;
font-weight: 500;
}
.tpl-calc .calc-app .cell__value {
font-size: 14px;
font-weight: 600;
color: #11224a;
font-feature-settings: "tnum";
line-height: 1.2;
display: flex;
align-items: baseline;
gap: 4px;
}
.tpl-calc .calc-app .cell__input {
border: 0 !important;
background: transparent !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #11224a !important;
padding: 0 !important;
width: 60px !important;
font-family: inherit !important;
font-feature-settings: "tnum";
-moz-appearance: textfield;
min-height: 0 !important;
line-height: 1.2 !important;
box-shadow: none !important;
}
.tpl-calc .calc-app .cell__input::-webkit-outer-spin-button,
.tpl-calc .calc-app .cell__input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.tpl-calc .calc-app .cell__input:focus {
outline: 0 !important;
border-bottom: 1.5px solid #1d4ed8 !important;
}
.tpl-calc .calc-app .cell__select {
border: 0;
background: transparent;
font-size: 14px;
font-weight: 600;
color: #11224a;
padding: 0;
font-family: inherit;
cursor: pointer;
width: 100%;
max-width: 100%;
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%);
background-position: calc(100% - 10px) 6px, calc(100% - 5px) 6px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 18px;
}
.tpl-calc .calc-app .cell__select:focus { outline: 0; color: #1d4ed8; }
.tpl-calc .calc-app .cell__unit {
font-size: 11px;
font-weight: 500;
color: #64748b;
}
.tpl-calc .calc-app .cell--dose .cell__unit {
display: inline-flex;
gap: 1px;
}
.tpl-calc .calc-app .cell--dose .cell__unit button {
background: none;
border: 0;
padding: 1px 5px;
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
color: #94a3b8;
cursor: pointer;
border-radius: 3px;
}
.tpl-calc .calc-app .cell--dose .cell__unit button.active {
color: #1d4ed8;
background: rgba(29,78,216,0.10);
font-weight: 600;
}
.tpl-calc .calc-app .cell__chips {
display: flex;
gap: 3px;
margin-top: 5px;
flex-wrap: wrap;
}
.tpl-calc .calc-app .cell__chip {
padding: 2px 8px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(11,34,74,0.10);
border-radius: 999px;
font-size: 10px;
color: #334155;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
backdrop-filter: blur(8px);
transition: all .15s;
}
.tpl-calc .calc-app .cell__chip:hover {
border-color: rgba(29,78,216,0.30);
color: #1d4ed8;
}
.tpl-calc .calc-app .cell__chip.active {
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 10px rgba(29,78,216,0.25);
}
.tpl-calc .calc-app .cell__pills {
display: inline-flex;
gap: 2px;
background: rgba(11,34,74,0.05);
padding: 2px;
border-radius: 6px;
}
.tpl-calc .calc-app .cell__pill {
background: transparent;
border: 0;
padding: 4px 10px;
font-size: 11px;
font-family: 'JetBrains Mono', monospace;
color: #64748b;
cursor: pointer;
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.04em;
}
.tpl-calc .calc-app .cell__pill.active {
background: #fff;
color: #1d4ed8;
box-shadow: 0 1px 2px rgba(11,34,74,0.10);
}
/* ANSWER block — the focal point */
.tpl-calc .calc-app__answer {
margin-bottom: 18px;
}
.tpl-calc .calc-app .answer__head {
display: flex;
align-items: center;
margin-bottom: 6px;
gap: 10px;
}
.tpl-calc .calc-app .answer__caption {
font-size: 11px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
}
.tpl-calc .calc-app .answer__rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(11,34,74,0.10), transparent 90%);
}
.tpl-calc .calc-app .answer__updated {
font-size: 11px;
color: #94a3b8;
font-family: 'JetBrains Mono', monospace;
}
.tpl-calc .calc-app .answer__num {
font-family: 'Inter Tight', sans-serif;
font-size: 72px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
font-feature-settings: "tnum";
display: inline-flex;
align-items: baseline;
gap: 12px;
color: #11224a;
}
.tpl-calc .calc-app .answer__num em {
font-style: normal;
background: linear-gradient(135deg, #93c5fd, #3b82f6, #1d4ed8, #11224a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 16px rgba(29,78,216,0.30));
}
.tpl-calc .calc-app .answer__num-unit {
font-size: 22px;
color: #64748b;
font-weight: 500;
}
.tpl-calc .calc-app .answer__sub {
font-size: 14px;
color: #334155;
margin-top: 8px;
line-height: 1.55;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.tpl-calc .calc-app .answer__sub strong {
color: #11224a;
font-weight: 600;
}
.tpl-calc .calc-app .answer__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
background: rgba(16,185,129,0.10);
color: #047857;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
border: 1px solid rgba(16,185,129,0.30);
backdrop-filter: blur(8px);
}
.tpl-calc .calc-app .answer__pill::before {
content: "";
width: 5px; height: 5px;
background: #10b981;
border-radius: 50%;
box-shadow: 0 0 6px #10b981;
}
.tpl-calc .calc-app .answer__pill.is-warning {
background: rgba(245,158,11,0.10);
color: #b45309;
border-color: rgba(245,158,11,0.30);
}
.tpl-calc .calc-app .answer__pill.is-warning::before {
background: #f59e0b;
box-shadow: 0 0 6px #f59e0b;
}
.tpl-calc .calc-app .answer__pill.is-danger {
background: rgba(220,38,38,0.10);
color: #b91c1c;
border-color: rgba(220,38,38,0.30);
}
.tpl-calc .calc-app .answer__pill.is-danger::before {
background: #dc2626;
box-shadow: 0 0 6px #dc2626;
}
.tpl-calc .calc-app .answer__math {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: #64748b;
margin-top: 14px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
flex-wrap: wrap;
}
.tpl-calc .calc-app .answer__math-toggle {
font-size: 10px;
background: linear-gradient(135deg, rgba(29,78,216,0.08), rgba(59,130,246,0.04));
padding: 3px 8px;
border-radius: 4px;
color: #1d4ed8;
border: 1px solid rgba(29,78,216,0.20);
font-weight: 600;
letter-spacing: 0.04em;
}
.tpl-calc .calc-app .answer__math.is-collapsed .answer__math-body { display: none; }
/* SYRINGE CARD — wrapper for animated SVG */
.tpl-calc .calc-app__syringe-card {
background: rgba(255,255,255,0.6);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 14px;
padding: 14px 18px 16px;
margin-bottom: 16px;
backdrop-filter: blur(20px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(255,255,255,0.4);
}
.tpl-calc .calc-app__syringe-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 12px;
color: #334155;
}
.tpl-calc .calc-app__syringe-card-head strong {
color: #11224a;
font-weight: 600;
}
.tpl-calc .calc-app__zone-pill {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: #1d4ed8;
background: rgba(29,78,216,0.10);
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(29,78,216,0.20);
letter-spacing: 0.05em;
font-weight: 700;
}
.tpl-calc .calc-app__zone-pill.is-warning {
color: #b45309;
background: rgba(245,158,11,0.10);
border-color: rgba(245,158,11,0.20);
}
.tpl-calc .calc-app__zone-pill.is-danger {
color: #b91c1c;
background: rgba(220,38,38,0.10);
border-color: rgba(220,38,38,0.20);
}
.tpl-calc .calc-app .syringe-viz {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
margin: 0 !important;
}
.tpl-calc .calc-app .syringe-viz__readout { display: none !important; }
.tpl-calc .calc-app .syringe-svg {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block;
}
/* ACTIONS */
.tpl-calc .calc-app__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.tpl-calc .calc-app .cap-btn {
background: rgba(255,255,255,0.6);
border: 1px solid rgba(11,34,74,0.12);
border-radius: 999px;
padding: 8px 16px;
font-size: 12px;
color: #11224a;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
transition: all .15s;
backdrop-filter: blur(10px);
}
.tpl-calc .calc-app .cap-btn:hover {
background: rgba(255,255,255,0.95);
border-color: rgba(29,78,216,0.30);
color: #1d4ed8;
}
.tpl-calc .calc-app .cap-btn--primary {
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border-color: transparent;
font-weight: 600;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 6px 16px -4px rgba(29,78,216,0.40);
}
/* PRIMARY HOVER — must reassert background to override .cap-btn:hover's white-bg rule */
.tpl-calc .calc-app .cap-btn--primary:hover {
background: linear-gradient(135deg, #2563eb, #173063) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 8px 22px -4px rgba(29,78,216,0.55);
transform: translateY(-1px);
}
.tpl-calc .calc-app .share-status {
font-size: 11px;
color: #047857;
font-weight: 600;
margin-left: 8px;
opacity: 0;
transition: opacity .25s;
}
.tpl-calc .calc-app .share-status.is-visible { opacity: 1; }
/* COST BLOCK — inline below actions when expanded
Accept both .open (set by original calc IIFE) and .is-open (new) */
.tpl-calc .calc-app .cost-block {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
}
.tpl-calc .calc-app .cost-block.is-open,
.tpl-calc .calc-app .cost-block.open { max-height: 200px; }
/* RIGHT PANE */
.tpl-calc .calc-app__stats {
background: rgba(255,255,255,0.30);
padding: 24px 22px 26px;
display: flex;
flex-direction: column;
gap: 16px;
backdrop-filter: blur(20px);
}
.tpl-calc .calc-app .stats-panel {
background: rgba(255,255,255,0.65);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 14px;
padding: 16px 18px;
backdrop-filter: blur(20px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.tpl-calc .calc-app .stats-panel__title {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 600;
margin-bottom: 12px;
}
.tpl-calc .calc-app .stats-panel__title svg { color: #1d4ed8; }
.tpl-calc .calc-app .stats-panel__row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 7px 0;
border-bottom: 1px dashed rgba(11,34,74,0.10);
}
.tpl-calc .calc-app .stats-panel__row:last-child { border-bottom: 0; }
.tpl-calc .calc-app .stats-panel__label {
font-size: 13px;
color: #334155;
}
.tpl-calc .calc-app .stats-panel__val {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 600;
color: #11224a;
font-feature-settings: "tnum";
}
.tpl-calc .calc-app .stats-panel__unit {
color: #64748b;
font-weight: 500;
font-size: 11px;
margin-left: 3px;
}
/* VIAL WIDGET — the differentiator */
.tpl-calc .calc-app .vial-widget {
background: rgba(255,255,255,0.65);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 14px;
padding: 16px 18px;
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.tpl-calc .calc-app .vial-widget::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #11224a, #1d4ed8, #3b82f6, #93c5fd);
}
.tpl-calc .calc-app .vial-widget__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
}
.tpl-calc .calc-app .vial-widget__title {
font-size: 13px;
color: #11224a;
font-weight: 700;
}
.tpl-calc .calc-app .vial-widget__subtitle {
font-size: 11px;
color: #64748b;
margin-top: 2px;
}
.tpl-calc .calc-app .vial-widget__action {
background: linear-gradient(135deg, #1d4ed8, #11224a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 11px;
text-decoration: none;
font-weight: 600;
}
.tpl-calc .calc-app .vial-widget__legend {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #64748b;
margin-bottom: 10px;
}
.tpl-calc .calc-app .vial-widget__legend strong {
color: #11224a;
font-weight: 600;
}
.tpl-calc .calc-app .dose-marks {
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 2px;
margin: 10px 0 12px;
}
.tpl-calc .calc-app .dose-mark {
height: 22px;
background: rgba(11,34,74,0.05);
border-radius: 2px;
}
.tpl-calc .calc-app .dose-mark.is-used {
background: linear-gradient(180deg, #93c5fd, #3b82f6, #1d4ed8);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.40),
0 2px 6px rgba(29,78,216,0.25);
}
.tpl-calc .calc-app .dose-mark.is-current {
background: #dbeafe;
border: 1px solid #1d4ed8;
animation: tplCalcDoseMarkPulse 2s infinite;
}
@keyframes tplCalcDoseMarkPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(29,78,216,0.40); }
50% { box-shadow: 0 0 0 3px rgba(29,78,216,0); }
}
.tpl-calc .calc-app .vial-widget__timeline {
display: flex;
align-items: center;
gap: 8px;
font-size: 9px;
color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.04em;
}
.tpl-calc .calc-app .vial-widget__timeline strong {
color: #1d4ed8;
font-weight: 700;
}
.tpl-calc .calc-app .vial-widget__timeline-bar {
flex: 1;
height: 4px;
background: rgba(11,34,74,0.06);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.tpl-calc .calc-app .vial-widget__timeline-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #34d399);
width: 0;
transition: width .4s ease;
}
.tpl-calc .calc-app .vial-widget__timeline-flag {
position: absolute;
top: -3px;
width: 2px; height: 10px;
background: linear-gradient(180deg, #1d4ed8, #11224a);
border-radius: 1px;
left: 0;
transition: left .4s ease;
}
/* FREQUENCY WIDGET */
.tpl-calc .calc-app .freq-widget {
background: rgba(255,255,255,0.65);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 14px;
padding: 14px 18px;
backdrop-filter: blur(20px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.tpl-calc .calc-app .freq-widget__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.tpl-calc .calc-app .freq-widget__title {
font-size: 12px;
color: #334155;
font-weight: 600;
}
.tpl-calc .calc-app .freq-widget__hint {
font-size: 10px;
color: #94a3b8;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tpl-calc .calc-app .freq-widget__chips {
display: flex;
gap: 4px;
margin-bottom: 10px;
}
.tpl-calc .calc-app .freq-widget__chip {
flex: 1;
padding: 6px 4px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(11,34,74,0.08);
border-radius: 6px;
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
color: #334155;
cursor: pointer;
text-align: center;
font-weight: 500;
letter-spacing: 0.04em;
transition: all .15s;
}
.tpl-calc .calc-app .freq-widget__chip:hover {
border-color: rgba(29,78,216,0.30);
color: #1d4ed8;
}
.tpl-calc .calc-app .freq-widget__chip.active {
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 10px rgba(29,78,216,0.25);
}
.tpl-calc .calc-app .freq-widget__row {
display: flex;
justify-content: space-between;
font-size: 11px;
padding-top: 7px;
margin-top: 4px;
border-top: 1px dashed rgba(11,34,74,0.10);
}
.tpl-calc .calc-app .freq-widget__row:first-of-type { margin-top: 8px; }
.tpl-calc .calc-app .freq-widget__label { color: #64748b; }
.tpl-calc .calc-app .freq-widget__row strong {
color: #11224a;
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
/* FOOTBAR */
.tpl-calc .calc-app__footbar {
display: flex;
justify-content: space-between;
padding: 11px 18px;
background: rgba(255,255,255,0.30);
border-top: 1px solid rgba(11,34,74,0.08);
font-size: 11px;
color: #64748b;
backdrop-filter: blur(20px);
gap: 10px;
flex-wrap: wrap;
}
.tpl-calc .calc-app__ruo {
color: #94a3b8;
font-style: italic;
}
/* IU CONVERTER section — kept simple, separate from the app shell */
.tpl-calc .calc-iu-section {
padding: 24px 0;
}
.tpl-calc .calc-iu-section .iu-converter {
max-width: 720px;
margin: 0 auto;
}
/* ============================================================
* v1.6.3 — Embed CTA section · "main highlight" treatment
*
* Sits right under the calculator. Aurora-blue gradient backdrop,
* two-column glass card layout: pitch (left) + iframe code (right).
* Designed to read as a marquee feature, not a footer afterthought.
* ============================================================ */
.tpl-calc .calc-embed-cta {
padding: 64px 0 !important;
position: relative;
background:
radial-gradient(ellipse 900px 500px at 20% 0%, rgba(59,130,246,0.18), transparent 60%),
radial-gradient(ellipse 700px 600px at 100% 100%, rgba(29,78,216,0.20), transparent 60%),
linear-gradient(180deg, #0b1736 0%, #11224a 100%);
color: #e2e8f0;
overflow: hidden;
}
.tpl-calc .calc-embed-cta::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(96,165,250,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(96,165,250,0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
opacity: 0.5;
}
.tpl-calc .calc-embed-cta .wrap {
position: relative;
z-index: 1;
max-width: 1200px;
padding: 0 24px;
}
.tpl-calc .calc-embed-cta__shell {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.tpl-calc .calc-embed-cta {
padding: 48px 0 !important;
}
.tpl-calc .calc-embed-cta__shell {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* Pitch (left) */
.tpl-calc .calc-embed-cta__eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: #60a5fa;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 18px;
font-weight: 600;
}
.tpl-calc .calc-embed-cta__title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: clamp(36px, 5vw, 60px);
line-height: 1.0;
letter-spacing: -0.035em;
color: #ffffff;
font-weight: 800;
margin: 0 0 18px;
}
.tpl-calc .calc-embed-cta__title em {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 500;
background: linear-gradient(135deg, #93c5fd, #60a5fa, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tpl-calc .calc-embed-cta__lede {
font-size: 17px;
line-height: 1.6;
color: #cbd5e1;
margin-bottom: 24px;
max-width: 540px;
}
.tpl-calc .calc-embed-cta__features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.tpl-calc .calc-embed-cta__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #cbd5e1;
line-height: 1.5;
padding: 0;
}
.tpl-calc .calc-embed-cta__features li strong {
color: #ffffff;
font-weight: 600;
}
.tpl-calc .calc-embed-cta__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(96,165,250,0.20);
color: #60a5fa;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
border: 1px solid rgba(96,165,250,0.30);
}
/* Code card (right) — glass white-on-navy */
.tpl-calc .calc-embed-cta__code-card {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(96,165,250,0.20);
border-radius: 16px;
padding: 22px 24px 24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 24px 60px -20px rgba(0,0,0,0.5);
}
.tpl-calc .calc-embed-cta__code-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(96,165,250,0.15);
}
.tpl-calc .calc-embed-cta__code-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
color: #60a5fa;
letter-spacing: 0.20em;
text-transform: uppercase;
font-weight: 700;
}
.tpl-calc .calc-embed-cta__code-card #embedCode {
background: rgba(5,10,28,0.55);
border: 1px solid rgba(96,165,250,0.18);
border-radius: 10px;
padding: 16px 18px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
line-height: 1.65;
color: #93c5fd;
white-space: pre-wrap;
word-break: break-all;
overflow-x: auto;
max-width: 100%;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.30);
}
.tpl-calc .calc-embed-cta__code-card #embedCopyBtn {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: #ffffff;
border: 0;
border-radius: 999px;
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 4px 12px -2px rgba(29,78,216,0.45);
transition: all .15s;
}
.tpl-calc .calc-embed-cta__code-card #embedCopyBtn:hover {
background: linear-gradient(135deg, #60a5fa, #2563eb) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 6px 16px -2px rgba(29,78,216,0.60);
transform: translateY(-1px);
}
.tpl-calc .calc-embed-cta__code-card #embedCopyBtn.is-copied {
background: linear-gradient(135deg, #10b981, #047857) !important;
}
.tpl-calc .calc-embed-cta__code-card #embedCopyBtn.is-failed {
background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
}
.tpl-calc .calc-embed-cta__code-card #embedCopyBtn svg {
width: 14px;
height: 14px;
}
.tpl-calc .calc-embed-cta__hint {
margin: 14px 0 0;
font-size: 12px;
color: #94a3b8;
line-height: 1.5;
}
.tpl-calc .calc-embed-cta__hint strong {
color: #cbd5e1;
font-weight: 600;
}
/* MOBILE — single column, stack right pane below workspace */
@media (max-width: 900px) {
.tpl-calc .calc-app__body {
grid-template-columns: 1fr;
}
.tpl-calc .calc-app__workspace {
border-right: 0;
border-bottom: 1px solid rgba(11,34,74,0.08);
padding: 18px 16px 22px;
}
.tpl-calc .calc-app__stats {
padding: 18px 16px 22px;
}
.tpl-calc .calc-app__titlebar {
padding: 10px 14px;
}
.tpl-calc .calc-app__breadcrumb {
font-size: 12px;
padding: 4px 10px;
}
.tpl-calc .calc-app__live { font-size: 10px; padding: 4px 10px; }
.tpl-calc .calc-app__setup {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 10px;
background: rgba(255,255,255,0.5);
border-radius: 10px;
border: 1px solid rgba(11,34,74,0.06);
}
.tpl-calc .calc-app .cell {
padding: 8px 10px !important;
border-right: 0 !important;
border: 1px solid rgba(11,34,74,0.06);
border-radius: 8px;
background: #fff;
}
.tpl-calc .calc-app .cell--peptide,
.tpl-calc .calc-app .cell--syringe { grid-column: 1 / -1; }
.tpl-calc .calc-app .cell__edit {
opacity: 1;
background: none;
-webkit-text-fill-color: #1d4ed8;
color: #1d4ed8;
font-size: 8px;
}
.tpl-calc .calc-app .answer__num { font-size: 56px; }
.tpl-calc .calc-app .answer__num-unit { font-size: 18px; }
.tpl-calc .calc-app__actions { gap: 6px; }
.tpl-calc .calc-app .cap-btn { padding: 7px 12px; font-size: 11px; }
.tpl-calc .calc-app .dose-marks {
grid-template-columns: repeat(20, 1fr);
gap: 1.5px;
}
.tpl-calc .calc-app .dose-mark { height: 16px; }
.tpl-calc .calc-app__brand span { display: none; }
.tpl-calc .calc-app__sep { display: none; }
.tpl-calc .calc-app__breadcrumb-vial { display: none; }
}
@media (max-width: 560px) {
.tpl-calc .calc-app__setup { grid-template-columns: 1fr; }
.tpl-calc .calc-app .cell--peptide,
.tpl-calc .calc-app .cell--syringe { grid-column: 1; }
.tpl-calc .calc-app .answer__num { font-size: 48px; }
.tpl-calc .calc-app__suggest { font-size: 12px; flex-direction: column; align-items: flex-start; }
}
/* ============================================================
* v1.6.9 — MOBILE OVERHAUL: app-like fluid experience
*
* Reorganizes the calculator on phones for less scrolling, tighter
* spacing, and a more "tool / app" feel. Reordered right pane so
* Vial state (most actionable info) appears first after the result.
* Embed section shrinks gracefully and the iframe code block no
* longer overflows horizontally.
* ============================================================ */
@media (max-width: 720px) {
/* === TITLE BAR — drop wordmark + live pill on phone === */
.tpl-calc .calc-app__titlebar {
padding: 9px 12px !important;
flex-wrap: wrap;
gap: 8px;
}
.tpl-calc .calc-app__brand-tool,
.tpl-calc .calc-app__brand-sep,
.tpl-calc .calc-app__sep {
display: none;
}
.tpl-calc .calc-app__live { display: none; }
.tpl-calc .calc-app__breadcrumb {
flex: 1 1 100%;
font-size: 12px;
justify-content: flex-start;
}
.tpl-calc .calc-app__breadcrumb-vial {
display: none;
}
/* === SUGGESTION BANNER tighter === */
.tpl-calc .calc-app__suggest {
padding: 9px 12px;
font-size: 12px;
margin-bottom: 14px;
gap: 8px;
}
.tpl-calc .calc-app__suggest-action {
font-size: 10px;
padding: 4px 10px;
}
/* === WORKSPACE padding tighter === */
.tpl-calc .calc-app__workspace {
padding: 14px 14px 18px !important;
}
/* === SETUP CELLS — cleaner 2-col grid with priority cells full-width === */
.tpl-calc .calc-app__setup {
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 8px;
background: rgba(255,255,255,0.5);
border: 1px solid rgba(11,34,74,0.06);
border-radius: 10px;
margin-bottom: 14px;
}
.tpl-calc .calc-app .cell--peptide,
.tpl-calc .calc-app .cell--dose,
.tpl-calc .calc-app .cell--syringe {
grid-column: 1 / -1;
}
.tpl-calc .calc-app .cell {
padding: 9px 12px !important;
background: #fff;
border: 1px solid rgba(11,34,74,0.06);
border-right: 1px solid rgba(11,34,74,0.06) !important;
border-radius: 8px;
}
.tpl-calc .calc-app .cell__edit {
display: none; /* tap target IS the cell on mobile, no need for label */
}
.tpl-calc .calc-app .cell__label {
font-size: 10px;
}
.tpl-calc .calc-app .cell__value {
font-size: 13px;
}
.tpl-calc .calc-app .cell__chips {
margin-top: 6px;
}
.tpl-calc .calc-app .cell__chip {
padding: 4px 10px;
font-size: 11px;
}
/* === ANSWER BLOCK — tighter, slightly smaller hero === */
.tpl-calc .calc-app__answer { margin-bottom: 14px; }
.tpl-calc .calc-app .answer__num {
font-size: 56px;
}
.tpl-calc .calc-app .answer__num-unit {
font-size: 18px;
}
.tpl-calc .calc-app .answer__sub {
font-size: 13px;
gap: 6px;
}
.tpl-calc .calc-app .answer__pill {
font-size: 10px;
padding: 3px 9px;
}
.tpl-calc .calc-app .answer__math {
font-size: 10px;
margin-top: 10px;
}
/* === SYRINGE CARD tighter === */
.tpl-calc .calc-app__syringe-card {
padding: 12px 14px 14px;
margin-bottom: 14px;
}
.tpl-calc .calc-app__syringe-card-head {
font-size: 11px;
flex-wrap: wrap;
gap: 6px;
}
.tpl-calc .calc-app__zone-pill {
font-size: 9px;
padding: 3px 8px;
}
/* === ACTION ROW — full-width buttons, 2-up grid === */
.tpl-calc .calc-app__actions {
gap: 6px;
}
.tpl-calc .calc-app .cap-btn {
flex: 1 1 calc(50% - 3px);
padding: 9px 12px;
font-size: 12px;
justify-content: center;
min-height: 40px;
}
.tpl-calc .calc-app .cap-btn--primary {
flex: 1 1 100%; /* primary action takes full row */
}
/* === RIGHT PANE — REORDER for mobile: Vial state FIRST (most actionable) === */
.tpl-calc .calc-app__stats {
padding: 14px 14px 18px;
gap: 12px;
}
.tpl-calc .calc-app .vial-widget { order: 1; }
.tpl-calc .calc-app .freq-widget { order: 2; }
.tpl-calc .calc-app .stats-panel { order: 3; }
.tpl-calc .calc-app .stats-panel,
.tpl-calc .calc-app .vial-widget,
.tpl-calc .calc-app .freq-widget {
padding: 14px 16px;
border-radius: 12px;
}
.tpl-calc .calc-app .vial-widget__title { font-size: 13px; }
.tpl-calc .calc-app .vial-widget__subtitle { font-size: 10px; }
.tpl-calc .calc-app .dose-marks { gap: 1.5px; }
.tpl-calc .calc-app .dose-mark { height: 18px; }
.tpl-calc .calc-app .vial-widget__timeline { font-size: 9px; }
/* === FOOTBAR — single line, tiny === */
.tpl-calc .calc-app__footbar {
padding: 10px 14px;
font-size: 10px;
}
.tpl-calc .calc-app__ruo {
display: none; /* RUO note already in syringe card; save phone space */
}
/* === EMBED CTA on mobile — tighter, no horizontal overflow === */
.tpl-calc .calc-embed-cta {
padding: 40px 0 !important;
}
.tpl-calc .calc-embed-cta .wrap {
padding: 0 18px !important;
}
.tpl-calc .calc-embed-cta__shell {
gap: 24px;
}
.tpl-calc .calc-embed-cta__eyebrow {
font-size: 10px;
margin-bottom: 14px;
}
.tpl-calc .calc-embed-cta__title {
font-size: 36px;
margin-bottom: 14px;
}
.tpl-calc .calc-embed-cta__lede {
font-size: 14px;
margin-bottom: 18px;
line-height: 1.55;
}
.tpl-calc .calc-embed-cta__features {
gap: 7px;
}
.tpl-calc .calc-embed-cta__features li {
font-size: 13px;
}
.tpl-calc .calc-embed-cta__code-card {
padding: 16px 18px;
}
.tpl-calc .calc-embed-cta__code-head {
margin-bottom: 12px;
padding-bottom: 10px;
}
.tpl-calc .calc-embed-cta__code-card #embedCode {
font-size: 10px;
padding: 12px 14px;
word-break: break-all;
white-space: pre-wrap;
line-height: 1.55;
max-width: 100%;
box-sizing: border-box;
}
.tpl-calc .calc-embed-cta__hint {
font-size: 11px;
margin-top: 12px;
}
/* === SECTION BG between calc and embed: ensure smooth transition === */
.tpl-calc .calc-aurora-zone {
padding-bottom: 0;
}
}
/* === Smaller phones (< 480px) === */
@media (max-width: 480px) {
.tpl-calc .calc-app__setup { grid-template-columns: 1fr !important; }
.tpl-calc .calc-app .cell { grid-column: 1 !important; }
.tpl-calc .calc-app .answer__num { font-size: 48px; }
.tpl-calc .calc-app .answer__num-unit { font-size: 16px; }
.tpl-calc .calc-app .cap-btn {
flex: 1 1 100%;
}
.tpl-calc .calc-embed-cta__title { font-size: 30px; }
.tpl-calc .calc-embed-cta__features li { font-size: 12px; }
.tpl-calc .calc-embed-cta__code-card #embedCode { font-size: 9px; }
}
/* ============================================================
v1.7.0 — MOBILE SHELL (Peptigo Calc Mobile / pcm)
App-feel sticky chrome for ≤768px viewports. Mirrors state
from the desktop calc inputs (#mass / #volume / #dose etc.)
which exist in the DOM but are display:none on mobile.
============================================================ */
/* Hide the mobile shell on desktop */
.tpl-calc .pcm { display: none; }
@media (max-width: 768px) {
/* On mobile: hide the desktop calculator chrome. The underlying
inputs (#mass, #volume, #dose, #preset, #syringePills, #freqPills)
are still in the DOM so existing calc JS keeps working — we just
don't render them visually. */
.tpl-calc .calc-aurora-zone > .breadcrumb,
.tpl-calc .calc-aurora-zone > .page-head,
.tpl-calc .calc-aurora-zone > .calc-nav,
.tpl-calc .calc-aurora-zone > .calc-app,
.tpl-calc > .calc-embed-cta {
display: none !important;
}
.tpl-calc .pcm { display: block; }
}
/* ===== Mobile shell scaffold ===== */
.tpl-calc .pcm {
position: relative;
background: var(--wp--preset--color--bg, #f5f7fb);
color: #0a1424;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
min-height: calc(100vh - 60px);
}
.tpl-calc .pcm * { box-sizing: border-box; }
/* ===== Top bar (sticky) ===== */
.tpl-calc .pcm__topbar {
position: sticky;
top: 0;
z-index: 30;
padding: 10px 14px;
background: rgba(245,247,251,0.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid rgba(11,34,74,0.06);
display: flex;
align-items: center;
gap: 8px;
}
.tpl-calc .pcm__brand {
display: flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 13px; color: #11224a;
letter-spacing: -0.01em;
}
.tpl-calc .pcm__brand-logo {
width: 24px; height: 24px;
border-radius: 7px;
background: linear-gradient(135deg, #60a5fa, #1d4ed8, #11224a);
display: flex; align-items: center; justify-content: center;
color: #fff;
box-shadow: 0 4px 10px -2px rgba(29,78,216,0.40);
flex-shrink: 0;
}
.tpl-calc .pcm__brand-spacer { flex: 1; }
.tpl-calc .pcm__live {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 9px;
background: #ecfdf5;
color: #10b981;
border-radius: 999px;
font-size: 10px; font-weight: 600;
border: 1px solid rgba(16,185,129,0.30);
}
.tpl-calc .pcm__live::before {
content: ""; width: 5px; height: 5px;
border-radius: 50%; background: #10b981;
box-shadow: 0 0 6px #10b981;
}
.tpl-calc .pcm__peptide-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: linear-gradient(135deg, #11224a, #173063);
color: #fff;
border: 0;
border-radius: 999px;
font-family: inherit;
font-size: 12px; font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
box-shadow: 0 4px 12px -4px rgba(11,34,74,0.40);
}
.tpl-calc .pcm__peptide-cat {
font-family: 'JetBrains Mono', SF Mono, Consolas, monospace;
font-size: 8px;
color: #93c5fd;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 2px 5px;
background: rgba(96,165,250,0.18);
border-radius: 3px;
}
.tpl-calc .pcm__peptide-caret { color: rgba(255,255,255,0.6); font-size: 9px; }
/* ===== Hero (sticky just below topbar) ===== */
.tpl-calc .pcm__hero {
position: sticky;
top: 48px; /* topbar height */
z-index: 25;
background: rgba(245,247,251,0.92);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
padding: 14px 16px 10px;
border-bottom: 1px solid rgba(11,34,74,0.05);
}
.tpl-calc .pcm__hero-caption {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: #64748b;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2px;
text-align: center;
}
.tpl-calc .pcm__hero-answer { text-align: center; margin-bottom: 6px; }
.tpl-calc .pcm__hero-num {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 60px; font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
font-feature-settings: "tnum";
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.tpl-calc .pcm__hero-num em {
font-style: normal;
background: linear-gradient(135deg, #93c5fd, #3b82f6, #1d4ed8, #11224a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 8px rgba(29,78,216,0.20));
}
.tpl-calc .pcm__hero-unit {
font-size: 16px;
color: #64748b;
font-weight: 500;
}
.tpl-calc .pcm__hero-sub {
font-size: 13px;
color: #334155;
text-align: center;
margin-bottom: 6px;
}
.tpl-calc .pcm__hero-sub strong { color: #0a1424; font-weight: 600; }
.tpl-calc .pcm__hero-pill-wrap { text-align: center; margin-bottom: 6px; }
.tpl-calc .pcm__hero-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
background: #ecfdf5;
color: #10b981;
border-radius: 999px;
font-size: 10px; font-weight: 600;
border: 1px solid rgba(16,185,129,0.30);
}
.tpl-calc .pcm__hero-pill::before {
content: ""; width: 4px; height: 4px;
border-radius: 50%; background: #10b981;
}
.tpl-calc .pcm__hero-pill.is-warning {
background: #fffbeb;
color: #b45309;
border-color: rgba(245,158,11,0.40);
}
.tpl-calc .pcm__hero-pill.is-warning::before { background: #f59e0b; }
.tpl-calc .pcm__hero-pill.is-danger {
background: #fef2f2;
color: #b91c1c;
border-color: rgba(220,38,38,0.40);
}
.tpl-calc .pcm__hero-pill.is-danger::before { background: #dc2626; }
.tpl-calc .pcm__hero-syringe {
width: 100%; height: 38px;
margin-top: 4px;
}
.tpl-calc .pcm__hero-syringe svg { width: 100%; height: 100%; display: block; }
/* ===== Scrollable content ===== */
.tpl-calc .pcm__content {
padding: 14px 14px 0; /* v1.7.2: chips + actionbar are now inline below, embed CTA after that */
}
/* ===== Accordion cards ===== */
.tpl-calc details.pcm__card {
background: #fff;
border: 1px solid rgba(11,34,74,0.08);
border-radius: 14px;
margin-bottom: 10px;
overflow: hidden;
transition: border-color .15s ease;
}
.tpl-calc details.pcm__card[open] {
border-color: rgba(29,78,216,0.18);
box-shadow: 0 4px 14px -8px rgba(29,78,216,0.18);
}
.tpl-calc details.pcm__card > summary {
list-style: none;
cursor: pointer;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
user-select: none;
}
.tpl-calc details.pcm__card > summary::-webkit-details-marker { display: none; }
.tpl-calc .pcm__card-icon {
width: 32px; height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, #dbeafe, #fff);
border: 1px solid rgba(29,78,216,0.14);
display: flex; align-items: center; justify-content: center;
color: #1d4ed8;
flex-shrink: 0;
}
.tpl-calc .pcm__card-title-block { flex: 1; min-width: 0; }
.tpl-calc .pcm__card-title {
font-size: 13px; font-weight: 700;
color: #0a1424;
letter-spacing: -0.005em;
margin-bottom: 1px;
}
.tpl-calc .pcm__card-sum {
font-size: 11px;
color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
}
.tpl-calc .pcm__card-sum strong { color: #334155; font-weight: 600; }
.tpl-calc .pcm__card-chev {
color: #94a3b8;
font-size: 11px;
transition: transform .2s ease;
}
.tpl-calc details.pcm__card[open] .pcm__card-chev {
transform: rotate(180deg);
color: #1d4ed8;
}
.tpl-calc .pcm__card-body {
padding: 4px 16px 16px;
border-top: 1px dashed rgba(11,34,74,0.08);
margin-top: 4px;
}
/* === Vial card body === */
.tpl-calc .pcm__vial-row {
display: flex; justify-content: space-between; align-items: center;
margin: 12px 0 8px;
font-size: 11px; color: #64748b;
}
.tpl-calc .pcm__vial-row strong { color: #0a1424; font-weight: 600; }
.tpl-calc .pcm__dose-marks {
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 1.5px;
margin: 8px 0 12px;
}
.tpl-calc .pcm__dose-marks .dose-mark {
height: 18px;
background: #f1f5f9;
border-radius: 2px;
}
.tpl-calc .pcm__dose-marks .dose-mark.is-used {
background: linear-gradient(180deg, #93c5fd, #3b82f6, #1d4ed8);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 1px 3px rgba(29,78,216,0.20);
}
.tpl-calc .pcm__dose-marks .dose-mark.is-current {
background: #dbeafe;
border: 1px solid #1d4ed8;
}
.tpl-calc .pcm__vial-timeline {
display: flex; align-items: center; gap: 8px;
font-size: 9px; color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.04em;
}
.tpl-calc .pcm__vial-timeline strong { color: #1d4ed8; font-weight: 700; }
.tpl-calc .pcm__vial-bar {
flex: 1; height: 4px;
background: #e2e8f0; border-radius: 2px;
overflow: hidden;
}
.tpl-calc .pcm__vial-fill {
height: 100%; width: 4%;
background: linear-gradient(90deg, #10b981, #34d399);
}
/* === Frequency body === */
.tpl-calc .pcm__freq-chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin: 12px 0 10px;
}
.tpl-calc .pcm__freq-chip {
padding: 8px 4px;
background: #f1f5f9;
border: 1px solid transparent;
border-radius: 8px;
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
color: #334155;
text-align: center;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.04em;
}
.tpl-calc .pcm__freq-chip.active {
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 10px -2px rgba(29,78,216,0.30);
}
.tpl-calc .pcm__freq-row {
display: flex; justify-content: space-between;
padding: 6px 0;
font-size: 12px;
color: #334155;
border-top: 1px dashed rgba(11,34,74,0.08);
}
.tpl-calc .pcm__freq-row:first-of-type { border-top: 0; }
.tpl-calc .pcm__freq-row strong {
color: #0a1424; font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
/* === Setup body (real inputs) === */
.tpl-calc .pcm__setup .pcm__setup-row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
border-top: 1px dashed rgba(11,34,74,0.08);
font-size: 13px; color: #334155;
}
.tpl-calc .pcm__setup .pcm__setup-row:first-of-type { border-top: 0; }
.tpl-calc .pcm__setup-label { font-weight: 500; }
.tpl-calc .pcm__setup-input-wrap {
display: inline-flex; align-items: center;
gap: 4px;
background: #f1f5f9;
border: 1px solid rgba(11,34,74,0.08);
border-radius: 8px;
padding: 0 10px;
transition: border-color .15s, box-shadow .15s;
}
.tpl-calc .pcm__setup-input-wrap:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
background: #fff;
}
.tpl-calc .pcm__setup-input {
width: 70px;
border: 0; outline: 0; background: transparent;
padding: 8px 0;
font-family: 'JetBrains Mono', monospace;
font-size: 16px; /* iOS no-zoom-on-focus */
color: #0a1424;
font-weight: 600;
text-align: right;
-moz-appearance: textfield;
}
.tpl-calc .pcm__setup-input::-webkit-outer-spin-button,
.tpl-calc .pcm__setup-input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.tpl-calc .pcm__setup-unit {
font-size: 11px; color: #64748b;
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
}
.tpl-calc .pcm__setup-syringe-pills {
display: inline-flex;
background: #f1f5f9;
border-radius: 8px;
padding: 2px;
gap: 2px;
}
.tpl-calc .pcm__pill {
padding: 6px 12px;
background: transparent;
border: 0;
border-radius: 6px;
font-size: 11px; font-weight: 600;
font-family: 'JetBrains Mono', monospace;
color: #64748b;
cursor: pointer;
}
.tpl-calc .pcm__pill.active {
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
box-shadow: 0 2px 6px -1px rgba(29,78,216,0.40);
}
/* === Live numbers body === */
.tpl-calc .pcm__live-row {
display: flex; justify-content: space-between;
padding: 8px 0;
font-size: 12px; color: #334155;
border-top: 1px dashed rgba(11,34,74,0.08);
}
.tpl-calc .pcm__live-row:first-of-type { border-top: 0; }
.tpl-calc .pcm__live-row strong {
color: #0a1424; font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
.tpl-calc .pcm__live-link { color: #1d4ed8; cursor: pointer; }
.tpl-calc .pcm__live-math {
margin-top: 8px;
padding: 10px 12px;
background: #f1f5f9;
border-radius: 8px;
font-size: 11px;
font-family: 'JetBrains Mono', monospace;
color: #334155;
overflow-x: auto;
}
.tpl-calc .pcm__live-math code { font-family: inherit; background: transparent; padding: 0; }
/* === Compact embed CTA (sits below the actionbar in v1.7.2) === */
.tpl-calc .pcm__embed-cta {
margin: 18px 14px 24px;
padding: 24px 18px;
background: linear-gradient(180deg, #11224a, #050d24);
color: #fff;
border-radius: 16px;
text-align: center;
}
.tpl-calc .pcm__embed-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #93c5fd;
letter-spacing: 0.20em;
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 700;
}
.tpl-calc .pcm__embed-title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 28px; font-weight: 800;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.tpl-calc .pcm__embed-title em {
font-family: 'Fraunces', Georgia, serif;
font-style: italic; font-weight: 500;
background: linear-gradient(135deg, #93c5fd, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tpl-calc .pcm__embed-lede {
font-size: 13px;
color: #cbd5e1;
line-height: 1.55;
margin-bottom: 16px;
}
.tpl-calc .pcm__embed-copy {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: #fff;
border: 0;
padding: 11px 22px;
border-radius: 999px;
font-size: 13px; font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px -2px rgba(29,78,216,0.50);
font-family: inherit;
}
/* ===== Dose chip strip — sits at bottom of calc, above embed CTA =====
v1.7.2: reverted from position:fixed to normal flow. Per Jordan's
feedback the chips should anchor the END of the calculator section,
above the embed CTA — not glue to the viewport bottom across the
whole page. */
.tpl-calc .pcm__chips {
position: relative;
z-index: 1;
margin: 14px 14px 0;
background: rgba(255,255,255,0.65);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border: 1px solid rgba(11,34,74,0.08);
border-radius: 12px;
padding: 8px 10px;
display: flex; gap: 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.tpl-calc .pcm__chips::-webkit-scrollbar { display: none; }
.tpl-calc .pcm__chips-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #64748b;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
align-self: center;
padding: 0 6px;
flex-shrink: 0;
}
.tpl-calc .pcm__chip {
flex-shrink: 0;
padding: 9px 14px;
background: #fff;
border: 1px solid rgba(11,34,74,0.10);
border-radius: 999px;
font-size: 12px;
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
color: #334155;
cursor: pointer;
scroll-snap-align: center;
transition: all .12s ease;
}
.tpl-calc .pcm__chip:active { transform: scale(0.95); }
.tpl-calc .pcm__chip.active {
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px -2px rgba(29,78,216,0.40);
}
/* ===== Action bar — sits at bottom of calc cards, above embed CTA =====
v1.7.2: in normal flow, no sticky/fixed. */
.tpl-calc .pcm__actionbar {
position: relative;
z-index: 1;
margin: 10px 14px 0;
background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(11,34,74,0.08);
border-radius: 14px;
padding: 10px 12px;
display: flex;
gap: 8px;
align-items: center;
}
.tpl-calc .pcm__action-primary {
flex: 1;
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border: 0;
padding: 13px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px; font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
letter-spacing: -0.005em;
box-shadow: 0 6px 18px -4px rgba(29,78,216,0.40);
}
.tpl-calc .pcm__action-primary:active { transform: scale(0.98); }
.tpl-calc .pcm__action-icon {
width: 44px; height: 44px;
background: #fff;
border: 1px solid rgba(11,34,74,0.10);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: #334155;
cursor: pointer;
flex-shrink: 0;
transition: all .12s;
}
.tpl-calc .pcm__action-icon:active { transform: scale(0.94); background: #f1f5f9; }
.tpl-calc .pcm__action-icon svg { width: 18px; height: 18px; }
/* ===== Slide-up cheatsheet sheet (lead capture) ===== */
.tpl-calc .pcm__sheet-overlay {
position: fixed;
inset: 0;
background: rgba(5,13,36,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
z-index: 90;
}
.tpl-calc .pcm__sheet-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.tpl-calc .pcm__sheet {
position: fixed;
bottom: 0; left: 0; right: 0;
height: 92vh;
background: #fff;
border-radius: 22px 22px 0 0;
z-index: 100;
transform: translateY(100%);
transition: transform .35s cubic-bezier(0.32, 0.72, 0.30, 1);
display: flex;
flex-direction: column;
box-shadow: 0 -10px 40px -8px rgba(5,13,36,0.30);
}
.tpl-calc .pcm__sheet.is-open { transform: translateY(0); }
.tpl-calc .pcm__sheet-handle-row {
display: flex; justify-content: center;
padding: 8px 0 4px;
}
.tpl-calc .pcm__sheet-handle {
width: 38px; height: 4px;
background: #cbd5e1;
border-radius: 2px;
}
.tpl-calc .pcm__sheet-header {
display: flex; align-items: center;
padding: 4px 16px 12px;
border-bottom: 1px solid rgba(11,34,74,0.06);
}
.tpl-calc .pcm__sheet-title {
flex: 1;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: #64748b;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
}
.tpl-calc .pcm__sheet-close {
width: 28px; height: 28px;
border-radius: 50%;
background: #f1f5f9;
border: 0;
color: #334155;
font-size: 18px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-family: inherit;
}
.tpl-calc .pcm__sheet-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 14px 14px 16px;
}
.tpl-calc .pcm__sheet-body::-webkit-scrollbar { display: none; }
.tpl-calc .pcm__sheet-actions {
padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(11,34,74,0.08);
background: rgba(245,247,251,0.92);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
}
/* ===== Cheatsheet preview content ===== */
.tpl-calc .pcm-cs {
background: #fff;
border: 1px solid rgba(11,34,74,0.10);
border-radius: 10px;
padding: 18px 16px;
}
.tpl-calc .pcm-cs__hdr {
padding-bottom: 10px;
border-bottom: 2px solid #11224a;
margin-bottom: 14px;
}
.tpl-calc .pcm-cs__brand {
display: flex; align-items: center; gap: 8px;
}
.tpl-calc .pcm-cs__logo {
width: 28px; height: 28px;
border-radius: 7px;
background: linear-gradient(135deg, #3b82f6, #11224a);
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
}
.tpl-calc .pcm-cs__brand-name {
font-size: 14px; font-weight: 800;
color: #11224a;
letter-spacing: -0.01em;
}
.tpl-calc .pcm-cs__brand-sub {
font-size: 9px; color: #64748b;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.tpl-calc .pcm-cs__peptide { margin-bottom: 14px; }
.tpl-calc .pcm-cs__peptide-cat {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; color: #1d4ed8;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 2px;
}
.tpl-calc .pcm-cs__peptide-name {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 26px; font-weight: 800;
color: #11224a;
letter-spacing: -0.02em;
}
.tpl-calc .pcm-cs__hero {
background: linear-gradient(135deg, #eff6ff, #fff);
border: 1px solid rgba(29,78,216,0.18);
border-radius: 10px;
padding: 14px;
text-align: center;
margin-bottom: 14px;
}
.tpl-calc .pcm-cs__hero-num {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 40px; font-weight: 800;
color: #11224a;
line-height: 1;
letter-spacing: -0.03em;
}
.tpl-calc .pcm-cs__hero-num span:last-child {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.tpl-calc .pcm-cs__hero-sub {
font-size: 11px;
color: #334155;
margin-top: 4px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
}
.tpl-calc .pcm-cs__sect { margin-bottom: 14px; }
.tpl-calc .pcm-cs__sect-h {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #64748b;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid #e2e8f0;
}
.tpl-calc .pcm-cs__row {
display: flex; justify-content: space-between;
padding: 5px 0;
font-size: 12px;
color: #334155;
}
.tpl-calc .pcm-cs__row strong {
color: #0a1424; font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
.tpl-calc .pcm-cs__steps {
margin: 4px 0 0 18px;
padding: 0;
}
.tpl-calc .pcm-cs__steps li {
font-size: 12px;
color: #334155;
line-height: 1.55;
margin-bottom: 6px;
}
.tpl-calc .pcm-cs__note {
font-size: 12px;
color: #334155;
line-height: 1.55;
}
.tpl-calc .pcm-cs__footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
font-size: 10px;
color: #64748b;
line-height: 1.6;
}
.tpl-calc .pcm-cs__footer strong { color: #0a1424; }
/* ===== Peptide picker rows (inside the peptide bottom sheet) ===== */
.tpl-calc .pcm-peptide-cat {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #64748b;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
padding: 14px 6px 6px;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 4px;
}
.tpl-calc .pcm-peptide-cat:first-child { padding-top: 4px; }
.tpl-calc .pcm-peptide-row {
width: 100%;
background: transparent;
border: 0;
padding: 12px 12px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-family: inherit;
font-size: 14px;
color: #0a1424;
border-radius: 8px;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.tpl-calc .pcm-peptide-row:active {
background: #f1f5f9;
}
.tpl-calc .pcm-peptide-row.is-current {
background: linear-gradient(135deg, #eff6ff, #fff);
border: 1px solid rgba(29,78,216,0.20);
}
.tpl-calc .pcm-peptide-row__name {
font-weight: 500;
}
.tpl-calc .pcm-peptide-row__check {
color: #1d4ed8;
font-weight: 700;
font-size: 16px;
width: 20px;
text-align: right;
}
/* ===== Lead capture form (inside sheet actions) ===== */
.tpl-calc .pcm-lead { display: flex; flex-direction: column; gap: 8px; }
.tpl-calc .pcm-lead__eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #64748b;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
margin-bottom: 2px;
}
.tpl-calc .pcm-lead__row {
position: relative;
display: flex; align-items: center;
background: #fff;
border: 1px solid rgba(11,34,74,0.12);
border-radius: 11px;
padding: 0 12px;
transition: border-color .15s, box-shadow .15s;
}
.tpl-calc .pcm-lead__row:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}
.tpl-calc .pcm-lead__icon {
color: #94a3b8;
margin-right: 8px;
display: flex; align-items: center;
flex-shrink: 0;
}
.tpl-calc .pcm-lead__input {
flex: 1;
border: 0; outline: 0;
padding: 12px 0;
font-family: inherit;
font-size: 16px; /* iOS no-zoom-on-focus */
color: #0a1424;
background: transparent;
}
.tpl-calc .pcm-lead__submit {
width: 100%;
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border: 0;
padding: 14px 18px;
border-radius: 12px;
font-family: inherit;
font-size: 14px; font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
letter-spacing: -0.005em;
box-shadow: 0 6px 18px -4px rgba(29,78,216,0.40);
}
.tpl-calc .pcm-lead__submit:disabled { opacity: 0.6; cursor: wait; }
.tpl-calc .pcm-lead__submit.is-success {
background: linear-gradient(135deg, #10b981, #047857);
box-shadow: 0 6px 18px -4px rgba(16,185,129,0.40);
}
.tpl-calc .pcm-lead__fine {
font-size: 9.5px;
color: #64748b;
text-align: center;
line-height: 1.5;
padding: 0 4px;
}
/* ===== Smaller phones <360px ===== */
@media (max-width: 360px) {
.tpl-calc .pcm__hero-num { font-size: 50px; }
.tpl-calc .pcm__chip { padding: 9px 10px; font-size: 11px; }
}
/* ============================================================
v1.7.21 — /research-handbook landing page (ad funnel)
Stripped header/footer (no main nav). Light, professional,
research-publication aesthetic. CASL email gate. No commerce.
============================================================ */
.tpl-rh {
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
color: #0a1424;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
.tpl-rh * { box-sizing: border-box; }
.rh-ruo {
background: linear-gradient(90deg, #0a1424 0%, #11224a 50%, #0a1424 100%);
color: #dbeafe;
padding: 9px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.rh-ruo__inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
text-align: center;
}
.rh-ruo__dot {
width: 6px; height: 6px;
background: #fbbf24;
border-radius: 50%;
box-shadow: 0 0 6px #fbbf24;
animation: rhRuoPulse 2.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes rhRuoPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.rh-header {
background: #fff;
border-bottom: 1px solid rgba(11, 34, 74, 0.06);
padding: 16px 24px;
}
.rh-header__inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.rh-header__brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #0a1424;
}
.rh-header__mark { width: 38px; height: 38px; }
.rh-header__word {
font-family: 'Inter Tight', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: 0.18em;
color: #11224a;
}
.rh-hero {
padding: 80px 24px 56px;
text-align: center;
}
.rh-hero__inner {
max-width: 760px;
margin: 0 auto;
}
.rh-hero__eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: #1d4ed8;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 18px;
}
.rh-hero__h1 {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: clamp(34px, 5vw, 54px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
margin-bottom: 20px;
color: #0a1424;
}
.rh-hero__h1 em {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 500;
background: linear-gradient(135deg, #1d4ed8, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rh-hero__intro {
font-size: 17px;
line-height: 1.6;
color: #334155;
margin: 0 auto;
max-width: 620px;
}
.rh-section-head {
text-align: center;
margin: 0 auto 36px;
max-width: 720px;
}
.rh-section-head--center { text-align: center; }
.rh-section-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: #1d4ed8;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 14px;
}
.rh-section-h2 {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: clamp(26px, 3.5vw, 38px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 14px;
color: #0a1424;
}
.rh-section-h2 em {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 500;
color: #1d4ed8;
}
.rh-section-lede {
font-size: 15px;
line-height: 1.6;
color: #475569;
}
.rh-calc-wrap {
padding: 56px 24px;
background: #fff;
border-top: 1px solid rgba(11, 34, 74, 0.05);
border-bottom: 1px solid rgba(11, 34, 74, 0.05);
}
.rh-calc-wrap__inner {
max-width: 1100px;
margin: 0 auto;
}
.rh-calc-frame {
background: var(--paper, #fafbfc);
border: 1px solid rgba(11, 34, 74, 0.06);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 12px 32px -16px rgba(10, 20, 36, 0.10);
}
.rh-calc-frame iframe {
display: block;
border: 0;
width: 100%;
min-height: 900px;
}
.rh-edu {
padding: 80px 24px;
}
.rh-edu__inner {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.rh-edu__inner > .rh-section-head {
grid-column: 1 / -1;
}
@media (min-width: 700px) {
.rh-edu__inner {
grid-template-columns: 1fr 1fr;
}
}
.rh-edu__block {
background: #fff;
border: 1px solid rgba(11, 34, 74, 0.06);
border-radius: 14px;
padding: 28px;
box-shadow: 0 8px 24px -16px rgba(10, 20, 36, 0.08);
}
.rh-edu__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #dbeafe, #eff6ff);
border: 1px solid rgba(29, 78, 216, 0.12);
display: flex; align-items: center; justify-content: center;
color: #1d4ed8;
margin-bottom: 16px;
}
.rh-edu__icon svg { width: 22px; height: 22px; }
.rh-edu__h3 {
font-family: 'Inter Tight', sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 8px;
color: #0a1424;
}
.rh-edu__body {
font-size: 14.5px;
line-height: 1.65;
color: #334155;
}
.rh-edu__body p { margin-bottom: 8px; }
.rh-edu__body p:last-child { margin-bottom: 0; }
.rh-gate {
padding: 80px 24px;
background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
border-top: 1px solid rgba(11, 34, 74, 0.05);
}
.rh-gate__inner {
max-width: 520px;
margin: 0 auto;
}
.rh-gate__state {
background: #fff;
border: 1px solid rgba(29, 78, 216, 0.12);
border-radius: 18px;
padding: 40px 32px;
box-shadow: 0 20px 50px -20px rgba(10, 20, 36, 0.12);
}
.rh-form {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 420px;
margin: 0 auto;
}
.rh-form__row {
display: flex;
align-items: center;
background: #fafbfc;
border: 1px solid rgba(11, 34, 74, 0.12);
border-radius: 12px;
padding: 0 14px;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.rh-form__row:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
background: #fff;
}
.rh-form__icon {
color: #94a3b8;
margin-right: 10px;
display: flex;
flex-shrink: 0;
}
.rh-form__email {
flex: 1;
border: 0; outline: 0; background: transparent;
padding: 14px 0;
font-family: inherit;
font-size: 16px;
color: #0a1424;
}
.rh-form__consent {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
color: #475569;
cursor: pointer;
padding: 6px 2px;
}
.rh-form__checkbox {
width: 18px; height: 18px;
margin-top: 2px;
accent-color: #1d4ed8;
flex-shrink: 0;
cursor: pointer;
}
.rh-form__consent-label { flex: 1; }
.rh-form__submit {
background: linear-gradient(135deg, #1d4ed8, #11224a);
color: #fff;
border: 0;
padding: 15px 24px;
border-radius: 12px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 8px 22px -4px rgba(29, 78, 216, 0.40);
transition: transform .12s, box-shadow .15s, opacity .15s;
margin-top: 4px;
}
.rh-form__submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 12px 28px -4px rgba(29, 78, 216, 0.50);
}
.rh-form__submit:active:not(:disabled) { transform: translateY(0); }
.rh-form__submit:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
.rh-form__fine {
font-size: 11.5px;
color: #64748b;
line-height: 1.55;
margin-top: 2px;
text-align: center;
}
.rh-gate__state--success { text-align: center; }
.rh-success__check {
width: 64px; height: 64px;
background: linear-gradient(135deg, #10b981, #047857);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.40);
animation: rhCheckIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rhCheckIn {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.rh-success__h2 {
font-family: 'Inter Tight', sans-serif;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 10px;
color: #0a1424;
}
.rh-success__body {
font-size: 15px;
line-height: 1.55;
color: #475569;
max-width: 380px;
margin: 0 auto 24px;
}
.rh-success__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 28px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0a1424;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.005em;
text-decoration: none;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 8px 22px -4px rgba(251, 191, 36, 0.45);
}
.rh-success__cta:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -4px rgba(251, 191, 36, 0.55);
color: #0a1424;
}
.rh-success__note {
font-size: 12px;
color: #64748b;
margin-top: 18px;
font-style: italic;
}
.rh-footer {
background: #0a1424;
color: #94a3b8;
padding: 32px 24px;
}
.rh-footer__inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.rh-footer__brand {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #cbd5e1;
}
.rh-footer__brand img { width: 24px; height: 24px; }
.rh-footer__legal {
font-size: 12px;
color: #64748b;
line-height: 1.5;
max-width: 480px;
}
@media (max-width: 600px) {
.rh-hero { padding: 56px 20px 40px; }
.rh-calc-wrap, .rh-edu, .rh-gate { padding: 56px 20px; }
.rh-gate__state { padding: 30px 22px; }
.rh-calc-frame iframe { min-height: 1100px; }
}
/* Form JS handler — handled inline in the template via a small