/* ═══════════════════════════════════════════════════════════════════════
   pp-theme.css — PowerfullyPeptides site-wide theme layer (rollout 2026-07)
   The homepage's founder-approved system, extracted for every other page.
   Load ORDER contract: this file is linked AFTER the page's inline <style>
   (right before </head>) so these overrides win the cascade.
   Pairs with /pp-header.js (ticker injection, slit-P wordmark, #ppFade SVG
   defs, smart-header scroll). index.html does NOT load either file — it
   carries its own original graft; keep them in sync via this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. The team colour — mint×cobalt mixture drives every var-driven accent
       (including all cart.js-injected UI: drawer, popups, toasts). ── */
:root{
  --mint:#2F6BE0;
  --mint-deep:#1D4ED8;
  --on-mint:#FFFFFF;
  --cyan:#5FA8FF;
  --pp-teal:#34E1C4;
  --pp-teal-deep:#0E9F8A;
  --pp-fade:linear-gradient(120deg,#0E9F8A,#2F6BE0);
  --pp-fade-text:linear-gradient(100deg,#34E1C4,#4D8DFF);
}

/* ── 2. Utilities for page-local styling (used by rollout agents) ── */
.pp-grad-text{background:linear-gradient(100deg,#34E1C4,#4D8DFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pp-grad-bg{background:linear-gradient(120deg,#0E9F8A,#2F6BE0);color:#fff}
.pp-instock{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#0E9F8A;border:1px solid rgba(14,159,138,.4);border-radius:999px;padding:4px 10px}
html[data-theme="dark"] .pp-instock{color:#34E1C4;border-color:rgba(52,225,196,.4)}
/* sold-out cards: the muted pill must win over the dark-theme mint variant
   (page-local html[data-theme=dark] .card .instock otherwise out-specifies
   .card.sold .instock — W3 verifier catch, fixed once here for all pages) */
html[data-theme="dark"] .card.sold .instock{color:#8fa0ac!important;border-color:rgba(143,160,172,.4)!important}

/* ── 3. Top offers ticker (injected by pp-header.js; collapses on scroll) ── */
.top-ticker{background:linear-gradient(90deg,#153E96,#12799F 38%,#0E9F8A 58%,#2565CE);border-bottom:1px solid rgba(255,255,255,.14);overflow:clip;padding:15px 0;max-height:56px;transition:max-height .35s ease,padding .35s ease}
.header.scrolled .top-ticker{max-height:0;padding-block:0;border-bottom-width:0}
.marquee-inner{display:inline-flex;white-space:nowrap;will-change:transform;font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.92);align-items:center}
.marquee-inner>span{padding-right:3.2rem;display:inline-flex;align-items:center;gap:.6em}
.marquee-inner b{color:#fff;font-weight:700}
.tick-anim .marquee-inner{animation:ppTick 30s linear infinite}
@keyframes ppTick{to{transform:translateX(-33.3333%)}}
@media (prefers-reduced-motion: reduce){.tick-anim .marquee-inner{animation:none}}

/* ── 4. Header chrome — Aesthetic-Labs style: bigger shield, condensed-caps
       wordmark, icons only, boxed locale, no login/register words ── */
.lock img{height:58px!important}
.lock .wm{font-family:"Barlow Condensed","Sora",sans-serif;font-weight:700;font-size:25px;letter-spacing:.03em;text-transform:uppercase}
.wm small{font-size:12px!important;letter-spacing:.2em!important;font-weight:700;background:linear-gradient(100deg,#34E1C4,#4D8DFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* the brand P — exact vector trace of the shield P (markup by pp-header.js) */
.wm-p{display:inline-block;width:.88em;height:.92em;overflow:hidden;text-indent:-9999px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 104.8%22%3E%3Cpath d=%22M 0.09 0.0 L 66.82 0.0 L 67.01 0.37 L 70.54 0.37 L 75.74 1.49 L 84.29 5.2 L 88.75 8.55 L 92.19 11.99 L 95.91 17.57 L 99.26 26.12 L 100.0 29.83 L 100.0 40.43 L 99.26 44.52 L 97.4 50.09 L 94.8 55.3 L 91.82 59.39 L 88.01 63.2 L 84.29 65.8 L 77.6 68.77 L 69.05 70.26 L 29.0 70.35 L 29.37 71.1 L 29.0 103.81 L 28.9 104.83 L 0.0 104.74 L 0.0 76.3 L 1.12 71.1 L 3.72 65.15 L 7.06 59.94 L 12.36 54.65 L 14.96 52.79 L 19.8 50.56 L 24.07 50.19 L 24.26 49.81 L 59.39 49.81 L 64.22 47.96 L 68.03 44.52 L 69.89 41.17 L 71.0 37.08 L 70.63 30.2 L 68.77 26.12 L 66.08 23.05 L 63.1 21.19 L 59.76 20.07 L 57.34 20.07 L 57.16 19.7 L 23.51 19.7 L 16.64 13.75 L 12.36 10.78 L 10.69 8.92 L 10.13 8.92 L 8.46 7.06 L 6.04 5.58 L 4.37 3.72 L 1.95 2.23 Z M 0.09 10.04 L 2.51 11.52 L 14.22 21.56 L 16.26 22.68 L 17.57 24.16 L 18.12 24.16 L 19.42 25.65 L 19.98 25.65 L 27.88 32.06 L 27.79 41.26 L 22.03 41.26 L 18.68 42.01 L 12.55 45.35 L 10.69 47.21 L 10.13 47.21 L 5.95 51.77 L 0.0 60.5 Z%22 fill=%22black%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 104.8%22%3E%3Cpath d=%22M 0.09 0.0 L 66.82 0.0 L 67.01 0.37 L 70.54 0.37 L 75.74 1.49 L 84.29 5.2 L 88.75 8.55 L 92.19 11.99 L 95.91 17.57 L 99.26 26.12 L 100.0 29.83 L 100.0 40.43 L 99.26 44.52 L 97.4 50.09 L 94.8 55.3 L 91.82 59.39 L 88.01 63.2 L 84.29 65.8 L 77.6 68.77 L 69.05 70.26 L 29.0 70.35 L 29.37 71.1 L 29.0 103.81 L 28.9 104.83 L 0.0 104.74 L 0.0 76.3 L 1.12 71.1 L 3.72 65.15 L 7.06 59.94 L 12.36 54.65 L 14.96 52.79 L 19.8 50.56 L 24.07 50.19 L 24.26 49.81 L 59.39 49.81 L 64.22 47.96 L 68.03 44.52 L 69.89 41.17 L 71.0 37.08 L 70.63 30.2 L 68.77 26.12 L 66.08 23.05 L 63.1 21.19 L 59.76 20.07 L 57.34 20.07 L 57.16 19.7 L 23.51 19.7 L 16.64 13.75 L 12.36 10.78 L 10.69 8.92 L 10.13 8.92 L 8.46 7.06 L 6.04 5.58 L 4.37 3.72 L 1.95 2.23 Z M 0.09 10.04 L 2.51 11.52 L 14.22 21.56 L 16.26 22.68 L 17.57 24.16 L 18.12 24.16 L 19.42 25.65 L 19.98 25.65 L 27.88 32.06 L 27.79 41.26 L 22.03 41.26 L 18.68 42.01 L 12.55 45.35 L 10.69 47.21 L 10.13 47.21 L 5.95 51.77 L 0.0 60.5 Z%22 fill=%22black%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E") center/contain no-repeat}
.tb-mid{display:none!important}
.tb-right .lr{display:none!important}
.locale{gap:8px}
.locale .locitem{border:1.5px solid var(--line-strong);border-radius:6px;padding:6px 12px;background:var(--surface);font-weight:600;font-size:13px;color:var(--ink)}
.locale .locitem::after{content:"▾";margin-left:7px;opacity:.55;font-size:11px}
.tb-right .locale .locitem:hover{border-color:#0E9F8A}
.iconbtn .lbl{display:none!important}
.mb-right .iconbtn{padding:10px;font-size:14px;gap:8px}
.mb-right .iconbtn svg{width:29px;height:29px;stroke-width:1.9;stroke:#0E1620;transition:transform .28s cubic-bezier(.34,1.4,.64,1)}
html[data-theme="dark"] .mb-right .iconbtn svg{stroke:#EAF3F5}
.mb-right .iconbtn:hover svg,.mb-right .iconbtn:active svg{stroke:url(#ppFade)!important;transform:scale(1.22) rotate(-7deg)}
.iconbtn.cart2{background:none!important;border:none!important;color:var(--ink)}
.cart2{position:relative;padding-right:16px!important}
.cart2 b{position:absolute;top:-3px;right:-2px;background:linear-gradient(120deg,#0E9F8A,#2F6BE0);color:#fff!important;min-width:20px;height:20px;font-size:11.5px;font-weight:700;border-radius:999px;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 8px rgba(14,22,32,.35)}
.acct{border:none!important;padding:10px!important;background:none!important}
/* theme toggle: one living emoji in a gradient ring */
.modetog{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,transform .2s;position:relative;border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,#34E1C4,#2F6BE0) border-box}
.modetog:hover{transform:scale(1.08);border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,#0E1620,#0E1620) border-box}
.modetog .knob,.modetog span{display:none!important}
.modetog::after{content:"☀️";font-size:20px;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.modetog:hover::after{transform:translate(-50%,-50%) rotate(40deg)}
html[data-theme="dark"] .modetog::after{content:"🌙"}

/* ── 5. Smart header — scroll down hides ticker+topbar, then the nav;
       a nudge up brings ONLY the nav back (pp-header.js toggles classes) ── */
.topbar{max-height:52px;transition:max-height .3s ease}
.header.scrolled .topbar{max-height:0;overflow:hidden;opacity:0}
.catnav{max-height:64px;transition:max-height .3s ease}
.header.nav-hide .catnav{max-height:0;overflow:hidden;border-width:0}

/* ── 6. Nav links — grow on hover, gradient underline when current ── */
.cn-in a{transition:transform .18s var(--ease),color .18s;transform-origin:center bottom}
.cn-in a:hover{transform:scale(1.15);text-shadow:0 0 .6px currentColor}
.cn-in a.cur{font-weight:700;transform:scale(1.08);border-bottom:2.5px solid;border-image:linear-gradient(90deg,#34E1C4,#2F6BE0) 1}

/* ── 7. Search — gradient go-button ── */
.search .sgo{background:linear-gradient(120deg,#0E9F8A,#2F6BE0)!important}
.search .sgo svg{stroke:#fff!important}
.search:focus-within{border-color:rgba(52,225,196,.6)!important}

/* ── 8. Signature surfaces — the mixture, not solid anything ── */
.btn-primary{background:linear-gradient(120deg,#0E9F8A,#2F6BE0)!important;color:#fff!important}
.viewall{background:linear-gradient(120deg,#0E9F8A,#2F6BE0)!important;color:#fff!important;border:0!important;font-weight:700}
.viewall:hover{filter:brightness(1.1)}

/* ── 9. Footer + cookie bar join the team ── */
.foot-support a{background:linear-gradient(100deg,#34E1C4,#4D8DFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.foot-col a:hover{background:linear-gradient(100deg,#34E1C4,#4D8DFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#5FA8FF}
.cookie{border-top-color:rgba(47,107,224,.35)!important}
.ck-accept{background:linear-gradient(120deg,#0E9F8A,#2F6BE0)!important;color:#fff!important;border:0!important}
.ck-text a{background:linear-gradient(100deg,#0E9F8A,#2F6BE0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}