/* Pepveris custom CSS.
Kept in its own file on purpose: seo_en.py, a11y_fix.py and i18n_build.py
each rewrite a different span of pepveris-seo.css, so anything added there
is destroyed by the next build. Nothing regenerates this file. */
/* ---- accessibility: visible keyboard focus ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #306293!important;outline-offset:2px!important}
/* ---- contrast: theme lime buttons keep the brand colour, text becomes dark ---- */
.btn:not(.btn_transparent):not(.btn_outline),.btn:not(.btn_transparent):not(.btn_outline) *{color:#0c202e!important}
.man_page .sm_menu_toggle,.man_page .sm_menu_toggle i{color:#0c202e!important}
/* buttons whose own design was overridden by the theme's lime button rule */
.man_page .ep-contact-submit,.man_page .ep-custom-submit{background:#3f6f91!important;color:#fff!important}
.man_page .ep-contact-submit:hover,.man_page .ep-custom-submit:hover{background:#345b83!important}
.man_page #epcs-coa-clear{background:#3f6f91!important;color:#fff!important}
.man_page #epcs-coa-clear:hover{background:#345b83!important}
.sem-order-cta .sem-btn-primary{color:#0a1e2c!important}
.ep-process-btn{background:#346b93!important}
.ep-process-btn:hover{background:#2c5782!important}
.ep-contact-btn-wa{background:#2569ac!important}
.ep-order-step-num{background:#406890!important}
/* ---- contrast: labels and muted text on light sections (no !important so dark-section rules still win) ---- */
html body .ep-about-kicker,html body .ep-benefits-kicker,html body .ep-contact-kicker,html body .ep-custom-kicker,html body .ep-faq-kicker,html body .ep-order-kicker,html body .ep-process-kicker{color:#2a6188}
html body .stm-product-item .product-categories,html body .stm-product-item .product-categories a{color:#026e8b!important}
html body .ep-contact-phone{color:#595e63}
html body .ep-contact-person-role{color:#5d6267}
html body .ep-contact-route-no{color:#435e72}
html body .ep-about-ruo,html body .ep-custom-ruo,html body .ep-contact-form-note,html body .ep-custom-form-note,html body .sem-sources,html body .sem-disclaimer p{color:#52585e}
html body .sem-stat small,html body .sem-sku small,html body .sem-profile-row span,html body .ep-contact-route small{color:#5f656b!important}
html body .ep-about-partner-card p{color:#5a6066}
html body .ep-benefits-intro{color:#5e6368}
html body .ep-about-pillar-number,html body .ep-custom-card-no{color:#4d6f88}
html body .ep-faq-num{color:#3f6e8f}
html body .elementor-widget-button .elementor-button,html body .elementor-widget-button .elementor-button .elementor-button-text{color:#0c202e}
.page-numbers{min-width:44px;text-align:center}
html body .sem-quality-number{color:#26619c}
html body .sem-chain span:nth-child(4n){background:#356689!important;color:#fff!important}
html body .epcs-coa-eyebrow{color:#026e8b!important}
html body .epcs-coa-pill--internal small{color:#0e6e88!important}
/* inline links inside notes: bigger hit area without changing the line layout */
.ep-contact-help a,.ep-contact-reconnect a,.ep-quote-note a,.ep-contact-form-note a,.ep-custom-form-note a,.ep-cat-intro a,.ep-contact-person a,.ep-footer-support{padding-block:8px}
/* product template colour variables are declared on .sem-product only; sections outside it lost their colours */
body.single-product{--ink:#192e42;--muted:#636b72;--green:#2f71b4;--green2:#74a1c0;--line:#dfe4e8;--soft:#f3f6f8;--cream:#f9fcfd}
/* product "Molecular Design" card: its dark background used a CSS variable that is undefined outside .sem-product */
html body .sem-card.sem-structure{background:#192e42!important;border-color:#192e42!important;color:#fff}
html body .sem-card.sem-structure h3{color:#fff!important}
html body .sem-card.sem-structure p{color:#ced3d9!important}
/* ---- brand logo sizing (logo aspect ratio differs from the old one) ---- */
.man_logo .man_logo_img{max-width:none!important}
.man_logo .man_logo_img img{height:56px;width:auto;max-width:none}
@media (max-width:1024px){.man_logo .man_logo_img img{height:46px}}
html body .ep-footer-logo{padding:14px 20px}
html body .ep-footer-logo img{width:264px;height:auto}
@media (max-width:767px){html body .ep-footer-logo img{width:216px}}
h2:after{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
/* ---- COA page: documentation-on-request block ---- */
.ep-coa-request{padding:72px 24px 84px;background:#f3f7f8}
.ep-coa-request-inner{max-width:900px;margin:0 auto;text-align:center}
.ep-coa-request-eyebrow{margin:0 0 12px;color:#2a6188;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.ep-coa-request h1{margin:0 0 18px;font-size:clamp(30px,4vw,44px);line-height:1.15;color:#20262c}
.ep-coa-request-lead{margin:0 auto 34px;max-width:760px;font-size:17px;line-height:1.7;color:#4c5258}
.ep-coa-request-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 34px;padding:0;list-style:none;text-align:left}
.ep-coa-request-list li{background:#fff;border:1px solid #e3e8ec;border-radius:14px;padding:18px 18px 20px}
.ep-coa-request-list strong{display:block;margin-bottom:6px;font-size:15px;color:#20262c}
.ep-coa-request-list span{font-size:14px;line-height:1.55;color:#5f656b}
.ep-coa-request-actions{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:center;align-items:center;margin:0 0 18px}
.ep-coa-request-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:9px;background:#3f6f91;color:#fff!important;font-weight:700;text-decoration:none}
.ep-coa-request-btn:hover{background:#345b83}
.ep-coa-request-link{color:#19649a;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding-block:8px}
.ep-coa-request-note{margin:0;font-size:14px;color:#5f656b}
@media(max-width:900px){.ep-coa-request-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ep-coa-request-list{grid-template-columns:1fr}}
/* ---- legibility: nothing below 12px for labels ---- */
.ep-ar-type,.ep-ar-label,.ep-contact-route-no,.ep-about-trust-item,.ep-custom-ruo{font-size:12px!important}
.ep-ar-media:before{font-size:10px!important;color:#465c6b!important}
/* ---- mobile tap targets in the footer and link lists ---- */
@media (max-width:767px){
.ep-footer li a,.ep-footer-legal a,.ep-footer-contact a{display:inline-block;padding-block:8px}
.product-categories a{display:inline-block;padding-block:6px}
.sem-sources a{display:inline-block;padding-block:6px}
}
/* ---- motion ---- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* ---- header: always visible on every page (the theme floats it over the content, so it
disappeared on pages whose first section is a dark image) ---- */
#masthead{position:relative!important;z-index:100;background:#fff}
/* The theme gives the header wrapper z-index:0, which caps the header's whole
stacking context at level 0. #content is a later sibling, so its absolutely
positioned hero overlay paints over anything that hangs below the header -
the Peptides dropdown was being covered by it. #page holds only the header,
so lifting it one level costs nothing else. */
#page.man_page{z-index:2}
/* ---- mobile legibility: nothing under 12px on small screens ---- */
@media (max-width:767px){
html body .ep-contact-role,html body .ep-contact-person-role,html body .ep-footer-ruo,html body .ep-benefits-kicker,
html body .ep-support-label,html body .ep-about-ruo,html body .sem-sources,
html body .sem-sources a,html body .ep-custom-card-no,html body .ep-custom-step-no,
html body .ep-faq-num,html body .sem-sku small,html body .sem-stat small,
html body .sem-profile-row span,html body .ep-contact-route small,html body .ep-ar-type,
html body .ep-ar-label,html body .ep-contact-route-no,html body .ep-about-trust-item,
html body .ep-custom-ruo,html body .ep-custom-spec span,html body .ep-contact-form-note,
html body .ep-contact-form-note a,html body .ep-custom-form-note,html body .ep-custom-form-note a,
html body .ep-contact-bottom p,html body .ep-quote-note,html body .ep-quote-note a,
html body .sem-chain span{font-size:12px!important;line-height:1.35}
}
/* ---- service contacts: two representatives, WhatsApp + Telegram ---- */
.ep-contact-btn-tg{background:#1c7ca8!important;color:#fff!important}
.ep-contact-btn-tg:hover{background:#17698f!important}
@media (min-width:768px){
html body .ep-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:660px}
html body .ep-contact-person-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}
/* ---- vertical scrolling only ----
Several sections carry decorative blobs at negative offsets (the footer's
reaches 270px past the right edge, the product hero's 180px). Desktop
browsers clip them against an ancestor, but iOS Safari lets the viewport pan
sideways to reach them instead. Clip at the root so the page can only ever
scroll up and down. Must be `hidden`, not `clip`: with `overflow-x:clip` the
other axis stays `visible` and the viewport stops scrolling altogether,
whereas `hidden` promotes `overflow-y` to `auto` and vertical scrolling
keeps working. */
html,body{overflow-x:hidden}
/* ---- mobile menu: lift the header layer while the menu is open ----
The theme wraps the header in #page.man_page, which is position:relative with
z-index:0 — a stacking context. The off-canvas menu's z-index:999990 is capped
inside it, so #content (later in the DOM) paints its absolutely positioned
hero overlay on top and swallows every menu click. Raise the whole header
layer for as long as the menu is open, and leave normal stacking alone. */
body.ep-mobile-nav-open #page.man_page{z-index:999999}
/* ==== ep dock start ==== */
/* --- floating contact dock --- */
html body .ep-dock{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:9000;display:flex;flex-direction:column;gap:2px;padding:7px 6px;background:rgba(31,37,43,.93);border:1px solid rgba(255,255,255,.09);border-right:0;border-radius:15px 0 0 15px;box-shadow:-7px 0 26px rgba(20,32,43,.2);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
html body .ep-dock-btn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:11px;background:transparent;color:#fff;cursor:pointer;text-decoration:none!important;-webkit-appearance:none;appearance:none;transition:background .18s ease}
html body .ep-dock-btn svg{width:20px;height:20px;fill:currentColor;pointer-events:none}
html body .ep-dock-btn:hover,html body .ep-dock-btn:focus-visible{background:rgba(255,255,255,.14)}
html body .ep-dock-wa:hover,html body .ep-dock-wa:focus-visible{background:#2d7ccc}
html body .ep-dock-tg:hover,html body .ep-dock-tg:focus-visible{background:#1c7ca8}
html body .ep-dock-mail:hover,html body .ep-dock-mail:focus-visible{background:#536674}
html body .ep-dock-btn:focus-visible{outline:2px solid #cfe0ec;outline-offset:2px}
html body .ep-dock-sep{height:1px;margin:5px 5px;background:rgba(255,255,255,.15)}
html body .ep-dock-tip{position:absolute;top:50%;right:calc(100% + 11px);transform:translateY(-50%) translateX(7px);padding:7px 11px;border-radius:9px;background:#1f252b;color:#fff;font:700 12px/1 Arial,Helvetica,sans-serif;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 7px 20px rgba(20,27,34,.26);transition:opacity .18s ease,transform .18s ease,visibility .18s}
html body .ep-dock-btn:hover .ep-dock-tip,html body .ep-dock-btn:focus-visible .ep-dock-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
html body .ep-dock-top{display:none}
html body .ep-dock.is-scrolled .ep-dock-top{display:flex}
html[dir=rtl] body .ep-dock{right:auto;left:0;border-radius:0 15px 15px 0;border-right:1px solid rgba(255,255,255,.09);border-left:0;box-shadow:7px 0 26px rgba(20,32,43,.2)}
html[dir=rtl] body .ep-dock-tip{right:auto;left:calc(100% + 11px);transform:translateY(-50%) translateX(-7px)}
html[dir=rtl] body .ep-dock-btn:hover .ep-dock-tip,html[dir=rtl] body .ep-dock-btn:focus-visible .ep-dock-tip{transform:translateY(-50%) translateX(0)}
@media (max-width:900px){
html body .ep-dock{gap:0;padding:5px 4px;border-radius:13px 0 0 13px}
html body .ep-dock-btn{width:38px;height:38px;border-radius:9px}
html body .ep-dock-btn svg{width:18px;height:18px}
html body .ep-dock-tip{display:none}
html body .ep-dock-sep{margin:4px 4px}
}
@media (prefers-reduced-motion:reduce){
html body .ep-dock-btn,html body .ep-dock-tip{transition:none}
}
@media print{html body .ep-dock{display:none}}
/* --- contact role line --- */
html body .ep-contact-role{margin:0 0 3px;color:#687178;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
html body .ep-support .ep-contact-role{color:#afc1ce}
@media (min-width:1025px){html body .ep-contact-person-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1060px}}
@media (min-width:768px) and (max-width:1024px){html body .ep-contact-person-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}}
/* ==== ep dock end ==== */
/* --- desktop dropdown --- */
/* Centre the panel on its parent item: the theme anchors it with left:0, so a
250px panel hangs off the right of a short label like "Peptides". Only the
first level moves; the third level keeps the theme's left:-250px fly-out.
.man_page is overflow:hidden (it contains the off-canvas slide on mobile)
and wraps only the 79px-tall header, so the panel was being cut off at the
header's bottom edge. Let it escape on the breakpoint where hover menus
exist at all; the off-canvas slide below 1024px is untouched. Sideways
overflow is still clipped at the root by html,body{overflow-x:hidden}. */
@media (min-width:1024px){
html body #page.man_page{overflow:visible}
html body .sm_nav_menu > li > ul{left:50%;transform:translate(-50%,7px)}
html body .sm_nav_menu > li:hover > ul{transform:translate(-50%,0)}
html body .sm_nav_menu > li > ul:before{left:50%;margin-left:-4px}
/* Elementor pads each item 15px a side. The header column is width-capped,
so Spanish, Portuguese, Russian and Vietnamese labels pushed "Contacts"
onto a second row at every desktop width (German cleared it by 1px).
11px keeps all 18 languages on one row with room to spare. The ID beats
Elementor's (0,4,1) selector. */
html body #sm_nav_menu > li{padding-left:11px;padding-right:11px}
}
/* ==== ep i18n flags start ==== */
html body .ep-lang .ep-flag-vi.ep-flag-vi.ep-flag-vi.ep-flag-vi{background-image:url("data:image/svg+xml,")!important}
html body .ep-lang .ep-flag-th.ep-flag-th.ep-flag-th.ep-flag-th{background-image:url("data:image/svg+xml,")!important}
html body .ep-lang .ep-flag-id.ep-flag-id.ep-flag-id.ep-flag-id{background-image:url("data:image/svg+xml,")!important}
html body .ep-lang .ep-flag-ms.ep-flag-ms.ep-flag-ms.ep-flag-ms{background-image:url("data:image/svg+xml,")!important}
html body .ep-lang .ep-flag-km.ep-flag-km.ep-flag-km.ep-flag-km{background-image:url("data:image/svg+xml,")!important}
html body .ep-lang .ep-flag-lo.ep-flag-lo.ep-flag-lo.ep-flag-lo{background-image:url("data:image/svg+xml,")!important}
html body .ep-lang ul{width:max-content;min-width:190px;max-width:calc(100vw - 32px)}html body .ep-lang ul a{white-space:nowrap}
html[lang=th] :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){line-height:1.4!important}
html[lang=lo] :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){line-height:1.45!important}
html[lang=km] :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){line-height:1.55!important}
html:is([lang=th],[lang=km],[lang=lo]) *{letter-spacing:normal!important}
html[lang=km] :is(p,li,dd,figcaption){line-height:1.8}
/* ==== ep i18n flags end ==== */
/* --- phone headings: long single words --- */
/* Display headings keep their desktop size on phones, so one long word
("Qualitätsdokumentation", "Лиофилизированные", "kebolehpercayaan") ran
past the right edge in German, Dutch, Russian, French and Malay. Let a
word break (hyphenated where the browser has a dictionary for the page
language) only when it cannot fit, and scale the page-title band down.
"anywhere" rather than "break-word": several of these headings sit in grid
columns sized by min-content, and only "anywhere" lowers min-content, so
with "break-word" the column itself grew past the screen. */
@media (max-width:767px){
html body :is(h1,h2,h3,.elementor-heading-title){overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
/* same min-content problem for text blocks: the French About quote card's
padding plus "approvisionnement" widened its whole grid column */
html body :is(p,li,blockquote,figcaption,dd,td){overflow-wrap:anywhere}
html body .man_intro h1{font-size:clamp(26px,8.4vw,45px)!important}
}