:root{
  /* Trinity Onyx & Gold (dark, default) */
  --bg:#050505;--surface:#080808;--surface2:#0b0b0b;--line-strong:#3a3122;
  --ink:#F3EEDF;--hairline-rgb:255,255,255;--on-accent:#171614;
  --red:#D4AF37;--red2:#E9C767;--red-deep:#5C4415;--red-deep2:#7A5A1B;--red-deepest:#2E2109;
  --red-rgb:212,175,55;--black:var(--bg);--panel:var(--surface2);
  --panel2:var(--surface2);--line:rgba(var(--hairline-rgb),.12);--muted:#a89f8a;
  --green:#8be29a;--amber:#ffc06c;--amber-rgb:255,192,108;--blue:#8fc8ff;--orange:#D4AF37;
  --danger:#D9524A;--danger-rgb:217,82,74;
  color-scheme:dark;
}
[data-theme="light"]{
  /* Trinity Ivory (light) */
  --bg:#F7F1E1;--surface:#FBF6EA;--surface2:#F1E9D2;--line-strong:#CBB98A;
  --ink:#221D0F;--hairline-rgb:34,29,15;--on-accent:#171614;
  --red:#A97C0D;--red2:#8C6109;--red-deep:#B99429;--red-deep2:#C7A63D;--red-deepest:#8A6C1E;
  --red-rgb:169,124,13;--black:var(--bg);--panel:var(--surface2);
  --panel2:var(--surface2);--line:rgba(var(--hairline-rgb),.16);--muted:#6b6248;
  --green:#2F7D3D;--amber:#8C6109;--amber-rgb:140,97,9;--blue:#2A6FA8;--orange:#A97C0D;
  --danger:#B23A33;--danger-rgb:178,58,51;
  color-scheme:light;
}
[data-theme="light"] body:before{background:rgba(255,255,255,.35)}
[data-theme="light"] body:after{background:radial-gradient(circle at 50% 5%,rgba(var(--red-rgb),.08),transparent 34%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:205px}
body{margin:0;color:var(--ink);background:var(--bg);font-family:Arial,sans-serif}
body:before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:-3}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 5%,rgba(var(--red-rgb),.10),transparent 34%);z-index:-2;pointer-events:none}
a{color:inherit}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.chainmail-frame{position:fixed;top:0;bottom:0;width:72px;background:repeating-radial-gradient(ellipse at center,#303030 0 4px,var(--surface) 5px 10px,#202020 11px 14px,var(--bg) 15px 22px);z-index:1400;pointer-events:none;box-shadow:inset 0 0 25px #000}
.chainmail-frame-left{left:0}.chainmail-frame-right{right:0}
.utility-bar{position:fixed;z-index:1300;top:0;left:72px;right:72px;height:50px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg);border-bottom:1px solid var(--red)}
.utility-bar div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;column-gap:8px;align-items:center;justify-content:center;padding:6px 18px;border-right:1px solid var(--line)}
.utility-bar span{grid-row:1/3;font-size:18px}.utility-bar b{font-size:11px;text-transform:uppercase}.utility-bar small{font-size:9px;color:var(--muted)}
.site-header{position:fixed;z-index:1250;top:50px;left:72px;right:72px;height:105px;display:flex;align-items:center;justify-content:space-between;padding:8px 4vw;background:linear-gradient(rgba(8,8,8,.98),rgba(2,2,2,.98));border-bottom:1px solid var(--red);box-shadow:0 12px 35px #000}
.brand-combo{display:grid;grid-template-columns:92px 290px;gap:12px;align-items:center}.brand-knight{width:88px;height:88px}.brand-cross{width:290px;height:88px}
.header-search{position:relative}.header-search input{width:350px;height:48px;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:0 42px 0 13px}.search-symbol{position:absolute;right:13px;top:7px;font-size:28px}
.order-now{display:flex;align-items:center;gap:9px;height:48px;padding:0 24px;background:linear-gradient(135deg,var(--red2),var(--red-deep));text-decoration:none;font-weight:900;text-transform:uppercase;border-radius:4px}
.account-button,.menu-toggle{height:46px;width:46px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:22px}.menu-toggle{display:none}
.main-nav{position:fixed;z-index:1200;top:155px;left:72px;right:72px;height:50px;display:flex;align-items:center;justify-content:center;gap:42px;background:var(--bg);border-bottom:1px solid var(--red)}
.main-nav a{text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:900}.main-nav a.active{color:var(--red2);border-bottom:3px solid var(--red2);height:50px;display:flex;align-items:center;justify-content:center}
main{padding:205px 72px 0}
.hero{min-height:550px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;padding:35px 5vw;background:linear-gradient(90deg,rgba(0,0,0,.91),rgba(0,0,0,.28))}
.eyebrow{color:var(--red2);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.hero h1{font:500 clamp(3.2rem,6vw,5.8rem)/.92 Georgia,serif;text-transform:uppercase;margin:10px 0 18px}.hero h1 span{color:var(--red2)}
.hero-rule{width:370px;height:3px;background:linear-gradient(90deg,var(--red2),transparent);margin-bottom:17px}
.hero-points{display:flex;gap:15px;flex-wrap:wrap;text-transform:uppercase;font-size:11px}.hero-points span:not(:last-child):after{content:"|";margin-left:15px;color:#666}
.hero-features{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0}.hero-features div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;padding:11px;background:var(--surface);border:1px solid var(--line)}.hero-features b{font-size:10px}.hero-features small{grid-column:2;color:var(--muted);font-size:8px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.primary-button,.secondary-button{min-height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;color:var(--ink);font-weight:900;text-transform:uppercase;cursor:pointer}.primary-button{background:linear-gradient(135deg,var(--red2),var(--red-deep))}.secondary-button{background:var(--surface);border:1px solid #555}
.hero-art{position:relative;display:grid;place-items:center}.hero-art img{height:510px;position:relative;z-index:2;filter:drop-shadow(0 0 38px rgba(var(--red-rgb),.32))}.hero-ring{position:absolute;width:430px;height:430px;border:8px double rgba(var(--red-rgb),.55);border-radius:50%;box-shadow:0 0 55px rgba(var(--red-rgb),.22)}
.category-strip{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface);border-block:1px solid var(--red)}.category-membership-button{background:linear-gradient(160deg,rgba(233,199,103,.16),transparent)!important}.category-membership-button b{color:#E9C767}.category-strip button{min-height:110px;background:none;color:var(--ink);border:0;border-right:1px solid var(--line);font-size:24px;cursor:pointer}.category-strip b,.category-strip small{display:block}.category-strip b{font-size:12px;text-transform:uppercase;margin-top:7px}.category-strip small{font-size:9px;color:var(--muted);margin-top:4px}
.catalog-section{padding:48px 3vw 80px;background:rgba(0,0,0,.52)}.catalog-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.catalog-heading h2,.about-section h2{font:500 clamp(2.2rem,4vw,3.6rem) Georgia,serif;margin:0}.catalog-message{margin:7px 0 0;color:var(--muted)}.catalog-heading-actions{display:flex;gap:10px}
.protected-download,.clear-button{min-height:58px;padding:0 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:900;cursor:pointer}.protected-download{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;column-gap:8px;align-items:center}.protected-download span{grid-row:1/3}.protected-download small{color:var(--red2)}.clear-button{color:var(--red2);border-color:rgba(var(--red-rgb),.55)}
.catalog-layout{display:grid;grid-template-columns:225px minmax(0,1fr) 220px;gap:14px;margin-top:18px}
.admin-preview-panel{padding:14px;background:linear-gradient(145deg,var(--surface2),#060606);border:1px solid #4a4a4a;box-shadow:0 12px 30px rgba(0,0,0,.4);align-self:start}.admin-preview-panel h3{margin:0;color:#75ff87;text-transform:uppercase}.admin-preview-panel p{color:var(--muted);line-height:1.45}.admin-live-dot{width:12px;height:12px;border-radius:50%;background:#31ff59;box-shadow:0 0 14px #31ff59}.admin-preview-rows{display:grid;gap:4px;margin:12px 0}.admin-preview-row{display:grid;grid-template-columns:1fr auto;gap:6px;padding:6px;background:var(--surface);border:1px solid var(--line);font-size:10px}.admin-preview-row span:last-child{color:#8de09a}.admin-preview-panel>a{display:block;margin-top:12px;padding:10px;border:1px solid #777;text-align:center;text-decoration:none;font-weight:900}
.catalog-controls{display:grid;grid-template-columns:1.2fr .65fr .65fr .65fr;gap:9px}.catalog-search{position:relative}.catalog-search input,.catalog-controls select{width:100%;height:45px;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:0 11px}.catalog-search span{position:absolute;right:12px;top:8px;font-size:24px}.catalog-display-controls{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.view-toggle{display:flex}.view-toggle button{height:40px;background:var(--surface2);color:var(--muted);border:1px solid var(--line)}.view-toggle button.active{background:var(--red);color:var(--on-accent)}.catalog-display-controls strong{color:var(--red2);font-size:12px}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:16px}.product-card{position:relative;background:linear-gradient(145deg,#121212,#060606);border:1px solid var(--line);padding:13px;box-shadow:0 14px 32px rgba(0,0,0,.38);overflow:hidden}.favorite-button{position:absolute;right:8px;top:8px;background:none;border:0;color:#ddd;font-size:20px;cursor:pointer;z-index:4}.favorite-button.active{color:var(--red2)}.badge{position:absolute;left:8px;top:8px;padding:4px 6px;background:var(--red);font-size:9px;font-weight:900;text-transform:uppercase;z-index:3}.badge.featured{background:var(--red-deep2)}.badge.sale{background:#087235}
.product-visual{position:relative;height:170px;display:grid;place-items:center}.product-visual img{height:165px}.vial-name{position:absolute;top:67px;width:70px;text-align:center;color:var(--ink);font-size:8px;font-weight:900;line-height:1.08}.vial-dose{position:absolute;top:112px;color:var(--red2);font-size:10px;font-weight:900}
.product-card h3{font:500 1.12rem Georgia,serif;margin:6px 0}.product-focus{margin:5px 0;color:var(--muted);font-size:11px;min-height:27px}.dose-select{width:100%;height:36px;background:var(--surface);color:var(--ink);border:1px solid #555;padding:0 8px}
.stock-badge{display:inline-block;margin-top:7px;padding:4px 7px;border:1px solid #388e45;color:#9befa8;font-size:9px;font-weight:900;text-transform:uppercase}.stock-badge.limited-stock{border-color:rgba(var(--amber-rgb),.55);color:var(--amber)}.stock-badge.out-of-stock{border-color:var(--danger);color:var(--danger)}.stock-badge.coming-soon{border-color:#54718e;color:#8dc8ff}.stock-badge.discontinued{border-color:#666;color:var(--muted)}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.price-box{padding:8px;background:var(--surface);border:1px solid var(--line)}.price-box span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase}.price-box strong{display:block;margin-top:4px}.price-box:first-child strong{color:#b9f8c3}.price-box:last-child strong{color:var(--danger)}
.call-button{display:block;margin-top:10px;background:linear-gradient(135deg,var(--red2),var(--red-deep));padding:10px;text-align:center;text-decoration:none;font-weight:900}.call-button.disabled{background:var(--line-strong);color:var(--muted);pointer-events:none}
.pagination{display:flex;justify-content:center;gap:5px;margin-top:15px}.pagination button{min-width:33px;height:33px;background:var(--surface);color:#ddd;border:1px solid var(--line)}.pagination button.active{background:var(--surface);border-color:var(--red);color:var(--ink)}
.table-wrap{overflow:auto;margin-top:16px;border:1px solid var(--line);background:var(--surface2)}table{width:100%;min-width:1080px;border-collapse:collapse}th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left}th{background:var(--surface2);border-bottom:2px solid var(--red);font-size:10px;text-transform:uppercase}td{color:var(--muted)}
.catalog-sidebar{display:grid;align-content:start;gap:14px}
.qr-sidebar{display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface);border:1px solid var(--line)}.qr-sidebar img{width:90px}.qr-sidebar strong,.qr-sidebar span{display:block;text-transform:uppercase}.qr-sidebar span{color:var(--muted);font-size:11px}
/* Sidebar deals/call/text panel -- single ornate artwork image (Join Now,
   Call, Text baked in) with invisible tap targets over each button,
   exactly like the mission-panel / knight-banner approach elsewhere. */
.deals-artwork-panel{grid-column:1/-1;position:relative;border-radius:10px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 20px rgba(168,22,22,.2)}
.deals-artwork-img{display:block;width:100%;height:auto}
.deals-hotspot{position:absolute;display:block;padding:0;margin:0;border:0;background:none;cursor:pointer}
.deals-hotspot-join{top:55%;left:26%;width:44%;height:13%}
.deals-hotspot-call{top:78%;left:2%;width:46%;height:19%}
.deals-hotspot-text{top:78%;left:51%;width:46%;height:19%}
.about-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center;max-width:1280px;margin:auto;padding:80px 24px}.about-brand{display:flex;justify-content:center}.about-brand img{width:190px;height:260px;object-fit:contain}.about-section p{color:var(--muted);line-height:1.7}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-block:1px solid var(--line)}.trust-strip div{text-align:center;padding:19px}.trust-strip span{display:block;font-size:22px}.trust-strip b,.trust-strip small{display:block}.trust-strip small{color:var(--muted);font-size:10px;margin-top:4px}
footer{display:grid;grid-template-columns:1.45fr repeat(3,.65fr) .75fr;gap:28px;padding:35px 5vw;background:var(--bg);border-top:1px solid var(--line)}.footer-brand img{height:90px;width:120px}.footer-brand p{color:var(--muted);max-width:330px}.footer-column{display:grid;align-content:start;gap:8px}.footer-column a{color:var(--muted);text-decoration:none;font-size:12px}.footer-qr img{display:block;width:110px;margin-top:10px}.footer-legal{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 5vw 22px;background:var(--bg);color:var(--muted);font-size:10px;text-align:center;border-top:1px solid var(--line)}.footer-legal>span{font-size:11px;font-weight:700;letter-spacing:.02em}.footer-legal-disclaimer{max-width:920px;margin:0;color:var(--muted);font-size:10px;line-height:1.65}.footer-legal-disclaimer strong{color:var(--ink);font-weight:700}
.overlay{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:40px 20px;background:rgba(0,0,0,.91);opacity:0;visibility:hidden;transition:.3s}.overlay>*{flex:none;margin:auto}.overlay.open{opacity:1;visibility:visible}.signup-modal{position:relative;display:grid;grid-template-columns:.75fr 1.25fr;width:min(820px,96vw);background:var(--surface);border:2px solid var(--red2);box-shadow:0 0 90px rgba(var(--red-rgb),.5);transform:scale(.9);transition:.35s}.overlay.open .signup-modal{transform:scale(1)}.signup-art{display:grid;place-items:center;background:radial-gradient(circle,rgba(var(--red-rgb),.25),transparent 45%),var(--bg)}.signup-art img{width:80%}.signup-content{padding:32px}.signup-content h2{font:500 2.5rem Georgia,serif;margin:0}.signup-content p{color:var(--muted);line-height:1.55}.signup-content form{display:grid;gap:10px}.signup-content input,.signup-content textarea{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:11px}.consent{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:12px;color:var(--muted)}.consent input{width:18px}.modal-close{position:absolute;right:10px;top:7px;background:none;border:0;color:var(--ink);font-size:27px;cursor:pointer}.form-status{min-height:20px;color:#87e69a}.privacy-note{text-align:center;color:var(--muted)}
.password-modal{position:relative;width:min(430px,94vw);padding:30px;background:var(--surface);border:2px solid var(--red);text-align:center}.password-modal img{width:110px}.password-modal form{display:grid;gap:10px}.password-modal input{padding:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.mobile-bottom-nav{display:none}

@media(max-width:1350px){
  .chainmail-frame{width:42px}.utility-bar,.site-header,.main-nav{left:42px;right:42px}main{padding-left:42px;padding-right:42px}
  .header-search input{width:280px}.catalog-layout{grid-template-columns:190px minmax(0,1fr) 190px}.card-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1050px){
  .chainmail-frame,.utility-bar{display:none}.site-header{top:0;left:0;right:0;height:90px}.brand-combo{grid-template-columns:70px 205px}.brand-knight{width:65px;height:70px}.brand-cross{width:205px;height:70px}.header-search{display:none}.main-nav{display:none;top:90px;left:0;right:0;height:auto;flex-direction:column;align-items:stretch;padding:12px;gap:0}.main-nav.open{display:flex}.main-nav a{padding:12px}.main-nav a.active{height:auto;border:0}.menu-toggle{display:block}main{padding:90px 0 0}.hero{grid-template-columns:1fr}.category-strip{grid-template-columns:repeat(3,1fr)}.catalog-layout{grid-template-columns:1fr}.admin-preview-panel{display:none}.catalog-sidebar{grid-template-columns:repeat(3,1fr)}.catalog-controls{grid-template-columns:1fr 1fr}.catalog-search{grid-column:1/-1}.card-grid{grid-template-columns:repeat(2,1fr)}.about-section{grid-template-columns:1fr}.signup-modal{grid-template-columns:1fr}.signup-art{display:none}footer{grid-template-columns:1.3fr repeat(2,.7fr)}.footer-column:nth-of-type(3){display:none}
}
@media(max-width:700px){
  html{scroll-padding-top:75px}.site-header{height:75px;padding:5px 10px}.brand-combo{grid-template-columns:48px 145px;gap:5px}.brand-knight{width:46px;height:58px}.brand-cross{width:145px;height:58px}.order-now,.account-button{display:none}.main-nav{top:75px}main{padding-top:75px}.hero{padding:32px 16px}.hero h1{font-size:3rem}.hero-features{grid-template-columns:1fr 1fr}.hero-art img{height:350px}.hero-ring{width:300px;height:300px}.category-strip{grid-template-columns:repeat(2,1fr)}
  .catalog-section{padding:38px 12px 88px}.catalog-heading{display:block}.catalog-heading-actions{margin-top:14px}.catalog-controls{grid-template-columns:1fr}.catalog-search{grid-column:auto}.catalog-sidebar{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr}.product-card{display:grid;grid-template-columns:96px 1fr}.product-visual{height:175px}.product-card h3,.product-focus,.dose-select,.stock-badge,.prices{grid-column:2}.call-button{grid-column:1/-1}.about-section{padding:55px 16px}.trust-strip{grid-template-columns:1fr 1fr}
  footer{grid-template-columns:1fr;padding-bottom:85px}.footer-column,.footer-qr{display:none}.footer-legal{flex-direction:column;gap:5px;padding-bottom:80px}.signup-modal{max-height:90vh;overflow:auto}.signup-content{padding:26px 17px}.signup-content h2{font-size:2rem}
  .mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:3000;height:66px;display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg);border-top:1px solid var(--red);transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;backface-visibility:hidden}.mobile-bottom-nav a,.mobile-bottom-nav button{display:grid;place-items:center;background:none;border:0;color:var(--muted);text-decoration:none;font-size:19px}.mobile-bottom-nav span{display:block;font-size:8px;text-transform:uppercase}.mobile-bottom-nav .active{color:var(--red2)}body{padding-bottom:66px}
}


/* V12 — exclusively uses user-supplied decorative images. */
.chainmail-frame{
  background:repeating-radial-gradient(
    ellipse at center,
    #303030 0 4px,
    var(--surface) 5px 10px,
    #202020 11px 14px,
    var(--bg) 15px 22px
  );
  background-size:46px 28px;
}
.site-header{background:linear-gradient(180deg,rgba(10,10,10,.99),rgba(1,1,1,.99))}
.brand-combo{grid-template-columns:88px 190px;gap:12px}
.brand-knight{
  width:84px;height:92px;object-fit:cover;object-position:center 29%;
  border:1px solid rgba(var(--hairline-rgb),.14)
}
.brand-cross{
  width:190px;height:92px;object-fit:cover;object-position:center 42%;
  border-left:1px solid rgba(var(--hairline-rgb),.12)
}
.hero{
  min-height:590px;
  background:
    radial-gradient(circle at 76% 48%,rgba(var(--red-rgb),.25),transparent 35%),
    linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.62));
}
.hero-art{height:560px;overflow:hidden}
.hero-art img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 0 30px rgba(var(--red-rgb),.28))
}
.hero-ring{display:none}
.signup-art img{width:100%;height:100%;max-height:360px;object-fit:contain}
.about-brand img{width:48%;max-width:260px;height:360px;object-fit:contain}
.footer-brand img{height:115px;width:135px;object-fit:contain}

.product-visual{height:205px;overflow:hidden}
.product-visual img{
  width:100%;height:200px;object-fit:contain;
  filter:contrast(1.12) saturate(.94)
}
.vial-name{
  top:94px;width:76px;padding:2px 3px;background:rgba(2,2,2,.72);
  text-shadow:0 1px 2px #000
}
.vial-dose{
  top:130px;padding:1px 4px;background:rgba(2,2,2,.74);
  text-shadow:0 1px 2px #000
}

.certification-section{
  padding:50px 4vw 44px;
  background:linear-gradient(180deg,rgba(7,7,7,.98),rgba(2,2,2,.98));
  border-top:1px solid var(--red);border-bottom:1px solid var(--red)
}
.certification-heading{max-width:950px;margin:0 auto 24px;text-align:center}
.certification-heading h2{
  margin:0;font:500 clamp(2.4rem,4vw,4rem) Georgia,serif;
  text-transform:uppercase
}
.certification-heading p:last-child{color:#b7b7b7;line-height:1.65}
.certification-art{
  max-width:1320px;margin:0 auto;padding:12px;background:var(--bg);
  border:1px solid rgba(var(--red-rgb),.72);
  box-shadow:0 18px 45px rgba(0,0,0,.55)
}
.certification-art img{display:block;width:100%;height:auto}
.certification-points{
  max-width:1320px;margin:14px auto 0;display:grid;
  grid-template-columns:repeat(5,1fr);border:1px solid var(--line);background:var(--surface)
}
.certification-points article{
  min-height:84px;padding:14px 10px;text-align:center;
  border-right:1px solid var(--line)
}
.certification-points article:last-child{border-right:0}
.certification-points strong,.certification-points span{display:block}
.certification-points strong{
  color:var(--ink);font-size:.9rem;letter-spacing:.07em;text-transform:uppercase
}
.certification-points span{
  margin-top:6px;color:var(--muted);font-size:.72rem;line-height:1.35
}
.certification-note{
  max-width:1100px;margin:15px auto 0;color:#969696;
  font-size:.75rem;line-height:1.55;text-align:center
}
.admin-brand img{object-fit:contain;background:var(--bg)}

@media(max-width:1050px){
  .brand-combo{grid-template-columns:64px 150px}
  .brand-knight{width:62px;height:72px}
  .brand-cross{width:150px;height:72px}
  .certification-points{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .brand-combo{grid-template-columns:44px 108px}
  .brand-knight{width:42px;height:58px}
  .brand-cross{width:108px;height:58px}
  .hero-art{height:380px}
  .product-visual{height:190px}
  .product-visual img{height:185px}
  .certification-section{padding:38px 12px}
  .certification-points{grid-template-columns:1fr 1fr}
}


/* =========================================================
   V13 FINAL MOCKUP MATCH
   ========================================================= */

/* Single complete logo at top-left */
.brand-single{
  display:flex;
  align-items:center;
  width:300px;
  height:94px;
  text-decoration:none;
}
.brand-single img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  filter:contrast(1.08) saturate(.96);
}

/* Hero and header proportions from supplied mockup */
.site-header{
  height:104px;
  padding-left:3.5vw;
  padding-right:3.5vw;
}
.header-search input{
  width:380px;
}
.hero{
  min-height:565px;
  grid-template-columns:1.08fr .92fr;
  padding:26px 4.5vw 18px;
}
.hero h1{
  font-size:clamp(3.4rem,6vw,6rem);
  letter-spacing:-.035em;
}
.hero-art{
  height:555px;
}
.hero-art img{
  object-fit:contain;
  object-position:center bottom;
}

/* Feature bar; USA text only, no US flag */
.hero-features div>span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  color:var(--ink);
  font-size:1rem;
  font-weight:900;
}
.hero-features div:nth-child(2)>span{
  font-size:.68rem;
  letter-spacing:.08em;
  border:1px solid #888;
  padding:3px 2px;
}

/* Certification display */
.certification-section{
  padding-top:38px;
  padding-bottom:38px;
}
.certification-heading{
  max-width:980px;
}
.certification-heading .eyebrow{
  color:var(--ink);
  font-size:.9rem;
}
.certification-heading h2{
  color:var(--orange);
}
.certification-art{
  max-width:1440px;
  padding:0;
  overflow:hidden;
  border-color:var(--orange);
}
.certification-art img{
  width:100%;
  display:block;
}
.certification-points{
  max-width:1440px;
}
.certification-note{
  color:#b9b9b9;
}

/* Product section visual hierarchy */
.featured-products-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.featured-products-heading h3{
  margin:0;
  font:500 1.55rem Georgia,serif;
  text-transform:uppercase;
}
.featured-products-heading span{
  color:var(--red2);
  font-size:.75rem;
  text-transform:uppercase;
}
.product-card{
  border-radius:4px;
  border-color:rgba(var(--hairline-rgb),.18);
}
.product-card:hover{
  border-color:rgba(var(--red-rgb),.75);
  transform:translateY(-2px);
  transition:.2s ease;
}
.product-visual img{
  height:200px;
  width:100%;
  object-fit:contain;
  image-rendering:auto;
}
.vial-name{
  top:96px;
  font-size:8px;
}
.vial-dose{
  top:132px;
}

/* Popup proportions */
.signup-modal{
  width:min(850px,96vw);
}
.signup-art img{
  object-fit:contain;
  padding:16px;
}

/* Footer and about use full user-supplied logo images */
.about-brand{
  gap:18px;
}
.about-brand img{
  object-fit:contain;
}
.footer-brand img{
  object-fit:contain;
}

/* Admin logo */
.admin-brand{
  display:flex;
  align-items:center;
}
.admin-brand img{
  width:260px;
  height:100px;
  object-fit:contain;
}

/* Responsive */
@media(max-width:1050px){
  .brand-single{
    width:220px;
    height:76px;
  }
  .header-search input{
    width:260px;
  }
}
@media(max-width:700px){
  .brand-single{
    width:155px;
    height:60px;
  }
  .hero{
    padding-top:24px;
  }
  .hero-art{
    height:380px;
  }
  .certification-heading h2{
    font-size:2.15rem;
  }
}


/* =========================================================
   V14 FINAL CERTIFICATES + MOCKUP POLISH
   ========================================================= */

.certification-section{
  padding:42px 4vw 46px;
  background:
    radial-gradient(circle at 50% 15%,rgba(var(--red-rgb),.10),transparent 35%),
    linear-gradient(180deg,var(--surface),var(--bg));
}

.certification-heading{
  max-width:1000px;
  margin:0 auto 26px;
  text-align:center;
}
.certification-heading h2{
  margin:0;
  color:var(--orange);
  font:500 clamp(2.4rem,4vw,4rem) Georgia,serif;
  text-transform:uppercase;
}
.certification-heading p:last-child{
  color:#b8b8b8;
  line-height:1.65;
}

.certificate-grid{
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.certificate-card{
  padding:12px;
  background:linear-gradient(145deg,var(--surface2),var(--bg));
  border:1px solid rgba(var(--red-rgb),.72);
  box-shadow:0 16px 36px rgba(0,0,0,.48);
  text-align:center;
}
.certificate-card img{
  display:block;
  width:100%;
  height:auto;
  background:#f7f3e8;
  border:1px solid rgba(var(--hairline-rgb),.22);
}
.certificate-card strong,
.certificate-card span{
  display:block;
}
.certificate-card strong{
  margin-top:12px;
  color:var(--ink);
  font-size:.94rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.certificate-card span{
  margin-top:5px;
  color:#a9a9a9;
  font-size:.75rem;
  line-height:1.35;
}

.certification-note{
  max-width:1120px;
  margin:16px auto 0;
  color:#969696;
  font-size:.76rem;
  line-height:1.55;
  text-align:center;
}

/* Stronger mockup alignment */
.site-header{
  background:linear-gradient(180deg,var(--surface),var(--bg));
}
.main-nav{
  background:var(--bg);
}
.hero{
  background:
    radial-gradient(circle at 75% 45%,rgba(var(--red-rgb),.22),transparent 33%),
    linear-gradient(90deg,rgba(0,0,0,.97),rgba(0,0,0,.50));
}
.hero-copy{
  position:relative;
  z-index:3;
}
.hero-art img{
  max-width:100%;
}
.product-card{
  background:
    radial-gradient(circle at 50% 20%,rgba(var(--hairline-rgb),.03),transparent 30%),
    linear-gradient(145deg,var(--surface2),var(--bg));
}
.product-visual img{
  image-rendering:auto;
  filter:contrast(1.15) saturate(.96) drop-shadow(0 8px 12px rgba(0,0,0,.6));
}

@media(max-width:1050px){
  .certificate-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:700px){
  .certificate-grid{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  .certificate-card{
    padding:8px;
  }
  .certificate-card strong{
    font-size:.78rem;
  }
  .certificate-card span{
    font-size:.66rem;
  }
}


/* Production 1.1 — 10-vial kit savings */
.kit-savings-banner{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  margin:24px clamp(12px,4vw,40px);
  padding:26px clamp(20px,5vw,76px);
  background:
    linear-gradient(90deg,rgba(var(--red-rgb),.98),rgba(16,16,16,.98) 58%,rgba(5,5,5,.98));
  border:1px solid rgba(var(--red-rgb),.5);
  clip-path:polygon(34px 0,calc(100% - 34px) 0,100% 34px,100% 100%,calc(100% - 34px) 100%,34px 100%,0 calc(100% - 34px),0 34px);
  box-shadow:0 16px 40px rgba(0,0,0,.40);
}
.kit-savings-banner::before,
.kit-savings-banner::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--red2) 20%,var(--red2) 80%,transparent);
  opacity:.7;
}
.kit-savings-banner::before{left:0}
.kit-savings-banner::after{right:0}
.kit-savings-icon{
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border:3px solid #fff;
  border-radius:50%;
  color:#F3EEDF;
  font:900 2.1rem/1 Arial,sans-serif;
  box-shadow:0 0 0 7px rgba(var(--red-rgb),.18);
}
.kit-savings-copy .eyebrow{margin:0 0 5px;color:#E9C767}
.kit-savings-copy h2{
  margin:0;
  font:500 clamp(1.65rem,3vw,2.65rem) Georgia,serif;
  text-transform:uppercase;
  color:#F3EEDF;
}
.kit-savings-copy p:last-child{
  max-width:900px;
  margin:7px 0 0;
  color:#d0d0d0;
  line-height:1.55;
}
.kit-savings-banner>a{
  min-height:48px;
  padding:0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--on-accent);
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}
.kit-pricing-note{
  max-width:920px;
  margin:10px 0 0;
  padding:11px 13px;
  color:#d5d5d5;
  background:rgba(var(--red-rgb),.10);
  border-left:4px solid var(--red2);
  line-height:1.5;
  font-size:.82rem;
}
.kit-price-box{
  border-color:rgba(var(--red-rgb),.55);
  background:linear-gradient(145deg,rgba(var(--red-rgb),.16),var(--surface));
}
.kit-price-box small{
  display:block;
  margin-top:4px;
  color:var(--red2);
  font-size:.66rem;
  font-weight:800;
  text-transform:uppercase;
  /* Never split a single word mid-character (e.g. "INTRODUCTORY") even when
     the global .price-box overflow-wrap:break-word rule would otherwise
     allow it -- only wrap at spaces. */
  overflow-wrap:normal;
  word-break:keep-all;
}

@media(max-width:800px){
  .kit-savings-banner{
    grid-template-columns:68px 1fr;
    gap:15px;
    margin:20px 12px;
    padding:19px 16px;
    clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% 100%,calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);
  }
  .kit-savings-icon{width:64px;height:64px;font-size:1.65rem}
  .kit-savings-banner>a{
    grid-column:1/-1;
    width:100%;
  }
}

/* Trinity Affiliate Program -- recruitment banner, built on the kit-savings
   banner's grid/clip-path but with its own ribbon badge and a slow gold
   pulse so it reads as "apply now" rather than "pricing info". */
.affiliate-banner{position:relative;overflow:visible}
.affiliate-banner-icon{font:900 2.5rem/1 Georgia,serif}
.affiliate-banner-ribbon{
  position:absolute;
  top:-11px;
  left:24px;
  padding:5px 16px;
  background:var(--red2);
  color:var(--on-accent);
  font:900 .68rem/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  z-index:1;
}
.affiliate-banner{animation:affiliatePulse 3.2s ease-in-out infinite}
@keyframes affiliatePulse{
  0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.40)}
  50%{box-shadow:0 16px 48px rgba(var(--red-rgb),.45)}
}
@media(prefers-reduced-motion:reduce){.affiliate-banner{animation:none}}
@media(max-width:800px){
  .affiliate-banner-ribbon{left:16px;top:-10px;font-size:.62rem;padding:4px 12px}
}

/* Peptide Membership -- homepage promo banner near the In-House Testing
   hero, introducing the 5-stack membership plan ($299/3mo or $129/mo). */
.membership-promo-banner{
  position:relative;
  margin:24px clamp(12px,4vw,40px);
  padding:30px clamp(20px,5vw,64px) 26px;
  background:linear-gradient(150deg,rgba(5,5,5,.98),rgba(var(--red-rgb),.6) 45%,rgba(5,5,5,.98));
  border:1px solid rgba(var(--red-rgb),.5);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.membership-promo-flyer{
  display:block;
  width:100%;
  max-width:720px;
  margin:0 auto;
  border:1px solid rgba(var(--red-rgb),.5);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.membership-promo-subtext{
  margin:20px auto 0;
  max-width:520px;
  text-align:center;
  color:#EDE9DC;
  font-size:.92rem;
  letter-spacing:.02em;
}
.membership-stack-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:16px auto 0;
  max-width:720px;
}
.membership-stack-button{
  padding:10px 18px;
  background:rgba(var(--red-rgb),.08);
  border:1px solid rgba(var(--red-rgb),.4);
  color:#F3EEDF;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.membership-stack-button:hover,.membership-stack-button:focus-visible{
  background:rgba(var(--red-rgb),.22);
  border-color:rgba(var(--red-rgb),.7);
}
.membership-promo-actions{margin-top:22px;text-align:center;display:grid;gap:8px;justify-items:center}
.membership-promo-actions .primary-button{min-height:52px;padding:0 34px;font-size:.9rem}
.membership-special-banner{
  display:block;
  width:100%;
  max-width:900px;
  margin:26px auto 0;
  border:1px solid rgba(var(--red-rgb),.5);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.membership-promo-cards{margin-top:22px;grid-template-columns:repeat(5,1fr)}
.membership-promo-cards:empty{display:none}
@media(max-width:900px){
  .membership-stack-buttons{gap:8px}
  .membership-stack-button{flex:1 1 calc(50% - 8px);text-align:center}
  /* Single full-width card per row on mobile/tablet (not 2-across) so the
     new 3/4-vial group photo has room to read clearly. Higher-specificity
     compound selector (.card-grid.membership-promo-cards) so this beats the
     generic ".card-grid{grid-template-columns:repeat(2,1fr)!important}"
     mobile-2-per-row rule defined later in this file for the main catalog. */
  .card-grid.membership-promo-cards{grid-template-columns:1fr!important;max-width:480px!important}
  .membership-promo-cards .product-card{padding:18px 16px!important}
}
@media(max-width:560px){
  .card-grid.membership-promo-cards{grid-template-columns:1fr!important}
}

/* Peptide Membership stack hero photos -- real bottle-group photography that
   replaces the shared single-vial template art for these 5 cards. Higher
   specificity (.product-card .membership-stack-visual) so it wins over the
   generic .product-visual height/width caps set at various breakpoints. */
.product-card .membership-stack-visual{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  padding:0!important;
  place-items:initial!important;
}
.product-card .membership-stack-photo{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid rgba(233,199,103,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}

/* Affiliate recruitment banner -- richer redesign with knight imagery, an
   icon row (trust signals), and the 10-vial-kit-special discount/commission
   override called out explicitly. */
.affiliate-banner-rich{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:28px;
  align-items:center;
  margin:24px clamp(12px,4vw,40px);
  padding:30px clamp(20px,5vw,64px);
  background:linear-gradient(120deg,rgba(5,5,5,.98),rgba(var(--red-rgb),.6) 55%,rgba(5,5,5,.98));
  border:1px solid rgba(var(--red-rgb),.5);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  overflow:visible;
  animation:affiliatePulse 3.2s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.affiliate-banner-rich{animation:none}}
.affiliate-banner-rich-image{display:grid;place-items:center}
.affiliate-banner-rich-image img{width:100%;max-width:220px;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.6))}
.affiliate-banner-rich-copy .eyebrow{margin:0 0 5px;color:#E9C767}
.affiliate-banner-rich-copy h2{
  margin:0;
  font:500 clamp(1.5rem,3vw,2.3rem) Georgia,serif;
  color:#F3EEDF;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.affiliate-banner-rich-copy>p{max-width:820px;margin:9px 0 0;color:#EDE9DC;line-height:1.55;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.affiliate-banner-icon-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0;
}
.affiliate-banner-icon-row>div{display:flex;align-items:center;gap:9px}
.affiliate-banner-icon-row span{font-size:1.4rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.affiliate-banner-icon-row b{display:block;color:#F3EEDF;font-size:.8rem;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.affiliate-banner-icon-row small{color:#EDE9DC;font-size:.7rem;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.affiliate-banner-special-callout{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0 0 18px;
  padding:13px 15px;
  background:rgba(0,0,0,.4);
  border:1px solid var(--red2);
  color:#EDE9DC;
  line-height:1.5;
  font-size:.82rem;
}
.affiliate-banner-special-icon{font-size:1.2rem;flex:none}
.affiliate-banner-special-callout b{color:#E9C767}
.affiliate-banner-rich>a{
  min-height:48px;
  padding:0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--on-accent);
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}
@media(max-width:800px){
  .affiliate-banner-rich{grid-template-columns:1fr;text-align:center;padding:26px 18px}
  .affiliate-banner-rich-image img{max-width:150px}
  .affiliate-banner-icon-row{grid-template-columns:1fr}
  .affiliate-banner-icon-row>div{justify-content:center}
  .affiliate-banner-rich>a{width:100%}
}

/* Graphic-mode variant of the affiliate banner -- swaps the two-column
   knight+copy layout for a single full infographic, framed in the same
   gold-bordered, black-backed treatment used for the membership special
   banner so the theme stays uniform across promo graphics. */
.affiliate-banner-rich.affiliate-banner-graphic-mode{
  grid-template-columns:1fr;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;
  background:linear-gradient(120deg,rgba(5,5,5,.98),rgba(var(--red-rgb),.25) 55%,rgba(5,5,5,.98));
}
.affiliate-banner-graphic-frame{
  display:block;
  width:100%;
  max-width:520px;
  margin:6px auto 0;
  border:1px solid rgba(var(--red-rgb),.6);
  background:#0a0a0a;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.affiliate-banner-graphic-frame img{display:block;width:100%;height:auto}
.affiliate-banner-graphic-cta{
  margin-top:22px;
  min-height:48px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--on-accent);
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}
@media(max-width:800px){
  .affiliate-banner-graphic-frame{max-width:100%}
  .affiliate-banner-graphic-cta{width:100%}
}

.affiliate-socials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.affiliate-socials-grid{grid-template-columns:1fr}}

/* Trinity Affiliate Program -- self-serve signup section (index.html
   #affiliateApply). Sits below the recruitment banner higher up the page;
   reuses the site's existing gold/black promo-banner and benefit-list
   patterns (.kit-savings-banner, .rewards-benefit-list) so it reads as part
   of the same visual language instead of a bolted-on form. */
.affiliate-apply-section{
  padding:56px clamp(16px,5vw,60px) 64px;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
}
.affiliate-apply-intro{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}
.affiliate-apply-intro .eyebrow{color:var(--red2);margin:0 0 8px}
.affiliate-apply-intro h2{
  margin:0 0 12px;
  font:500 clamp(1.7rem,3.4vw,2.5rem) Georgia,serif;
  color:var(--ink);
}
.affiliate-apply-intro p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.affiliate-benefit-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  max-width:1100px;
  margin:0 auto 32px;
}
.affiliate-benefit-cards article{
  padding:24px 20px;
  background:linear-gradient(160deg,rgba(var(--red-rgb),.08),var(--surface2));
  border:1px solid var(--line-strong);
  text-align:left;
}
.affiliate-benefit-icon{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:12px;
  border:2px solid var(--red2);
  border-radius:50%;
  color:var(--red2);
  font:900 1.15rem/1 Georgia,serif;
}
.affiliate-benefit-cards h3{
  margin:0 0 8px;
  font:700 .95rem/1.3 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--ink);
}
.affiliate-benefit-cards p{
  margin:0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.55;
}
@media(max-width:900px){
  .affiliate-benefit-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .affiliate-benefit-cards{grid-template-columns:1fr}
}

/* Boosted-rate promo square -- same clip-path/gradient chrome as the shared
   .kit-savings-banner (used elsewhere for the "10 vials pay for 5" kit
   deal), just with its own ribbon and a text badge instead of a plain
   percent icon so "30%" itself is the eye-catcher. */
.affiliate-promo-banner{margin:0 auto 34px;max-width:1100px;position:relative;overflow:visible}
.affiliate-promo-badge{
  font:900 1.35rem/1 Arial,sans-serif;
  letter-spacing:-.02em;
}

/* Affiliate Launch Offer -- replaces the old plain-text 30%-vs-20% card with
   a designed graphic banner. Mobile gets the taller graphic (includes the
   "How It Works" steps); desktop gets the wider graphic (same offer, fits
   the full-width layout better without extra vertical scroll). */
.affiliate-launch-graphic{margin:0 auto 34px;max-width:900px;text-align:center}
.affiliate-launch-graphic img{width:100%;height:auto;border-radius:14px;margin:0 auto}
.affiliate-launch-graphic .affiliate-launch-graphic-desktop{display:none}
.affiliate-launch-graphic .affiliate-launch-graphic-mobile{display:block}
@media(min-width:901px){
  .affiliate-launch-graphic{max-width:1100px}
  .affiliate-launch-graphic .affiliate-launch-graphic-desktop{display:block}
  .affiliate-launch-graphic .affiliate-launch-graphic-mobile{display:none}
}

.affiliate-apply-form-wrap{
  max-width:560px;
  margin:0 auto;
  padding:32px clamp(20px,4vw,40px);
  background:var(--surface2);
  border:1px solid var(--line-strong);
}
.affiliate-apply-form h3{
  margin:0 0 16px;
  font:500 1.3rem Georgia,serif;
  color:var(--ink);
  text-align:center;
}
.affiliate-apply-step.hidden{display:none}
.affiliate-apply-step .signup-form-grid{grid-template-columns:1fr;gap:12px;margin-bottom:16px}
.affiliate-apply-step .signup-submit-button{width:100%}
.affiliate-apply-step .signup-continue-button{width:100%;margin-top:10px}
#affiliateApplyStep2 .signup-intro{text-align:center;margin:0 0 16px;color:var(--muted);line-height:1.6}
#affiliateApplyStep2 .signup-message-field{margin-bottom:16px}
#affiliateApplyCode{text-align:center;font-size:1.3rem;letter-spacing:.2em;font-weight:900}

.affiliate-apply-result{
  display:grid;
  gap:10px;
  margin:0 0 16px;
  padding:16px;
  background:var(--bg);
  border:1px solid var(--red2);
  text-align:left;
}
.affiliate-apply-result div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.affiliate-apply-result span{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
.affiliate-apply-result strong{color:var(--red2);font-size:.92rem;word-break:break-all;text-align:right}

@media(max-width:640px){
  .affiliate-apply-section{padding:40px 14px 48px}
  .affiliate-apply-form-wrap{padding:24px 18px}
}

/* Promo Ticker -- a stock-market-style scrolling strip for site-wide sale
   codes, sitting between the knight search tip and the big knight hero.
   Only appears at all while at least one promo is switched on and inside
   its date window (see js/promo-ticker.js); otherwise it stays hidden and
   takes up no space.
   V49.9 restores this strip for the September sitewide sale. JavaScript still
   keeps it completely hidden before the start time and after expiration. */
.promo-ticker{
  display:flex;
  align-items:center;
  gap:14px;
  margin:14px clamp(12px,4vw,40px) 0;
  padding:0 0 0 clamp(14px,3vw,22px);
  height:42px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.98),rgba(var(--red-rgb),.26) 45%,rgba(0,0,0,.98)),
    repeating-linear-gradient(90deg,transparent 0 68px,rgba(255,255,255,.035) 69px 70px);
  border-top:1px solid rgba(var(--red-rgb),.45);
  border-bottom:1px solid rgba(var(--red-rgb),.45);
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.promo-ticker[hidden]{display:none!important}
.promo-ticker-tag{
  flex:none;
  padding:5px 13px;
  background:var(--red2);
  color:var(--on-accent);
  font:900 .66rem/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}
.promo-ticker-viewport{flex:1 1 auto;min-width:0;overflow:hidden;height:100%;position:relative}
.promo-ticker-track{
  display:flex;
  align-items:center;
  height:100%;
  width:max-content;
  animation:promoTickerScroll var(--promo-ticker-duration,24s) linear infinite;
  will-change:transform;
}
.promo-ticker-viewport:hover .promo-ticker-track{animation-play-state:paused}
.promo-ticker-viewport:focus-within .promo-ticker-track{animation-play-state:paused}
.promo-ticker-content{
  flex:none;
  padding-right:0;
  color:#F3EEDF;
  font:700 .82rem/1 Arial,sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
}
@keyframes promoTickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .promo-ticker{height:auto!important;min-height:42px;padding-top:8px;padding-bottom:8px}
  .promo-ticker-viewport{height:auto;overflow:visible}
  .promo-ticker-track{width:auto;height:auto;animation:none;will-change:auto}
  .promo-ticker-content{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.35}
  .promo-ticker-content[aria-hidden="true"]{display:none}
}
@media(max-width:800px){
  .promo-ticker{margin:12px 12px 0;height:38px;padding-left:12px;gap:10px}
  .promo-ticker-tag{font-size:.6rem;padding:4px 10px}
  .promo-ticker-content{font-size:.74rem}
}

.hidden-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Trinity Rewards */
.nav-rewards-link{color:var(--red2)!important;font-weight:900!important}
.rewards-promo-banner{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:32px;
  align-items:center;
  padding:38px clamp(20px,5vw,76px);
  background:linear-gradient(120deg,rgba(5,5,5,.98),rgba(var(--red-rgb),.6) 55%,rgba(5,5,5,.98));
  border-top:2px solid var(--red2);
  border-bottom:2px solid var(--red2);
}
.rewards-cover-button{
  position:relative;
  display:block;
  padding:0;
  border:2px solid var(--red2);
  background:#000;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  transition:.25s;
}
.rewards-cover-button:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,0,.65)}
.rewards-cover-button img{display:block;width:100%;height:auto}
.rewards-cover-tag{
  position:absolute;
  top:10px;
  right:-8px;
  padding:5px 14px;
  background:var(--red);
  color:var(--on-accent);
  font:900 .68rem/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.rewards-promo-copy .eyebrow{margin:0 0 6px;color:#E9C767}
.rewards-promo-copy h2{
  margin:0 0 10px;
  font:500 clamp(1.5rem,3vw,2.3rem) Georgia,serif;
  color:#F3EEDF;
}
.rewards-promo-copy>p{max-width:760px;color:#EDE9DC;line-height:1.6;margin:0 0 14px}
.rewards-benefit-list{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:7px;
  max-width:640px;
}
.rewards-benefit-list li{
  position:relative;
  padding-left:22px;
  color:#EDE9DC;
  font-size:.88rem;
  line-height:1.5;
}
.rewards-benefit-list li::before{
  content:'\2726';
  position:absolute;
  left:0;
  top:0;
  color:#E9C767;
}
.rewards-benefit-list li b{color:#F3EEDF}
.rewards-promo-actions .primary-button{
  min-height:50px;
  padding:0 26px;
}
@media(max-width:800px){
  .rewards-promo-banner{grid-template-columns:1fr;gap:22px;padding:28px 18px;text-align:center}
  .rewards-cover-button{width:min(200px,60vw);margin:0 auto}
  .rewards-benefit-list{text-align:left;margin-left:auto;margin-right:auto}
}

.rewards-modal .signup-full-image img{max-height:300px}
.rewards-pricing-box{margin-bottom:16px}
.rewards-benefit-list-modal{max-width:none;margin-bottom:18px}
.rewards-benefit-list-modal li{font-size:.82rem}
.rewards-success-panel{text-align:center;padding:10px 0 4px}
.rewards-success-panel .eyebrow{color:var(--red2);margin:0 0 6px}
.rewards-success-panel h3{margin:0 0 12px;font:500 1.9rem Georgia,serif;color:var(--ink)}
.rewards-success-panel h3 span{color:var(--red2)}
.rewards-success-panel>p{color:#ccc;line-height:1.6;max-width:520px;margin:0 auto 20px}
.rewards-success-panel .primary-button{display:inline-flex;margin:0 0 12px;min-height:50px;padding:0 24px}
.rewards-success-panel .secondary-button{display:block;margin:0 auto}
.referral-popup-note{padding:10px 12px;border-left:3px solid var(--red2);background:rgba(var(--red-rgb),.10);font-size:.78rem!important}
.signup-success-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:var(--bg)}
.signup-success-page section{width:min(620px,95vw);padding:35px;text-align:center;background:var(--surface);border:1px solid var(--red2)}
.signup-success-page img{width:220px;max-height:230px;object-fit:contain}
.signup-success-page h1{font:500 2.5rem Georgia,serif}
.signup-success-page p{color:var(--muted);line-height:1.6}

.netlify-detection-form,.netlify-submit-frame{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  padding:0!important;
  margin:-1px!important;
}


/* Production 1.5 — standardized customer-facing names and vial amounts */
.vial-amount-control{margin-top:8px}
.vial-amount-label{
  display:block;margin-bottom:5px;color:var(--muted);font-size:.68rem;
  font-weight:900;letter-spacing:.07em;text-transform:uppercase
}
.single-dose-display{
  min-height:36px;display:flex;align-items:center;padding:0 10px;
  background:var(--surface);color:var(--ink);border:1px solid #555;font-weight:800
}
.dose-select{font-weight:800}
.product-card h3{min-height:2.4em}

.testing-assurance-banner{position:relative;z-index:1100;margin-top:205px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:17px clamp(20px,5vw,72px);background:linear-gradient(90deg,var(--red-deep),#141414 60%,var(--bg));border-block:1px solid var(--red2)}
.testing-assurance-banner .assurance-icon{font-size:2rem}.testing-assurance-banner strong{font-size:1.05rem;text-transform:uppercase}.testing-assurance-banner p{margin:4px 0 0;color:#d0d0d0;line-height:1.45;font-size:.82rem}.testing-assurance-banner a{padding:11px 14px;background:var(--red);color:var(--on-accent);text-decoration:none;font-weight:900;text-transform:uppercase;white-space:nowrap}.testing-assurance-banner~main{padding-top:0}
.research-coa-button{display:block;width:100%;margin-top:7px;padding:10px;color:var(--ink);background:var(--surface2);border:1px solid var(--red2);font-weight:900;text-transform:uppercase;cursor:pointer}.research-coa-button:hover{background:var(--red-deepest)}
.research-coa-modal{position:relative;width:min(1020px,96vw);max-height:92vh;overflow:auto;padding:28px;background:var(--surface);border:2px solid var(--red2);box-shadow:0 0 80px rgba(var(--red-rgb),.42)}
.research-coa-header{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}.research-coa-header h2{margin:0;font:500 2.2rem Georgia,serif}.research-coa-icon{font-size:2rem}.research-coa-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.research-coa-grid article{padding:20px;background:var(--surface2);border:1px solid var(--line)}.info-kicker{color:var(--red2);font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.research-coa-grid h3{font:500 1.5rem Georgia,serif;margin:7px 0 14px}.research-coa-grid h4{margin:18px 0 7px;text-transform:uppercase;font-size:.8rem}.research-coa-grid p{color:var(--muted);line-height:1.6}.research-coa-grid dl{margin:0}.research-coa-grid dl div[hidden]{display:none}.research-coa-grid dl div{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.research-coa-grid dt{color:var(--muted)}.research-coa-grid dd{margin:0;text-align:right;font-weight:800}.coa-document-panel{min-height:430px}.coa-testing-update{margin:0 0 16px;padding:16px;border:1px solid rgba(20,163,74,.45);background:rgba(11,110,47,.1)}.coa-testing-update strong{display:block;margin:6px 0 4px;color:var(--text)}.research-coa-grid .coa-testing-update p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.55}.coa-frame{width:100%;height:350px;border:1px solid #444;background:#fff}.coa-image{display:block;max-width:100%;max-height:350px;margin:auto;background:#fff}.coa-open-link{width:100%;margin-top:12px}.coa-pending{min-height:330px;display:grid;place-items:center;align-content:center;text-align:center;padding:25px;border:1px dashed #666}.coa-pending>span{font-size:3rem}.coa-pending strong{margin-top:10px}.coa-pending a{color:var(--red2)}.coa-disclaimer{margin:16px 0 0;color:var(--muted);font-size:.72rem;text-align:center;line-height:1.5}
.verification-overlay{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:40px 20px;background:radial-gradient(circle at center,rgba(var(--red-rgb),.16),transparent 40%),rgba(2,2,2,.97);opacity:0;visibility:hidden;transition:.3s}.verification-overlay>*{flex:none;margin:auto}.verification-overlay.open{opacity:1;visibility:visible}.verification-overlay.verified{opacity:0;visibility:hidden}.verification-card{width:min(600px,96vw);padding:30px;background:var(--surface);border:1px solid var(--red2);box-shadow:0 30px 90px #000}.verification-card>img{display:block;width:190px;height:130px;object-fit:contain;margin:0 auto 10px}.verification-card h2{font:500 2.3rem Georgia,serif;margin:5px 0 10px}.verification-card>p{color:var(--muted);line-height:1.55}.verification-card label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:13px 0;padding:15px;background:var(--surface2);border:1px solid var(--line-strong);line-height:1.45}.verification-card input{width:19px;height:19px;accent-color:var(--red2)}.verification-card .primary-button{width:100%;margin-top:10px}.verification-card .primary-button:disabled{background:var(--line-strong);color:var(--muted);cursor:not-allowed}.verification-disclaimer{font-size:.7rem!important;color:#858585!important}.verification-exit{display:block;margin:12px auto 0;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer}
@media(max-width:1050px){.testing-assurance-banner{margin-top:90px}}@media(max-width:700px){.testing-assurance-banner{margin-top:75px;grid-template-columns:auto 1fr;padding:14px}.testing-assurance-banner a{grid-column:1/-1;text-align:center}.research-coa-grid{grid-template-columns:1fr}.research-coa-modal{padding:18px}.research-coa-header h2{font-size:1.7rem}.verification-card{padding:22px 16px}}


/* Production 1.7 — Mobile-responsive branding, admin account, public status */
.admin-account-link{
  display:grid;
  place-items:center;
  text-decoration:none;
}
.brand-single{
  width:330px;
  height:98px;
}
.brand-single img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}
.hero{
  overflow:hidden;
}
.hero-art{
  min-width:0;
}
.hero-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}
.hero-copy h1{
  max-width:850px;
}
.status-page-link{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  background:var(--surface2);
  color:var(--ink);
  border:1px solid var(--red2);
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
}
.peptide-status-panel{
  padding:16px;
  background:linear-gradient(145deg,var(--surface2),var(--bg));
  border:1px solid var(--red2);
  align-self:start;
}
.status-panel-header{
  display:flex;
  gap:10px;
  align-items:center;
}
.status-panel-header>span{font-size:1.8rem}
.status-panel-header h3{
  margin:0;
  font:500 1.45rem Georgia,serif;
  text-transform:uppercase;
}
.status-panel-header .eyebrow{margin:0}
.status-panel-intro{
  color:var(--muted);
  line-height:1.5;
  font-size:.78rem;
}
.supply-status-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:12px 0;
}
.status-summary-item{
  padding:8px;
  background:var(--surface);
  border:1px solid var(--line);
}
.status-summary-item strong,
.status-summary-item span{display:block}
.status-summary-item strong{font-size:1.25rem}
.status-summary-item span{font-size:.65rem;text-transform:uppercase;color:var(--muted)}
.supply-status-rows{display:grid;gap:7px}
.supply-status-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--line);
}
.supply-status-row div strong,
.supply-status-row div span{display:block}
.supply-status-row div strong{font-size:.74rem}
.supply-status-row div span{font-size:.65rem;color:var(--muted)}
.supply-status-row em{
  align-self:start;
  padding:3px 5px;
  font-size:.57rem;
  font-style:normal;
  font-weight:900;
  text-transform:uppercase;
}
.supply-status-row small{
  grid-column:1/-1;
  color:var(--muted);
  line-height:1.35;
}
.in-house-testing{color:#87cfff;border-color:#4a7da8}
.in-transit{color:#ffd782;border-color:#9c781d}
.ordered{color:#d5a7ff;border-color:#755292}
.reordering{color:#ff979d;border-color:#8d282d}
.limited-availability{color:#ffc06c;border-color:#9b651a}
.available{color:#8be29a;border-color:#347b41}
.unavailable{color:var(--muted);border-color:#555}
.status-all-available{padding:11px;color:#8be29a;background:var(--bg);border:1px solid #347b41}

@media(max-width:1050px){
  .brand-single{width:250px;height:76px}
  .hero{grid-template-columns:1fr}
  .hero-art{
    height:auto;
    min-height:380px;
  }
  .hero-art img{
    max-height:520px;
  }
}
@media(max-width:700px){
  .site-header{
    height:92px;
    padding:8px 16px;
  }
  .brand-single{
    width:210px;
    height:76px;
  }
  .brand-single img{
    object-fit:contain;
    object-position:left center;
  }
  .menu-toggle{
    width:52px;
    height:52px;
  }
  main{padding-top:92px}
  .testing-assurance-banner{margin-top:92px}
  .hero{
    min-height:auto;
    padding:28px 16px 20px;
  }
  .hero-copy h1{
    font-size:clamp(2.55rem,13vw,4.3rem);
    line-height:.96;
    letter-spacing:-.035em;
  }
  .hero-copy h1 br{display:block}
  .hero-art{
    height:auto;
    min-height:0;
    margin-top:18px;
  }
  .hero-art img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
  .hero-features{
    grid-template-columns:1fr 1fr;
  }
  .catalog-layout{
    display:flex;
    flex-direction:column;
  }
  .peptide-status-panel{order:1}
  .catalog-main{order:2}
  .catalog-sidebar{order:3}
}


/* Production 1.8 — verified popup interaction fix */
.overlay:not(.open),
.verification-overlay:not(.open){
  pointer-events:none!important;
}
.overlay.open,
.verification-overlay.open{
  pointer-events:auto!important;
}
html.modal-active,
html.modal-active body{
  overscroll-behavior:none;
}
.signup-modal{
  touch-action:pan-y;
}
.signup-modal button,
.signup-modal input,
.signup-modal textarea,
.verification-card button,
.verification-card input{
  position:relative;
  z-index:2;
  pointer-events:auto;
}
.signup-modal .modal-close{
  min-width:48px;
  min-height:48px;
}
.primary-button:disabled{
  cursor:not-allowed;
  opacity:.6;
}
@media(max-width:700px){
  .overlay.open{
    overflow-y:auto;
    padding:14px 10px 110px;
  }
  .signup-modal{
    width:100%;
    max-height:none;
    margin:0 auto;
    overflow:visible;
  }
  .signup-content{
    padding-bottom:24px;
  }
  .signup-modal input,
  .signup-modal textarea,
  .signup-modal button{
    min-height:50px;
    font-size:16px;
  }
  .signup-modal textarea{
    min-height:110px;
  }
  .verification-overlay{
    overflow-y:auto;
    padding:14px 10px 100px;
  }
  .verification-card{
    margin:auto;
  }
}


/* Production 1.9 — catalog initialization and QR sharing */
.clear-filters-button{
  min-height:42px;
  padding:0 14px;
  background:var(--surface2);
  color:var(--ink);
  border:1px solid var(--red2);
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
}
.clear-filters-button:hover{background:var(--red-deep)}

.qr-share-trigger{
  cursor:pointer;
  color:inherit;
  font:inherit;
}
button.qr-sidebar,
button.footer-qr{
  appearance:none;
  -webkit-appearance:none;
  text-align:inherit;
}
button.qr-sidebar{
  width:100%;
}
button.footer-qr{
  background:transparent;
  border:0;
}
.qr-share-trigger:hover{
  border-color:var(--red2);
  box-shadow:0 0 22px rgba(var(--red-rgb),.24);
}

.qr-share-modal{
  position:relative;
  width:min(850px,96vw);
  max-height:92vh;
  overflow:auto;
  padding:30px;
  background:
    radial-gradient(circle at 20% 20%,rgba(var(--red-rgb),.15),transparent 30%),
    var(--surface);
  border:2px solid var(--red2);
  box-shadow:0 28px 90px rgba(0,0,0,.75),0 0 40px rgba(var(--red-rgb),.28);
}
.qr-share-modal h2{
  margin:4px 0 8px;
  font:500 clamp(2rem,4vw,3rem) Georgia,serif;
}
.qr-share-intro{color:var(--muted);line-height:1.55}
.qr-share-content{
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(300px,1.2fr);
  gap:24px;
  align-items:center;
  margin-top:22px;
}
.qr-share-image{
  padding:14px;
  background:#fff;
  border-radius:4px;
}
.qr-share-image img{
  display:block;
  width:100%;
  height:auto;
}
.qr-share-actions{
  display:grid;
  gap:11px;
}
.qr-share-actions label{
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
}
.share-link-field{
  display:grid;
  grid-template-columns:1fr auto;
}
.share-link-field input{
  min-width:0;
  height:48px;
  padding:0 12px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid #555;
  font-size:.9rem;
}
.share-link-field button{
  min-width:78px;
  background:var(--red);
  color:var(--on-accent);
  border:0;
  font-weight:900;
  cursor:pointer;
}
.secondary-share-button{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 15px;
  background:var(--surface2);
  color:var(--ink);
  border:1px solid #777;
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
}
.secondary-share-button:hover{border-color:var(--red2)}
.qr-share-status{
  min-height:20px;
  margin:0;
  color:#8be29a;
  font-size:.8rem;
}
.qr-share-note{
  margin:18px 0 0;
  color:var(--muted);
  font-size:.72rem;
  text-align:center;
}

@media(max-width:700px){
  .catalog-controls{
    grid-template-columns:1fr;
  }
  .clear-filters-button{width:100%}
  .qr-share-modal{
    width:100%;
    padding:22px 14px;
  }
  .qr-share-content{
    grid-template-columns:1fr;
  }
  .qr-share-image{
    width:min(320px,100%);
    margin:auto;
  }
  .share-link-field{
    grid-template-columns:1fr;
  }
  .share-link-field button{
    min-height:44px;
  }
}


/* Production 2.0 — centered premium signup experience */
#signupOverlay.overlay.open{
  overflow-y:auto;
  background:
    radial-gradient(circle at center,rgba(var(--red-rgb),.22),transparent 38%),
    rgba(0,0,0,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.premium-signup-modal{
  position:relative;
  width:min(1080px,96vw);
  max-width:1080px;
  max-height:min(860px,92vh);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(480px,1.18fr);
  overflow:hidden;
  background:var(--surface);
  border:2px solid var(--red2);
  border-radius:18px;
  box-shadow:
    0 32px 120px rgba(0,0,0,.82),
    0 0 55px rgba(var(--red-rgb),.32);
}

.premium-signup-modal .modal-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--hairline-rgb),.28);
  border-radius:50%;
  background:rgba(0,0,0,.72);
  color:var(--ink);
  font-size:1.8rem;
  cursor:pointer;
}

.premium-signup-visual{
  position:relative;
  min-height:100%;
  background:var(--bg);
  overflow:hidden;
  border-right:1px solid rgba(var(--red-rgb),.55);
}

.premium-signup-visual img{
  width:100%;
  height:100%;
  min-height:680px;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:contrast(1.08) saturate(.95);
}

.premium-signup-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 52%,rgba(0,0,0,.88) 100%),
    linear-gradient(90deg,transparent 72%,rgba(7,7,7,.50) 100%);
  pointer-events:none;
}

.signup-visual-overlay{
  position:absolute;
  left:24px;
  right:24px;
  bottom:26px;
  z-index:3;
  text-align:center;
  text-transform:uppercase;
}

.signup-visual-overlay span,
.signup-visual-overlay strong{
  display:block;
}

.signup-visual-overlay span{
  color:var(--ink);
  font:500 1.3rem Georgia,serif;
  letter-spacing:.14em;
}

.signup-visual-overlay strong{
  margin-top:7px;
  color:var(--red2);
  font-size:.72rem;
  letter-spacing:.13em;
}

.premium-signup-content{
  min-width:0;
  overflow-y:auto;
  padding:42px 42px 30px;
}

.premium-signup-content h2{
  margin:4px 0 10px;
  max-width:560px;
  font:500 clamp(2.35rem,4.5vw,4rem)/.98 Georgia,serif;
}

.signup-intro{
  margin:0 0 18px;
  color:#c5c5c5;
  line-height:1.6;
}

.ordering-notice{
  margin:0 0 20px;
  padding:15px 16px;
  background:
    linear-gradient(135deg,rgba(var(--red-rgb),.15),rgba(var(--hairline-rgb),.025));
  border-left:4px solid var(--red2);
  border-radius:0 8px 8px 0;
}

.ordering-notice strong{
  display:block;
  margin-bottom:6px;
  color:var(--ink);
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.07em;
}

.ordering-notice p{
  margin:6px 0;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.5;
}

.ordering-notice a{
  color:var(--red2);
  font-weight:900;
}

.signup-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.signup-form-grid label,
.signup-message-field{
  display:grid;
  gap:6px;
}

.signup-form-grid label>span,
.signup-message-field>span{
  color:var(--muted);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.premium-signup-content input,
.premium-signup-content textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #4a4a4a;
  border-radius:7px;
  background:var(--surface);
  color:var(--ink);
  outline:none;
}

.premium-signup-content input{
  min-height:48px;
  padding:0 13px;
}

.premium-signup-content textarea{
  min-height:102px;
  padding:12px 13px;
  resize:vertical;
}

.premium-signup-content input:focus,
.premium-signup-content textarea:focus{
  border-color:var(--red2);
  box-shadow:0 0 0 3px rgba(var(--red-rgb),.12);
}

.signup-message-field{
  margin-top:12px;
}

.signup-consent{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  margin:14px 0;
  color:#c7c7c7;
  line-height:1.45;
  font-size:.8rem;
}

.signup-consent input{
  width:19px;
  min-height:19px;
  height:19px;
  margin-top:1px;
  accent-color:var(--red2);
}

.signup-submit-button,
.signup-continue-button{
  width:100%;
  min-height:50px;
  border-radius:7px;
}

.signup-continue-button{
  margin-top:9px;
  background:var(--surface2);
  border:1px solid #666;
  color:var(--ink);
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
}

.signup-continue-button:hover{
  border-color:var(--red2);
}

.form-status{
  min-height:22px;
  margin:10px 0 0;
  color:#8be29a;
  text-align:center;
}

.signup-privacy,
.signup-disclaimer{
  margin:8px 0 0;
  text-align:center;
  color:#818181;
  font-size:.7rem;
  line-height:1.4;
}

@media(max-width:850px){
  #signupOverlay.overlay.open{
    padding:12px!important;
  }

  .premium-signup-modal{
    width:min(620px,100%);
    max-height:none;
    margin:0 auto 96px;
    grid-template-columns:1fr;
    border-radius:14px;
  }

  .premium-signup-visual{
    height:250px;
    min-height:250px;
    border-right:0;
    border-bottom:1px solid rgba(var(--red-rgb),.55);
  }

  .premium-signup-visual img{
    min-height:0;
    height:100%;
    object-fit:cover;
    object-position:center 28%;
  }

  .signup-visual-overlay{
    display:none;
  }

  .premium-signup-content{
    overflow:visible;
    padding:30px 20px 24px;
  }

  .premium-signup-content h2{
    padding-right:38px;
    font-size:clamp(2.25rem,10vw,3.35rem);
  }
}

@media(max-width:560px){
  .premium-signup-visual{
    height:210px;
    min-height:210px;
  }

  .premium-signup-content{
    padding:26px 15px 22px;
  }

  .signup-form-grid{
    grid-template-columns:1fr;
  }

  .ordering-notice{
    padding:13px;
  }

  .premium-signup-modal .modal-close{
    top:10px;
    right:10px;
    width:42px;
    height:42px;
  }
}

.cart-open-button{position:relative}.cart-open-button b,#mobileCartButton b{position:absolute;top:4px;right:5px;min-width:19px;height:19px;display:grid;place-items:center;padding:0 4px;border-radius:20px;background:var(--red);color:var(--on-accent);font-size:.65rem}#mobileCartButton{position:relative;background:transparent;color:inherit;border:0}.product-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.add-cart-button{min-height:42px;padding:7px;border:1px solid var(--red2);color:var(--on-accent);background:var(--red-deep);font-size:.68rem;font-weight:900;text-transform:uppercase;cursor:pointer}.add-cart-button.kit-add{background:linear-gradient(135deg,var(--red-deep2),var(--red-deepest))}.add-cart-button.disabled{opacity:.45;cursor:not-allowed}.call-order-link{display:block;margin-top:7px;color:var(--muted);text-align:center;font-size:.72rem;text-decoration:none}
.cart-modal{position:relative;width:min(1250px,97vw);max-height:94vh;overflow:auto;padding:28px;background:var(--surface);border:2px solid var(--red2);box-shadow:0 30px 100px rgba(0,0,0,.82),0 0 45px rgba(var(--red-rgb),.28)}.cart-heading{display:flex;gap:13px;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line)}.cart-heading>span{font-size:2rem}.cart-heading h2{margin:0;font:500 2.5rem Georgia,serif}.cart-heading .eyebrow{margin:0}.cart-empty-state{min-height:420px;display:grid;place-items:center;align-content:center;text-align:center}.cart-empty-state>span{font-size:4rem}.cart-empty-state h3{margin:14px 0 6px;font:500 1.8rem Georgia,serif}.cart-empty-state p{color:var(--muted)}.cart-empty-state .primary-button{min-width:220px;margin-top:12px}.cart-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:22px;margin-top:20px}.cart-items{display:grid;gap:10px}.cart-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:11px;background:var(--surface);border:1px solid var(--line-strong)}.cart-item img{width:64px;height:82px;object-fit:contain}.cart-item-copy strong,.cart-item-copy span,.cart-item-copy small{display:block}.cart-item-copy span{margin-top:3px;color:var(--muted);font-size:.77rem}.cart-item-copy small{margin-top:5px;color:var(--muted)}.cart-quantity{display:grid;grid-template-columns:32px 30px 32px;align-items:center;text-align:center}.cart-quantity button{height:32px;background:var(--surface2);color:var(--ink);border:1px solid #555}.cart-line-total{min-width:75px;text-align:right}.cart-remove{background:none;color:var(--red2);border:0;text-decoration:underline}.shipping-options,.discount-entry{margin-top:18px;padding:15px;background:var(--surface2);border:1px solid var(--line-strong)}.shipping-options h3,.discount-entry h3,.cart-summary-panel h3{margin:0 0 11px;font:500 1.25rem Georgia,serif}.shipping-options label{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line-strong);margin-top:8px}.shipping-options label span strong,.shipping-options label span small{display:block}.shipping-options label span small{color:var(--muted);margin-top:3px}.processing-message{margin:11px 0 0;color:#9bcfff;font-size:.76rem}.discount-entry>div{display:grid;grid-template-columns:1fr auto}.discount-entry input{min-width:0;height:46px;padding:0 12px;background:var(--bg);color:var(--ink);border:1px solid #555}.discount-entry button{min-width:90px;background:var(--red);color:var(--on-accent);border:0;font-weight:900}.discount-entry p{min-height:18px;color:#8be29a}.discount-entry small{color:var(--muted)}.cart-summary-panel{padding:18px;background:linear-gradient(145deg,var(--surface2),var(--surface));border:1px solid var(--red2);align-self:start}.cart-summary-panel dl{margin:0 0 18px}.cart-summary-panel dl div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-strong)}.cart-total-row{font-size:1.3rem;font-weight:900}#placeOrderForm{display:grid;gap:10px}#placeOrderForm label{display:grid;gap:5px}#placeOrderForm label span{color:var(--muted);font-size:.68rem;font-weight:900;text-transform:uppercase}#placeOrderForm input,#placeOrderForm textarea{box-sizing:border-box;width:100%;padding:11px;background:var(--bg);color:var(--ink);border:1px solid #555}.place-order-button{width:100%;margin-top:5px}.cart-business-note{margin-top:16px;padding:13px;background:rgba(var(--red-rgb),.09);border-left:3px solid var(--red2)}.cart-business-note strong{display:block;text-transform:uppercase;font-size:.75rem}.cart-business-note p{color:var(--muted);font-size:.76rem}.cart-business-note a{color:var(--red2)}
.payment-method-section{margin-top:18px;padding:15px;background:var(--surface2);border:1px solid var(--line-strong)}.payment-method-section h3{margin:0 0 11px;font:500 1.25rem Georgia,serif}.payment-method-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.payment-option{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:12px 10px;background:var(--surface);border:1px solid var(--line-strong);cursor:pointer;transition:.2s}.payment-option input{position:absolute;opacity:0;pointer-events:none}.payment-option-icon{display:grid;place-items:center;width:34px;height:34px;font-size:1.05rem;font-weight:900;background:var(--surface2);color:var(--red2);border:1px solid var(--line-strong)}.payment-option-copy strong,.payment-option-copy small{display:block}.payment-option-copy strong{font-size:.82rem;text-transform:uppercase}.payment-option-copy small{margin-top:3px;color:var(--muted);font-size:.7rem}.payment-option.active{border-color:var(--red2);background:linear-gradient(145deg,rgba(var(--red-rgb),.14),var(--surface));box-shadow:0 0 0 1px rgba(var(--red-rgb),.35)}.payment-option.active .payment-option-icon{background:var(--red);color:var(--on-accent);border-color:var(--red)}.payment-option.is-disabled{cursor:not-allowed;opacity:.55}.payment-option-soon{position:absolute;top:8px;right:8px;padding:2px 7px;background:var(--red-deep);color:var(--ink);font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.payment-details{margin-top:14px;padding:14px;background:var(--bg);border:1px solid var(--line-strong)}.payment-details.hidden{display:none}.payment-details>p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.6}.payment-details>p+p{margin-top:10px}.crypto-asset-toggle{display:flex;gap:8px;margin-bottom:12px}.crypto-asset-button{flex:1;height:38px;background:var(--surface2);color:var(--muted);border:1px solid var(--line-strong);font-weight:900;text-transform:uppercase;font-size:.72rem;cursor:pointer;transition:.2s}.crypto-asset-button.active{background:var(--red);color:var(--on-accent);border-color:var(--red)}.crypto-wallet-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:14px;background:var(--surface2);border:1px solid var(--red2)}.crypto-qr{width:104px;height:104px;padding:6px;background:#F3EEDF;border:1px solid var(--line-strong)}.crypto-wallet-info{display:grid;gap:2px}.crypto-wallet-info>span{color:var(--muted);font-size:.66rem;font-weight:900;text-transform:uppercase;margin-top:8px}.crypto-wallet-info>span:first-child{margin-top:0}.crypto-wallet-info>strong{color:var(--red2)}.crypto-address-row{display:flex;gap:8px;align-items:center;margin-top:3px}.crypto-address-row code{flex:1;min-width:0;padding:8px 9px;background:var(--bg);color:var(--ink);border:1px solid #555;font-size:.72rem;word-break:break-all;font-family:'Courier New',monospace}.crypto-address-row button{height:36px;padding:0 14px;background:var(--red);color:var(--on-accent);border:0;font-weight:900;text-transform:uppercase;font-size:.68rem;cursor:pointer;white-space:nowrap}.copy-status{min-height:16px;margin:5px 0 0;color:#8be29a;font-size:.68rem}.crypto-price-notice{margin-top:12px;padding:11px 12px;background:rgba(var(--red-rgb),.10);border-left:3px solid var(--red2);color:#ccc!important;font-size:.76rem!important;line-height:1.55!important}.crypto-price-notice strong{color:var(--red2)}.crypto-call-note{margin-top:9px!important}.crypto-call-note a{color:var(--red2)}.crypto-price-ticker{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;margin-bottom:11px;background:linear-gradient(145deg,var(--surface2),var(--surface));border:1px solid var(--red2)}.ticker-dot{width:9px;height:9px;border-radius:50%;background:#5fe08a;box-shadow:0 0 0 0 rgba(95,224,138,.6);animation:tickerPulse 1.8s infinite}.crypto-price-ticker.is-loading .ticker-dot{background:#e0b95f;box-shadow:0 0 0 0 rgba(224,185,95,.6);animation:tickerPulse 1s infinite}@keyframes tickerPulse{0%{box-shadow:0 0 0 0 rgba(95,224,138,.55)}70%{box-shadow:0 0 0 7px rgba(95,224,138,0)}100%{box-shadow:0 0 0 0 rgba(95,224,138,0)}}.ticker-copy,.ticker-amount{display:grid;gap:2px}.ticker-copy>span,.ticker-amount>span{color:var(--muted);font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.ticker-copy>strong{color:var(--ink);font-size:.92rem;font-variant-numeric:tabular-nums}.ticker-amount{text-align:right}.ticker-amount>strong{color:var(--red2);font-size:1rem;font-variant-numeric:tabular-nums}.crypto-retry-button{margin-left:4px;padding:3px 10px;background:var(--red);color:var(--on-accent);border:0;border-radius:3px;font-weight:900;text-transform:uppercase;font-size:.62rem;letter-spacing:.03em;cursor:pointer;vertical-align:middle}.crypto-retry-button:hover{background:var(--red2)}.crypto-lock-note{margin:0 0 12px;color:var(--muted)!important;font-size:.7rem!important;font-style:italic}.payment-confirmation-note{margin-top:16px;padding:14px;background:rgba(var(--red-rgb),.07);border-left:3px solid var(--red2)}.payment-confirmation-note h4{margin:0 0 8px;font:900 .78rem/1.3 inherit;text-transform:uppercase;letter-spacing:.03em;color:var(--red2)}.payment-confirmation-note ol{margin:0 0 8px;padding-left:18px;color:var(--muted);font-size:.78rem;line-height:1.6}.payment-confirmation-note ol li+li{margin-top:4px}.payment-confirmation-note>p{margin:0;color:var(--muted);font-size:.72rem}.payment-confirmation-note a{color:var(--red2)}
@media(max-width:640px){.payment-method-options{grid-template-columns:1fr}.crypto-wallet-card{grid-template-columns:1fr;text-align:center}.crypto-qr{justify-self:center}.crypto-price-ticker{grid-template-columns:1fr;text-align:center}.ticker-amount{text-align:center}}
.order-confirmation-body{margin:0;background:radial-gradient(circle at top,rgba(var(--red-rgb),.18),transparent 32%),var(--bg);color:var(--ink)}.order-confirmation-shell{min-height:100vh;display:grid;place-items:center;padding:30px}.order-confirmation-card{width:min(1050px,96vw);padding:34px;background:var(--surface);border:2px solid var(--red2)}.order-confirmation-card>img{display:block;width:170px;height:180px;object-fit:contain;margin:0 auto}.order-confirmation-card>h1{text-align:center;font:500 clamp(2.3rem,5vw,4rem) Georgia,serif}.order-confirmation-card>.eyebrow{text-align:center}.confirmation-number{max-width:420px;margin:0 auto 12px;padding:14px;text-align:center;background:var(--surface2);border:1px solid var(--red2)}.confirmation-number span,.confirmation-number strong{display:block}.confirmation-number strong{font-size:2rem;color:var(--red2)}.confirmation-processing{text-align:center;color:#9bcfff}.confirmation-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.confirmation-grid article{padding:18px;background:var(--surface);border:1px solid var(--line-strong)}.confirmation-item{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-strong)}.confirmation-item div span{display:block;color:var(--muted);font-size:.72rem}.confirmation-grid dl div{display:flex;justify-content:space-between;padding:8px 0}.confirmation-total{border-top:1px solid var(--red2);font-size:1.2rem;font-weight:900}/* These are the label/value rows of the payment details. The selector used
   to be .zelle-instructions>div, which also caught the wrapper the script
   fills in, laying every paragraph out side by side in one squashed row.
   Only the plain unclassed rows should be flexed. */
.zelle-instructions #paymentInstructionsBody>div:not([class]){display:flex;gap:14px;justify-content:space-between;align-items:baseline;padding:12px;margin-top:8px;background:var(--surface);border:1px solid #444}
.zelle-instructions #paymentInstructionsBody>div:not([class])>strong{text-align:right}
.zelle-instructions #paymentInstructionsBody>p{margin:0 0 4px}.zelle-instructions a{display:block;margin-top:14px;color:var(--on-accent);background:var(--red-deep);padding:12px;text-align:center;text-decoration:none;font-weight:900}.zelle-reference{margin:10px 0 0;color:var(--muted);font-size:.74rem}.crypto-locked-price{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-top:10px;background:var(--surface2);border:1px solid var(--red2)}.crypto-locked-price span{color:var(--muted);font-size:.68rem;text-transform:uppercase;font-weight:900}.crypto-locked-price strong{color:var(--red2);font-size:.95rem}.crypto-amount-due{margin-top:10px;padding:12px;text-align:center;background:linear-gradient(145deg,var(--surface2),var(--surface));border:1px solid var(--red2)}.crypto-amount-due span{color:var(--red2);font-size:1.15rem;font-weight:900}.confirmation-mail-button{display:block;margin-top:10px!important;background:var(--red)!important}.confirmation-notice{margin-top:18px;padding:18px;background:rgba(var(--red-rgb),.09);border-left:4px solid var(--red2)}.confirmation-notice p{color:var(--muted)}.confirmation-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}.confirmation-disclaimer{text-align:center;color:var(--muted);font-size:.72rem}
@media(max-width:850px){.cart-modal{padding:20px 13px}.cart-layout{grid-template-columns:1fr}.cart-item{grid-template-columns:58px 1fr auto}.cart-item img{width:52px;height:70px}.cart-quantity{grid-column:2}.cart-line-total{grid-column:3;grid-row:2}.cart-remove{grid-column:2/-1;text-align:right}.confirmation-grid{grid-template-columns:1fr}}
@media(max-width:560px){.product-cart-actions{grid-template-columns:1fr}.discount-entry>div{grid-template-columns:1fr}.order-confirmation-shell{padding:12px}.order-confirmation-card{padding:22px 14px}.confirmation-actions{display:grid}}


/* Production 2.3 — consolidated header, dual-logo hero, founder story */
.utility-bar,
.header-search,
.hero,
.testing-assurance-banner{
  display:none!important;
}

.unified-site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1300;
  min-height:112px;
  display:grid;
  grid-template-columns:minmax(230px,330px) minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  padding:10px clamp(18px,4vw,58px);
  background:
    linear-gradient(90deg,rgba(0,0,0,.98),rgba(10,10,10,.97),rgba(0,0,0,.98));
  border-bottom:1px solid var(--red2);
  box-shadow:0 10px 35px rgba(0,0,0,.55);
}

.unified-brand-group{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.unified-brand{
  width:100%;
  height:88px;
}
.unified-brand img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}

/* Header v2: the info strip is restored below the header on desktop (see
   the .header-v2 .hv2-info-strip rules appended at the end of this file),
   hidden on mobile/tablet as before. */
.unified-header-info{
  display:grid;
  grid-template-columns:repeat(4,minmax(130px,1fr));
  min-width:0;
}
.unified-header-info>div,
.unified-header-info>a{
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:9px;
  padding:7px 14px;
  color:var(--ink);
  text-decoration:none;
  border-left:1px solid rgba(var(--hairline-rgb),.14);
}
.unified-header-info span{
  grid-row:1/3;
  align-self:center;
  font-size:1.25rem;
}
.unified-header-info b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.74rem;
  text-transform:uppercase;
}
.unified-header-info small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9e9e9e;
  font-size:.62rem;
}

.unified-header-actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.unified-header-actions .menu-toggle{
  display:none;
}
.theme-toggle-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
  cursor:pointer;
  border-radius:999px;
}
.theme-toggle-button:hover{
  color:var(--red2);
  border-color:var(--red2);
}

.advanced-research-search{
  position:relative;
  display:flex;
  align-items:center;
}
.advanced-research-close{
  display:none;
}
.advanced-research-search input{
  width:260px;
  height:46px;
  padding:0 34px 0 12px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
}
.advanced-research-search input::placeholder{
  color:#b8b8b8;
  text-transform:uppercase;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
}
.advanced-research-search input:focus{
  outline:none;
  border-color:var(--red2);
  box-shadow:0 0 0 2px rgba(var(--red-rgb),.28);
}
.advanced-research-submit{
  position:absolute;
  right:0;
  top:0;
  height:46px;
  width:38px;
  display:grid;
  place-items:center;
  background:none;
  border:0;
  color:var(--ink);
  font-size:16px;
  cursor:pointer;
}
@media(max-width:1250px){
  .advanced-research-search input{
    width:210px;
    padding:0 30px 0 10px;
  }
  .advanced-research-search input::placeholder{
    font-size:.54rem;
    letter-spacing:.02em;
  }
}
@media(max-width:1120px){
  .advanced-research-search input{
    width:170px;
  }
  .advanced-research-search input::placeholder{
    font-size:.5rem;
  }
}

/* Compact icon-toggle mode: mobile header row alongside the knight logo. */
@media(max-width:820px){
  .advanced-research-search{
    width:44px;
    height:44px;
    flex:0 0 auto;
  }
  .advanced-research-search input{
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:44px;
    padding:0;
    border:0;
    opacity:0;
    pointer-events:none;
  }
  .advanced-research-submit{
    position:static;
    width:44px;
    height:44px;
    background:var(--surface);
    border:1px solid var(--line);
  }
  .advanced-research-search.search-active{
    position:fixed;
    left:0;
    right:0;
    width:auto;
    height:56px;
    padding:0 12px;
    background:var(--surface);
    border-bottom:1px solid var(--red2);
    box-shadow:0 12px 30px rgba(0,0,0,.5);
    z-index:1350;
    gap:8px;
  }
  .advanced-research-search.search-active input{
    position:static;
    flex:1 1 auto;
    width:100%;
    height:40px;
    padding:0 12px;
    opacity:1;
    pointer-events:auto;
    border:1px solid var(--line);
  }
  .advanced-research-search.search-active .advanced-research-submit{
    background:none;
    border:0;
  }
  .advanced-research-close{
    display:none;
  }
  .advanced-research-search.search-active .advanced-research-close{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    background:none;
    border:0;
    color:var(--ink);
    font-size:18px;
    cursor:pointer;
  }
}

.main-nav{
  top:112px;
  z-index:1250;
}
main{
  padding-top:168px;
}

.brand-hero{
  position:relative;
  overflow:hidden;
  padding:44px clamp(18px,5vw,76px) 34px;
  background:
    radial-gradient(circle at 50% 44%,rgba(var(--red-rgb),.22),transparent 34%),
    linear-gradient(180deg,var(--bg),#0a0506 56%,var(--bg));
  border-bottom:1px solid var(--red2);
}
/* New desktop-only hero elements default to hidden so they never leak onto
   mobile/tablet before the min-width:901px media query below applies. */
.brand-hero-features,
.brand-hero-standalone-knight,
.brand-hero-title-img{
  display:none;
}
/* Desktop-only: full-bleed cathedral hall backdrop fills the empty black
   space on either side of the centered knight poster, so the scene reads as
   one continuous hall instead of a floating poster on plain black. The
   knight poster (with its own float animation) sits on top, unaffected. */
@media(min-width:901px){
  .brand-hero{
    background:
      radial-gradient(circle at 50% 44%,rgba(var(--red-rgb),.18),transparent 34%),
      linear-gradient(180deg,rgba(6,3,4,.45),rgba(6,3,4,.2) 30%,rgba(6,3,4,.35) 75%,rgba(6,3,4,.65) 100%),
      url('../assets/brand/hero-cathedral-backdrop-v48.webp') center 38%/cover no-repeat;
    display:grid;
    grid-template-columns:minmax(230px,290px) minmax(320px,420px) minmax(280px,360px);
    grid-template-areas:
      "title  title  title"
      "features knight message";
    column-gap:clamp(18px,3vw,44px);
    row-gap:6px;
    align-items:center;
    padding-top:38px;
  }
  /* Real hero title restored and enlarged for desktop only -- mobile keeps
     it hidden since the flat poster already carries the brand title.
     Higher specificity (.brand-hero .brand-hero-heading) is required here
     because a later unconditional rule sets .brand-hero-heading{display:none!important}. */
  .brand-hero .brand-hero-heading{
    display:block!important;
    grid-area:title;
    text-align:center;
    margin-bottom:8px;
  }
  /* Real h1 text stays in the DOM for SEO/accessibility but is visually
     replaced on desktop by the engraved wordmark image below, positioned
     directly above the knight to match the reference layout. */
  .brand-hero-heading h1{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }
  .brand-hero-title-img{
    display:block;
    width:100%;
    max-width:560px;
    margin:0 auto;
    filter:drop-shadow(0 8px 26px rgba(0,0,0,.65));
  }
  .brand-hero-images{
    display:none!important;
  }
  /* Old flat poster (title+icons+knight baked into one image) is replaced
     on desktop by the standalone knight cutout standing directly on the
     new cathedral backdrop -- mobile keeps the original poster untouched. */
  .brand-hero-knight-wrap{
    display:none!important;
  }
  .brand-hero-standalone-knight{
    display:flex!important;
    grid-area:knight;
    justify-content:center;
    align-items:flex-end;
    align-self:end;
    perspective:1400px;
  }
  .brand-hero-standalone-knight img{
    width:100%;
    max-width:385px;
    height:auto;
    transform-style:preserve-3d;
    animation:knightFloat3d 6s ease-in-out infinite;
    filter:drop-shadow(0 26px 40px rgba(0,0,0,.65)) drop-shadow(0 0 46px rgba(var(--red-rgb),.28));
  }
  .brand-hero-features{
    display:flex!important;
    grid-area:features;
    flex-direction:column;
    gap:18px;
    align-self:center;
  }
  .brand-hero-features>div{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    background:linear-gradient(135deg,rgba(10,10,10,.72),rgba(10,10,10,.42));
    border:1px solid rgba(var(--red-rgb),.32);
    border-radius:2px;
    backdrop-filter:blur(2px);
  }
  .brand-hero-features span{
    flex:none;
    font-size:22px;
    line-height:1;
    color:var(--red2);
  }
  .brand-hero-features b{
    display:block;
    font-size:.82rem;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#F3EEDF;
  }
  .brand-hero-features small{
    display:block;
    margin-top:2px;
    font-size:.72rem;
    color:#b9b4a8;
  }
  .brand-hero .brand-hero-message{
    grid-area:message!important;
    margin:0!important;
    max-width:none!important;
    align-self:center;
    display:block!important;
    padding:20px 24px!important;
    clip-path:none!important;
    background:linear-gradient(160deg,rgba(var(--red-rgb),.5),rgba(8,8,8,.94) 65%)!important;
    border-left:1px solid rgba(var(--red-rgb),.55);
  }
  .brand-hero .brand-hero-message strong{
    display:block;
    font-size:1rem;
    line-height:1.35;
  }
  .brand-hero .brand-hero-message p{
    max-width:none!important;
  }
  .brand-hero .brand-hero-message .brand-hero-actions{
    justify-content:flex-start!important;
    margin-top:14px;
  }
}

.brand-hero-heading{
  position:relative;
  z-index:2;
  text-align:center;
}
.brand-hero-heading p{
  margin:0;
  color:#a7a7a7;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.brand-hero-heading h1{
  margin:8px 0 5px;
  color:var(--ink);
  font:500 clamp(3.25rem,7vw,7rem)/.92 Georgia,serif;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.brand-hero-heading span{
  color:var(--red2);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.23em;
  text-transform:uppercase;
}

.brand-hero-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,38px);
  align-items:stretch;
  max-width:1180px;
  margin:28px auto 0;
}
.brand-hero-images figure{
  position:relative;
  min-height:540px;
  margin:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(var(--red-rgb),.45);
  box-shadow:0 24px 55px rgba(0,0,0,.6);
}
.brand-hero-images figure::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 55px rgba(0,0,0,.75);
  pointer-events:none;
}
.brand-hero-images img{
  width:100%;
  height:100%;
  max-height:760px;
  display:block;
  object-fit:contain;
  object-position:center;
}

/* Single combined gold-seal logo replaces the old two-logo hero grid.
   No black box behind it -- the seal floats on the hero's own gradient. */
.brand-hero-images-single{
  grid-template-columns:1fr;
  max-width:420px;
}
.brand-hero-images-single figure{
  min-height:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.brand-hero-images-single figure::after{
  display:none;
}
.brand-hero-images-single img{
  max-height:340px;
  width:auto;
  height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
}

/* Hero banner: knight with hands raised holding the "Research Without Limits!"
   sign. Used at every screen size now -- replaces the separate text heading and
   the cropped circular knight crest below, which are hidden site-wide. The
   mobile media query further down sets its own compact width for small screens. */
.brand-hero-knight-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  perspective:1400px;
  margin:6px auto 30px;
}
.brand-hero-knight-wrap::before{
  content:none;
}
.brand-hero-mobile-banner{
  position:relative;
  z-index:1;
  display:block!important;
  width:min(48vw,620px)!important;
  height:auto!important;
  margin:0!important;
  transform-style:preserve-3d;
  animation:knightFloat3d 6s ease-in-out infinite;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.55))!important;
}
@keyframes knightGlowPulse{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
@keyframes knightFloat3d{
  0%,100%{transform:rotateY(-4deg) rotateX(2deg) translateY(0)}
  50%{transform:rotateY(4deg) rotateX(-1deg) translateY(-10px)}
}
@media(prefers-reduced-motion:reduce){
  .brand-hero-mobile-banner,
  .brand-hero-knight-wrap::before{
    animation:none!important;
  }
}
.brand-hero-heading,
.brand-hero-images{
  display:none!important;
}

.brand-hero-message{
  position:relative;
  max-width:1180px;
  margin:24px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:26px 32px;
  background:linear-gradient(100deg,rgba(var(--red-rgb),.72),rgba(8,8,8,.94) 60%);
  border:1px solid rgba(var(--red-rgb),.55);
  border-left:none;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  box-shadow:0 16px 38px rgba(0,0,0,.32);
}
.brand-hero-message::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--red2);
}
.brand-hero-message strong{
  color:#F3EEDF;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.brand-hero-message p{
  max-width:780px;
  margin:6px 0 0;
  color:#c3c3c3;
  line-height:1.55;
}
.brand-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.founder-story-section{
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  align-items:start;
}
.founder-brand{
  position:sticky;
  top:185px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.founder-brand img{
  width:100%;
  height:440px;
  object-fit:contain;
  background:var(--bg);
  border:1px solid rgba(var(--red-rgb),.35);
}
.founder-story-copy h2{
  max-width:780px;
  font-size:clamp(2rem,4vw,3.8rem);
}
.founder-story-copy>p{
  color:var(--muted);
  line-height:1.78;
}
.founder-trust-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:22px 0;
}
.founder-trust-grid article{
  padding:16px;
  background:var(--surface2);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--red2);
}
.founder-trust-grid strong,
.founder-trust-grid span{
  display:block;
}
.founder-trust-grid strong{
  text-transform:uppercase;
  font-size:.8rem;
}
.founder-trust-grid span{
  margin-top:6px;
  color:var(--muted);
  line-height:1.45;
  font-size:.8rem;
}
.founder-disclaimer{
  padding:14px;
  background:rgba(var(--red-rgb),.08);
  border-left:3px solid var(--red2);
  font-size:.75rem;
}

@media(max-width:1120px){
  .unified-site-header{
    grid-template-columns:230px 1fr auto;
  }
  .unified-header-info{
    grid-template-columns:1fr 1fr;
  }
  .unified-header-info>div,
  .unified-header-info>a{
    padding:5px 9px;
  }
}

@media(max-width:820px){
  .unified-site-header{
    min-height:96px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    padding:8px 14px;
  }
  .unified-brand{
    width:min(250px,65vw);
    height:78px;
  }
  .unified-header-info{
    display:none;
  }
  .unified-header-actions .menu-toggle{
    display:grid;
  }
  .unified-header-actions .order-now{
    min-width:58px;
    padding:0 10px;
    font-size:0;
  }
  .unified-header-actions .order-now span{
    font-size:1.25rem;
  }
  .main-nav{
    top:96px;
  }
  main{
    padding-top:148px;
  }
  .brand-hero{
    padding:28px 12px 24px;
  }
  .brand-hero-heading h1{
    font-size:clamp(2.55rem,12vw,4.7rem);
  }
  .brand-hero-images{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:20px;
  }
  .brand-hero-images figure{
    min-height:340px;
  }
  .brand-hero-images img{
    height:auto;
    max-height:520px;
  }
  .brand-hero-message{
    grid-template-columns:1fr;
    padding:18px;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  }
  .brand-hero-actions{
    justify-content:stretch;
  }
  .brand-hero-actions a{
    width:100%;
  }
  .founder-story-section{
    grid-template-columns:1fr;
  }
  .founder-brand{
    position:static;
    grid-template-columns:1fr 1fr;
  }
  .founder-brand img{
    height:330px;
  }
}

@media(max-width:540px){
  .unified-brand{
    width:min(210px,62vw);
    height:72px;
  }
  .unified-header-actions{
    gap:6px;
  }
  .account-button,
  .menu-toggle{
    width:44px;
    height:44px;
  }
  .brand-hero-heading p{
    font-size:.65rem;
    letter-spacing:.18em;
  }
  .brand-hero-heading span{
    font-size:.62rem;
    letter-spacing:.15em;
  }
  .brand-hero-images{
    grid-template-columns:1fr;
  }
  .brand-hero-images figure{
    min-height:0;
  }
  .brand-hero-images img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  .founder-brand{
    grid-template-columns:1fr;
  }
  .founder-brand img{
    height:auto;
    max-height:560px;
  }
  .founder-trust-grid{
    grid-template-columns:1fr;
  }
}

/* Production 2.8 tested entrance and centered signup */
.signup-top-image-modal{width:min(760px,96vw);max-height:94vh;overflow:auto;display:block;background:var(--surface);border:2px solid var(--red2);border-radius:16px;box-shadow:0 28px 100px rgba(0,0,0,.85),0 0 44px rgba(var(--red-rgb),.25)}
.signup-full-image{width:100%;padding:18px 18px 0;display:grid;place-items:center;background:#000}
.signup-full-image img{display:block;width:min(460px,100%);height:auto;max-height:360px;object-fit:contain;object-position:center;filter:none}
.signup-centered-content{padding:22px 30px 28px;text-align:left}
.signup-centered-content>.eyebrow,.signup-centered-content>h2,.signup-centered-content>.signup-intro{text-align:center}
.signup-centered-content h2{margin:5px 0 10px;font:500 clamp(2.2rem,5vw,3.7rem)/1 Georgia,serif}
.signup-centered-content .signup-form-grid{grid-template-columns:1fr 1fr}
#closeSignup,#notRightNow,.signup-submit-button{pointer-events:auto!important;touch-action:manipulation;position:relative;z-index:50}
#enterResearchSite.verification-ready{background:linear-gradient(135deg,var(--red2),var(--red-deep))!important;opacity:1!important;cursor:pointer!important}
@media(max-width:620px){.signup-top-image-modal{width:100%;max-height:none;margin-bottom:85px}.signup-full-image{padding:12px 12px 0}.signup-full-image img{width:min(320px,100%);max-height:290px}.signup-centered-content{padding:20px 14px 24px}.signup-centered-content .signup-form-grid{grid-template-columns:1fr}}
\n\n/* Production 3.0 — uploaded branding and organized mobile catalog */
.header-logo-mobile{display:none!important}
.header-logo-desktop{display:block!important}
.brand-hero-heading>p,
.brand-hero-heading>span{display:none!important}
.brand-hero-heading h1{margin:0!important}

/* Remove any legacy mobile purity/marketing fragments if an older block survives. */
.hero-points,.hero-features,.mobile-purity-strip,.purity-line{display:none!important}

.stock-status-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}

/* The vial count that sits beside the In Stock badge. */
.stock-count{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:2px 7px;
  border:1px solid rgba(212,175,55,.42);
  border-radius:999px;
  background:rgba(212,175,55,.10);
  color:var(--gold-ink,#E9D8A6);
  font-size:.62rem;
  letter-spacing:.03em;
  white-space:nowrap;
  line-height:1.5;
}
.stock-count strong{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:0;
  color:#F4E4B2;
}
.stock-count-zero{
  border-color:rgba(190,60,60,.48);
  background:rgba(190,60,60,.12);
  color:#F0B9B9;
}
.stock-count-zero strong{color:#FFD2D2}
[data-theme="light"] .stock-count{
  border-color:rgba(140,105,20,.42);
  background:rgba(212,175,55,.16);
  color:#6B5310;
}
[data-theme="light"] .stock-count strong{color:#4A3A08}
[data-theme="light"] .stock-count-zero{
  border-color:rgba(150,40,40,.42);
  background:rgba(190,60,60,.10);
  color:#8C2020;
}
[data-theme="light"] .stock-count-zero strong{color:#6E1414}
.stock-status-row .stock-badge{margin-top:0}
.stock-dot{
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-radius:50%;
  background:#38b64b;
  box-shadow:0 0 0 3px rgba(56,182,75,.14),0 0 10px rgba(56,182,75,.35);
}
.stock-dot.limited-stock{background:var(--amber);box-shadow:0 0 0 3px rgba(var(--amber-rgb),.15)}
.stock-dot.out-of-stock,.stock-dot.discontinued{background:var(--danger);box-shadow:0 0 0 3px rgba(var(--danger-rgb),.15)}
.stock-dot.coming-soon{background:#609ad0;box-shadow:0 0 0 3px rgba(96,154,208,.15)}

@media(max-width:820px){
  .header-logo-desktop{display:none!important}
  .header-logo-mobile{display:block!important}
  .unified-brand{
    width:min(228px,62vw)!important;
    height:82px!important;
  }
  .unified-brand img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .brand-hero-heading h1{
    font-size:clamp(2.45rem,11.6vw,4.55rem)!important;
    line-height:.94!important;
    text-align:center!important;
  }
}

@media(max-width:700px){
  /* Mobile hero: single knight-with-banner graphic replaces the text heading
     and circular knight crest -- the banner already has the wordmark baked in. */
  .brand-hero{padding:25px 12px 24px!important}
  /* While the pop-out search bar is open, push the hero's own content down so
     the bar has real breathing room to sit in the plain black gap below the
     Templar backdrop scene, instead of overlapping the TRINITY wordmark. */
  body.compact-search-open .brand-hero{padding-top:92px!important}
  .brand-hero-heading{display:none!important}
  .brand-hero-images{display:none!important}
  .brand-hero-knight-wrap{margin:4px auto 18px!important}
  .brand-hero-mobile-banner{
    display:block!important;
    width:min(94vw,480px)!important;
    height:auto!important;
    margin:0!important;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))!important;
  }
  .brand-hero-message{
    width:min(520px,100%)!important;
    box-sizing:border-box!important;
    text-align:center!important;
  }
  .brand-hero-message p{margin-inline:auto!important}
  .brand-hero-actions{justify-content:center!important}

  /* Mobile cards: centered vial, compact stock circle, readable hierarchy. */
  .card-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
    width:min(520px,100%)!important;
    margin-inline:auto!important;
  }
  .product-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    padding:18px 16px!important;
    border-radius:14px!important;
    text-align:center!important;
    overflow:visible!important;
  }
  .product-card .favorite-button{top:12px!important;right:12px!important}
  .product-card .badge{top:12px!important;left:12px!important}
  .product-visual{
    width:132px!important;
    height:190px!important;
    margin:0 auto 8px!important;
  }
  .product-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .product-card h3{
    width:100%!important;
    min-height:0!important;
    margin:7px 0 3px!important;
    font-size:1.35rem!important;
    text-align:center!important;
  }
  .product-focus{
    width:min(360px,100%)!important;
    min-height:0!important;
    margin:4px auto 10px!important;
    line-height:1.45!important;
    font-size:.78rem!important;
    text-align:center!important;
  }
  .vial-amount-control{
    width:min(340px,100%)!important;
    margin:4px auto!important;
  }
  .dose-select,.single-dose-display{
    width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important;
  }
  .stock-status-row{
    justify-content:center!important;
    width:100%!important;
    margin:10px 0!important;
  }
  .stock-badge{
    border:0!important;
    padding:0!important;
    font-size:.68rem!important;
    letter-spacing:.06em!important;
  }
  .stock-dot{width:12px!important;height:12px!important;flex-basis:12px!important}
  .prices{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:5px!important;
  }
  .price-box{
    min-height:82px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:10px 7px!important;
    border-radius:9px!important;
  }
  .price-box strong{font-size:1.22rem!important}
  .product-cart-actions{
    width:100%!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:12px!important;
  }
  .add-cart-button{min-height:48px!important;border-radius:8px!important}
  .call-order-link,.research-coa-button{width:100%!important;box-sizing:border-box!important}
  .call-order-link{padding:10px 0!important}
  .research-coa-button{min-height:46px!important;border-radius:8px!important}
}

@media(max-width:430px){
  .unified-brand{width:min(185px,55vw)!important;height:72px!important}
  .brand-hero-heading h1{font-size:clamp(2.18rem,11vw,3.25rem)!important}
  .prices{grid-template-columns:1fr!important}
  .price-box{min-height:68px!important}
}


/* Production 3.1 — exact inventory, mobile branding, centered catalog */
/* Production 3.2 — dual header logos (Trinity Peptides knight + Trinity & Co. seal) side by side */
.mobile-header-brand,
.unified-brand-second{
  display:flex!important;
  align-items:center!important;
  width:130px!important;
  height:76px!important;
  min-width:64px!important;
  flex:0 1 auto!important;
}
.unified-site-header{
  grid-template-columns:auto minmax(0,1fr) auto!important;
}
.unified-brand-group{
  grid-column:1!important;
}
.unified-header-info{
  grid-column:2!important;
}
.unified-header-actions{
  grid-column:3!important;
}

/* Exact hero title and artwork. */
.brand-hero-heading>p,
.brand-hero-heading>span,
.hero-points,
.hero-features,
.mobile-purity-strip,
.purity-line{
  display:none!important;
}
.brand-hero-heading h1{
  text-align:center!important;
  text-transform:uppercase!important;
}
.brand-hero-images img{
  object-fit:contain!important;
}

/* Center product information beneath the vial on desktop and mobile. */
.product-card{
  text-align:center!important;
}
.product-visual{
  margin-left:auto!important;
  margin-right:auto!important;
}
.product-card h3,
.product-focus,
.vial-amount-control,
.stock-status-row{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.product-focus{
  max-width:330px!important;
}
.vial-amount-control{
  width:100%!important;
}
.stock-status-row{
  justify-content:center!important;
}
.dose-select,
.single-dose-display{
  text-align:center!important;
}

/* Small circular stock indicator: green in stock, red in transit/unavailable. */
.stock-dot{
  width:12px!important;
  height:12px!important;
  flex:0 0 12px!important;
  border-radius:50%!important;
  background:#35b84b!important;
  box-shadow:0 0 0 3px rgba(53,184,75,.14),0 0 10px rgba(53,184,75,.35)!important;
}
.stock-dot.in-transit,
.stock-dot.out-of-stock,
.stock-dot.coming-soon,
.stock-dot.discontinued{
  background:var(--danger)!important;
  box-shadow:0 0 0 3px rgba(var(--danger-rgb),.14),0 0 10px rgba(var(--danger-rgb),.32)!important;
}
.stock-dot.limited-stock{
  background:var(--amber)!important;
  box-shadow:0 0 0 3px rgba(var(--amber-rgb),.15)!important;
}
.stock-badge.in-transit{
  color:var(--amber)!important;
  border-color:rgba(var(--amber-rgb),.6)!important;
}

/* Our Story: unboxed images flanking the copy. */
.founder-story-triptych{
  display:grid!important;
  grid-template-columns:minmax(190px,.52fr) minmax(0,1.45fr) minmax(190px,.52fr)!important;
  gap:clamp(22px,4vw,58px)!important;
  align-items:center!important;
}
.founder-side-image{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.founder-side-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:720px;
  object-fit:contain;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.journal-promo-card{
  flex-direction:column;
  gap:16px;
}
.journal-cover-button{
  position:relative;
  display:block;
  width:100%;
  max-width:280px;
  padding:0;
  border:2px solid var(--red2);
  background:#000;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  transition:.25s;
}
.journal-cover-button:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,0,.65)}
.journal-cover-button img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.journal-coming-soon-tag{
  position:absolute;
  top:14px;
  left:-8px;
  padding:6px 16px;
  background:var(--red2);
  color:var(--on-accent);
  font:900 .72rem/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.journal-promo-caption{
  max-width:280px;
  margin:0;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.55;
}
.journal-promo-caption strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.founder-story-copy{
  text-align:left;
}
.founder-story-copy>.eyebrow,
.founder-story-copy>h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Mobile-only top logo uses the uploaded knight artwork. */
@media(max-width:820px){
  .unified-site-header{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .unified-brand-group{
    grid-column:1!important;
    min-width:0!important;
  }
  .mobile-header-brand,
  .unified-brand-second{
    display:flex!important;
    width:min(120px,32vw)!important;
    height:64px!important;
    flex:0 1 auto!important;
    min-width:0!important;
  }
  .mobile-header-brand img,
  .unified-brand-second img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .unified-brand-group{
    gap:6px!important;
  }
  .unified-header-info{
    display:none!important;
  }
  .unified-header-actions{
    grid-column:2!important;
  }
  .brand-hero-heading h1{
    font-size:clamp(2.2rem,11vw,3.65rem)!important;
    line-height:.94!important;
  }
  .founder-story-triptych{
    grid-template-columns:1fr!important;
    width:min(620px,100%)!important;
    margin-inline:auto!important;
  }
  .founder-side-image{
    width:min(380px,88%)!important;
    margin-inline:auto!important;
  }
  .founder-side-left{order:1}
  .founder-story-copy{order:2;text-align:center!important}
  .founder-side-right{order:3}
  .founder-story-copy>p{text-align:left}
}

/* Refined centered mobile catalog cards. */
@media(max-width:700px){
  .product-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    padding:20px 16px!important;
    border-radius:15px!important;
  }
  .product-visual{
    width:138px!important;
    height:198px!important;
    margin:0 auto 8px!important;
  }
  .product-card h3{
    width:100%!important;
    min-height:0!important;
    font-size:1.32rem!important;
  }
  .product-focus{
    width:min(370px,100%)!important;
    min-height:0!important;
    margin:5px auto 11px!important;
    text-align:center!important;
  }
  .vial-amount-control{
    width:min(350px,100%)!important;
  }
  .stock-status-row{
    width:100%!important;
    justify-content:center!important;
    margin:11px 0!important;
  }
  .stock-badge{
    border:0!important;
    padding:0!important;
  }
  .prices{
    width:100%!important;
  }
}

.table-stock-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:7px;
  white-space:nowrap;
}
/* The list view scrolls sideways rather than stacking the count under the
   badge, so the status column always reads as one line. */
.table-wrap td:nth-child(4),
.table-wrap th:nth-child(4){min-width:250px}
.table-stock-status .stock-count{font-size:.66rem;padding:2px 8px}


/* Production 3.1 final — product-specific vial labels */
.product-visual{
  position:relative!important;
  width:190px!important;
  height:276px!important;
  margin:0 auto 10px!important;
  overflow:hidden!important;
  display:block!important;
}
.product-visual>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.vial-dynamic-label{
  position:absolute;
  left:27px;
  right:27px;
  top:106px;
  min-height:125px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:9px 6px 8px;
  overflow:hidden;
  color:var(--ink);
  text-align:center;
  background:
    linear-gradient(180deg,rgba(4,12,22,.98),rgba(5,9,15,.99));
  border-top:2px solid var(--red-deep);
  border-bottom:2px solid var(--red-deep);
  box-shadow:0 0 10px rgba(0,0,0,.65);
}
.vial-brand-line{
  display:block;
  width:100%;
  color:#d8dce2;
  font-size:7px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:.08em;
  white-space:nowrap;
}
.vial-dynamic-label .vial-name{
  position:static!important;
  width:100%!important;
  max-height:3.3em;
  overflow:hidden;
  color:var(--ink)!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.08!important;
  text-align:center!important;
  text-transform:uppercase;
}
.vial-dynamic-label .vial-dose{
  position:static!important;
  color:var(--red2)!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-transform:uppercase;
}
.vial-dynamic-label small{
  color:#c2c6cb;
  font-size:6px;
  font-weight:800;
  line-height:1;
  letter-spacing:.05em;
}
@media(max-width:700px){
  .product-visual{
    width:205px!important;
    height:298px!important;
  }
  .vial-dynamic-label{
    left:29px;
    right:29px;
    top:115px;
    min-height:134px;
  }
  .vial-dynamic-label .vial-name{
    font-size:11px!important;
  }
  .vial-dynamic-label .vial-dose{
    font-size:14px!important;
  }
}


/* Production 3.2 — wrapped vial labels and precise stock filtering */
.wrapped-vial-visual{
  position:relative!important;
  width:214px!important;
  height:310px!important;
  margin:0 auto 13px!important;
  overflow:visible!important;
}
.wrapped-vial-visual .vial-glass-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:contrast(1.05) brightness(.92)!important;
}
.wrapped-vial-label{
  position:absolute;
  left:34px;
  right:34px;
  top:83px;
  height:181px;
  overflow:hidden;
  border-radius:12px 12px 22px 22px / 10px 10px 32px 32px;
  transform:perspective(430px) rotateX(.5deg);
  box-shadow:
    inset 15px 0 15px rgba(0,0,0,.55),
    inset -15px 0 15px rgba(0,0,0,.55),
    0 5px 12px rgba(0,0,0,.62);
  clip-path:polygon(5% 0,95% 0,100% 12%,98% 88%,92% 100%,8% 100%,2% 88%,0 12%);
}
.wrapped-label-art{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:.72;
}
.wrapped-vial-label::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 18%,transparent 82%,rgba(0,0,0,.62)),
    radial-gradient(ellipse at center,transparent 56%,rgba(0,0,0,.32));
  pointer-events:none;
}
.wrapped-label-copy{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 10px 7px;
  color:var(--ink);
  text-align:center;
  text-shadow:0 2px 2px #000;
}
.wrapped-brand{
  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;
}
.wrapped-product-name{
  width:100%;
  max-height:3.1em;
  margin-top:38px;
  overflow:hidden;
  font:900 12px/1.03 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.wrapped-research{
  width:92%;
  margin-top:4px;
  padding:3px 4px;
  border:1px solid var(--red-deep2);
  border-radius:5px;
  color:var(--red2);
  font-size:6px;
  font-weight:900;
  letter-spacing:.11em;
}
.wrapped-dose{
  margin-top:4px;
  color:var(--red2);
  font:1000 17px/1 Arial,sans-serif;
}
.wrapped-icons{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid rgba(var(--red-rgb),.72);
}
.wrapped-icons span{
  font-size:4.5px;
  font-weight:900;
  line-height:1.12;
}
.wrapped-label-copy small{
  margin-top:auto;
  color:var(--red2);
  font-size:4.8px;
  font-weight:900;
  letter-spacing:.04em;
}

/* Smaller centered amount control on desktop and mobile. */
.vial-amount-control{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
.dose-select,
.single-dose-display{
  width:auto!important;
  min-width:88px!important;
  max-width:132px!important;
  height:auto!important;
  min-height:30px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:4px auto 0!important;
  padding:5px 12px!important;
  border:1px solid var(--red-deep2)!important;
  border-radius:999px!important;
  background:var(--surface)!important;
  color:var(--ink)!important;
  font-size:.77rem!important;
  line-height:1!important;
  text-align:center!important;
}

/* Hide the verbose live-catalog heading and counts on phones only. */
@media(max-width:700px){
  .catalog-heading>div:first-child,
  .catalog-message,
  .kit-pricing-note,
  .featured-products-heading,
  #resultCount{
    display:none!important;
  }
  .catalog-heading{
    min-height:0!important;
    margin:0 0 12px!important;
  }
  .catalog-heading-actions{
    margin:0 0 10px!important;
    justify-content:center!important;
  }
  .wrapped-vial-visual{
    width:228px!important;
    height:330px!important;
  }
  .wrapped-vial-label{
    left:36px;
    right:36px;
    top:89px;
    height:192px;
  }
  .wrapped-product-name{
    margin-top:41px;
    font-size:12.5px;
  }
  .wrapped-dose{
    font-size:18px;
  }
  .dose-select,
  .single-dose-display{
    min-width:82px!important;
    max-width:118px!important;
    min-height:28px!important;
    padding:4px 10px!important;
    font-size:.72rem!important;
  }
}


/* Production 3.3 — exact uploaded vial artwork with dynamic product text */
.exact-vial-visual{
  position:relative!important;
  width:100%!important;
  max-width:232px!important;
  height:auto!important;
  aspect-ratio:2/3!important;
  margin:0 auto 14px!important;
  overflow:hidden!important;
  display:block!important;
}
.exact-vial-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.exact-vial-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  color:var(--ink);
  text-align:center;
}
.exact-vial-name{
  position:absolute;
  left:24%;
  right:23%;
  top:58.9%;
  min-height:8.4%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#f2f2f2;
  font:900 clamp(9px,1vw,14px)/1.02 Arial,sans-serif;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-shadow:0 2px 2px #000;
}
.exact-vial-dose{
  position:absolute;
  left:34%;
  right:34%;
  top:68.4%;
  min-height:6.4%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--red2);
  font:1000 clamp(13px,1.25vw,19px)/1 Arial,sans-serif;
  text-transform:none;
  text-shadow:0 2px 2px #000;
}
.exact-vial-compound{
  position:absolute;
  left:17%;
  width:29%;
  top:80.3%;
  max-height:4.2%;
  overflow:hidden;
  color:var(--ink);
  font:700 6px/1.05 Arial,sans-serif;
  text-align:left;
  text-transform:uppercase;
}

@media(max-width:700px){
  .exact-vial-visual{
    width:100%!important;
    max-width:248px!important;
    height:auto!important;
    aspect-ratio:2/3!important;
  }
  .exact-vial-name{
    font-size:13px!important;
  }
  .exact-vial-dose{
    font-size:18px!important;
  }
  .exact-vial-compound{
    font-size:6.4px!important;
  }
}


/* Production 3.4 — clean full-resolution vial presentation
   (width capped responsively so the art never overflows its card;
   container-type lets vial label text scale with the ACTUAL rendered
   width via cqw units, instead of a fixed px tuned for the 270px cap) */
.exact-vial-visual{
  width:100%!important;
  max-width:270px!important;
  height:auto!important;
  aspect-ratio:2/3!important;
  margin:0 auto 16px!important;
  overflow:hidden!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.34));
  container-type:inline-size!important;
}
.exact-vial-art{
  image-rendering:auto!important;
  object-fit:contain!important;
  filter:none!important;
}
.exact-vial-name{
  left:26.3%!important;
  right:25.8%!important;
  top:59.65%!important;
  min-height:6.75%!important;
  padding:0 2px;
  color:#eee!important;
  font:900 15px/1 Arial,sans-serif!important;
  letter-spacing:.015em!important;
  text-shadow:0 2px 3px #000!important;
  white-space:normal;
  overflow:hidden;
}
.exact-vial-name.medium-name{
  font-size:12px!important;
  line-height:1.02!important;
}
.exact-vial-name.long-name{
  font-size:9.5px!important;
  line-height:1.02!important;
}
.exact-vial-dose{
  left:38.8%!important;
  right:37.8%!important;
  top:69.85%!important;
  min-height:4.55%!important;
  color:var(--red2)!important;
  font:1000 18px/1 Arial,sans-serif!important;
  text-shadow:0 2px 2px #000!important;
}
.exact-vial-compound{
  left:23.8%!important;
  width:22.3%!important;
  top:79.38%!important;
  max-height:2.7%!important;
  color:var(--ink)!important;
  font:700 6px/1 Arial,sans-serif!important;
  white-space:nowrap;
  text-overflow:ellipsis;
}

@media(max-width:700px){
  .exact-vial-visual{
    width:100%!important;
    max-width:260px!important;
    height:auto!important;
    aspect-ratio:2/3!important;
  }
  .exact-vial-name{
    font-size:14px!important;
  }
  .exact-vial-name.medium-name{
    font-size:11.5px!important;
  }
  .exact-vial-name.long-name{
    font-size:9px!important;
  }
  .exact-vial-dose{
    font-size:17px!important;
  }
  .exact-vial-compound{
    font-size:5.8px!important;
  }
}

/* Final 3.4 alignment: preserve the entire Trinity Peptides LLC wordmark. */
.exact-vial-name{
  top:60.68%!important;
  min-height:5.95%!important;
}


/* Production 3.5 — Current Flyer and centered strength displays */
.flyer-share-trigger{cursor:pointer}
button.qr-sidebar.flyer-share-trigger{align-items:center;text-align:left}
button.qr-sidebar.flyer-share-trigger img{
  width:92px;height:116px;object-fit:cover;object-position:top center;
  border:1px solid var(--line-strong);background:#fff
}
button.qr-sidebar.flyer-share-trigger small{
  display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.35;text-transform:none
}
button.footer-qr.flyer-share-trigger{
  display:flex;flex-direction:column;align-items:center;text-align:center
}
button.footer-qr.flyer-share-trigger img{
  width:128px;max-height:164px;object-fit:cover;object-position:top center;
  margin:10px auto 6px;background:#fff;border:1px solid var(--line-strong)
}
button.footer-qr.flyer-share-trigger span{color:var(--muted);font-size:10px;line-height:1.4}
.flyer-modal{width:min(1040px,94vw);max-height:94vh;overflow:auto}
.flyer-share-content{
  grid-template-columns:minmax(300px,.95fr) minmax(280px,.55fr);align-items:start
}
.flyer-share-image{padding:10px;background:#fff}
.flyer-share-image img{
  width:100%;max-height:72vh;object-fit:contain;object-position:top center
}
.flyer-description{margin:0 0 18px;color:#c4c4c4;line-height:1.65}
.flyer-share-actions .primary-button,
.flyer-share-actions .secondary-share-button{width:100%;text-align:center}

/* Center every visible vial amount and strength selector. */
.vial-amount-control,
.vial-amount-control label,
.dose-select,
.single-dose-display,
.exact-vial-dose,
.wrapped-dose,
.vial-dose{text-align:center!important}
.dose-select,
.single-dose-display{
  margin-left:auto!important;margin-right:auto!important;justify-content:center!important;
  text-align-last:center!important
}
.dose-select option{text-align:center}
.exact-vial-dose{
  display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important
}
.product-card .vial-amount-control{align-items:center!important;justify-content:center!important}
.product-card .vial-amount-control>*{margin-inline:auto!important}

@media(max-width:700px){
  .flyer-modal{width:min(96vw,620px);max-height:92vh}
  .flyer-share-content{grid-template-columns:1fr}
  .flyer-share-image img{max-height:none}
  button.qr-sidebar.flyer-share-trigger{justify-content:center;text-align:center}
  button.qr-sidebar.flyer-share-trigger img{width:112px;height:142px}
}


/* ==========================================================================
   Production 4.0 — Mobile Proportion Correction (final, wins all cascades)
   ========================================================================== */

/* Hero brand images: compact 2-up badges instead of full-bleed stacked art */
@media(max-width:700px){
  .brand-hero-images{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:min(420px,94%)!important;
    margin:18px auto 0!important;
  }
  .brand-hero-images figure{
    min-height:0!important;
    aspect-ratio:1/1!important;
    padding:12px!important;
    border-radius:12px!important;
  }
  .brand-hero-images img{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }
}
@media(max-width:430px){
  .brand-hero-images{
    width:min(300px,92%)!important;
    gap:8px!important;
  }
  .brand-hero-images figure{
    padding:9px!important;
  }
}

/* Kit savings badge: further shrink on small phones */
@media(max-width:430px){
  .kit-savings-banner{
    grid-template-columns:52px 1fr!important;
    gap:12px!important;
    padding:16px 13px!important;
  }
  .kit-savings-icon{
    width:46px!important;
    height:46px!important;
    font-size:1.2rem!important;
    box-shadow:0 0 0 5px rgba(var(--red-rgb),.18)!important;
  }
}

/* Product vial cards: correct oversized mobile footprint, keep 2:3 artwork ratio
   (capped responsively so the art never overflows its card into the next column) */
@media(max-width:700px){
  .exact-vial-visual{
    width:100%!important;
    max-width:190px!important;
    height:auto!important;
    aspect-ratio:2/3!important;
    margin:0 auto 12px!important;
  }
  .exact-vial-name{
    font-size:10.5px!important;
  }
  .exact-vial-name.medium-name{
    font-size:8.5px!important;
  }
  .exact-vial-name.long-name{
    font-size:6.7px!important;
  }
  .exact-vial-dose{
    font-size:12.5px!important;
  }
  .exact-vial-compound{
    font-size:4.2px!important;
  }
}
@media(max-width:430px){
  .exact-vial-visual{
    width:100%!important;
    max-width:165px!important;
    height:auto!important;
    aspect-ratio:2/3!important;
    margin:0 auto 10px!important;
  }
  .exact-vial-name{
    font-size:9.2px!important;
  }
  .exact-vial-name.medium-name{
    font-size:7.3px!important;
  }
  .exact-vial-name.long-name{
    font-size:5.8px!important;
  }
  .exact-vial-dose{
    font-size:11px!important;
  }
  .exact-vial-compound{
    font-size:4px!important;
  }
}


/* ==========================================================================
   Production 5.0 — Researcher Verification & Signup Popups, Full Redesign
   ========================================================================== */

/* ---------- Researcher / Age Verification Gate ---------- */
.verification-overlay{
  background:
    radial-gradient(circle at 50% 18%,rgba(var(--red-rgb),.20),transparent 45%),
    rgba(2,2,2,.96)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  padding:22px!important;
}
.verification-card{
  position:relative!important;
  width:min(460px,100%)!important;
  padding:38px 34px 30px!important;
  background:linear-gradient(165deg,var(--surface2),var(--bg))!important;
  border:1px solid var(--line-strong)!important;
  border-radius:14px!important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(var(--red-rgb),.35) inset!important;
  text-align:center!important;
}
.verification-card::before{
  content:"";
  display:block;
  width:56px;
  height:3px;
  margin:0 auto 20px;
  background:linear-gradient(90deg,transparent,var(--red2),transparent);
}
.verification-card>img{
  display:block!important;
  width:74px!important;
  height:74px!important;
  object-fit:contain!important;
  margin:0 auto 16px!important;
  filter:drop-shadow(0 6px 14px rgba(var(--red-rgb),.30));
}
.verification-card .eyebrow{
  justify-self:center!important;
}
.verification-card h2{
  font:500 1.85rem/1.08 Georgia,serif!important;
  margin:6px 0 12px!important;
  letter-spacing:.01em!important;
}
.verification-card>p{
  color:#bcbcbc!important;
  font-size:.86rem!important;
  line-height:1.6!important;
  margin:0 0 6px!important;
}
.verification-card label{
  display:grid!important;
  grid-template-columns:22px 1fr!important;
  gap:12px!important;
  align-items:start!important;
  margin:12px 0!important;
  padding:14px 15px!important;
  background:var(--surface)!important;
  border:1px solid var(--line-strong)!important;
  border-radius:9px!important;
  line-height:1.42!important;
  font-size:.82rem!important;
  text-align:left!important;
  cursor:pointer!important;
  transition:border-color .2s,background .2s!important;
}
.verification-card label:hover{
  border-color:rgba(var(--red-rgb),.55)!important;
  background:linear-gradient(145deg,rgba(var(--red-rgb),.08),var(--surface))!important;
}
.verification-card input{
  width:20px!important;
  height:20px!important;
  margin:1px 0 0!important;
  accent-color:var(--red2)!important;
  cursor:pointer!important;
}
.verification-card .primary-button{
  width:100%!important;
  min-height:52px!important;
  margin-top:16px!important;
  border-radius:8px!important;
  font-size:.86rem!important;
  letter-spacing:.05em!important;
}
.verification-card .primary-button:not(:disabled){
  box-shadow:0 12px 30px rgba(var(--red-rgb),.30)!important;
}
.verification-disclaimer{
  margin-top:14px!important;
  font-size:.68rem!important;
  color:#7f7f7f!important;
  line-height:1.55!important;
}
.verification-exit{
  margin-top:10px!important;
  font-size:.78rem!important;
  color:var(--muted)!important;
}
@media(max-width:520px){
  .verification-card{
    width:100%!important;
    padding:30px 20px 24px!important;
    border-radius:12px!important;
  }
  .verification-card>img{
    width:60px!important;
    height:60px!important;
    margin-bottom:12px!important;
  }
  .verification-card h2{
    font-size:1.5rem!important;
  }
  .verification-card label{
    padding:12px 13px!important;
    font-size:.79rem!important;
  }
}

/* ---------- Signup / Discounts Popup ---------- */
#signupOverlay.overlay.open{
  padding:20px!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(var(--red-rgb),.18),transparent 42%),
    rgba(2,2,2,.94)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}
.signup-top-image-modal{
  width:min(880px,94vw)!important;
  max-height:88vh!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(240px,.78fr) minmax(360px,1.22fr)!important;
  background:var(--surface)!important;
  border:1px solid var(--line-strong)!important;
  border-radius:14px!important;
  box-shadow:
    0 32px 100px rgba(0,0,0,.75),
    0 0 0 1px rgba(var(--red-rgb),.30) inset!important;
}
.signup-top-image-modal .modal-close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(0,0,0,.65)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:50%!important;
  font-size:1.55rem!important;
  z-index:20!important;
  color:#F3EEDF!important;
}
.signup-full-image{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  padding:0!important;
  display:block!important;
  background:#000!important;
  overflow:hidden!important;
}
.signup-full-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 18%!important;
  filter:contrast(1.06) saturate(.94)!important;
}
.signup-full-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 55%,rgba(0,0,0,.92) 100%),
    linear-gradient(90deg,transparent 78%,rgba(5,5,5,.55) 100%);
  pointer-events:none;
}
.signup-image-caption{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:3;
  display:block;
  color:var(--red2);
  font:900 .72rem/1 Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.signup-centered-content{
  min-width:0!important;
  overflow-y:auto!important;
  padding:34px 34px 26px!important;
  text-align:left!important;
}
.signup-centered-content>.eyebrow,
.signup-centered-content>h2,
.signup-centered-content>.signup-intro{
  text-align:left!important;
}
.signup-centered-content h2{
  margin:5px 0 10px!important;
  font:500 clamp(1.9rem,3.4vw,2.5rem)/1.05 Georgia,serif!important;
}
.signup-intro{
  color:#c2c2c2!important;
  line-height:1.6!important;
  margin:0 0 16px!important;
}
.signup-centered-content .ordering-notice{
  margin:0 0 18px!important;
}
.signup-centered-content .signup-form-grid{
  grid-template-columns:1fr 1fr!important;
  gap:11px!important;
}
.signup-centered-content input,
.signup-centered-content textarea{
  width:100%!important;
  box-sizing:border-box!important;
  min-height:46px!important;
  padding:0 13px!important;
  background:var(--surface2)!important;
  color:var(--ink)!important;
  border:1px solid var(--line-strong)!important;
  border-radius:7px!important;
  font-size:.88rem!important;
  outline:none!important;
  transition:border-color .2s,box-shadow .2s!important;
}
.signup-centered-content textarea{
  min-height:90px!important;
  padding:11px 13px!important;
  resize:vertical!important;
}
.signup-centered-content input:focus,
.signup-centered-content textarea:focus{
  border-color:var(--red2)!important;
  box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)!important;
}
.signup-form-grid label>span,
.signup-message-field>span{
  display:block!important;
  margin-bottom:5px!important;
  color:var(--muted)!important;
  font-size:.66rem!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.signup-message-field{
  display:block!important;
  margin-top:12px!important;
}
.signup-consent{
  display:grid!important;
  grid-template-columns:20px 1fr!important;
  gap:10px!important;
  align-items:start!important;
  margin:14px 0!important;
  color:#bcbcbc!important;
  font-size:.78rem!important;
  line-height:1.45!important;
}
.signup-consent input{
  width:20px!important;
  height:20px!important;
  margin-top:1px!important;
  accent-color:var(--red2)!important;
}
.signup-submit-button,
.signup-continue-button{
  width:100%!important;
  min-height:48px!important;
  border-radius:7px!important;
  font-size:.84rem!important;
}
.signup-submit-button{
  margin-top:4px!important;
  box-shadow:0 12px 28px rgba(var(--red-rgb),.28)!important;
}
.signup-continue-button{
  margin-top:9px!important;
  background:var(--surface2)!important;
  border:1px solid var(--line-strong)!important;
  color:var(--ink)!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
.signup-continue-button:hover{
  border-color:var(--red2)!important;
}
.signup-privacy,
.signup-disclaimer{
  margin:8px 0 0!important;
  text-align:center!important;
  color:#7f7f7f!important;
  font-size:.68rem!important;
  line-height:1.4!important;
}

@media(max-width:820px){
  .signup-top-image-modal{
    width:min(560px,100%)!important;
    max-height:none!important;
    margin:0 auto 90px!important;
    grid-template-columns:1fr!important;
    border-radius:12px!important;
  }
  .signup-full-image{
    height:220px!important;
    min-height:220px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .signup-full-image img{
    width:auto!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .signup-image-caption{
    bottom:12px!important;
    font-size:.62rem!important;
  }
  .signup-centered-content{
    padding:24px 20px 22px!important;
  }
  .signup-centered-content h2{
    font-size:clamp(1.6rem,7vw,2.1rem)!important;
    padding-right:6px!important;
  }
  .signup-centered-content .signup-form-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:430px){
  .signup-full-image{
    height:190px!important;
    min-height:190px!important;
  }
  .signup-centered-content{
    padding:20px 15px 20px!important;
  }
  .signup-centered-content input,
  .signup-centered-content textarea{
    font-size:16px!important;
  }
}

/* Fix: decorative chainmail side-frame (z-index:1400) was overlapping the
   unified header (cart, search box, hero heading) because .unified-site-header
   spanned edge-to-edge (left:0;right:0) while the frame sits above it.
   Offset the header to match the frame's actual width at each breakpoint. */
.unified-site-header{
  left:72px!important;
  right:72px!important;
}
@media(max-width:1350px){
  .unified-site-header{
    left:42px!important;
    right:42px!important;
  }
}
@media(max-width:1050px){
  .unified-site-header{
    left:0!important;
    right:0!important;
  }
}

/* ==========================================================================
   Clean-slate layout pass: single combined gold seal (top + bottom),
   uniform card sizing, and a true 2-per-row mobile catalog grid.
   This block is intentionally the last word in the cascade.
   ========================================================================== */

/* --- Footer seal: sits alone, no stretched/cropped box sizing --- */
.footer-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:14px!important;
}
.footer-brand img{
  height:130px!important;
  width:130px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))!important;
}
@media(max-width:1050px){
  .footer-brand{align-items:center!important;text-align:center!important}
  .footer-brand p{text-align:center!important;max-width:420px!important}
}

/* --- Uniform certificate cards: same height, same image ratio --- */
.certificate-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:18px!important;
}
.certificate-card{
  display:flex!important;
  flex-direction:column!important;
}
.certificate-card img,
.certificate-card .cert-image,
.certificate-card figure{
  aspect-ratio:3/4!important;
  width:100%!important;
  object-fit:contain!important;
}
@media(max-width:1050px){
  .certificate-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:520px){
  .certificate-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
}

/* --- Catalog: 2 vials per row on mobile instead of 1 --- */
@media(max-width:700px){
  .card-grid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
    width:100%!important;
    max-width:560px!important;
    margin-inline:auto!important;
  }
  .product-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    padding:12px 8px!important;
    border-radius:12px!important;
    text-align:center!important;
    overflow:visible!important;
  }
  .product-card .favorite-button{top:8px!important;right:8px!important;font-size:16px!important}
  .product-card .badge{top:8px!important;left:8px!important;font-size:8px!important;padding:3px 5px!important}
  .product-visual{
    width:92px!important;
    height:130px!important;
    margin:0 auto 6px!important;
  }
  .product-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .product-card h3{
    width:100%!important;
    min-height:0!important;
    margin:5px 0 2px!important;
    font-size:.92rem!important;
    line-height:1.2!important;
    text-align:center!important;
  }
  .product-focus{
    width:100%!important;
    min-height:0!important;
    margin:2px auto 6px!important;
    line-height:1.3!important;
    font-size:.65rem!important;
    text-align:center!important;
  }
  .vial-amount-control{
    width:100%!important;
    margin:3px auto!important;
  }
  .dose-select,.single-dose-display{
    width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important;
    font-size:.75rem!important;
    height:32px!important;
  }
  .stock-status-row{
    justify-content:center!important;
    width:100%!important;
    margin:6px 0!important;
  }
  .stock-badge{
    border:0!important;
    padding:0!important;
    font-size:.58rem!important;
    letter-spacing:.03em!important;
  }
  .stock-dot{width:9px!important;height:9px!important;flex-basis:9px!important}
  .prices{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    margin-top:4px!important;
  }
  .price-box{
    min-height:56px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:6px 3px!important;
    border-radius:7px!important;
  }
  .price-box span{font-size:6.5px!important}
  .price-box strong{font-size:.82rem!important}
  .product-cart-actions{
    width:100%!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin-top:6px!important;
  }
  .add-cart-button{min-height:38px!important;border-radius:7px!important;font-size:.72rem!important}
  .call-order-link,.research-coa-button{width:100%!important;box-sizing:border-box!important;font-size:.7rem!important}
  .call-order-link{padding:7px 0!important}
  .research-coa-button{min-height:36px!important;border-radius:7px!important}
}

@media(max-width:430px){
  .product-visual{width:82px!important;height:116px!important}
  .product-card h3{font-size:.84rem!important}
}

/* Production 3.6 — Clean vial labels: crisp product name only, no dose/mg text on the vial art. */
.exact-vial-dose,
.exact-vial-compound{
  display:none!important;
}
.exact-vial-name{
  left:19%!important;
  right:20%!important;
  top:63.5%!important;
  min-height:9%!important;
  display:block!important;
  line-height:1.15!important;
  padding-top:.15em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
  color:#f5f2e8!important;
  font:800 5.93cqw/1.15 Arial,sans-serif!important;
  letter-spacing:.03em!important;
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.75)!important;
}
.exact-vial-name.medium-name{
  font-size:4.07cqw!important;
  letter-spacing:0!important;
}
.exact-vial-name.long-name{
  font-size:3.52cqw!important;
  letter-spacing:0!important;
}
.exact-vial-name.xlong-name{
  top:60%!important;
  min-height:15%!important;
  white-space:normal!important;
  line-height:1.2!important;
  font-size:3.19cqw!important;
  letter-spacing:0!important;
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
}

@media(max-width:700px){
  .exact-vial-name{
    top:60%!important;
    min-height:20%!important;
    font-size:5.79cqw!important;
    white-space:normal!important;
    line-height:1.12!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .exact-vial-name.medium-name{
    font-size:4.74cqw!important;
  }
  .exact-vial-name.long-name{
    font-size:4.21cqw!important;
  }
  .exact-vial-name.xlong-name{
    font-size:3.68cqw!important;
    top:58%!important;
    min-height:24%!important;
    -webkit-line-clamp:3!important;
  }
}

@media(max-width:430px){
  .exact-vial-name{
    font-size:5.70cqw!important;
  }
  .exact-vial-name.medium-name{
    font-size:4.85cqw!important;
  }
  .exact-vial-name.long-name{
    font-size:4.24cqw!important;
  }
  .exact-vial-name.xlong-name{
    font-size:3.76cqw!important;
  }
}

/* ==========================================================================
   Production 3.7 — 3D "lifted from page" vials, header search callout,
   hero/popup knight artwork, footer seal + Website Update Notice
   ========================================================================== */

/* --- Vials: transparent art + realistic 3D lift (matches certificate-card float) --- */
.product-visual.exact-vial-visual{
  filter:
    drop-shadow(0 26px 20px rgba(0,0,0,.38))
    drop-shadow(0 10px 8px rgba(0,0,0,.32))!important;
  transform:perspective(700px) rotateX(2deg);
  transition:transform .28s ease, filter .28s ease;
  will-change:transform;
}
.product-card:hover .exact-vial-visual{
  transform:perspective(700px) rotateX(4deg) translateY(-7px) scale(1.015);
  filter:
    drop-shadow(0 34px 26px rgba(0,0,0,.46))
    drop-shadow(0 14px 10px rgba(0,0,0,.38))!important;
}
@media(max-width:700px){
  .product-visual.exact-vial-visual{
    filter:
      drop-shadow(0 18px 14px rgba(0,0,0,.36))
      drop-shadow(0 7px 6px rgba(0,0,0,.3))!important;
    transform:perspective(600px) rotateX(1.5deg);
  }
}
@media(prefers-reduced-motion:reduce){
  .product-visual.exact-vial-visual,
  .product-card:hover .exact-vial-visual{transform:none;transition:none}
}

/* --- Header: remove second seal slot cleanly, callout arrow toward search --- */
.unified-brand-second{display:none!important}

.unified-brand-group{position:relative}

.research-tool-callout{
  display:flex;
  align-items:center;
  gap:6px;
  margin-right:2px;
  white-space:nowrap;
  pointer-events:none;
}
.research-tool-callout .callout-arrow{
  font-size:20px;
  color:#ffd76a;
  text-shadow:0 0 8px rgba(255,214,102,.9),0 0 16px rgba(255,183,44,.6);
  animation:trinity-arrow-bounce 1.4s ease-in-out infinite;
}
.research-tool-callout .callout-text{
  font:800 11px/1.1 Arial,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#ffe9b0;
  text-shadow:0 0 6px rgba(255,196,64,.7);
}
@keyframes trinity-arrow-bounce{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(5px)}
}

#advancedResearchForm{
  position:relative;
  border-radius:8px;
  animation:trinity-search-glow 2.2s ease-in-out infinite;
}
@keyframes trinity-search-glow{
  0%,100%{box-shadow:0 0 10px 2px rgba(255,196,64,.35),0 0 0 1px rgba(255,196,64,.4) inset}
  50%{box-shadow:0 0 22px 6px rgba(255,196,64,.75),0 0 0 1px rgba(255,214,102,.75) inset}
}
@media(prefers-reduced-motion:reduce){
  .research-tool-callout .callout-arrow,
  #advancedResearchForm{animation:none}
}
@media(max-width:700px){
  .research-tool-callout{display:none!important}
}

/* --- Hero: knight cutout, realistic 3D presence, centered on mobile --- */
.brand-hero-images-single figure img{
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.55)) drop-shadow(0 8px 10px rgba(0,0,0,.4));
}
@media(max-width:700px){
  .brand-hero-images.brand-hero-images-single{
    display:none!important;
    justify-content:center!important;
    width:100%!important;
  }
  .brand-hero-images-single figure{
    margin:0 auto!important;
    text-align:center!important;
  }
  .brand-hero-images-single figure img{
    max-width:220px!important;
    width:100%!important;
    height:auto!important;
    margin:0 auto!important;
    display:block!important;
  }
}

/* --- Rewards popup: knight cutout replacing messy book-cover crop --- */
.rewards-modal-image.knight-callout-image{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:radial-gradient(circle at 60% 40%,rgba(255,196,64,.16),transparent 62%),
             linear-gradient(160deg,#0c0b09,#040404);
  padding:22px 14px;
}
.rewards-modal-image.knight-callout-image img{
  width:auto!important;
  max-width:92%!important;
  height:auto!important;
  max-height:78%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 26px 28px rgba(0,0,0,.6)) drop-shadow(0 8px 10px rgba(0,0,0,.45));
  transform:perspective(700px) rotateY(-4deg) rotateX(1deg);
}
.rewards-modal-image.knight-callout-image .signup-image-caption{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  background:none;
  text-align:center;
  font-size:.82rem!important;
}
.rewards-modal-image.knight-callout-image::after{
  content:none!important;
  display:none!important;
}

/* --- Footer: Website Update Notice block --- */
.website-update-notice{
  max-width:1120px;
  margin:0 auto 28px;
  padding:20px 22px;
  border:1px solid rgba(var(--red-rgb),.4);
  border-radius:6px;
  background:linear-gradient(145deg,var(--surface2),var(--bg));
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.website-update-notice h3{
  margin:0 0 4px;
  font:800 1.05rem Georgia,serif;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--gold,#c9a24a);
}
.website-update-notice p{
  margin:6px 0;
  font-size:.86rem;
  line-height:1.55;
  color:var(--ink);
}
.website-update-notice a{color:var(--red2);text-decoration:underline}
.website-update-notice .notice-tagline{
  margin-top:10px;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a9a9a9;
}
@media(max-width:700px){
  .website-update-notice{padding:16px 14px;margin:0 12px 20px}
}

/* ==========================================================================
   Production 6.0 — Cart line items use the exact same labeled vial artwork
   as the main catalog (was a generic stock photo, now the real vial art
   with the product name printed on it, identical in light and dark mode).
   ========================================================================== */
.cart-item .exact-vial-visual{
  width:64px!important;
  max-width:64px!important;
  height:auto!important;
  aspect-ratio:2/3!important;
  margin:0!important;
  overflow:hidden!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.32))!important;
}
.cart-item .exact-vial-name{
  font-size:5.93cqw!important;
}
.cart-item .exact-vial-name.medium-name{font-size:4.07cqw!important}
.cart-item .exact-vial-name.long-name{font-size:3.52cqw!important}
.cart-item .exact-vial-name.xlong-name{font-size:3.19cqw!important}

@media(max-width:850px){
  .cart-item .exact-vial-visual{
    width:52px!important;
    max-width:52px!important;
  }
}

/* ==========================================================================
   Production 8.0 — Contrast fixes, knight search-guide mascot, brighter
   CTA buttons, and glowing vial artwork (catalog + cart + checkout).
   This block is intentionally the last word in the cascade.
   ========================================================================== */

/* --- Text contrast fixes: age-verification modal + discounts modal --- */
.verification-card>img.verification-seal-img{
  width:78px!important;
  height:78px!important;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))!important;
}
.verification-card>p{
  color:var(--ink)!important;
  opacity:.82!important;
}
.verification-disclaimer{
  color:var(--muted)!important;
  opacity:1!important;
  font-weight:600!important;
}
[data-theme="light"] .verification-disclaimer{
  color:#4a4128!important;
}
.signup-intro{
  color:var(--ink)!important;
  opacity:.82!important;
}

/* ==========================================================================
   Knight search-guide banner: a full-width strip directly under the fixed
   header + nav, with the knight mascot pointing up toward the Advanced
   Research Tool search bar above, plus a speech bubble calling out the
   feature. Lives in normal document flow so it never overlaps the fixed
   header, nav links, or shipping/quality/research info columns.
   ========================================================================== */
/* ==========================================================================
   Knight + banner callout — real artwork (header-callout-knight.png +
   header-callout-banner.png) placed directly under the header with a small
   gap. The knight's own painted arm already points up-right; both images
   are absolutely positioned so his fingertip lands just under-left of the
   Research AI (search) button, on every breakpoint.
   ========================================================================== */
.knight-search-guide-bar{
  position:relative;
  /* Widescreen Templar-study backdrop (guide-bar-backdrop.png, 16:9).
     The bar keeps the image's aspect ratio at every viewport width so the
     artwork is never cropped and the knight/banner overlay positions
     (all in vw) stay glued to the same spots in the scene. */
  height:56.28vw;
  background:#000 url('../assets/brand/guide-bar-backdrop.png') center/cover no-repeat;
  overflow:hidden;
}
.knight-search-guide-inner{
  position:absolute;
  inset:0;
  /* Must stay below the fixed header's stacking context (z-index:1300) so
     the header's expanded "ask a question" search overlay (z-index:1400,
     but confined to the header's own stacking context) can still render
     on top of the knight/banner artwork instead of being trapped behind it. */
  z-index:5;
  overflow:visible;
}
.knight-guide-img{
  position:absolute;
  top:26vw;
  left:24vw;
  width:30vw;
  height:auto;
  display:block;
  --knight-point-rotate:6deg;
  transform-origin:51% 27%;
  /* Decorative only — never intercept taps meant for the banner ask-button
     underneath, whose left edge sits inside the knight's bounding box. */
  pointer-events:none;
  filter:
    drop-shadow(0 6px 10px rgba(0,0,0,.5))
    drop-shadow(0 0 10px rgba(244,197,83,.55));
  /* The source artwork has a hard diagonal crop at the bottom; fade the
     last stretch out so the knight melts into the floor shadows. */
  -webkit-mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,0) 96%);
  mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,0) 96%);
  animation:trinity-knight-bob 2.8s ease-in-out infinite;
}
.knight-guide-banner-button{
  position:absolute;
  top:28.6vw;
  left:52vw;
  width:29.5vw;
  height:auto;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:none;
  cursor:pointer;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transition:transform .15s ease,filter .15s ease;
}
.knight-guide-banner-button img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}
.knight-guide-banner-button:hover,
.knight-guide-banner-button:focus-visible{
  transform:scale(1.03);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(244,197,83,.6));
}
.knight-guide-banner-button:active{
  transform:scale(.98);
}
@keyframes trinity-knight-bob{
  0%,100%{transform:rotate(calc(var(--knight-point-rotate) - 1.5deg))}
  50%{transform:translateY(-3px) rotate(calc(var(--knight-point-rotate) + 1.5deg))}
}
@media(prefers-reduced-motion:reduce){
  .knight-guide-img{ animation:none }
}

/* Single proportional composition — no breakpoints needed: every value is
   in vw, so phones, tablets, laptops, and monitors all render the exact
   same scene, just scaled. */


/* ==========================================================================
   Brighter, more vibrant CTA buttons everywhere — catalog, cart, checkout,
   modals — replacing the muted dark-gold tones with a punchy bright gold.
   ========================================================================== */
:root{
  /* Templar red CTA palette — engraved red plate with gold border + gold
     lettering, matching the ornate frame artwork used across the site. */
  --btn-red-hi:#a81616;
  --btn-red-mid:#6f0b0b;
  --btn-red-deep:#3a0404;
  --btn-gold-line:#d8ab4e;
  --btn-gold-ink:#f3cf7f;
}
[data-theme="light"]{
  --btn-red-hi:#b31a1a;
  --btn-red-mid:#7d0d0d;
  --btn-red-deep:#4a0606;
  --btn-gold-line:#b98a3e;
  --btn-gold-ink:#ffe3a0;
}
.primary-button,
.add-cart-button,
.discount-entry button,
.confirmation-mail-button,
.zelle-instructions a,
.verification-card .primary-button:not(:disabled){
  background:linear-gradient(180deg,var(--btn-red-hi),var(--btn-red-mid) 55%,var(--btn-red-deep))!important;
  color:var(--btn-gold-ink)!important;
  border:1px solid var(--btn-gold-line)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.55) inset,0 0 14px rgba(168,22,22,.3)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.65)!important;
}
.add-cart-button.kit-add{
  background:linear-gradient(180deg,#3fae5c,#1f7a3a 55%,#0f3d1e)!important;
  color:#eafff0!important;
  border:1px solid #6fcf8a!important;
  box-shadow:0 4px 16px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.55) inset,0 0 14px rgba(56,142,69,.35)!important;
}
.primary-button:hover:not(:disabled),
.add-cart-button:hover{
  filter:brightness(1.15);
  box-shadow:0 6px 22px rgba(0,0,0,.42),0 0 18px rgba(216,171,78,.5),0 0 0 1px rgba(0,0,0,.5) inset!important;
}
.add-cart-button.kit-add:hover{
  box-shadow:0 6px 22px rgba(0,0,0,.42),0 0 18px rgba(111,207,138,.55),0 0 0 1px rgba(0,0,0,.5) inset!important;
}
.secondary-button{
  background:linear-gradient(180deg,#171310,#0b0806)!important;
  color:var(--btn-gold-ink)!important;
  border:1px solid var(--btn-gold-line)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.65)!important;
}

/* "Your Mission. Our Purpose." — the section now displays the ornate
   framed artwork panel itself (assets/brand/mission-panel.png) with
   invisible tap targets positioned over its BROWSE CATALOG and READ THE
   JOURNAL buttons, exactly like the knight banner approach. The overrides
   below beat every earlier .brand-hero-message rule (including the
   !important desktop hero-grid re-tint) at all widths. */
.brand-hero .brand-hero-message.mission-artwork,
.brand-hero-message.mission-artwork{
  display:block!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  border-radius:16px;
  clip-path:none!important;
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 26px rgba(168,22,22,.22);
  overflow:hidden;
  position:relative;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
.brand-hero-message.mission-artwork::before{ display:none }
.mission-panel-img{
  display:block;
  width:100%;
  height:auto;
}
.mission-hotspot{
  position:absolute;
  left:28%;
  width:63%;
  height:16%;
  cursor:pointer;
}
.mission-hotspot-catalog{ top:46.5% }
.mission-hotspot-journal{ top:64% }
/* Desktop: the mission artwork panel yields its hero-grid slot to the
   "Ask Anything About Peptides" banner button (same behavior as the
   mobile knight banner — opens the pop-out research bar). On mobile the
   banner is hidden and the mission artwork stays in its original place. */
.hero-ask-banner{ display:none }
@media(min-width:901px){
  .brand-hero .brand-hero-message.mission-artwork{ display:none!important }
  .hero-ask-banner{
    display:flex;
    grid-area:message;
    align-self:start;
    justify-self:center;
    margin-top:18px;
    margin-right:8%;
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    width:min(26vw,480px);
    max-width:none;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.6));
    transition:transform .25s ease,filter .25s ease;
  }
  .hero-ask-banner:hover,
  .hero-ask-banner:focus-visible{
    transform:scale(1.03);
    filter:drop-shadow(0 20px 38px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(168,22,22,.45));
  }
  .hero-ask-banner img{
    display:block;
    width:100%;
    height:auto;
  }
}
.verification-card .primary-button:disabled{
  background:var(--line-strong)!important;
  color:var(--muted)!important;
  border-color:var(--line-strong)!important;
  box-shadow:none!important;
}

/* ==========================================================================
   Vial artwork glow — catalog cards, cart line items, and checkout summary.
   Dark mode gets a warm gold glow so vials pop off the black background;
   light mode gets a softer amber glow for the same "lifted" effect.
   ========================================================================== */
.product-visual.exact-vial-visual{
  filter:
    drop-shadow(0 26px 20px rgba(0,0,0,.38))
    drop-shadow(0 10px 8px rgba(0,0,0,.32))
    drop-shadow(0 0 22px rgba(244,185,60,.55))
    drop-shadow(0 0 44px rgba(244,185,60,.28))!important;
}
.product-card:hover .exact-vial-visual{
  filter:
    drop-shadow(0 34px 26px rgba(0,0,0,.46))
    drop-shadow(0 14px 10px rgba(0,0,0,.38))
    drop-shadow(0 0 28px rgba(244,185,60,.75))
    drop-shadow(0 0 52px rgba(244,185,60,.4))!important;
}
[data-theme="light"] .product-visual.exact-vial-visual{
  filter:
    drop-shadow(0 26px 20px rgba(0,0,0,.24))
    drop-shadow(0 10px 8px rgba(0,0,0,.2))
    drop-shadow(0 0 18px rgba(226,154,22,.45))
    drop-shadow(0 0 36px rgba(226,154,22,.22))!important;
}
[data-theme="light"] .product-card:hover .exact-vial-visual{
  filter:
    drop-shadow(0 34px 26px rgba(0,0,0,.3))
    drop-shadow(0 14px 10px rgba(0,0,0,.26))
    drop-shadow(0 0 24px rgba(226,154,22,.62))
    drop-shadow(0 0 42px rgba(226,154,22,.3))!important;
}
@media(max-width:700px){
  .product-visual.exact-vial-visual{
    filter:
      drop-shadow(0 18px 14px rgba(0,0,0,.36))
      drop-shadow(0 7px 6px rgba(0,0,0,.3))
      drop-shadow(0 0 16px rgba(244,185,60,.5))
      drop-shadow(0 0 30px rgba(244,185,60,.26))!important;
  }
  [data-theme="light"] .product-visual.exact-vial-visual{
    filter:
      drop-shadow(0 18px 14px rgba(0,0,0,.22))
      drop-shadow(0 7px 6px rgba(0,0,0,.18))
      drop-shadow(0 0 14px rgba(226,154,22,.42))
      drop-shadow(0 0 26px rgba(226,154,22,.2))!important;
  }
}
.cart-item .exact-vial-visual{
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.32))
    drop-shadow(0 0 14px rgba(244,185,60,.55))
    drop-shadow(0 0 26px rgba(244,185,60,.28))!important;
}
[data-theme="light"] .cart-item .exact-vial-visual{
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.2))
    drop-shadow(0 0 12px rgba(226,154,22,.45))
    drop-shadow(0 0 22px rgba(226,154,22,.22))!important;
}
@media(prefers-reduced-motion:reduce){
  .knight-guide-img{
    animation:none!important;
    transform:rotate(var(--knight-point-rotate))!important;
    filter:
      drop-shadow(0 8px 14px rgba(0,0,0,.5))
      drop-shadow(0 0 10px rgba(244,197,83,.8))
      drop-shadow(0 0 22px rgba(244,197,83,.5))!important;
  }
}

/* ==========================================================================
   Fix: close the empty gap between the fixed header (and desktop nav) and
   the knight search-guide banner. The main-nav collapses to hidden well
   before the header itself shrinks (legacy rule at max-width:1050px), but
   main's clearance padding wasn't reduced to match at every step in
   between. These overrides realign main's top padding to the header's
   actual rendered height at each breakpoint, so the banner sits flush
   against the black header bar instead of floating below a dead-space gap.
   ========================================================================== */
@media(max-width:1050px){
  main{padding-top:112px}
}
@media(max-width:820px){
  main{padding-top:104px}
}
@media(max-width:700px){
  main{padding-top:96px}
}

/* Knight callout now renders on every breakpoint (see the compact,
   button-anchored rules above) — desktop is no longer hidden. */

/* ==========================================================================
   #signupOverlay ("Exclusive Research Access / Discounts & Special Offers")
   must use the same stacked layout on desktop that it already uses on
   mobile, instead of the side-by-side image+form grid. Scoped to
   #signupOverlay only -- #rewardsOverlay keeps its existing desktop
   side-by-side layout untouched.
   ========================================================================== */
#signupOverlay .signup-top-image-modal,
#signupOverlay.signup-top-image-modal{
  grid-template-columns:1fr!important;
  width:min(560px,100%)!important;
  max-height:90vh!important;
  overflow:auto!important;
  margin:0 auto!important;
  border-radius:12px!important;
}
#signupOverlay .signup-full-image{
  height:220px!important;
  min-height:220px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#signupOverlay .signup-full-image img{
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
#signupOverlay .signup-centered-content{
  padding:24px 20px 22px!important;
}
#signupOverlay .signup-centered-content h2{
  font-size:clamp(1.6rem,7vw,2.1rem)!important;
  padding-right:6px!important;
}
#signupOverlay .signup-centered-content .signup-form-grid{
  grid-template-columns:1fr!important;
}
@media(max-width:430px){
  #signupOverlay .signup-full-image{
    height:190px!important;
    min-height:190px!important;
  }
}

/* Advanced Peptide Research AI label — sits directly above the search
   button/bar in the header, on both desktop and mobile. The header
   background stays a fixed black gradient regardless of light/dark site
   theme, so a single gold color reads clearly in both modes. */
.research-ai-label{
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translateX(-50%);
  margin-bottom:4px;
  width:max-content;
  max-width:none;
  text-align:center;
  white-space:nowrap;
  font:800 13px/1 Arial,sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#F4C86B;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
  pointer-events:none;
}
.advanced-research-search.search-active .research-ai-label{
  display:none;
}
@media(max-width:820px){
  .research-ai-label{
    font-size:9px;
    letter-spacing:.01em;
    margin-bottom:3px;
  }
}
@media(max-width:480px){
  .research-ai-label{
    font-size:7.5px;
    letter-spacing:0;
  }
}

/* ==========================================================================
   Trinity Trinity Templar AI -- floating research guide (Tier 1 + Tier 2)
   Persistent on desktop AND mobile. Sits above page content and the mobile
   bottom nav, but below overlays/modals (5000) and the age gate (9000) so it
   never blocks a modal already in progress.
   ========================================================================== */
.knight-assistant-widget{
  /* --fab-size is the single knob for the knight's size. The panel offset,
     badge and label all derive from it, so desktop and mobile stay in sync. */
  --fab-size:132px;
  position:fixed;right:18px;bottom:70px;z-index:4500;font-family:Arial,sans-serif;
}

.knight-assistant-label{
  /* Sits BELOW the knight. The widget's bottom offset is raised to leave room
     so the label is never clipped by the bottom of the screen. */
  position:absolute;right:2px;top:100%;margin-top:12px;
  background:var(--surface);color:var(--red2);border:1px solid var(--red2);
  padding:6px 14px;border-radius:20px;white-space:nowrap;
  font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.55);pointer-events:none;
  animation:knightLabelFloat 2.8s ease-in-out infinite;
  transition:opacity .25s,transform .25s;
}
.knight-assistant-label::after{
  /* Pointer now aims UP at the knight instead of down at it. */
  content:"";position:absolute;bottom:100%;right:20px;width:0;height:0;
  border:6px solid transparent;border-bottom-color:var(--red2);
}
.knight-assistant-label.hide{opacity:0;transform:translateY(-6px);}
@keyframes knightLabelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.knight-assistant-fab{
  width:var(--fab-size);height:var(--fab-size);border-radius:50%;
  border:2px solid var(--red2);
  background:radial-gradient(circle at 35% 30%,#1c1c1c,#050505 72%);
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 4px rgba(var(--red-rgb),.14);
  display:grid;place-items:center;cursor:pointer;padding:0;overflow:hidden;
  position:relative;transition:transform .2s,box-shadow .2s;
}
.knight-assistant-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 5px rgba(var(--red-rgb),.22)}
.knight-assistant-fab-img{width:100%;height:130%;object-fit:cover;object-position:top center;filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.25))}
.knight-assistant-fab-badge{
  position:absolute;top:-2px;right:-2px;border-radius:50%;
  width:clamp(20px,calc(var(--fab-size) * .2),28px);
  height:clamp(20px,calc(var(--fab-size) * .2),28px);
  background:var(--red);color:var(--on-accent);font-weight:900;
  font-size:clamp(12px,calc(var(--fab-size) * .12),16px);
  display:grid;place-items:center;opacity:0;transform:scale(.4);transition:.25s;
  box-shadow:0 0 0 2px var(--bg);
}
.knight-assistant-fab-badge.show{opacity:1;transform:scale(1);animation:knightBadgePulse 2.2s ease-in-out infinite}
@keyframes knightBadgePulse{0%,100%{box-shadow:0 0 0 2px var(--bg),0 0 0 0 rgba(var(--red-rgb),.55)}50%{box-shadow:0 0 0 2px var(--bg),0 0 0 7px rgba(var(--red-rgb),0)}}

.knight-assistant-panel{
  position:absolute;right:0;bottom:calc(var(--fab-size) + 14px);width:min(340px,88vw);max-height:min(500px,70vh);
  flex-direction:column;background:var(--surface);border:1px solid var(--red2);
  box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;
}
.knight-assistant-panel:not([hidden]){display:flex}
.knight-assistant-panel[hidden]{display:none}
.knight-assistant-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(90deg,var(--red-deep),#141414 75%,var(--bg));border-bottom:1px solid var(--red2)}
.knight-assistant-header-img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top center;border:1px solid var(--red2)}
.knight-assistant-header-copy{display:grid;line-height:1.25;min-width:0}
.knight-assistant-header-copy strong{color:var(--ink);font-size:.86rem;text-transform:uppercase;letter-spacing:.03em}
.knight-assistant-header-copy span{color:var(--muted);font-size:.68rem}
.knight-assistant-close{background:none;border:0;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;padding:0 2px}

.knight-assistant-messages{flex:1;min-height:120px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.knight-msg{max-width:88%;padding:9px 11px;font-size:.8rem;line-height:1.5;border-radius:2px}
.knight-msg-bot{align-self:flex-start;background:var(--surface2);color:var(--ink);border:1px solid var(--line-strong)}
.knight-msg-user{align-self:flex-end;background:var(--red);color:var(--on-accent);font-weight:600}
.knight-more-details{display:block;margin-top:8px;color:var(--red2);font-weight:900;text-transform:uppercase;font-size:.68rem;letter-spacing:.03em;text-decoration:none}
.knight-more-details:hover{text-decoration:underline}
.knight-mech-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.knight-mech-list li{position:relative;padding-left:16px;font-size:.78rem;line-height:1.45;color:var(--ink)}
.knight-mech-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--red2);border-radius:50%}
.knight-also-note{display:block;margin-top:8px;font-size:.78rem;color:var(--muted)}

.knight-assistant-form{display:flex;border-top:1px solid var(--line-strong);background:var(--surface)}
.knight-assistant-form input{flex:1;min-width:0;background:var(--surface);color:var(--ink);border:0;padding:11px 12px;font-size:.82rem}
.knight-assistant-form input:focus{outline:none;background:var(--surface2)}
.knight-assistant-form button{width:46px;border:0;background:var(--red);color:var(--on-accent);font-size:1.1rem;font-weight:900;cursor:pointer}
.knight-assistant-form button:hover{background:var(--red2)}

@media (max-width:1050px){
  /* Smaller knight on narrow screens -- a 132px button would sit on top of the
     content. Everything else mirrors the desktop layout. */
  .knight-assistant-widget{--fab-size:76px;right:12px;bottom:120px}
  .knight-assistant-panel{width:min(320px,90vw)}
  .knight-assistant-label{font-size:.68rem;padding:5px 12px}
}

/* Product-card highlight pulse used when the Templar locates a product. */
.product-card.knight-highlight-pulse{
  animation:knightCardPulse 1.1s ease-in-out 3;
  outline:3px solid var(--red2);
  box-shadow:0 0 0 8px rgba(var(--red-rgb),.28),0 14px 32px rgba(0,0,0,.38);
  position:relative;z-index:6;
}
@keyframes knightCardPulse{
  0%,100%{outline-color:var(--red2);box-shadow:0 0 0 8px rgba(var(--red-rgb),.28),0 14px 32px rgba(0,0,0,.38)}
  50%{outline-color:var(--red);box-shadow:0 0 0 14px rgba(var(--red-rgb),.05),0 14px 32px rgba(0,0,0,.38)}
}

/* Generic section highlight used when the Templar locates a site PROGRAM
   (membership, affiliate, rewards, theme toggle) rather than a product
   card. Same pulse treatment, but not scoped to .product-card so it works
   on any element -- large sections and the small header toggle button. */
.knight-section-highlight{
  animation:knightCardPulse 1.1s ease-in-out 3;
  outline:3px solid var(--red2);
  box-shadow:0 0 0 8px rgba(var(--red-rgb),.28),0 14px 32px rgba(0,0,0,.38);
  border-radius:14px;
  position:relative;z-index:6;
}

/* ==========================================================================
   Trinity Templar AI -- answer bubble layout (Production 3.8)
   Uses the existing theme variables so it follows dark/light mode with no
   extra work. --green / --danger / --amber already flip per theme.
   ========================================================================== */
.templar-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.templar-head strong{color:var(--ink);font-size:13.5px;letter-spacing:.2px}

.templar-pill{
  display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.templar-pill-in{color:var(--green);border-color:var(--green);background:rgba(139,226,154,.10)}
.templar-pill-out{color:var(--danger);border-color:var(--danger);background:rgba(var(--danger-rgb),.10)}
.templar-pill-part{color:var(--amber);border-color:var(--amber);background:rgba(var(--amber-rgb),.10)}
.templar-pill-none{color:var(--muted);border-color:var(--line-strong);background:rgba(var(--hairline-rgb),.05)}
[data-theme="light"] .templar-pill-in{background:rgba(47,125,61,.10)}
[data-theme="light"] .templar-pill-part{background:rgba(140,97,9,.10)}

.templar-short{margin:0 0 8px;color:var(--ink);font-size:12.5px;line-height:1.55}
.templar-note{margin:8px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}

.templar-price-table{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:11.5px}
.templar-price-table th,
.templar-price-table td{
  padding:5px 6px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);color:var(--ink);font-weight:500;
}
.templar-price-table th{white-space:nowrap;color:var(--red2);font-weight:700}
.templar-price-table tr:last-child th,
.templar-price-table tr:last-child td{border-bottom:0}
.templar-price-table td:last-child{text-align:right;white-space:nowrap}
.templar-row-out th,.templar-row-out td{opacity:.55}
.templar-yes{color:var(--green);font-weight:700;font-size:10.5px}
.templar-no{color:var(--danger);font-weight:700;font-size:10.5px}

.templar-more-btn{
  display:inline-block;margin:0 0 6px;padding:4px 10px;
  background:rgba(var(--hairline-rgb),.06);border:1px solid var(--line-strong);
  border-radius:999px;color:var(--red2);font:inherit;font-size:11px;font-weight:700;
  cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.templar-more-btn:hover{background:rgba(var(--red-rgb),.12);border-color:var(--red)}
.templar-detail{margin:0 0 8px}
.templar-detail[hidden]{display:none}

.templar-sources{margin:6px 0 0;font-size:10.5px;color:var(--muted);line-height:1.5}
.templar-sources a{color:var(--red2);text-decoration:underline}

.templar-locate-btn{
  display:block;width:100%;margin:2px 0 6px;padding:7px 10px;
  background:linear-gradient(180deg,var(--red2),var(--red));
  border:0;border-radius:8px;color:var(--on-accent);
  font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.3px;
  cursor:pointer;transition:filter .15s ease;
}
.templar-locate-btn:hover{filter:brightness(1.08)}
.templar-locate-btn:disabled{
  background:none;border:1px solid var(--line-strong);
  color:var(--muted);cursor:default;font-weight:600;
}

/* Widen the chat panel a little -- the price table needs the room. */
.knight-assistant-panel{width:min(370px,92vw)}
@media (max-width:520px){.knight-assistant-panel{width:min(340px,94vw)}}

/* Admin -- Research Book definition form (Production 3.8) */
.admin-def-form{
  margin:14px 0 18px;padding:16px;border:1px solid var(--line-strong);
  border-radius:12px;background:var(--panel);display:grid;gap:12px;
}
.admin-def-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.admin-def-grid{grid-template-columns:1fr}}
.admin-def-form label{
  display:grid;gap:5px;font-size:11px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:var(--red2);
}
.admin-def-form label span{
  font-weight:600;text-transform:none;letter-spacing:0;
  font-size:11px;color:var(--muted);
}
.admin-def-form input,
.admin-def-form textarea{
  width:100%;padding:9px 11px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:8px;
  color:var(--ink);font:inherit;font-size:13px;font-weight:400;
  letter-spacing:normal;text-transform:none;
}
.admin-def-form textarea{resize:vertical;line-height:1.55}
.admin-def-form input:focus,
.admin-def-form textarea:focus{outline:none;border-color:var(--red)}
.admin-def-form input::placeholder,
.admin-def-form textarea::placeholder{color:var(--muted);opacity:.75}
.admin-def-form .admin-toolbar{margin:2px 0 0}
#defFormStatus{border-left:3px solid var(--green);margin:0}
.muted-cell{color:var(--muted)}

/* Templar AI panel -- layout corrections (Production 3.8)
   The assistant name is longer than the old one and the answers now contain a
   price table, so the header and bubble need more room. */
.knight-assistant-panel{width:min(400px,94vw)}
@media (max-width:520px){.knight-assistant-panel{width:min(348px,95vw)}}

.knight-assistant-header{align-items:center;padding:9px 12px}
.knight-assistant-header-copy{align-content:center;gap:2px}
.knight-assistant-header-copy strong{
  font-size:.76rem;letter-spacing:.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.knight-assistant-header-copy span{
  font-size:.63rem;line-height:1.3;color:#d8cbb4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Answer bubbles hold a table, so they need the full panel width. */
.knight-msg-bot:has(.templar-price-table),
.knight-msg-bot:has(.templar-head){max-width:100%;width:100%}

/* The global `table{min-width:1080px}` rule (built for the wide catalog table)
   was forcing this small in-chat table to 1080px, pushing the stock column out
   of the panel. Reset it here. */
.templar-price-table{table-layout:fixed;font-size:10.5px;min-width:0;width:100%}
.templar-price-table th,
.templar-price-table td{padding:4px 4px}
.templar-price-table th{width:52px;font-size:10.5px}
.templar-price-table td:first-of-type{width:auto;word-break:break-word}
.templar-price-table td:last-child{width:54px;text-align:right}

/* Templar AI answers -- light theme (Trinity Ivory) corrections.
   In light mode --red/--red2 are DARK golds and --on-accent is near-black, so
   the locate button rendered dark-on-dark. The status colours also sat just
   under the 4.5:1 WCAG AA text threshold against the light bubble. */
[data-theme="light"] .templar-locate-btn{color:#FFF9EC;text-shadow:0 1px 1px rgba(0,0,0,.28)}
[data-theme="light"] .templar-yes{color:#1E6B2B}
[data-theme="light"] .templar-no{color:#98241D}
[data-theme="light"] .templar-more-btn{color:#6B4A06;border-color:#B79E62}
[data-theme="light"] .templar-pill-in{color:#1E6B2B;background:rgba(30,107,43,.12)}
[data-theme="light"] .templar-pill-part{color:#6B4A06;background:rgba(107,74,6,.12)}
[data-theme="light"] .templar-pill-out{color:#98241D;background:rgba(152,36,29,.12)}
[data-theme="light"] .templar-pill-none{color:#4E4735;background:rgba(34,29,15,.09)}
[data-theme="light"] .templar-sources a{color:#6B4A06}
[data-theme="light"] .knight-assistant-header-copy span{color:#EBDFC4}

/* Notice shown when "Take me to it" had to clear a filter to reveal a product. */
.locate-filter-notice{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:12px 0 0;padding:10px 14px;
  background:rgba(var(--amber-rgb),.10);
  border:1px solid var(--amber);border-left:3px solid var(--amber);
  border-radius:8px;color:var(--ink);font-size:13px;line-height:1.5;
}
.locate-filter-notice[hidden]{display:none}
.locate-filter-notice strong{color:var(--red2)}
.locate-filter-notice button{
  margin-left:auto;padding:6px 12px;background:transparent;
  border:1px solid var(--line-strong);border-radius:999px;
  color:var(--ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.locate-filter-notice button:hover{background:rgba(var(--red-rgb),.14);border-color:var(--red)}
[data-theme="light"] .locate-filter-notice strong{color:#6B4A06}

/* Touch targets: the restore button must be tappable on a phone (44px min),
   and on narrow screens it should span the width instead of hugging the right
   edge where a thumb is less likely to reach it accurately. */
.locate-filter-notice button{min-height:44px;padding:10px 16px;font-size:13px}
@media(max-width:560px){
  .locate-filter-notice{padding:12px;font-size:13.5px}
  .locate-filter-notice button{margin-left:0;width:100%;justify-content:center}
}
@media(hover:none){
  .locate-filter-notice button{min-height:46px}
}

/* "Which one did you mean?" choices, shown when a short form like GHRP or IGF
   could be several products. */
.templar-pick-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 6px}
.templar-pick-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:46px;padding:10px 14px;text-align:left;
  border:1px solid rgba(var(--red-rgb),.45);border-radius:12px;
  background:rgba(var(--red-rgb),.10);color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.templar-pick-btn:hover,.templar-pick-btn:focus-visible{
  background:rgba(var(--red-rgb),.20);border-color:var(--red);transform:translateY(-1px);
}
.templar-pick-btn em{
  flex:0 0 auto;font-style:normal;font-size:11px;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;opacity:.85;
}
.templar-pick-hint{margin:2px 0 0;font-size:12px;color:var(--muted)}
[data-theme="light"] .templar-pick-btn{color:#221D0F;border-color:rgba(140,97,9,.5)}
[data-theme="light"] .templar-pick-btn em{color:#6B4A06;opacity:1}

/* ===================================================================
   The Trinity Library -- Journal (public) + Peptides Explained (members).
   Replaces the old certification badge wall.
   =================================================================== */
.library-section{padding:70px 6vw;background:var(--surface);border-top:1px solid var(--line)}
.library-heading{max-width:760px;margin:0 auto 40px;text-align:center}
.library-heading h2{font:500 2.6rem Georgia,serif;margin:8px 0 12px;color:var(--ink)}
.library-heading p{color:var(--muted);line-height:1.7;margin:0}

.library-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px;max-width:1180px;margin:0 auto}
.library-card{
  display:grid;grid-template-columns:214px 1fr;gap:0;
  background:var(--surface2);border:1px solid var(--line-strong);overflow:hidden;
}
.library-card-featured{border-color:var(--red2)}

.library-cover{
  position:relative;background:#0B0B0B;overflow:hidden;
  /* Covers sit at the top so both cards line up regardless of blurb length. */
  display:grid;align-content:start;justify-items:center;padding:18px 14px 40px;
}
.library-cover img{
  display:block;width:100%;height:auto;max-height:100%;
  object-fit:contain;box-shadow:0 10px 26px rgba(0,0,0,.6);
}
.library-flag{
  position:absolute;left:0;bottom:0;right:0;padding:7px 10px;text-align:center;z-index:2;
  background:var(--red);color:var(--on-accent);
  font-size:.62rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
}
.library-flag-locked{background:#4A3A0C;color:#F6E7BE}

/* Stand-in "book cover" for the handbook, drawn in CSS so there is no extra
   image to download. */

.library-body{padding:24px 26px 26px}
.library-kicker{margin:0 0 6px;color:var(--red2);font-size:.66rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.library-body h3{font:500 1.72rem Georgia,serif;margin:0 0 12px;color:var(--ink);line-height:1.2}
.library-blurb{color:var(--muted);line-height:1.7;margin:0 0 16px;font-size:.92rem}
.library-blurb em{color:var(--ink);font-style:italic}

.library-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.library-facts li{
  padding:5px 11px;background:var(--surface);border:1px solid var(--line-strong);
  font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.library-facts strong{color:var(--ink)}

.library-actions{display:flex;flex-wrap:wrap;gap:10px}
/* display:flex outranks the browser's [hidden]{display:none}, so the gate has
   to say so explicitly or the locked content shows through. */
.library-actions[hidden],.library-locked[hidden],.library-card [hidden]{display:none!important}
.library-actions .primary-button,.library-actions .secondary-button{
  flex:1 1 auto;min-width:150px;min-height:46px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
}
.library-fineprint{margin:12px 0 0;color:var(--muted);font-size:.72rem;line-height:1.5}
.library-locked-note{
  margin:0 0 14px;padding:12px 14px;background:var(--surface);
  border-left:3px solid var(--red2);color:var(--muted);font-size:.85rem;line-height:1.6;
}
.library-locked-note strong{color:var(--ink)}
.library-card.is-unlocked{border-color:var(--red2)}

/* ---- in-browser reader ---- */
.library-reader-modal{
  background:var(--surface);border:1px solid var(--red2);
  width:min(1000px,94vw);max-height:92vh;padding:22px 24px 24px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.library-reader-head{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid var(--line);padding:0 44px 16px 0;margin-bottom:16px;
}
.library-reader-head h2{margin:4px 0 0;font:500 1.9rem Georgia,serif;color:var(--ink)}
.library-reader-head-actions{display:flex;flex-wrap:wrap;gap:10px}
.library-reader-head-actions .primary-button,
.library-reader-head-actions .secondary-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.library-reader-frame-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.library-reader-frame{
  flex:1;width:100%;min-height:min(70vh,720px);
  border:1px solid var(--line-strong);background:#fff;
}
.library-reader-fallback{margin:10px 0 0;color:var(--muted);font-size:.74rem;text-align:center}
.library-reader-fallback strong{color:var(--ink)}

@media (max-width:860px){
  .library-section{padding:52px 5vw}
  .library-heading h2{font-size:2.05rem}
  .library-card{grid-template-columns:1fr}
  .library-cover{max-height:none;padding:18px 18px 42px}
  .library-cover img{max-width:250px;margin:0 auto}
  .library-body{padding:20px}
  .library-actions .primary-button,.library-actions .secondary-button{flex:1 1 100%;min-width:0}
  .library-reader-modal{width:96vw;padding:18px 16px 18px;max-height:94vh}
  .library-reader-head{padding-right:40px}
  .library-reader-head h2{font-size:1.4rem}
  .library-reader-head-actions{width:100%}
  .library-reader-head-actions .primary-button,
  .library-reader-head-actions .secondary-button{flex:1 1 46%}
  .library-reader-frame{min-height:62vh}
}

/* Light theme: keep the book face dark (it is artwork), lift everything else. */
[data-theme="light"] .library-facts li{background:#FFFCF4}
[data-theme="light"] .library-flag-locked{background:#5A4708;color:#FFF7E4}

/* The reader shows either the embedded frame or, on iOS, a direct-open panel. */
.library-reader-direct{display:none}
.library-reader-frame-wrap.is-direct-open .library-reader-frame,
.library-reader-frame-wrap.is-direct-open .library-reader-fallback{display:none}
.library-reader-frame-wrap.is-direct-open .library-reader-direct{
  display:grid;justify-items:center;gap:10px;text-align:center;
  padding:34px 22px;border:1px dashed var(--line-strong);background:var(--surface2);
}
.library-reader-direct-mark{font-size:2.4rem;line-height:1}
.library-reader-direct strong{font:500 1.25rem Georgia,serif;color:var(--ink)}
.library-reader-direct p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.6;max-width:38ch}
.library-reader-direct .primary-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 26px;margin-top:4px}
/* In direct-open mode the header "new tab" button duplicates the big button
   inside the panel, so it is hidden to avoid two identical choices. */
.library-reader-frame-wrap.is-direct-open ~ .library-reader-head #libraryReaderTab{display:none}
.library-reader-modal.is-direct-open #libraryReaderTab{display:none}

/* Research & COA: note shown when a certificate covers a sibling vial size. */
.coa-scope-note{
  margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--gold);
  background:var(--surface2);color:var(--muted);font-size:.84rem;line-height:1.6;
}

/* ==========================================================================
   Product card row alignment (Production 4.4)
   Cards sitting side by side must line up section for section, even when one
   product has a two-line name like "CJC-1295 / Ipamorelin Blend" and its
   neighbour has a one-line name. Two things used to vary between cards:
     1. the <h3> name (one line vs two)
     2. the price boxes (the "50% off · Pay for 5" note wrapped to a different
        number of lines because the two price columns were not equal widths)
   Reserving two lines for the name and forcing the price columns to identical
   widths makes every following row start at the same height in every card.
   ========================================================================== */
.product-card h3{
  display:flex!important;
  align-items:center;
  justify-content:center;
  text-align:center;
  align-self:stretch;
  width:100%;
  min-height:2.4em!important;   /* exactly two lines at whatever size this breakpoint uses */
}
.prices{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch;
}
.price-box{
  min-width:0;
}
.price-box small{
  display:block;
  font-size:.58rem;
  line-height:1.32;
}

/* Light theme: the single-vial price was pale mint on a cream card, which was
   hard to read. Use a deeper green that keeps the "this is the cheaper option"
   colour cue while staying legible. */
[data-theme="light"] .price-box:first-child strong{color:#1c7a3e}

/* ==========================================================================
   Mobile fit / no sideways scrolling (Production 4.5)

   THE BUG: on iPhone the catalog could be dragged sideways and the left-hand
   card was cut off. Safari (which also powers Chrome on iPhone) sizes a
   <select> by its LONGEST OPTION, and a grid track written as "1fr" is really
   "minmax(auto,1fr)" -- the "auto" floor means the track is never allowed to
   shrink below its contents. So each product card was forced out to roughly
   250px by the vial-amount dropdown, two cards came to ~510px, and the page
   became wider than the 440px screen. Desktop Chrome sizes selects
   differently, which is why it only showed up on the phone.

   THE FIX: give grid and flex children "min-width:0" so tracks are free to
   shrink to the screen, then clip any residual sideways scroll so the page can
   never be panned no matter what a future browser does with intrinsic widths.
   ========================================================================== */

/* 1. Let every grid/flex child shrink instead of forcing the page wider. */
.card-grid > *,
.product-card > *,
.prices > *,
.product-cart-actions > *,
.catalog-controls > *,
.mobile-bottom-nav > *{
  min-width:0;
}
.dose-select,
.single-dose-display,
.catalog-controls select,
.catalog-search input{
  min-width:0;
  max-width:100%;
}

/* 2. The page can never scroll sideways. "clip" is used rather than "hidden"
      so the sticky header keeps working. */
html,body{max-width:100%}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
@supports not (overflow:clip){
  body{overflow-x:hidden}
}

/* 3. Stop iOS inflating text on its own, which reflows the layout unpredictably. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* 4. Nothing may push the page wider: media and long words stay inside. */
img,svg,video,canvas,iframe{max-width:100%}
.product-card h3,
.product-focus,
.price-box,
.stock-status-row{
  overflow-wrap:break-word;
}

/* 5. Respect the iPhone's rounded corners and home indicator. The page already
      opts in with viewport-fit=cover, so without these the bottom bar sits
      underneath the home-indicator strip. */
@supports (padding:env(safe-area-inset-bottom)){
  .mobile-bottom-nav{
    height:calc(66px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
  }
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .knight-assistant-widget{
    right:calc(12px + env(safe-area-inset-right));
    bottom:calc(120px + env(safe-area-inset-bottom));
  }
  .catalog-section,
  .about-section{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
}

/* 6. Dynamic viewport height: on iPhone the address bar slides away, and 100vh
      is measured against the TALLEST state, so full-height panels used to be
      taller than the screen. dvh tracks the visible area as it changes. */
.signup-success-page,
.order-confirmation-shell{min-height:100vh;min-height:100dvh}
.knight-assistant-panel{max-height:min(500px,70vh);max-height:min(500px,70dvh)}

/* 7. Overlay panels stay inside the screen. */
.library-reader-modal,
.research-coa-modal,
.qr-share-modal,
.cart-modal,
.flyer-modal{max-width:100%}

/* 8. Four-figure prices (e.g. FOXO4-DRI at $1,000.00) need a second line in the
      narrow four-across desktop layout, which used to make those cards taller
      than their neighbours. Reserve the second line for every card in that
      range so the rows stay level. Wider and narrower layouts have room for the
      price on one line and are left untouched. */
@media (min-width:1051px) and (max-width:1600px){
  .price-box strong{display:block;min-height:2.4em}
}

/* ---------------------------------------------------------------------------
   Checkout registration gate + registration form helper text.
   The gate sits inside the order form and is hidden once this browser holds a
   Trinity Rewards registration.
   ------------------------------------------------------------------------- */
.checkout-register-gate{
  padding:15px;
  background:rgba(var(--red-rgb),.10);
  border:1px solid var(--red2);
  border-left:3px solid var(--red2);
}
.checkout-register-gate[hidden]{display:none}
.checkout-gate-title{
  margin:0 0 6px;font-weight:900;font-size:.9rem;color:var(--ink);
}
.checkout-gate-note{
  margin:0 0 12px;color:var(--muted);font-size:.78rem;line-height:1.5;
}
.checkout-register-gate .primary-button{width:100%}
.checkout-member-badge{
  margin:0;padding:11px 13px;
  background:rgba(var(--red-rgb),.07);
  border-left:3px solid var(--red2);
  color:var(--muted);font-size:.76rem;line-height:1.5;
}
.checkout-member-badge[hidden]{display:none}
.checkout-member-badge strong{color:var(--ink)}
/* A disabled Place Order button must look disabled, or it reads as broken. */
.place-order-button:disabled{opacity:.45;cursor:not-allowed}
.signup-field-note{
  display:block;margin-top:5px;color:var(--muted);font-size:.72rem;line-height:1.4;
}
/* Keep the helper text from stretching its neighbour's input in the grid. */
.signup-form-grid label{align-content:start}
.signup-form-grid label input{align-self:start}

/* ---------------------------------------------------------------------------
   Order failure notice. Deliberately loud: an unplaced order must never be
   mistaken for a placed one.
   ------------------------------------------------------------------------- */
.order-failure{
  margin-top:12px;padding:15px;
  background:rgba(var(--red-rgb),.14);
  border:2px solid var(--red2);
}
.order-failure[hidden]{display:none}
.order-failure-title{
  margin:0 0 8px;font-weight:900;font-size:.95rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--red2);
}
.order-failure-reason{margin:0 0 8px;color:var(--ink);font-size:.82rem;line-height:1.5}
.order-failure-summary{
  margin:0 0 10px;padding:8px 10px;background:var(--surface2);
  border-left:3px solid var(--red2);color:var(--muted);font-size:.76rem;
}
.order-failure-help{margin:0 0 10px;color:var(--muted);font-size:.78rem;line-height:1.5}
.order-failure-help strong{color:var(--ink)}
.order-failure-contact{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}
.order-failure-contact a{color:var(--red2);font-weight:700;font-size:.82rem}

/* ---------------------------------------------------------------------------
   Live storefront editing (stock + price), shown only when COA uploading is
   unlocked. Purely additive -- does not change any existing selector.
   ------------------------------------------------------------------------- */
.live-edit-field{display:inline-flex;align-items:center;gap:3px}
.live-edit-input{
  width:56px;padding:3px 5px;background:var(--surface);color:var(--ink);
  border:1px solid #388e45;font-size:11px;font-weight:800;
}
.live-edit-input:focus{outline:2px solid #14a34a;outline-offset:1px}
.price-live-edit .live-edit-input{width:64px;font-size:1rem}
.price-live-edit{display:flex;align-items:center;gap:2px;margin-top:4px}
.live-edit-prefix{color:var(--muted);font-weight:900;font-size:.85rem}
.live-edit-status{display:block;margin-top:2px;font-size:8px;color:#9befa8;text-transform:uppercase;letter-spacing:.03em;min-height:10px}
.live-edit-status-row{grid-column:1/-1;text-align:center;margin-top:2px}
.live-edit-warn{color:var(--danger)}
.stock-live-edit{margin-left:4px}
.stock-live-edit .live-edit-status{margin-top:0;display:inline-block;margin-left:5px}

/* ==========================================================================
   HEADER v2 — crest + wordmark, centered "Advanced Peptide Research AI"
   title, gold card-style action buttons, glowing top/bottom divider lines.
   Scoped entirely under new .hv2-* class names so none of the legacy
   .unified-brand-group / .unified-header-actions rules above can leak in.
   Appended last so it wins cascade ties against earlier same-specificity
   rules (including ones inside older media queries).
   ========================================================================== */
.header-v2{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:auto!important;
  padding:0;
}
.header-v2:before,
.header-v2:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--danger) 10%,var(--danger) 90%,transparent);
  box-shadow:0 0 16px 3px rgba(255,196,64,.7),0 0 4px rgba(255,224,140,.9);
  pointer-events:none;
  z-index:2;
}
.header-v2:before{top:0;}
.header-v2:after{bottom:0;}

.hv2-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:18px;
  width:100%;
  padding:14px clamp(16px,3vw,50px);
  box-sizing:border-box;
}

/* =========================================================
   EXACT-MODE HEADER — single approved-mockup image as the
   visual layer, with the site's real functional controls
   (search form, theme toggle, admin link, menu toggle)
   overlaid as transparent hit areas at the button positions.
   ========================================================= */
.tp-stage{
  position:relative;
  width:100%;
  aspect-ratio:1320/311;
  min-height:120px;
  max-height:230px;
  overflow:hidden;
}
.tp-art,
.tp-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.tp-art img{
  display:block;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
}
/* Warms the header artwork toward the site's fire/stone Templar palette
   (red-black) so it reads as part of the same world as the hero below,
   instead of a flat black-gold bar. Kept subtle + multiply-blended so
   the gold text/icons baked into the artwork stay fully legible. */
.tp-theme-wash{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(85% 130% at 6% 78%,rgba(178,30,22,.42),transparent 62%),
    radial-gradient(75% 120% at 94% 78%,rgba(178,30,22,.34),transparent 60%),
    linear-gradient(180deg,rgba(60,6,6,.10),rgba(20,2,2,.02) 42%,rgba(120,16,16,.28));
  mix-blend-mode:multiply;
}
.tp-theme-wash::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 90% at 50% 100%,rgba(200,40,30,.16),transparent 70%);
  mix-blend-mode:soft-light;
}
.tp-hotspot{
  position:absolute;
  top:30.5%;
  height:50.5%;
  border:0;
  border-radius:11%;
  background:transparent;
  cursor:pointer;
  padding:0;
  margin:0;
  outline:none;
  transition:box-shadow .2s ease,background-color .2s ease;
}
.tp-hotspot:hover,
.tp-hotspot:focus-visible{
  background:rgba(233,199,103,.08);
  box-shadow:0 0 0 1px rgba(233,199,103,.4),0 0 14px rgba(233,199,103,.25);
}
.tp-hotspot-brand{
  top:0;
  height:100%;
  left:0;
  width:38%;
  border-radius:0;
}
.tp-hotspot-brand:hover,
.tp-hotspot-brand:focus-visible{
  background:transparent;
  box-shadow:none;
}
.tp-hotspot-search  { left:65.0%; width:7.35%; }
.tp-hotspot-theme   { left:73.35%; width:7.35%; }
.tp-hotspot-account { left:81.40%; width:7.65%; }
.tp-hotspot-menu    { left:89.72%; width:7.85%; }

/* Theme/account/menu controls: fully transparent by default so the
   approved artwork's own button graphics show through; icons/text
   inside them are hidden since the image already renders the icon. */
.tp-hotspot-theme,
.tp-hotspot-account,
.tp-hotspot-menu{
  color:transparent!important;
  font-size:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:11%!important;
}
.tp-hotspot-theme svg,
.tp-hotspot-account svg,
.tp-hotspot-menu svg{
  display:none!important;
}

/* Search hotspot: invisible while idle (image shows the button);
   becomes a real visible panel once expanded so the input has room. */
.tp-hotspot-search{
  display:flex;
  align-items:center;
  overflow:visible;
}
.tp-hotspot-search #advancedResearchForm{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  background:transparent;
  border:0;
  box-shadow:none!important;
  border-radius:11%;
  animation:none!important;
}
.tp-hotspot-search .research-ai-label,
.tp-hotspot-search .advanced-research-close,
.tp-hotspot-search input{
  display:none;
}
.tp-hotspot-search .advanced-research-submit{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  color:transparent;
  font-size:0;
}
.tp-hotspot-search .advanced-research-submit svg{
  display:none;
}
.tp-hotspot-search #advancedResearchForm.search-active{
  position:fixed!important;
  inset:auto;
  top:calc(var(--header-stack-height,120px) + 10px);
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%);
  width:min(92vw,520px)!important;
  height:56px;
  background:var(--surface);
  border:1px solid var(--red);
  box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 20px rgba(233,199,103,.25)!important;
  border-radius:12px;
  z-index:1400;
  padding:0 14px;
}
.tp-hotspot-search #advancedResearchForm.search-active .research-ai-label{
  display:none;
}
.tp-hotspot-search #advancedResearchForm.search-active .advanced-research-close{
  display:flex;
  position:relative;
  color:var(--ink);
  font-size:15px;
  flex:0 0 auto;
}
.tp-hotspot-search #advancedResearchForm.search-active input{
  display:flex;
  position:relative;
  color:var(--ink);
  font-size:15px;
}
.tp-hotspot-search #advancedResearchForm.search-active .advanced-research-submit{
  display:grid;
  place-items:center;
  position:relative;
  color:var(--ink);
  font-size:15px;
  flex:0 0 auto;
  width:38px;
  height:46px;
  inset:auto;
}
.tp-hotspot-search #advancedResearchForm.search-active .advanced-research-submit svg{
  display:block;
  width:18px;
  height:18px;
}
.tp-hotspot-search #advancedResearchForm.search-active input{
  flex:1 1 auto;
  background:transparent;
  border:0;
  color:var(--ink);
  font-size:15px;
  height:100%;
  outline:none;
}

@media(max-width:1100px){
  .tp-stage{ min-height:96px; }
}

@media(max-width:767px){
  .tp-stage{
    aspect-ratio:1252/199;
    min-height:0;
    max-height:none;
    border-radius:0;
    margin:0;
    width:100%;
    overflow:hidden;
  }
  .tp-art img{ object-fit:fill; }
  .tp-hotspot{
    top:16%;
    height:62%;
    border-radius:13%;
  }
  .tp-hotspot-search  { left:63.4%; width:8.2%; }
  .tp-hotspot-theme   { left:71.4%; width:8.0%; }
  .tp-hotspot-account { left:79.2%; width:8.8%; }
  .tp-hotspot-menu    { left:87.7%; width:9.5%; }
  .tp-hotspot-search #advancedResearchForm.search-active{
    width:min(92vw,420px)!important;
    height:50px;
  }
}

/* Brand: crest medallion + wordmark/tagline */
.hv2-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  flex:0 0 auto;
  min-width:0;
}
.hv2-crest{
  width:96px;
  height:96px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 0 8px rgba(212,175,55,.4));
}
.hv2-brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.hv2-wordmark-main{
  font:700 1.55rem/1.05 Georgia,serif;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#f6e2a0,#caa53d 55%,#8c6a24);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}
.hv2-wordmark-sub{
  font:600 .82rem/1.2 Georgia,serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
}
.hv2-plus{
  font-style:normal;
  color:var(--danger);
  font-size:.75rem;
}
.hv2-tagline{
  font-size:.6rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.hv2-brand{position:relative;}
.hv2-divider{
  position:relative;
  flex:0 0 auto;
  width:1px;
  align-self:stretch;
  margin:6px 12px;
  background:linear-gradient(180deg,transparent,var(--red2) 15%,var(--red2) 85%,transparent);
  opacity:.75;
}
.hv2-divider:before,
.hv2-divider:after{
  content:"";
  position:absolute;
  left:50%;
  width:6px;
  height:6px;
  background:var(--red2);
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 4px rgba(233,199,103,.7);
}
.hv2-divider:before{top:-3px;}
.hv2-divider:after{bottom:-3px;}

/* Center title block */
.hv2-title{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  padding:0 10px;
}
.hv2-title-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
}
.hv2-title-line{
  display:block;
  font:600 clamp(1rem,1.6vw,1.55rem)/1.15 Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink);
  white-space:nowrap;
  font-style:normal;
}
em.hv2-title-line{
  color:var(--danger);
}
.hv2-title-orn-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:340px;
  margin-bottom:2px;
}
.hv2-orn-line{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--red2));
}
.hv2-title-orn-row .hv2-orn-line:last-child{
  background:linear-gradient(90deg,var(--red2),transparent);
}
.hv2-fleur{
  width:14px;
  height:14px;
  flex:0 0 auto;
  color:var(--red2);
  filter:drop-shadow(0 0 3px rgba(233,199,103,.6));
}
.hv2-title-orn-bottom{
  display:block;
  margin-top:4px;
  width:22px;
  height:24px;
  color:var(--red2);
  filter:drop-shadow(0 0 4px rgba(233,199,103,.5));
}
.hv2-title-orn-bottom svg{width:100%;height:100%;display:block;}
.hv2-title-sub{
  font-size:.6rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

/* Right side: decorative helix + gold card buttons */
.hv2-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.hv2-helix{
  position:absolute;
  right:-6px;
  top:-58px;
  height:150px;
  width:auto;
  opacity:.5;
  transform:rotate(18deg);
  flex:0 0 auto;
  filter:drop-shadow(0 0 10px rgba(255,196,64,.55));
  pointer-events:none;
  z-index:0;
}
.hv2-cart-hidden-trigger{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.hv2-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:72px;
  min-height:80px;
  padding:10px 4px 8px;
  border-radius:12px;
  flex:0 0 auto;
  box-sizing:border-box;
  background:
    linear-gradient(160deg,#171310,#0a0908) padding-box,
    linear-gradient(160deg,#f8e4ab,#caa53d 45%,#7a5c1e 70%,#f8e4ab) border-box;
  border:1px solid transparent;
  box-shadow:0 0 14px rgba(233,199,103,.3),0 10px 18px rgba(0,0,0,.55);
}
.hv2-card:after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:-9px;
  height:12px;
  background:radial-gradient(ellipse at center,rgba(233,199,103,.5),transparent 72%);
  filter:blur(1.5px);
  pointer-events:none;
}
.hv2-card-label{
  font-size:.54rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#d9b64d;
  white-space:nowrap;
}
.hv2-card .theme-toggle-button,
.hv2-card .account-button,
.hv2-card .cart-open-button,
.hv2-card .menu-toggle,
.hv2-card-search .advanced-research-submit{
  width:34px;
  height:34px;
  border-radius:0;
  background:none;
  border:0;
  color:#f0cd7e;
  font-size:0;
  display:grid;
  place-items:center;
  box-shadow:none;
  padding:0;
  gap:0;
  text-transform:none;
  text-decoration:none;
}
.hv2-card .theme-toggle-button svg,
.hv2-card .account-button svg,
.hv2-card .menu-toggle svg,
.hv2-card-search .advanced-research-submit svg{
  width:22px;
  height:22px;
}
.hv2-card .menu-toggle{display:grid;}
.hv2-card-search:has(.advanced-research-search.search-active){
  background:none;
  border:0;
  box-shadow:none;
}
.hv2-card-search:has(.advanced-research-search.search-active):after{display:none;}
.hv2-card-search:has(.advanced-research-search.search-active) .hv2-card-label{display:none;}

/* Research AI search — force the compact icon-card presentation at every
   breakpoint (desktop included) instead of only ≤820px. */
.hv2-card-search .advanced-research-search{
  width:48px;
  height:48px;
  flex:0 0 auto;
  position:relative;
}
.hv2-card-search .advanced-research-search input{
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:48px;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
}
.hv2-card-search .research-ai-label{display:none;}
.hv2-card-search .advanced-research-search.search-active{
  position:fixed;
  left:0;
  right:0;
  width:auto;
  height:56px;
  padding:0 12px;
  background:var(--surface);
  border-bottom:1px solid var(--red2);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  z-index:1350;
  gap:8px;
  display:flex;
  align-items:center;
}
/* #advancedResearchForm's own ID rule (position:relative, for the pulsing
   glow animation) outranks the class selector above. Re-declare with the
   ID present so the expanded overlay actually goes fixed/full-width. */
#advancedResearchForm.search-active{
  position:fixed;
  left:0;
  right:0;
  width:auto;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}
.hv2-card-search .advanced-research-search.search-active input{
  position:static;
  flex:1 1 auto;
  width:100%;
  height:40px;
  padding:0 12px;
  opacity:1;
  pointer-events:auto;
  border:1px solid var(--line);
}
.hv2-card-search .advanced-research-search.search-active .advanced-research-submit{
  background:none;
  border:0;
  box-shadow:none;
  width:40px;
  height:40px;
}
.hv2-card-search .advanced-research-close{display:none;}
.hv2-card-search .advanced-research-search.search-active .advanced-research-close{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  background:none;
  border:0;
  color:var(--ink);
  font-size:18px;
  cursor:pointer;
}

/* Info strip: kept, now sits directly below the new header row on desktop */
.hv2-info-strip{
  width:100%;
  box-sizing:border-box;
  border-top:1px solid rgba(var(--hairline-rgb),.16);
}

/* ---------------- Mobile (≤820px): stacked layout ---------------- */
@media(max-width:820px){
  .hv2-row{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
  }
  .hv2-brand{
    order:1;
    flex:1 1 auto;
    justify-content:flex-start;
  }
  .hv2-crest{width:64px;height:64px;}
  .hv2-wordmark-main{font-size:1.15rem;}
  .hv2-wordmark-sub{font-size:.68rem;letter-spacing:.1em;}
  .hv2-tagline{font-size:.54rem;}
  .hv2-divider{margin:4px 8px;}
  .hv2-actions{
    order:2;
    flex:0 0 auto;
    gap:6px;
  }
  .hv2-helix{display:none;}
  .hv2-card{
    width:58px;
    min-height:66px;
    padding:7px 3px 6px;
    border-radius:10px;
    gap:4px;
  }
  .hv2-card .theme-toggle-button,
  .hv2-card .account-button,
  .hv2-card .cart-open-button,
  .hv2-card .menu-toggle,
  .hv2-card-search .advanced-research-submit{
    width:26px;
    height:26px;
    font-size:0;
    border-radius:0;
  }
  .hv2-card .theme-toggle-button svg,
  .hv2-card .account-button svg,
  .hv2-card .menu-toggle svg,
  .hv2-card-search .advanced-research-submit svg{
    width:18px;
    height:18px;
  }
  .hv2-card-search .advanced-research-search,
  .hv2-card-search .advanced-research-search input{
    height:40px;
  }
  .hv2-card-label{font-size:.44rem;}
  .hv2-title{
    order:3;
    flex:1 1 100%;
    padding:2px 0 0;
  }
  .hv2-title-line{
    white-space:normal;
    font-size:clamp(.9rem,4.6vw,1.1rem);
  }
  .hv2-title-sub{
    font-size:.5rem;
    letter-spacing:.08em;
  }
  .header-v2{
    margin:0;
    border:0;
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
  }
}
@media(max-width:480px){
  .hv2-tagline{display:none;}
  .hv2-actions{flex-wrap:wrap;justify-content:center;}
}

/* Info strip hidden at every breakpoint so the knight/banner callout sits
   flush against the icon row on desktop, matching the mobile layout where
   this strip was already hidden. */
.header-v2 .hv2-info-strip{
  display:none!important;
}
@media(max-width:820px){
  .header-v2 .hv2-info-strip{
    display:none!important;
  }
}

/* Menu button now opens/closes the nav at every width (desktop included),
   matching the new reference design which shows a Menu card on both
   desktop and mobile. ID selector outranks the older .main-nav /
   .main-nav.open class rules regardless of breakpoint or source order. */
#mainNav{
  display:none;
  position:fixed;
  z-index:1250;
  left:0;
  right:0;
  top:var(--hv2-stack-h,112px);
  height:auto;
  max-height:calc(100vh - var(--hv2-stack-h,112px));
  overflow-y:auto;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:10px;
  background:var(--surface);
  border-bottom:1px solid var(--red2);
}
#mainNav.open{
  display:flex;
}
#mainNav a{
  padding:14px;
  text-align:center;
}
#mainNav a.active{
  height:auto;
  border:0;
  color:var(--red2);
}

/* Dynamic spacing: JS measures the real header-stack height (header +
   visible info strip) into --hv2-stack-h so content below never sits under
   the fixed header, at any breakpoint or zoom level. */
body main{
  padding-top:var(--hv2-stack-h,168px)!important;
}
html{
  scroll-padding-top:var(--hv2-stack-h,168px);
}