/* ═══════════════════════════════════════════════════════════════
   EUROPE PEPTIDES design system. Loaded after shared.css on every page.
   White pages, stone cards, black pills, one lime CTA, a colour per research area.
   Geist for all text, Geist Mono for specs. Upright type only.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ep-ink:#161616; --ep-ink-2:#2C2C2C; --ep-muted:#686868; --ep-faint:#9A9A9A;
  --ep-bg:#FFFFFF; --ep-stone:#F6F5F2; --ep-stone-2:#EEECE7; --ep-line:#E7E4DE;
  --ep-lime:#D8F36A; --ep-lime-2:#CBEA4F; --ep-ok:#1F9D55;
  --ep-r-xl:32px; --ep-r-lg:24px; --ep-r-md:18px; --ep-r-sm:12px; --ep-pill:999px;
  --ep-font:'Geist','Helvetica Neue',Arial,sans-serif;
  --ep-mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --ep-wrap:1344px; --ep-gutter:clamp(18px,3.4vw,48px);
  --ep-shadow:0 1px 2px rgba(22,22,22,.04),0 8px 30px rgba(22,22,22,.06);

  /* Research areas: --c = accent, --w = wash */
  --c-tissue:#EE7F5F;     --w-tissue:#FDEBE4;
  --c-metabolic:#F0B429;  --w-metabolic:#FFF3CF;
  --c-gh:#5AA9E6;         --w-gh:#E2F0FB;
  --c-longevity:#9B87E6;  --w-longevity:#EEEAFC;
  --c-cognitive:#4CC39A;  --w-cognitive:#E0F5EC;
  --c-melano:#E57FA6;     --w-melano:#FCE7EF;
  --c-igf:#7C9CF0;        --w-igf:#E7EDFD;
  --c-pens:#3B3B3B;       --w-pens:#ECECEA;
  --c-cart:#6B7F8E;       --w-cart:#E8EDF0;
  --c-nasal:#3FBFCB;      --w-nasal:#DCF4F6;
  --c-supplies:#A9A397;   --w-supplies:#F1EFEA;

  /* Re-theme the inherited Origin styles so every page picks up the new look. */
  --navy:#161616; --navy-light:#2C2C2C;
  --gold:#161616; --gold-light:#3A3A3A; --gold-pale:#F1EFEA; --gold-muted:rgba(22,22,22,.05);
  --cream:#FFFFFF; --white:#FFFFFF;
  --gray-100:#F6F5F2; --gray-200:#ECEAE5; --gray-300:#D9D6CF; --gray-500:#8C8A85; --gray-700:#4A4945;
  --text:#161616; --text-muted:#686868;
  --serif:var(--ep-font); --sans:var(--ep-font); --mono:var(--ep-mono);
}
*{ font-style:normal; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--ep-font); background:var(--ep-bg); color:var(--ep-ink); letter-spacing:-.006em; }
::selection{ background:var(--ep-lime); color:var(--ep-ink); }
.ep-wrap{ max-width:var(--ep-wrap); margin:0 auto; padding:0 var(--ep-gutter); }

/* ── Buttons & chips ── */
.ep-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px; border-radius:var(--ep-pill);
  font:600 15px/1 var(--ep-font); letter-spacing:-.01em; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease; white-space:nowrap; }
.ep-btn:active{ transform:scale(.98); }
.ep-btn svg{ width:18px; height:18px; flex:none; transition:transform .2s ease; }
.ep-btn:hover svg{ transform:translateX(3px); }
.ep-btn-dark{ background:var(--ep-ink); color:#fff; }
.ep-btn-dark:hover{ background:#000; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.ep-btn-light{ background:#fff; color:var(--ep-ink); border-color:var(--ep-line); }
.ep-btn-light:hover{ border-color:var(--ep-ink); }
.ep-btn-lime{ background:var(--ep-lime); color:var(--ep-ink); }
.ep-btn-lime:hover{ background:var(--ep-lime-2); box-shadow:0 8px 22px rgba(160,200,30,.28); }
.ep-btn-sm{ height:42px; padding:0 18px; font-size:14px; }
.ep-chip{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--ep-pill); background:var(--ep-stone);
  font:500 13.5px/1 var(--ep-font); color:var(--ep-ink); white-space:nowrap; }
.ep-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--ep-ok); }
.ep-chip-ok{ background:#E7F6EC; color:#13723C; }
.ep-mono{ font-family:var(--ep-mono); letter-spacing:0; }

/* ── Announcement bar ── */
.ep-announce{ background:var(--ep-ink); color:#fff; text-align:center; font:500 13.5px/1 var(--ep-font); }
.ep-announce a{ display:inline-flex; align-items:center; gap:10px; padding:13px 16px; color:#fff; text-decoration:none; }
.ep-announce .sep{ opacity:.35; }
.ep-announce .arr{ opacity:.6; transition:transform .2s ease; }
.ep-announce a:hover .arr{ transform:translateX(3px); opacity:1; }

/* ── Header ── */
.ep-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease; }
.ep-header.scrolled{ border-color:var(--ep-line); }
.ep-header-inner{ max-width:var(--ep-wrap); margin:0 auto; padding:0 var(--ep-gutter); height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.ep-wordmark{ font:650 25px/1 var(--ep-font); letter-spacing:-.05em; color:var(--ep-ink); text-decoration:none; white-space:nowrap; justify-self:start; }
.ep-wordmark span{ color:var(--ep-faint); font-weight:500; }
.ep-nav{ display:flex; align-items:center; gap:2px; }
.ep-nav > a, .ep-dd > button{ display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 15px; border-radius:var(--ep-pill); border:0; background:none; cursor:pointer;
  font:450 15px/1 var(--ep-font); color:#555; text-decoration:none; transition:color .15s ease, background .15s ease; }
.ep-nav > a:hover, .ep-dd > button:hover, .ep-dd.open > button{ color:var(--ep-ink); background:var(--ep-stone); }
.ep-dd{ position:relative; }
.ep-dd > button svg{ width:14px; height:14px; transition:transform .2s ease; }
.ep-dd.open > button svg{ transform:rotate(180deg); }
.ep-dd-panel{ position:absolute; top:calc(100% + 12px); left:50%; transform:translate(-50%,6px); width:640px; padding:12px; background:#fff; border:1px solid var(--ep-line);
  border-radius:var(--ep-r-lg); box-shadow:0 24px 60px rgba(22,22,22,.12); opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s; }
.ep-dd.open .ep-dd-panel, .ep-dd:focus-within .ep-dd-panel{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.ep-dd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ep-dd-grid > :last-child:nth-child(odd){ grid-column:1 / -1; }
.ep-dd-item{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--ep-r-md); text-decoration:none; color:var(--ep-ink); transition:background .15s ease; }
.ep-dd-item:hover{ background:var(--w); }
.ep-dd-item .sw{ width:40px; height:40px; border-radius:12px; background:var(--w); display:grid; place-items:center; flex:none; }
.ep-dd-item .sw i{ width:12px; height:12px; border-radius:50%; background:var(--c); display:block; }
.ep-dd-item b{ display:block; font:600 14.5px/1.2 var(--ep-font); }
.ep-dd-item small{ display:block; font:400 12.5px/1.3 var(--ep-font); color:var(--ep-muted); margin-top:3px; }
.ep-dd-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; padding:12px 14px 6px; border-top:1px solid var(--ep-line); }
.ep-dd-foot a{ font:600 14px/1 var(--ep-font); color:var(--ep-ink); text-decoration:none; }
.ep-dd-foot a:hover{ text-decoration:underline; }
.ep-actions{ display:flex; align-items:center; gap:8px; justify-self:end; }

/* Search (keeps shared.js hooks: #navSearch / #navSearchInput / #navSearchResults) */
.ep-header .nav-search{ position:relative; display:flex; align-items:center; }
.ep-header .nav-search-btn{ width:44px; height:44px; border-radius:var(--ep-pill); border:1px solid var(--ep-line); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ep-ink); }
.ep-header .nav-search-btn:hover{ border-color:var(--ep-ink); }
.ep-header .nav-search-input{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:0; opacity:0; height:44px; padding:0 48px 0 18px; border-radius:var(--ep-pill);
  border:1px solid var(--ep-ink); background:#fff; font:400 15px var(--ep-font); color:var(--ep-ink); outline:none; transition:width .25s ease, opacity .2s ease; pointer-events:none; }
.ep-header .nav-search.open .nav-search-input{ width:300px; opacity:1; pointer-events:auto; }
.ep-header .nav-search.open .nav-search-btn{ position:relative; z-index:2; border-color:transparent; background:transparent; }
.ep-header .nav-search-results{ position:absolute; right:0; top:calc(100% + 10px); width:340px; background:#fff; border:1px solid var(--ep-line); border-radius:var(--ep-r-md); box-shadow:0 24px 60px rgba(22,22,22,.12); overflow:hidden; }

/* Currency + language selects rendered by shared.js into #currency-slot */
.ep-header .currency-slot, .ep-sheet .currency-slot{ display:flex; gap:6px; }
.ep-header .currency-slot select, .ep-sheet .currency-slot select{ height:44px; padding:0 30px 0 14px; border-radius:var(--ep-pill); border:1px solid var(--ep-line); background:#fff; font:500 13.5px var(--ep-font); color:var(--ep-ink);
  -webkit-appearance:none; appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.ep-header .currency-slot select:hover, .ep-sheet .currency-slot select:hover{ border-color:var(--ep-ink); }

/* Cart button */
.ep-cart-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px 0 16px; border-radius:var(--ep-pill); border:0; background:var(--ep-ink); color:#fff;
  font:600 14px/1 var(--ep-font); cursor:pointer; transition:background .2s ease; }
.ep-cart-btn:hover{ background:#000; }
.ep-cart-btn svg{ width:18px; height:18px; }
.ep-cart-btn .cart-badge{ position:static; min-width:22px; height:22px; padding:0 6px; border-radius:var(--ep-pill); background:var(--ep-lime); color:var(--ep-ink);
  font:700 12px/22px var(--ep-font); text-align:center; display:inline-block; transform:none; }
.ep-burger{ display:none; width:44px; height:44px; border-radius:var(--ep-pill); border:1px solid var(--ep-line); background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; }
.ep-burger span{ display:block; width:18px; height:1.8px; background:var(--ep-ink); border-radius:2px; }

/* Mobile sheet (shared.js toggles .open on #mobileMenu and #mobileOverlay) */
.ep-sheet.mobile-menu{ position:fixed; top:0; right:0; bottom:0; left:auto; width:min(420px,100%); height:100%; z-index:1001; background:#fff; padding:0; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); box-shadow:none; overflow-y:auto; visibility:visible; opacity:1; }
.ep-sheet.mobile-menu.open{ transform:translateX(0); box-shadow:-30px 0 80px rgba(0,0,0,.18); }
.mobile-overlay{ background:rgba(22,22,22,.35); }
.ep-sheet-head{ display:flex; justify-content:space-between; align-items:center; height:76px; padding:0 22px; border-bottom:1px solid var(--ep-line); }
.ep-sheet-close{ width:44px; height:44px; border-radius:var(--ep-pill); border:1px solid var(--ep-line); background:#fff; font-size:22px; line-height:1; cursor:pointer; color:var(--ep-ink); }
.ep-sheet-body{ padding:18px 22px 28px; display:flex; flex-direction:column; gap:22px; }
.ep-sheet-label{ font:500 12px/1 var(--ep-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ep-faint); margin-bottom:10px; }
.ep-sheet-areas{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ep-sheet-areas > :last-child:nth-child(odd){ grid-column:1 / -1; }
.ep-sheet-areas a{ display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:var(--ep-r-md); background:var(--w); text-decoration:none; color:var(--ep-ink); font:600 14px/1.2 var(--ep-font); }
.ep-sheet-areas a i{ width:10px; height:10px; border-radius:50%; background:var(--c); flex:none; }
.ep-sheet-links{ list-style:none; display:flex; flex-direction:column; }
.ep-sheet-links a{ display:flex; justify-content:space-between; align-items:center; padding:16px 2px; border-bottom:1px solid var(--ep-line); text-decoration:none; color:var(--ep-ink); font:550 18px/1 var(--ep-font); letter-spacing:-.02em; }
.ep-sheet-links a::after{ content:'\2192'; color:var(--ep-faint); font-weight:400; }

/* ── Footer (dark card, Amble-style) ── */
.ep-footer{ background:var(--ep-ink); padding:28px var(--ep-gutter) 26px; margin-top:0; }
.ep-footer-card{ max-width:var(--ep-wrap); margin:0 auto; background:#202020; border:1px solid #2C2C2C; border-radius:var(--ep-r-xl); padding:clamp(28px,4vw,56px);
  display:grid; grid-template-columns:1.1fr 2fr; gap:48px; color:#fff; }
.ep-footer .ep-wordmark{ color:#fff; font-size:30px; }
.ep-footer .ep-wordmark span{ color:#8E8E8E; }
.ep-f-brand p{ font:400 14.5px/1.6 var(--ep-font); color:#A8A8A8; margin:16px 0 22px; max-width:340px; }
.ep-f-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.ep-f-badges span{ height:30px; padding:0 12px; border-radius:var(--ep-pill); background:#2C2C2C; color:#D6D6D6; font:500 12.5px/30px var(--ep-font); }
.ep-f-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ep-f-cols h4{ font:600 14.5px/1 var(--ep-font); color:#fff; margin-bottom:18px; letter-spacing:-.01em; }
.ep-f-cols ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.ep-f-cols a{ font:400 14.5px/1.3 var(--ep-font); color:#A8A8A8; text-decoration:none; transition:color .15s ease; }
.ep-f-cols a:hover{ color:#fff; }
.ep-f-legal{ max-width:var(--ep-wrap); margin:22px auto 0; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font:400 12.5px/1.6 var(--ep-font); color:#8A8A8A; }
.ep-f-legal p{ max-width:860px; }
.ep-f-legal b{ color:#D6D6D6; font-weight:600; }

/* Sticky header: shared.css sets overflow-x:hidden on html/body, which breaks position:sticky.
   clip keeps the no-sideways-scroll behaviour without creating a scroll container. */
html, body{ overflow-x:clip; }


/* ── Cookie banner (shared.js #cookieBanner) as a floating dark card ── */
.cookie-banner{ left:16px !important; right:16px !important; bottom:16px !important; max-width:820px; margin:0 auto; border-radius:22px; background:var(--ep-ink) !important;
  padding:18px 22px !important; transform:translateY(calc(100% + 30px)); box-shadow:0 20px 50px rgba(0,0,0,.25); }
.cookie-banner.show{ transform:none; }
.cookie-banner .container{ padding:0; max-width:none; }
.cookie-inner p{ font:400 14px/1.5 var(--ep-font) !important; color:rgba(255,255,255,.82) !important; }
.cookie-inner p a{ color:#fff !important; }
.cookie-btn{ height:42px; padding:0 18px !important; border-radius:var(--ep-pill) !important; font:600 14px/1 var(--ep-font) !important; letter-spacing:0 !important; text-transform:none !important; }
.cookie-accept{ background:var(--ep-lime) !important; color:var(--ep-ink) !important; border:0 !important; }
.cookie-reject{ background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.32) !important; }
.cookie-reject:hover{ border-color:#fff !important; }
@media (max-width:640px){
  .cookie-inner{ flex-direction:column; align-items:stretch !important; gap:14px !important; }
  .cookie-actions .cookie-btn{ flex:1; }
}

/* Retire the inherited Origin chrome if any survives on a page */
.top-bar{ display:none !important; }

/* ── Responsive ── */
@media (max-width:1180px){
  .ep-nav > a.ep-hide-md{ display:none; }
}
@media (max-width:980px){
  .ep-header-inner{ grid-template-columns:auto 1fr; height:68px; }
  .ep-nav{ display:none; }
  .ep-burger{ display:flex; }
  .ep-header .currency-slot{ display:none; }
  .ep-cart-btn .ep-cart-word{ display:none; }
  .ep-cart-btn{ padding:0 14px; }
  .ep-header .nav-search.open .nav-search-input{ width:min(260px,calc(100vw - 150px)); }
  .ep-footer-card{ grid-template-columns:1fr; gap:36px; }
  .ep-f-cols{ grid-template-columns:1fr 1fr; gap:30px 20px; }
}
@media (max-width:520px){
  .ep-announce{ font-size:12.5px; }
  .ep-announce .ep-hide-sm{ display:none; }
  .ep-wordmark{ font-size:22px; }
  .ep-header .nav-search-results{ width:calc(100vw - 36px); right:-100px; }
}