/* ==========================================================================
AMINOLABSPRO — DESIGN SYSTEM V5.5
Eine Datei fuer alle Seiten. Ersetzt aminolabs-base.css,
aminolabs-desktop.css, aminolabs-mobile.css, aminolabs-pages.css
und aminolabs-shop.css.
Aufbau
00 Schrift selbstgehostetes Montserrat (DSGVO)
01 Tokens eine einzige :root-Ebene
02 Basis Reset, Fokus, Typografie-Grundlagen
03 Komponenten Header, Home, Seiten, Shop (dedupliziert)
04 Desktop min-width
05 Tablet/Mobile max-width, absteigend
06 A11y / Print
Spezifitaets-Anker: body.alp-v55 statt !important-Kaskade.
========================================================================== */
/* -- 00 SCHRIFT ----------------------------------------------------------
Der frühere @import auf fonts.googleapis.com ist entfernt. Er hat die
IP jedes Besuchers an Google uebertragen — fuer einen deutschen Shop
ein Abmahnrisiko (LG Muenchen I, 3 O 17493/20).
So wird Montserrat selbst gehostet:
1. google-webfonts-helper oeffnen, Montserrat waehlen,
Weights 400, 500, 600, 700, 800, 900, Charset latin.
2. Die woff2-Dateien nach assets/fonts/ im Child Theme legen.
3. Die Dateinamen unten pruefen und den Block einkommentieren.
Bis dahin greift der Fallback-Stack aus --alp-font. Das Layout bleibt
stabil, die Anmutung ist etwas neutraler.
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('assets/fonts/montserrat-latin-variable.woff2') format('woff2-variations');
}
------------------------------------------------------------------------ */
/* -- 01 TOKENS ----------------------------------------------------------- */
:root {
--alp-font-display: 'Archivo', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
--alp-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
--alp-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--alp-mint: #31c7a5;
--alp-mint-dark: #159a7d;
--alp-mint-soft: #eaf8f4;
--alp-mint-light: #53d9bc;
--alp-ink: #0b1110;
--alp-dark: #08110f;
--alp-dark-2: #0d1715;
--alp-text: #27302e;
--alp-muted: #707b78;
--alp-muted-2: #9aa3a0;
--alp-line: #dfe6e3;
--alp-line-2: #e7f2ef;
--alp-surface: #f7faf9;
--alp-surface-2: #eef2f1;
--alp-white: #ffffff;
--alp-danger: #8a3a30;
--alp-danger-soft: #fdf3f2;
--alp-container: 1180px;
--alp-gutter: clamp(20px, 4vw, 48px);
--alp-radius: 18px;
--alp-radius-sm: 12px;
--alp-btn-radius: 6px;
--alp-btn-h: 44px;
--alp-section: clamp(54px, 6.5vw, 104px);
--alp-section-lg: clamp(64px, 8vw, 132px);
--alp-fs-micro: 11px;
--alp-fs-label: 12px;
--alp-fs-small: 14px;
--alp-fs-body: 16px;
--alp-fs-lead: clamp(15px, 1.1vw, 18px);
--alp-fs-h2: clamp(1.9rem, 3.6vw, 3.1rem);
--alp-fs-h1: clamp(2.4rem, 5vw, 4.4rem);
--alp-ease: cubic-bezier(.23, 1, .32, 1);
--alp-dur: 180ms;
--alp-focus: #159a7d;
}
/* -- 02 BASIS ------------------------------------------------------------ */
html {
/* clip statt hidden. hidden auf html/body macht body zum Scroll-Container
und legt jedes position:sticky lahm — davon waren der Sticky-Header,
die Rechtstext-Sidebar und die Checkout-Bestelluebersicht betroffen. */
overflow-x: clip;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
color-scheme: light;
}
body.alp-v55 {
overflow-x: clip;
font-family: var(--alp-font);
font-size: var(--alp-fs-body);
color: var(--alp-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums lining-nums;
}
body.alp-v55 ::selection { background: var(--alp-mint); color: #06110f; }
body.alp-v55 h1,
body.alp-v55 h2,
body.alp-v55 .alp-hero-title,
body.alp-v55 .alp-page-title,
body.alp-v55 .alp-section-title { text-wrap: balance; font-optical-sizing: auto; }
body.alp-v55 .alp-hero-lead,
body.alp-v55 .alp-page-lead,
body.alp-v55 .alp-copy { text-wrap: pretty; }
/* Sichtbarer Fokus. Vorher exakt 2 Regeln in 141 KB CSS. */
body.alp-v55 :focus-visible {
outline: 2px solid var(--alp-focus);
outline-offset: 3px;
border-radius: 4px;
}
body.alp-v55 .alp-hero-v5 :focus-visible,
body.alp-v55 .alp-index-section :focus-visible,
body.alp-v55 .alp-site-header-v53 :focus-visible,
body.alp-v55 .alp-header-micro-v53 :focus-visible,
body.alp-v55 .alp-bound-header :focus-visible,
body.alp-v55 .alp-footer-v5 :focus-visible { outline-color: var(--alp-mint); }
body.alp-v55 .alp-skip-link {
position: absolute; left: -9999px; top: 0; z-index: 99999;
padding: 12px 18px; background: var(--alp-ink); color: #fff;
font-size: var(--alp-fs-label); font-weight: 700; border-radius: 0 0 10px 0;
}
body.alp-v55 .alp-skip-link:focus { left: 0; }
/* -- 03 KOMPONENTEN ------------------------------------------------------ */
html {
overflow-x: clip;
}
body.alp-v55 {
overflow-x: clip;
font-family: var(--alp-font) !important;
}
body.alp-v55 button {
font-family: var(--alp-font) !important;
}
body.alp-v55 input {
font-family: var(--alp-font) !important;
}
body.alp-v55 select {
font-family: var(--alp-font) !important;
}
body.alp-v55 textarea {
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-home-v4 {
box-sizing: border-box;
font-family: var(--alp-font);
color: var(--alp-ink);
background: #fff;
}
body.alp-v55 .alp-home-v4 * {
box-sizing: border-box;
}
body.alp-v55 .alp-home-v4 a {
text-decoration: none;
}
body.alp-v55 .alp-shell {
width: min(calc(100% - 48px), var(--alp-container));
margin-inline: auto;
}
body.alp-v55 .alp-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
color: var(--alp-mint-dark);
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .12em;
text-transform: uppercase;
}
body.alp-v55 .alp-kicker::before {
content: '';
width: 18px;
height: 2px;
background: var(--alp-mint);
}
body.alp-v55 .alp-section-title {
margin: 0;
font-family: var(--alp-font-display) !important;
font-weight: 900;
color: var(--alp-ink);
letter-spacing: -.02em;
font-size: var(--alp-fs-h2);
line-height: 1.04;
}
body.alp-v55 .alp-hero-title {
margin: 0;
font-family: var(--alp-font-display) !important;
font-weight: 900 !important;
color: var(--alp-ink) !important;
letter-spacing: -.022em;
max-width: 690px;
font-size: var(--alp-fs-h1);
line-height: 1.02;
}
body.alp-v55 .alp-copy {
margin: 0;
color: var(--alp-muted);
font-size: 13px;
line-height: 1.75;
}
body.alp-v55 .alp-research-bar {
position: relative;
z-index: 5;
background: var(--alp-ink) !important;
color: #fff;
box-sizing: border-box;
font-family: var(--alp-font) !important;
padding: 0 !important;
}
body.alp-v55 .alp-research-bar-inner {
width: min(calc(100% - 48px), 1320px);
min-height: 38px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
body.alp-v55 .alp-research-bar-side {
display: flex;
align-items: center;
gap: 9px;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
body.alp-v55 .alp-research-bar-side:first-child {
color: rgba(255,255,255,.76);
}
body.alp-v55 .alp-research-bar-side:last-child {
justify-content: flex-end;
color: rgba(255,255,255,.72);
}
body.alp-v55 .alp-research-bar-side strong {
color: var(--alp-mint);
}
body.alp-v55 .alp-research-bar-brand {
color: #fff;
font-size: 18px;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
body.alp-v55 .alp-research-bar-brand span {
color: var(--alp-mint);
}
body.alp-v55 .alp-research-bar-sub {
display: block;
margin-top: 2px;
color: rgba(255,255,255,.45);
font-size: 10px;
font-weight: 700;
letter-spacing: .22em;
text-align: center;
text-transform: uppercase;
}
body.alp-v55 .alp-hero-v4 {
position: relative;
overflow: hidden;
min-height: 650px;
background: radial-gradient(circle at 72% 32%, rgba(49,199,165,.13), transparent 30%),
linear-gradient(104deg, var(--alp-surface) 0%, var(--alp-surface-2) 45%, #dcebe7 100%);
}
body.alp-v55 .alp-hero-v4::before {
content: '';
position: absolute;
pointer-events: none;
inset: 0;
background: linear-gradient(90deg, transparent 0 67%, rgba(255,255,255,.36) 67% 67.5%, transparent 67.5% 70%, rgba(255,255,255,.26) 70% 70.3%, transparent 70.3% 74%),
radial-gradient(ellipse at 14% 74%, rgba(255,255,255,.98) 0 5%, transparent 22%),
radial-gradient(ellipse at 28% 58%, rgba(255,255,255,.6) 0 4%, transparent 17%);
opacity: .9;
}
body.alp-v55 .alp-hero-v4::after {
content: '';
position: absolute;
pointer-events: none;
right: -110px;
top: 32px;
width: 290px;
height: 290px;
border: 1px solid rgba(49,199,165,.20);
border-radius: 50%;
box-shadow: -70px 70px 0 -69px rgba(49,199,165,.36),
-150px 10px 0 -149px rgba(49,199,165,.28),
-80px -40px 0 -79px rgba(49,199,165,.25);
}
body.alp-v55 .alp-hero-grid-v4 {
position: relative;
z-index: 2;
width: min(calc(100% - 48px), var(--alp-container));
min-height: 650px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
align-items: center;
gap: 36px;
}
body.alp-v55 .alp-hero-copy-v4 {
padding: 80px 0 145px;
}
body.alp-v55 .alp-hero-title span {
display: block;
color: var(--alp-mint);
}
body.alp-v55 .alp-hero-lead {
max-width: 510px;
margin: 28px 0 30px;
color: #4c5955;
font-size: 13px;
line-height: 1.8;
}
body.alp-v55 .alp-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.alp-v55 .alp-btn-v4 {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 44px !important;
margin: 0 !important;
padding: 0 20px !important;
border: 1px solid var(--alp-ink) !important;
border-radius: 9px !important;
background: var(--alp-ink) !important;
color: #fff;
box-shadow: none;
font-family: var(--alp-font) !important;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
line-height: 1;
text-transform: uppercase;
transition: transform .18s var(--alp-ease), background .18s var(--alp-ease), border-color .18s var(--alp-ease);
}
body.alp-v55 .alp-home-v4 .button.alp-btn-v4 {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 44px !important;
margin: 0 !important;
padding: 0 20px !important;
border: 1px solid var(--alp-ink) !important;
border-radius: 9px !important;
background: var(--alp-ink) !important;
color: #fff;
box-shadow: none;
font-family: var(--alp-font) !important;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
line-height: 1;
text-transform: uppercase;
transition: transform .18s var(--alp-ease), background .18s var(--alp-ease), border-color .18s var(--alp-ease);
}
body.alp-v55 .alp-btn-v4:hover {
transform: translateY(-1px);
background: var(--alp-mint-dark) !important;
border-color: var(--alp-mint-dark);
}
body.alp-v55 .alp-home-v4 .button.alp-btn-v4:hover {
transform: translateY(-1px);
background: var(--alp-mint-dark) !important;
border-color: var(--alp-mint-dark);
}
body.alp-v55 .alp-btn-v4.alp-btn-outline {
background: rgba(255,255,255,.45) !important;
color: var(--alp-ink);
border-color: rgba(11,17,16,.32);
backdrop-filter: blur(8px);
}
body.alp-v55 .alp-hero-scene {
position: relative;
min-height: 560px;
align-self: end;
}
body.alp-v55 .alp-hero-vials {
position: absolute;
z-index: 4;
right: -34px;
bottom: 70px;
width: min(590px, 108%);
max-width: none !important;
filter: drop-shadow(0 30px 30px rgba(17,48,42,.18));
}
body.alp-v55 .alp-hero-platform {
position: absolute;
z-index: 2;
right: -35px;
bottom: 54px;
width: 550px;
height: 88px;
border-radius: 50%;
background: linear-gradient(180deg, var(--alp-line-2) 0%, #bcd4ce 100%);
border: 1px solid rgba(22,107,90,.18);
box-shadow: 0 26px 45px rgba(39,87,77,.16),
inset 0 8px 16px rgba(255,255,255,.65);
}
body.alp-v55 .alp-hero-platform::after {
content: '';
position: absolute;
left: 5%;
right: 5%;
bottom: -12px;
height: 34px;
border-radius: 50%;
background: rgba(50,103,91,.15);
filter: blur(8px);
}
body.alp-v55 .alp-hero-labglass {
position: absolute;
z-index: 1;
bottom: 100px;
width: 120px;
height: 250px;
border: 5px solid rgba(255,255,255,.52);
border-top: 0;
border-radius: 15px 15px 46px 46px;
filter: blur(.15px);
opacity: .62;
}
body.alp-v55 .alp-hero-labglass--one {
left: 6%;
transform: rotate(6deg);
}
body.alp-v55 .alp-hero-labglass--two {
right: 8%;
height: 310px;
width: 88px;
opacity: .36;
}
body.alp-v55 .alp-trust-wrap {
position: relative;
z-index: 8;
margin-top: -40px;
}
body.alp-v55 .alp-trust-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0,1fr));
background: rgba(255,255,255,.96);
border: 1px solid rgba(18,80,67,.12);
border-radius: 18px;
box-shadow: 0 18px 60px rgba(39,87,77,.10);
backdrop-filter: blur(14px);
}
body.alp-v55 .alp-trust-item {
min-width: 0;
display: grid;
grid-template-columns: 42px minmax(0,1fr);
gap: 12px;
align-items: center;
padding: 21px 17px !important;
border-right: 1px solid var(--alp-line);
min-height: 96px;
}
body.alp-v55 .alp-trust-item:last-child {
border-right: 0;
}
body.alp-v55 .alp-trust-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
color: var(--alp-mint-dark);
}
body.alp-v55 .alp-trust-icon svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
}
body.alp-v55 .alp-trust-copy strong {
display: block;
margin-bottom: 4px;
color: var(--alp-ink);
font-size: 11px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -.01em;
}
body.alp-v55 .alp-trust-copy span {
display: block;
color: var(--alp-muted);
font-size: 10px;
line-height: 1.45;
}
body.alp-v55 .alp-catalog-section {
padding: 82px 0 82px !important;
background: #fff;
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-section-intro {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 48px;
align-items: end;
margin-bottom: 34px;
}
body.alp-v55 .alp-section-intro .alp-copy {
max-width: 430px;
justify-self: end;
}
body.alp-v55 .alp-catalog-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 14px;
}
body.alp-v55 .alp-feature-card {
position: relative;
overflow: hidden;
border: 1px solid var(--alp-line);
border-radius: 18px;
min-height: 520px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 18px 18px 20px;
background: radial-gradient(circle at 72% 35%, rgba(70,205,177,.18), transparent 28%),
linear-gradient(145deg, #073f35 0%, #0b2b27 58%, var(--alp-ink) 100%);
color: #fff;
}
body.alp-v55 .alp-product-tile {
position: relative;
overflow: hidden;
border: 1px solid var(--alp-line);
border-radius: 18px;
min-height: 253px;
padding: 14px;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface-2) 100%);
color: var(--alp-ink);
display: flex !important;
flex-direction: column;
}
body.alp-v55 .alp-all-products-card {
position: relative;
overflow: hidden;
border: 1px solid var(--alp-line);
border-radius: 18px;
min-height: 253px;
padding: 14px;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface-2) 100%);
color: var(--alp-ink);
display: flex !important;
flex-direction: column;
justify-content: space-between;
}
body.alp-v55 .alp-feature-card::after {
content: '';
position: absolute;
right: -70px;
bottom: 70px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle at 20% 20%, #53d9bc 0 3px, transparent 4px),
radial-gradient(circle at 60% 40%, #53d9bc 0 3px, transparent 4px),
radial-gradient(circle at 35% 70%, #53d9bc 0 3px, transparent 4px),
linear-gradient(34deg, transparent 48%, rgba(83,217,188,.34) 49% 50%, transparent 51%);
opacity: .35;
}
body.alp-v55 .alp-card-badge {
position: relative;
z-index: 3;
align-self: flex-start;
padding: 6px 9px;
border-radius: 999px;
background: var(--alp-mint);
color: #072019;
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
body.alp-v55 .alp-feature-media {
position: absolute;
z-index: 2;
inset: 46px 22px 78px;
display: grid;
place-items: center;
}
body.alp-v55 .alp-feature-media img {
width: min(380px, 86%);
max-height: 390px;
object-fit: contain;
filter: drop-shadow(0 24px 30px rgba(0,0,0,.26));
}
body.alp-v55 .alp-feature-footer {
position: relative;
z-index: 3;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
}
body.alp-v55 .alp-product-tile-footer {
position: relative;
z-index: 3;
display: flex !important;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding-top: 9px;
border-top: 1px solid var(--alp-line);
color: var(--alp-ink);
flex: 0 0 auto;
min-height: 58px;
}
body.alp-v55 .alp-feature-footer small {
display: block;
margin-bottom: 6px;
color: var(--alp-mint);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .alp-product-tile-footer small {
display: block;
margin-bottom: 6px;
color: var(--alp-muted-2);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .alp-feature-footer h3 {
margin: 0;
color: inherit;
font-family: var(--alp-font) !important;
font-size: 17px;
font-weight: 800;
letter-spacing: -.025em;
}
body.alp-v55 .alp-product-tile-footer h3 {
margin: 0;
color: inherit;
font-family: var(--alp-font) !important;
font-size: 12px;
font-weight: 800;
letter-spacing: -.025em;
min-height: 15px;
line-height: 1.25;
}
body.alp-v55 .alp-round-link {
flex: 0 0 38px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
color: inherit;
font-size: 18px;
transition: transform .18s var(--alp-ease), background .18s var(--alp-ease);
}
body.alp-v55 .alp-round-link:hover {
transform: translateX(2px);
}
body.alp-v55 .alp-catalog-side {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
grid-template-rows: repeat(2, minmax(0,1fr));
gap: 14px;
}
body.alp-v55 .alp-product-pill {
position: absolute;
z-index: 3;
top: 13px;
left: 13px;
padding: 5px 8px;
border: 1px solid #cad5d2;
border-radius: 999px;
background: rgba(255,255,255,.88);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
body.alp-v55 .alp-product-tile-media {
height: 165px;
display: grid;
place-items: center;
flex: 1 1 auto;
}
body.alp-v55 .alp-product-tile-media img {
width: 132px;
height: 158px;
object-fit: contain;
filter: drop-shadow(0 15px 16px rgba(35,60,55,.10));
}
body.alp-v55 .alp-product-tile-footer .alp-round-link {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 14px;
align-self: flex-end;
margin-top: auto !important;
margin-bottom: 0 !important;
}
body.alp-v55 .alp-all-products-media {
flex: 1 1 auto;
display: grid;
place-items: center;
padding: 12px 0 4px;
}
body.alp-v55 .alp-all-products-media img {
width: 88%;
max-height: 160px;
object-fit: contain;
filter: drop-shadow(0 15px 18px rgba(35,60,55,.10));
}
body.alp-v55 .alp-index-section {
padding: 60px 0 66px !important;
background: linear-gradient(135deg, #07100f 0%, var(--alp-ink) 100%) !important;
color: #fff;
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-index-head {
display: grid;
grid-template-columns: 1fr .8fr;
gap: 60px;
align-items: end;
margin-bottom: 32px;
}
body.alp-v55 .alp-index-head .alp-section-title {
color: #fff;
font-size: clamp(2rem,3.4vw,3.15rem);
}
body.alp-v55 .alp-index-head .alp-copy {
color: rgba(255,255,255,.58);
}
body.alp-v55 .alp-index-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
border-top: 1px solid rgba(255,255,255,.12);
}
body.alp-v55 .alp-index-item {
min-width: 0;
padding: 25px 22px 0 0;
display: grid;
grid-template-columns: 30px 42px minmax(0,1fr);
gap: 12px;
border-right: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-index-item + .alp-index-item {
padding-left: 22px;
}
body.alp-v55 .alp-index-item:last-child {
border-right: 0;
}
body.alp-v55 .alp-index-num {
color: var(--alp-mint);
font-size: 10px;
font-weight: 800;
}
body.alp-v55 .alp-index-icon {
color: #fff;
}
body.alp-v55 .alp-index-icon svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
body.alp-v55 .alp-index-copy strong {
display: block;
margin-bottom: 7px;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1.35;
text-transform: uppercase;
}
body.alp-v55 .alp-index-copy span {
color: rgba(255,255,255,.56);
font-size: 11px;
line-height: 1.55;
}
body.alp-v55 .alp-coa-section-v4 {
position: relative;
overflow: hidden;
padding: 92px 0 98px;
background: radial-gradient(circle at 92% 48%, rgba(49,199,165,.08), transparent 20%),
linear-gradient(180deg,var(--alp-surface) 0%,var(--alp-surface) 100%);
}
body.alp-v55 .alp-coa-section-v4::after {
content: '';
position: absolute;
right: 3%;
bottom: 0;
width: 70px;
height: 250px;
border: 3px solid rgba(34,117,99,.14);
border-top: 0;
border-radius: 4px 4px 28px 28px;
transform: rotate(-4deg);
}
body.alp-v55 .alp-coa-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: 70px;
align-items: center;
}
body.alp-v55 .alp-coa-copy .alp-section-title {
max-width: 420px;
margin-bottom: 20px;
}
body.alp-v55 .alp-coa-copy .alp-copy {
max-width: 440px;
margin-bottom: 26px;
}
body.alp-v55 .alp-coa-doc {
padding: 22px;
background: #fff;
border: 1px solid var(--alp-line);
border-radius: 18px;
box-shadow: 0 22px 55px rgba(35,60,55,.10);
transform: rotate(-.3deg);
}
body.alp-v55 .alp-coa-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
color: var(--alp-ink);
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
body.alp-v55 .alp-coa-doc-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 15px;
}
body.alp-v55 .alp-coa-metrics {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 20px;
border: 1px solid var(--alp-line);
}
body.alp-v55 .alp-coa-verified {
padding: 5px 8px;
border: 1px solid rgba(49,199,165,.38);
border-radius: 999px;
color: var(--alp-mint-dark);
font-size: 10px;
}
body.alp-v55 .alp-coa-doc-title h3 {
margin: 0;
color: var(--alp-ink);
font-family: var(--alp-font) !important;
font-size: 20px;
font-weight: 800;
letter-spacing: -.035em;
}
body.alp-v55 .alp-coa-metric {
flex: 1;
min-width: 0;
padding: 12px;
border-right: 1px solid var(--alp-line);
}
body.alp-v55 .alp-coa-metric:last-child {
border-right: 0;
}
body.alp-v55 .alp-coa-metric span {
display: block;
margin-bottom: 5px;
color: var(--alp-muted-2);
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
body.alp-v55 .alp-coa-metric strong {
display: block;
color: var(--alp-ink);
font-size: 10px;
font-weight: 800;
}
body.alp-v55 .alp-coa-chart {
position: relative;
height: 150px;
margin-top: 16px;
overflow: hidden;
border: 1px solid var(--alp-line);
border-radius: 10px;
background: linear-gradient(to right, transparent 0 9.8%, var(--alp-surface-2) 10% 10.2%, transparent 10.4% 19.8%, var(--alp-surface-2) 20% 20.2%, transparent 20.4% 29.8%, var(--alp-surface-2) 30% 30.2%, transparent 30.4% 39.8%, var(--alp-surface-2) 40% 40.2%, transparent 40.4% 49.8%, var(--alp-surface-2) 50% 50.2%, transparent 50.4% 59.8%, var(--alp-surface-2) 60% 60.2%, transparent 60.4% 69.8%, var(--alp-surface-2) 70% 70.2%, transparent 70.4% 79.8%, var(--alp-surface-2) 80% 80.2%, transparent 80.4% 89.8%, var(--alp-surface-2) 90% 90.2%, transparent 90.4%),
linear-gradient(to bottom, transparent 0 24%, var(--alp-surface-2) 25% 25.5%, transparent 26% 49%, var(--alp-surface-2) 50% 50.5%, transparent 51% 74%, var(--alp-surface-2) 75% 75.5%, transparent 76%);
}
body.alp-v55 .alp-coa-chart-line {
position: absolute;
left: 7%;
right: 7%;
bottom: 31px;
height: 1px;
background: var(--alp-mint);
}
body.alp-v55 .alp-coa-chart-line::before {
content: '';
position: absolute;
bottom: 0;
width: 2px;
background: var(--alp-mint);
left: 36%;
height: 18px;
}
body.alp-v55 .alp-coa-chart-line::after {
content: '';
position: absolute;
bottom: 0;
width: 2px;
background: var(--alp-mint);
left: 63%;
height: 66px;
}
body.alp-v55 .alp-coa-chart-note {
position: absolute;
left: 12px;
bottom: 9px;
color: var(--alp-muted-2);
font-size: 10px;
letter-spacing: .05em;
text-transform: uppercase;
}
body.alp-v55 .alp-faq-section-v4 {
padding: 76px 0 84px;
background: #fff;
}
body.alp-v55 .alp-faq-layout {
display: grid;
grid-template-columns: .65fr 1.35fr;
gap: 70px;
}
body.alp-v55 .alp-faq-list {
border-top: 1px solid var(--alp-line);
}
body.alp-v55 .alp-faq-row {
display: grid;
grid-template-columns: 40px 1fr 30px;
align-items: center;
gap: 14px;
min-height: 58px;
border-bottom: 1px solid var(--alp-line);
color: var(--alp-ink);
}
body.alp-v55 .alp-faq-num {
color: var(--alp-mint);
font-size: 11px;
font-weight: 800;
}
body.alp-v55 .alp-faq-question {
font-size: 11px;
font-weight: 700;
}
body.alp-v55 .alp-faq-plus {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 1px solid #aeb8b5;
border-radius: 50%;
font-size: 14px;
}
body.alp-v55 .alp-footer-v4 {
padding: 54px 0 28px;
background: #07100f;
color: rgba(255,255,255,.58);
}
body.alp-v55 .alp-footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(3, .7fr);
gap: 50px;
}
body.alp-v55 .alp-footer-brand {
margin-bottom: 12px;
color: #fff;
font-size: 18px;
font-weight: 900;
letter-spacing: -.04em;
}
body.alp-v55 .alp-footer-brand span {
color: var(--alp-mint);
}
body.alp-v55 .alp-footer-text {
max-width: 300px;
margin: 0;
font-size: 11px;
line-height: 1.7;
}
body.alp-v55 .alp-footer-title {
margin: 0 0 13px;
color: var(--alp-mint);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .alp-footer-links {
list-style: none;
margin: 0;
padding: 0;
}
body.alp-v55 .alp-footer-links li {
margin-bottom: 8px;
}
body.alp-v55 .alp-footer-links a {
color: rgba(255,255,255,.60);
font-size: 11px;
}
body.alp-v55 .alp-footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.08);
font-size: 10px;
}
body.alp-v55 .alp-coa-product-box {
margin-top: 22px;
padding: 18px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
margin: 22px 0 0;
overflow: hidden;
}
body.alp-v55 .alp-coa-product-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 18px;
margin-bottom: 12px;
flex-wrap: wrap;
padding: 15px 17px;
border-bottom: 1px solid var(--alp-line, #dfe6e3);
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-mint-soft) 100%);
}
body.alp-v55 .alp-coa-product-title {
font-size: 10px;
font-weight: 900;
letter-spacing: .075em;
text-transform: uppercase;
color: var(--alp-ink, #0b1110);
}
body.alp-v55 .alp-coa-product-charge {
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--alp-mint-dark, #159a7d);
}
body.alp-v55 .alp-coa-product-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
color: var(--alp-muted);
font-size: 11px;
padding: 15px 17px 10px;
}
body.alp-v55 .alp-coa-product-links {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
padding: 4px 17px 16px;
}
body.alp-v55 .alp-coa-product-meta strong {
color: var(--alp-ink, #0b1110);
margin-left: 4px;
}
body.alp-v55 .alp-coa-product-link {
color: var(--alp-mint-dark, #159a7d);
font-size: 11px;
font-weight: 900;
letter-spacing: .035em;
text-transform: uppercase;
text-decoration: none;
}
body.alp-v55 #header {
font-family: var(--alp-font) !important;
}
body.alp-v55 .header-wrapper {
font-family: var(--alp-font) !important;
}
body.alp-v55 .header-main {
font-family: var(--alp-font) !important;
}
body.alp-v55 .nav > li > a {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
body.alp-v55 .header-main .nav > li > a {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
body.alp-v55 .button {
font-family: var(--alp-font) !important;
}
body.alp-v55 input[type='submit'] {
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-card-price {
margin-top: 7px;
color: rgba(255,255,255,.72);
font-size: 11px;
font-weight: 700;
}
body.alp-v55 .alp-card-price .amount {
color: inherit;
font-size: inherit;
}
body.alp-v55 .alp-card-price ins {
color: inherit;
font-size: inherit;
}
body.alp-v55 .alp-card-price del {
color: inherit;
font-size: inherit;
}
body.alp-v55 .alp-card-price-small {
color: #52605c;
font-size: 11px;
}
body.alp-v55 .alp-hero-v5 {
box-sizing: border-box;
font-family: var(--alp-font) !important;
padding: 0 !important;
position: relative !important;
overflow: hidden !important;
min-height: 650px !important;
background: #071116 !important;
isolation: isolate;
background-image: none !important;
}
body.alp-v55 .alp-trust-section {
box-sizing: border-box;
font-family: var(--alp-font) !important;
padding: 0 !important;
position: relative;
z-index: 9;
margin-top: 0 !important;
background: #fff !important;
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55 .alp-coa-section-v5 {
box-sizing: border-box;
font-family: var(--alp-font) !important;
padding: 76px 0 82px !important;
position: relative;
overflow: hidden;
background: radial-gradient(circle at 92% 48%, rgba(49,199,165,.08), transparent 20%),
linear-gradient(180deg,var(--alp-surface) 0%,var(--alp-surface) 100%) !important;
}
body.alp-v55 .alp-faq-section-v5 {
box-sizing: border-box;
font-family: var(--alp-font) !important;
padding: 58px 0 62px !important;
background: linear-gradient(135deg,#07100f 0%,var(--alp-ink) 100%) !important;
color: #fff;
}
body.alp-v55 .alp-footer-v5 {
box-sizing: border-box;
font-family: var(--alp-font) !important;
padding: 54px 0 28px !important;
background: #07100f !important;
color: rgba(255,255,255,.58);
border-top: 1px solid rgba(255,255,255,.08);
}
body.alp-v55 .alp-research-bar * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-hero-v5 * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-trust-section * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-catalog-section * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-index-section * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-coa-section-v5 * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-faq-section-v5 * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-footer-v5 * {
box-sizing: border-box;
font-family: var(--alp-font) !important;
}
body.alp-v55 .alp-research-bar > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-hero-v5 > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-trust-section > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-catalog-section > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-index-section > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-coa-section-v5 > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-faq-section-v5 > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-footer-v5 > .section-content {
position: relative;
z-index: 2;
}
body.alp-v55 .alp-research-bar .row {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-research-bar .col {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-research-bar .col-inner {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-v5::before {
content: none !important;
position: absolute;
pointer-events: none;
inset: 0;
background: linear-gradient(90deg, rgba(2,10,13,.18), transparent 44%, rgba(2,10,13,.06) 67%, rgba(1,8,10,.18)),
radial-gradient(ellipse at 14% 79%, rgba(196,224,218,.10) 0 4%, transparent 11%),
radial-gradient(ellipse at 30% 65%, rgba(197,223,218,.08) 0 3%, transparent 10%),
linear-gradient(90deg, transparent 68%, rgba(255,255,255,.035) 68% 68.3%, transparent 68.3% 72%, rgba(255,255,255,.03) 72% 72.25%, transparent 72.25%);
opacity: 1;
display: none !important;
}
body.alp-v55 .alp-hero-v5::after {
content: none !important;
position: absolute;
pointer-events: none;
right: -38px;
top: 86px;
width: 300px;
height: 300px;
border: 0;
border-radius: 0;
box-shadow: none;
z-index: 0;
opacity: .62;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%2331c7a5' stroke-opacity='.52' stroke-width='2'%3E%3Cpath d='M56 111 106 78l48 30 51-28 45 34-20 56-58 5-31 47-55-17-42-43z'/%3E%3Cpath d='m106 78 18 66 47 31m34-95-34 95m59-5-59 5'/%3E%3C/g%3E%3Cg fill='%2331c7a5' fill-opacity='.78'%3E%3Ccircle cx='56' cy='111' r='6'/%3E%3Ccircle cx='106' cy='78' r='8'/%3E%3Ccircle cx='154' cy='108' r='6'/%3E%3Ccircle cx='205' cy='80' r='7'/%3E%3Ccircle cx='250' cy='114' r='6'/%3E%3Ccircle cx='230' cy='170' r='8'/%3E%3Ccircle cx='172' cy='175' r='7'/%3E%3Ccircle cx='141' cy='222' r='6'/%3E%3Ccircle cx='86' cy='205' r='7'/%3E%3Ccircle cx='44' cy='162' r='6'/%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
display: none !important;
}
body.alp-v55 .alp-hero-grid-v5 {
width: min(calc(100% - 48px), var(--alp-container)) !important;
max-width: var(--alp-container) !important;
min-height: 650px !important;
margin: 0 auto !important;
align-items: center !important;
position: relative !important;
z-index: 1;
}
body.alp-v55 .alp-hero-grid-v5 > .col {
padding-bottom: 0 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner {
padding: 92px 0 88px !important;
}
body.alp-v55 .alp-hero-copy-v5 .button.alp-btn-v4 {
margin-right: 8px !important;
margin-bottom: 8px !important;
}
body.alp-v55 .alp-hero-visual-col {
min-height: 540px;
}
body.alp-v55 .alp-hero-visual-col > .col-inner {
min-height: 650px !important;
position: absolute !important;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::before {
content: none !important;
position: absolute;
z-index: 1;
left: 52%;
bottom: 38px;
width: min(650px,118%);
height: 118px;
transform: translateX(-48%);
border-radius: 50%;
background: radial-gradient(ellipse at 50% 22%, rgba(255,255,255,.16), transparent 38%),
linear-gradient(180deg,var(--alp-text) 0%,#111413 48%,#090b0b 100%);
border: 1px solid rgba(255,255,255,.13);
box-shadow: 0 30px 55px rgba(0,0,0,.42),
inset 0 2px 0 rgba(255,255,255,.13),
inset 0 -12px 24px rgba(0,0,0,.54);
display: none !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::after {
content: none !important;
position: absolute;
z-index: 0;
right: 57%;
bottom: 72px;
width: 128px;
height: 330px;
border: 7px solid rgba(209,230,226,.10);
border-top: 0;
border-radius: 10px 10px 54px 54px;
opacity: .66;
transform: rotate(3deg);
filter: blur(1.5px);
display: none !important;
}
body.alp-v55 .alp-hero-vials-image {
position: relative;
z-index: 3;
width: 124% !important;
max-width: 740px !important;
margin: 0 -11% 42px 0 !important;
transform: translateX(5%);
}
body.alp-v55 .alp-hero-vials-image .img-inner {
width: 100% !important;
max-width: none !important;
}
body.alp-v55 .alp-hero-vials-image img {
width: 100% !important;
max-width: none !important;
display: block;
object-fit: contain !important;
filter: drop-shadow(0 24px 20px rgba(0,0,0,.34))
drop-shadow(0 5px 8px rgba(25,93,79,.12));
}
body.alp-v55 .alp-trust-section .section-content {
width: min(calc(100% - 48px), var(--alp-container));
margin: 0 auto;
}
body.alp-v55 .alp-trust-row {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100% !important;
max-width: none !important;
margin: 0 !important;
overflow: hidden;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none;
backdrop-filter: none;
}
body.alp-v55 .alp-trust-row > .col {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
padding: 0 !important;
}
body.alp-v55 .alp-trust-row > .col > .col-inner {
height: 100%;
}
body.alp-v55 .alp-trust-row .alp-trust-item {
height: 100%;
}
body.alp-v55 .alp-catalog-section .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-index-section .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-coa-section-v5 .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-faq-section-v5 .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-footer-v5 .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-section-intro-row {
margin-bottom: 34px !important;
}
body.alp-v55 .alp-index-head-row {
margin-bottom: 34px !important;
}
body.alp-v55 .alp-section-intro-row .alp-copy {
max-width: 430px;
margin-left: auto;
}
body.alp-v55 .alp-index-head-row .alp-copy {
max-width: 430px;
margin-left: auto;
}
body.alp-v55 .alp-index-section .alp-section-title {
color: #fff;
font-size: clamp(2rem,3.4vw,3.15rem);
}
body.alp-v55 .alp-index-section .alp-copy {
color: rgba(255,255,255,.58);
}
body.alp-v55 .alp-index-row {
display: grid !important;
grid-template-columns: repeat(4, minmax(0,1fr));
width: 100% !important;
max-width: none !important;
border-top: 1px solid rgba(255,255,255,.12);
}
body.alp-v55 .alp-index-row > .col {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
padding: 0 !important;
}
body.alp-v55 .alp-index-row .alp-index-item {
height: 100%;
}
body.alp-v55 .alp-coa-section-v5::after {
content: '';
position: absolute;
right: 3%;
bottom: 0;
width: 70px;
height: 250px;
border: 3px solid rgba(34,117,99,.14);
border-top: 0;
border-radius: 4px 4px 28px 28px;
transform: rotate(-4deg);
}
body.alp-v55 .alp-coa-layout-v5 {
position: relative;
z-index: 2;
align-items: center;
}
body.alp-v55 .alp-coa-layout-v5 .alp-section-title {
max-width: 420px;
margin-bottom: 20px !important;
}
body.alp-v55 .alp-coa-layout-v5 .alp-copy {
max-width: 440px;
margin-bottom: 26px;
}
body.alp-v55 .alp-coa-open {
margin-top: 14px;
}
body.alp-v55 .alp-faq-layout-v5 {
align-items: flex-start;
}
body.alp-v55 .alp-faq-section-v5 .accordion {
margin: 0 !important;
border-top: 1px solid var(--alp-line);
border-top-color: rgba(255,255,255,.13);
}
body.alp-v55 .alp-faq-section-v5 .accordion-item {
border-bottom: 1px solid var(--alp-line);
border-bottom-color: rgba(255,255,255,.13);
}
body.alp-v55 .alp-faq-section-v5 .accordion-title {
min-height: 58px;
display: flex !important;
align-items: center;
padding: 17px 44px 17px 0 !important;
border: 0 !important;
background: transparent !important;
color: #fff;
font-size: 11px;
line-height: 1.45;
font-weight: 700;
}
body.alp-v55 .alp-faq-section-v5 .accordion-title::before {
right: 2px !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 1px solid #aeb8b5;
border-radius: 50%;
color: #fff;
font-size: 14px;
line-height: 22px;
border-color: rgba(255,255,255,.48);
}
body.alp-v55 .alp-faq-section-v5 .accordion-inner {
padding: 0 42px 20px 0 !important;
color: rgba(255,255,255,.64);
font-size: 11px;
line-height: 1.75;
}
body.alp-v55 .alp-footer-v5 .alp-footer-brand {
margin-top: 0 !important;
}
body.alp-v55 .alp-footer-v5 .alp-footer-title {
margin-top: 0 !important;
}
body.alp-v55 .alp-footer-link {
margin: 0 0 8px !important;
line-height: 1.35;
}
body.alp-v55 .alp-footer-link a {
color: rgba(255,255,255,.60);
font-size: 11px;
text-decoration: none;
}
body.alp-v55 .alp-footer-bottom-row {
margin-top: 20px !important;
}
body.alp-v55 .alp-hero-v5 .alp-kicker {
color: rgba(255,255,255,.78) !important;
}
body.alp-v55 .alp-hero-v5 .alp-kicker::before {
background: var(--alp-mint) !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-title {
max-width: 650px;
color: #fff !important;
font-size: clamp(3.2rem,5.6vw,5.65rem) !important;
line-height: .91 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-title span {
color: var(--alp-mint) !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-lead {
max-width: 500px;
margin: 24px 0 28px;
color: rgba(255,255,255,.76) !important;
font-size: 13px;
line-height: 1.78;
}
body.alp-v55 .alp-hero-v5 .button.alp-btn-v4 {
min-height: 46px !important;
padding: 0 22px !important;
border-color: var(--alp-mint) !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
color: var(--alp-ink) !important;
box-shadow: 0 8px 24px rgba(49,199,165,.14) !important;
}
body.alp-v55 .alp-hero-v5 a.button.alp-btn-v4 {
min-height: 46px !important;
padding: 0 22px !important;
border-color: var(--alp-mint) !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
color: var(--alp-ink) !important;
box-shadow: 0 8px 24px rgba(49,199,165,.14) !important;
}
body.alp-v55 .alp-hero-v5 .button.alp-btn-v4.alp-btn-outline {
border-color: rgba(255,255,255,.72) !important;
background: rgba(6,15,18,.16) !important;
color: #fff !important;
box-shadow: none !important;
}
body.alp-v55 .alp-hero-v5 a.button.alp-btn-v4.alp-btn-outline {
border-color: rgba(255,255,255,.72) !important;
background: rgba(6,15,18,.16) !important;
color: #fff !important;
box-shadow: none !important;
}
body.alp-v55 .alp-faq-section-v5 .alp-section-title {
color: #fff;
}
body.alp-v55 .alp-faq-section-v5 .alp-kicker {
color: var(--alp-mint);
}
body.alp-v55.alp-custom-footer-active #footer .footer-1 {
display: none !important;
}
body.alp-v55.alp-custom-footer-active #footer .footer-2 {
display: none !important;
}
body.alp-v55.alp-custom-footer-active #footer .absolute-footer {
display: none !important;
}
body.alp-v55.alp-custom-footer-active #footer {
margin: 0 !important;
padding: 0 !important;
background: #050c0b !important;
}
body.alp-v55.alp-custom-footer-active .footer-wrapper {
margin: 0 !important;
padding: 0 !important;
background: #050c0b !important;
}
body.alp-v55 .alp-bound-footer {
width: 100%;
margin: 0;
padding: 0;
background: #050c0b;
}
body.alp-v55 .alp-bound-footer .alp-footer-v5 {
margin: 0 !important;
}
body.alp-v55 .alp-trust-section .row {
width: 100% !important;
max-width: none !important;
}
body.alp-v55 .alp-trust-section .col {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
}
body.alp-v55 .alp-trust-section .col-inner {
width: 100% !important;
max-width: none !important;
}
body.alp-v55 .alp-hero-v5 .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-catalog-section .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-index-section .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-coa-section-v5 .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-faq-section-v5 .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-footer-v5 .ux-text {
margin: 0 !important;
}
body.alp-v55.alp-custom-header-active #header {
display: none !important;
}
body.alp-v55.alp-custom-header-active .header-wrapper {
display: none !important;
}
body.alp-v55.alp-custom-header-active #wide-nav {
display: none !important;
}
body.alp-v55 .alp-bound-header {
position: sticky;
top: 0;
z-index: 99990;
width: 100% !important;
background: #050c0b;
display: block !important;
max-width: none !important;
overflow: visible !important;
}
body.alp-v55 .admin-bar .alp-bound-header {
top: 32px;
}
body.alp-v55 .alp-bound-header .section {
margin: 0 !important;
}
body.alp-v55 .alp-bound-header .section-content {
margin: 0 !important;
}
body.alp-v55 .alp-header-micro-v53 {
min-height: 30px;
padding: 0 !important;
background: #030807 !important;
border-bottom: 1px solid rgba(255,255,255,.07);
}
body.alp-v55 .alp-header-micro-row-v53 {
width: min(calc(100% - 48px), 1320px) !important;
max-width: 1320px !important;
margin: 0 auto !important;
}
body.alp-v55 .alp-site-header-row-v53 {
width: min(calc(100% - 48px), 1320px) !important;
max-width: 1320px !important;
margin: 0 auto !important;
min-height: 70px;
align-items: center;
}
body.alp-v55 .alp-header-micro-row-v53 > .col {
padding-bottom: 0 !important;
}
body.alp-v55 .alp-site-header-row-v53 > .col {
padding-bottom: 0 !important;
}
body.alp-v55 .alp-header-micro-row-v53 .col-inner {
padding: 0 !important;
}
body.alp-v55 .alp-site-header-row-v53 .col-inner {
padding: 0 !important;
}
body.alp-v55 .alp-header-micro-text {
margin: 0 !important;
color: rgba(255,255,255,.58);
font-size: 10px;
font-weight: 700;
line-height: 30px;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
body.alp-v55 .alp-header-micro-text strong {
color: var(--alp-mint);
}
body.alp-v55 .alp-header-micro-right {
text-align: right;
}
body.alp-v55 .alp-site-header-v53 {
padding: 0 !important;
background: rgba(7,16,15,.97) !important;
border-bottom: 1px solid rgba(255,255,255,.08);
box-shadow: 0 8px 30px rgba(0,0,0,.13);
backdrop-filter: blur(16px);
}
body.alp-v55 .alp-header-logo-v53 {
display: block !important;
flex-direction: column;
margin: 0 !important;
color: #fff;
font-family: var(--alp-font-display) !important;
font-size: 17px;
font-weight: 900;
line-height: 1;
letter-spacing: -.04em;
white-space: nowrap;
}
body.alp-v55 .alp-header-logo-v53 span {
color: var(--alp-mint);
display: inline !important;
}
body.alp-v55 .alp-header-logo-v53 small {
display: block !important;
margin-top: 4px !important;
color: rgba(255,255,255,.42);
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: .19em;
white-space: nowrap;
}
body.alp-v55 .alp-main-nav-v53 {
width: 100%;
}
body.alp-v55 .alp-nav-list-v53 {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
body.alp-v55 .alp-nav-list-v53 > li {
margin: 0 !important;
}
body.alp-v55 .alp-nav-list-v53 > li > a {
display: inline-flex;
align-items: center;
min-height: 70px;
color: rgba(255,255,255,.72);
font-size: 11px;
font-weight: 700;
letter-spacing: .055em;
text-decoration: none;
text-transform: uppercase;
transition: color .18s var(--alp-ease);
}
body.alp-v55 .alp-nav-list-v53 > li > a:hover {
color: var(--alp-mint);
}
body.alp-v55 .alp-nav-list-v53 > li.current-menu-item > a {
color: var(--alp-mint);
}
body.alp-v55 .alp-nav-list-v53 > li.current_page_item > a {
color: var(--alp-mint);
}
body.alp-v55 .alp-nav-toggle-v53 {
display: none !important;
}
body.alp-v55 .alp-header-actions-v53 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
min-height: 70px;
}
body.alp-v55 .alp-header-action-v53 {
color: rgba(255,255,255,.72);
font-size: 10px;
font-weight: 700;
letter-spacing: .05em;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
body.alp-v55 .alp-header-action-v53:hover {
color: var(--alp-mint);
}
body.alp-v55 .alp-cart-action-v53 {
display: inline-flex;
align-items: center;
gap: 7px;
}
body.alp-v55 .alp-cart-count-v53 {
display: grid;
place-items: center;
min-width: 21px;
height: 21px;
padding: 0 5px;
border: 1px solid rgba(49,199,165,.42);
border-radius: 999px;
color: var(--alp-mint);
font-size: 10px;
}
html.alp-custom-header-rendered body #header {
display: none !important;
}
html.alp-custom-header-rendered body .header-wrapper {
display: none !important;
}
html.alp-custom-header-rendered body #wide-nav {
display: none !important;
}
body.alp-v55 #alp-header-fallback-mount:empty {
display: none !important;
}
body.alp-v55 .alp-product-tile-footer > div {
min-width: 0;
min-height: 42px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-visual-col {
display: block !important;
position: absolute !important;
z-index: 0 !important;
inset: 0 !important;
width: 100vw !important;
max-width: none !important;
height: 100% !important;
min-height: 650px !important;
margin-left: calc(50% - 50vw) !important;
padding: 0 !important;
pointer-events: none;
}
body.alp-v55 .alp-hero-keyvisual-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55 .alp-hero-keyvisual-image .img-inner {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55 .alp-hero-keyvisual-image picture {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55 .alp-hero-keyvisual-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center !important;
filter: none !important;
}
body.alp-v55 .alp-hero-grid-v5::before {
content: '';
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: calc(50% - 50vw);
width: 62vw;
pointer-events: none;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
background: linear-gradient(90deg,
rgba(3,10,13,.70) 0%,
rgba(3,10,13,.48) 35%,
rgba(3,10,13,.20) 68%,
transparent 100%);
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-copy-v5 {
position: relative !important;
z-index: 3 !important;
flex-basis: 49% !important;
max-width: 49% !important;
pointer-events: auto;
}
body.alp-v55.alp-page-v53 .page-title {
display: none !important;
}
body.alp-v55.alp-page-v53 .page-header {
display: none !important;
}
body.alp-v55.alp-page-v53 .entry-header {
display: none !important;
}
body.alp-v55.alp-page-v53 .breadcrumbs {
display: none !important;
}
body.alp-v55.alp-page-v53 #content {
padding-top: 0 !important;
padding-bottom: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 .page-wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55 .alp-page-hero .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-page-section .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-page-section-dark .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-page-section-soft .section-content > .row {
width: min(calc(100% - 48px), var(--alp-container));
max-width: var(--alp-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-page-hero .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-page-section .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-page-section-dark .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-page-section-soft .ux-text {
margin: 0 !important;
}
body.alp-v55 .alp-page-hero {
position: relative;
overflow: hidden;
padding: 74px 0 66px !important;
background: radial-gradient(circle at 88% 26%, rgba(49,199,165,.16), transparent 34%),
linear-gradient(150deg, #071116 0%, #0b1a1f 100%) !important;
color: #fff;
}
body.alp-v55 .alp-page-hero::after {
content: '';
position: absolute;
right: -40px;
bottom: -120px;
width: 260px;
height: 260px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 50%;
pointer-events: none;
}
body.alp-v55 .alp-page-hero .alp-kicker {
color: var(--alp-mint) !important;
}
body.alp-v55 .alp-page-hero-inner {
position: relative;
z-index: 2;
max-width: 780px;
}
body.alp-v55 .alp-page-title {
margin: 0;
color: #fff;
font-family: var(--alp-font-display) !important;
font-size: clamp(2.3rem, 4.6vw, 3.9rem);
font-weight: 900;
line-height: .95;
letter-spacing: -.055em;
text-transform: uppercase;
}
body.alp-v55 .alp-page-lead {
max-width: 620px;
margin: 22px 0 0;
color: rgba(255,255,255,.74);
font-size: 13px;
line-height: 1.78;
}
body.alp-v55 .alp-page-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
body.alp-v55 .alp-page-meta span {
padding: 7px 12px;
border: 1px solid rgba(255,255,255,.17);
border-radius: 999px;
color: rgba(255,255,255,.72);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.alp-v55 .alp-page-section {
padding: 74px 0 !important;
background: #fff !important;
}
body.alp-v55 .alp-page-section-soft {
padding: 74px 0 !important;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface) 100%) !important;
}
body.alp-v55 .alp-page-section-dark {
padding: 66px 0 !important;
background: linear-gradient(135deg, #07100f 0%, var(--alp-ink) 100%) !important;
color: #fff;
}
body.alp-v55 .alp-page-section-dark .alp-section-title {
color: #fff;
font-size: clamp(1.7rem, 3vw, 2.6rem);
margin-bottom: 18px !important;
}
body.alp-v55 .alp-page-section-dark .alp-kicker {
color: var(--alp-mint);
}
body.alp-v55 .alp-page-section-dark .alp-copy {
color: rgba(255,255,255,.6);
}
body.alp-v55 .alp-page-section .alp-section-title {
font-size: clamp(1.7rem, 3vw, 2.6rem);
margin-bottom: 18px !important;
}
body.alp-v55 .alp-page-section-soft .alp-section-title {
font-size: clamp(1.7rem, 3vw, 2.6rem);
margin-bottom: 18px !important;
}
body.alp-v55 .alp-lead-copy {
max-width: 620px;
margin: 0;
color: var(--alp-text);
font-size: 14px;
line-height: 1.8;
}
body.alp-v55 .alp-principle-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--alp-line);
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
overflow: hidden;
}
body.alp-v55 .alp-principle {
padding: 30px 26px 32px;
background: #fff;
}
body.alp-v55 .alp-principle-num {
display: block;
margin-bottom: 16px;
color: var(--alp-mint);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
}
body.alp-v55 .alp-principle h3 {
margin: 0 0 10px;
color: var(--alp-ink);
font-size: 14px;
font-weight: 800;
letter-spacing: -.02em;
}
body.alp-v55 .alp-principle p {
margin: 0;
color: var(--alp-muted);
font-size: 12px;
line-height: 1.75;
}
body.alp-v55 .alp-chain {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--alp-line);
}
body.alp-v55 .alp-page-section-dark .alp-chain {
border-top-color: rgba(255,255,255,.12);
}
body.alp-v55 .alp-chain-step {
display: grid;
grid-template-columns: 62px 1fr;
gap: 18px;
align-items: start;
padding: 22px 0;
margin: 0;
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55 .alp-page-section-dark .alp-chain-step {
border-bottom-color: rgba(255,255,255,.12);
}
body.alp-v55 .alp-chain-num {
color: var(--alp-mint);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
}
body.alp-v55 .alp-chain-body strong {
display: block;
margin-bottom: 6px;
color: var(--alp-ink);
font-size: 13px;
letter-spacing: -.01em;
}
body.alp-v55 .alp-page-section-dark .alp-chain-body strong {
color: #fff;
}
body.alp-v55 .alp-chain-body span {
display: block;
max-width: 620px;
color: var(--alp-muted);
font-size: 12px;
line-height: 1.75;
}
body.alp-v55 .alp-page-section-dark .alp-chain-body span {
color: rgba(255,255,255,.58);
}
body.alp-v55 .alp-fieldlist {
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: #fff;
overflow: hidden;
}
body.alp-v55 .alp-fieldlist-row {
display: grid;
grid-template-columns: 210px 1fr;
gap: 20px;
padding: 17px 22px;
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55 .alp-fieldlist-row:last-child {
border-bottom: 0;
}
body.alp-v55 .alp-fieldlist-row strong {
color: var(--alp-ink);
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
body.alp-v55 .alp-fieldlist-row span {
color: var(--alp-muted);
font-size: 12px;
line-height: 1.7;
}
body.alp-v55 .alp-coa-filter {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 420px;
margin-bottom: 24px;
}
body.alp-v55 .alp-coa-filter label {
color: var(--alp-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.alp-v55 .alp-coa-filter input {
height: 46px;
padding: 0 16px;
border: 1px solid var(--alp-line) !important;
border-radius: 12px;
background: #fff;
box-shadow: none;
color: var(--alp-ink);
font-size: 12px;
}
body.alp-v55 .alp-coa-filter input:focus {
border-color: var(--alp-mint);
outline: 2px solid rgba(49,199,165,.28);
outline-offset: 1px;
}
body.alp-v55 .alp-coa-table {
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: #fff;
overflow: hidden;
}
body.alp-v55 .alp-coa-thead {
display: grid;
grid-template-columns: 2fr 1.2fr .8fr 1fr 1.1fr;
gap: 16px;
align-items: center;
padding: 15px 22px;
background: var(--alp-surface-2);
border-bottom: 1px solid var(--alp-line);
color: var(--alp-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.alp-v55 .alp-coa-trow {
display: grid;
grid-template-columns: 2fr 1.2fr .8fr 1fr 1.1fr;
gap: 16px;
align-items: center;
padding: 15px 22px;
border-bottom: 1px solid var(--alp-line);
color: var(--alp-text);
font-size: 12px;
transition: background-color .16s var(--alp-ease);
}
body.alp-v55 .alp-coa-trow:last-child {
border-bottom: 0;
}
body.alp-v55 .alp-coa-trow a {
color: var(--alp-ink);
font-weight: 700;
}
body.alp-v55 .alp-coa-trow small {
display: block;
margin-top: 3px;
color: var(--alp-muted-2);
font-size: 11px;
}
body.alp-v55 .alp-coa-trow em {
color: var(--alp-muted-2);
font-size: 10px;
font-style: normal;
}
body.alp-v55 .alp-coa-trow .alp-coa-product-link + .alp-coa-product-link {
margin-left: 10px;
}
body.alp-v55 .alp-coa-empty-hint {
margin: 18px 0 0;
padding: 22px;
border: 1px dashed var(--alp-line);
border-radius: var(--alp-radius);
color: var(--alp-muted);
font-size: 12px;
line-height: 1.7;
}
body.alp-v55 .alp-empty {
margin: 18px 0 0;
padding: 22px;
border: 1px dashed var(--alp-line);
border-radius: var(--alp-radius);
color: var(--alp-muted);
font-size: 12px;
line-height: 1.7;
}
body.alp-v55 .alp-datatable {
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: #fff;
overflow: hidden;
}
body.alp-v55 .alp-datatable-head {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 16px;
padding: 16px 22px;
background: var(--alp-surface-2);
border-bottom: 1px solid var(--alp-line);
color: var(--alp-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.alp-v55 .alp-datatable-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 16px;
padding: 16px 22px;
border-bottom: 1px solid var(--alp-line);
color: var(--alp-text);
font-size: 12px;
transition: background-color .16s var(--alp-ease);
}
body.alp-v55 .alp-datatable-row:last-child {
border-bottom: 0;
}
body.alp-v55 .alp-paygrid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.alp-v55 .alp-storage-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.alp-v55 .alp-contact-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.alp-v55 .alp-paycard {
padding: 24px 22px;
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: #fff;
}
body.alp-v55 .alp-storage-card {
padding: 24px 22px;
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: #fff;
}
body.alp-v55 .alp-contact-card {
padding: 24px 22px;
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: #fff;
}
body.alp-v55 .alp-paycard strong {
display: block;
margin-bottom: 9px;
color: var(--alp-ink);
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.01em;
}
body.alp-v55 .alp-storage-card strong {
display: block;
margin-bottom: 9px;
color: var(--alp-ink);
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.01em;
}
body.alp-v55 .alp-contact-card strong {
display: block;
margin-bottom: 9px;
color: var(--alp-ink);
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.01em;
}
body.alp-v55 .alp-paycard span {
display: block;
margin: 0;
color: var(--alp-muted);
font-size: 12px;
line-height: 1.72;
}
body.alp-v55 .alp-storage-card p {
display: block;
margin: 0;
color: var(--alp-muted);
font-size: 12px;
line-height: 1.72;
}
body.alp-v55 .alp-contact-card p {
display: block;
margin: 0;
color: var(--alp-muted);
font-size: 12px;
line-height: 1.72;
}
body.alp-v55 .alp-contact-mail {
display: inline-block;
margin-top: 14px;
color: var(--alp-mint-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: .02em;
}
body.alp-v55 .alp-notice {
padding: 22px 24px;
border: 1px solid rgba(49,199,165,.32);
border-left: 3px solid var(--alp-mint);
border-radius: 14px;
background: var(--alp-mint-soft);
}
body.alp-v55 .alp-notice strong {
display: block;
margin-bottom: 8px;
color: #10564a;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.alp-v55 .alp-notice p {
margin: 0;
color: #23413b;
font-size: 12px;
line-height: 1.75;
}
body.alp-v55 .alp-page-section-dark .alp-notice {
border-color: rgba(49,199,165,.28);
background: rgba(49,199,165,.08);
}
body.alp-v55 .alp-page-section-dark .alp-notice strong {
color: var(--alp-mint);
}
body.alp-v55 .alp-page-section-dark .alp-notice p {
color: rgba(255,255,255,.7);
}
body.alp-v55 .alp-figure {
margin: 0;
}
body.alp-v55 .alp-figure-frame {
position: relative;
overflow: hidden;
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: linear-gradient(140deg, var(--alp-surface-2) 0%, var(--alp-line) 100%);
}
body.alp-v55 .alp-figure--16-9 .alp-figure-frame {
aspect-ratio: 16 / 9;
}
body.alp-v55 .alp-figure--3-2 .alp-figure-frame {
aspect-ratio: 3 / 2;
}
body.alp-v55 .alp-figure--4-3 .alp-figure-frame {
aspect-ratio: 4 / 3;
}
body.alp-v55 .alp-figure-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.alp-v55 .alp-figure-placeholder {
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(49,199,165,.18), transparent 45%),
repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 12px, transparent 12px 24px);
}
body.alp-v55 .alp-figure figcaption {
margin-top: 12px;
color: var(--alp-muted-2);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
}
body.alp-v55 .alp-form-wrap {
padding: 30px 30px 34px;
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: #fff;
}
body.alp-v55 .alp-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 18px;
margin: 0;
}
body.alp-v55 .alp-form-row {
display: flex;
flex-direction: column;
gap: 7px;
}
body.alp-v55 .alp-form-row--full {
grid-column: 1 / -1;
}
body.alp-v55 .alp-form-consent {
grid-column: 1 / -1;
}
body.alp-v55 .alp-form-submit {
grid-column: 1 / -1;
justify-self: start;
min-height: 46px;
padding: 0 26px;
border: 0;
border-radius: 12px;
background: linear-gradient(180deg, var(--alp-mint) 0%, var(--alp-mint) 100%);
color: var(--alp-ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
body.alp-v55 .alp-form label {
color: var(--alp-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.alp-v55 .alp-form label span {
color: var(--alp-muted-2);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
body.alp-v55 .alp-form input[type='text'] {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--alp-line) !important;
border-radius: 12px;
background: var(--alp-surface);
box-shadow: none;
color: var(--alp-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.alp-v55 .alp-form input[type='email'] {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--alp-line) !important;
border-radius: 12px;
background: var(--alp-surface);
box-shadow: none;
color: var(--alp-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.alp-v55 .alp-form select {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--alp-line) !important;
border-radius: 12px;
background: var(--alp-surface);
box-shadow: none;
color: var(--alp-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.alp-v55 .alp-form textarea {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--alp-line) !important;
border-radius: 12px;
background: var(--alp-surface);
box-shadow: none;
color: var(--alp-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.alp-v55 .alp-form input:focus {
border-color: var(--alp-mint);
outline: 2px solid rgba(49,199,165,.26);
outline-offset: 1px;
}
body.alp-v55 .alp-form select:focus {
border-color: var(--alp-mint);
outline: 2px solid rgba(49,199,165,.26);
outline-offset: 1px;
}
body.alp-v55 .alp-form textarea:focus {
border-color: var(--alp-mint);
outline: 2px solid rgba(49,199,165,.26);
outline-offset: 1px;
}
body.alp-v55 .alp-form-consent label {
display: grid;
grid-template-columns: 18px 1fr;
gap: 11px;
align-items: start;
color: var(--alp-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.65;
letter-spacing: 0;
text-transform: none;
}
body.alp-v55 .alp-form-consent input {
margin: 2px 0 0 !important;
}
body.alp-v55 .alp-form-consent a {
color: var(--alp-mint-dark);
text-decoration: underline;
}
body.alp-v55 .alp-form-submit:hover {
filter: brightness(1.04);
}
body.alp-v55 .alp-form-hp {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
body.alp-v55 .alp-form-note {
margin-bottom: 20px;
padding: 14px 18px;
border-radius: 12px;
font-size: 12px;
line-height: 1.6;
}
body.alp-v55 .alp-form-note--ok {
border: 1px solid rgba(49,199,165,.35);
background: var(--alp-mint-soft);
color: #15564a;
}
body.alp-v55 .alp-form-note--error {
border: 1px solid #f0d0cc;
background: var(--alp-danger-soft);
color: var(--alp-danger);
}
body.alp-v55 .alp-legal {
max-width: 760px;
}
body.alp-v55 .alp-legal h2 {
margin: 44px 0 14px;
color: var(--alp-ink);
font-size: 17px;
font-weight: 800;
letter-spacing: -.02em;
}
body.alp-v55 .alp-legal h2:first-child {
margin-top: 0;
}
body.alp-v55 .alp-legal h3 {
margin: 26px 0 10px;
color: var(--alp-ink);
font-size: 13px;
font-weight: 800;
}
body.alp-v55 .alp-legal p {
color: var(--alp-text);
font-size: 12.5px;
line-height: 1.85;
margin: 0 0 12px;
}
body.alp-v55 .alp-legal li {
color: var(--alp-text);
font-size: 12.5px;
line-height: 1.85;
margin-bottom: 6px;
}
body.alp-v55 .alp-legal ul {
margin: 0 0 16px 18px;
padding: 0;
}
body.alp-v55 .alp-legal ol {
margin: 0 0 16px 18px;
padding: 0;
}
body.alp-v55 .alp-legal a {
color: var(--alp-mint-dark);
text-decoration: underline;
}
body.alp-v55 .alp-legal-updated {
display: inline-block;
margin-top: 30px;
padding: 8px 14px;
border: 1px solid var(--alp-line);
border-radius: 999px;
color: var(--alp-muted-2);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
}
body.alp-v55 .alp-legal-aside {
position: sticky;
top: 110px;
padding: 22px;
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius);
background: var(--alp-surface);
}
body.alp-v55 .alp-legal-aside p {
margin: 0 0 10px;
color: var(--alp-muted);
font-size: 11px;
line-height: 1.7;
}
body.alp-v55 .alp-legal-aside p:last-child {
margin-bottom: 0;
}
body.alp-v55 .alp-legal-aside strong {
display: block;
margin-bottom: 10px;
color: var(--alp-mint-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.alp-v55 .alp-cta-band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 22px;
padding: 34px 36px;
border-radius: var(--alp-radius);
background: linear-gradient(135deg, #0b1a1f 0%, #113029 100%);
margin-bottom: 20px;
box-shadow: 0 20px 44px rgba(8,20,18,.14);
}
body.alp-v55 .alp-cta-band h3 {
margin: 0 0 8px;
color: #fff;
font-size: 20px;
font-weight: 900;
letter-spacing: -.035em;
}
body.alp-v55 .alp-cta-band p {
margin: 0;
max-width: 480px;
color: rgba(255,255,255,.66);
font-size: 12px;
line-height: 1.7;
}
body.alp-v55.alp-page-v53 #main {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 .page-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 .entry-content {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 article.page {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 #content > .row {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 #content > .row > .col {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 #content > .row > .large-12 {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 .page-wrapper > .row {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 .page-wrapper > .row > .col {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 .entry-content > .row {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 .entry-content > .row > .col {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.alp-v55.alp-page-v53 #content .row:not(.section-content .row) {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.alp-v55.alp-page-v53 #content .col:not(.section-content .col) {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.alp-v55.alp-page-v53 .alp-page-hero {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.alp-v55.alp-page-v53 .alp-page-section {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.alp-v55.alp-page-v53 .alp-page-section-soft {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.alp-v55.alp-page-v53 .alp-page-section-dark {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.alp-v55.alp-page-v53 .accordion {
margin: 0 !important;
border-top: 1px solid var(--alp-line);
}
body.alp-v55.alp-page-v53 .accordion-item {
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55.alp-page-v53 .accordion-title {
position: relative;
display: flex !important;
align-items: center;
min-height: 66px;
margin: 0 !important;
padding: 19px 58px 19px 2px !important;
border: 0 !important;
background: transparent !important;
color: var(--alp-ink);
font-size: 12.5px;
font-weight: 700;
line-height: 1.5;
letter-spacing: -.005em;
transition: color .18s var(--alp-ease), background-color .18s var(--alp-ease), padding-left .18s var(--alp-ease);
}
body.alp-v55.alp-page-v53 .accordion-title:hover {
background: rgba(49,199,165,.05) !important;
padding-left: 12px !important;
color: var(--alp-mint-dark);
}
body.alp-v55.alp-page-v53 .accordion-title.active {
color: var(--alp-mint-dark);
}
body.alp-v55.alp-page-v53 .accordion-title::before {
position: absolute !important;
top: 50% !important;
right: 14px !important;
left: auto !important;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid #c3cecb;
border-radius: 50%;
background: #fff;
color: var(--alp-ink);
font-size: 15px;
font-weight: 500;
line-height: 28px;
transform: translateY(-50%);
transition: background-color .2s var(--alp-ease), border-color .2s var(--alp-ease), color .2s var(--alp-ease), transform .2s var(--alp-ease);
}
body.alp-v55.alp-page-v53 .accordion-title:hover::before {
border-color: var(--alp-mint);
color: var(--alp-mint-dark);
}
body.alp-v55.alp-page-v53 .accordion-title.active::before {
border-color: var(--alp-mint);
background: var(--alp-mint);
color: var(--alp-ink);
}
body.alp-v55.alp-page-v53 .accordion-title .toggle {
position: absolute;
top: 50%;
right: 14px;
left: auto;
margin: 0;
transform: translateY(-50%);
opacity: 1;
color: var(--alp-ink);
transition: transform .25s var(--alp-ease), color .2s var(--alp-ease);
}
body.alp-v55.alp-page-v53 .accordion-title.active .toggle {
transform: translateY(-50%) rotate(180deg);
color: var(--alp-mint-dark);
}
body.alp-v55.alp-page-v53 .accordion-inner {
padding: 0 62px 24px 2px !important;
color: var(--alp-muted);
font-size: 12.5px;
line-height: 1.85;
}
body.alp-v55.alp-page-v53 .accordion-title:focus-visible {
outline: 2px solid var(--alp-mint);
outline-offset: -2px;
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion {
border-top-color: rgba(255,255,255,.14);
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-item {
border-bottom-color: rgba(255,255,255,.14);
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-title {
color: #fff;
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-title:hover {
background: rgba(49,199,165,.07) !important;
color: var(--alp-mint);
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-title.active {
background: rgba(49,199,165,.07) !important;
color: var(--alp-mint);
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-title::before {
border-color: rgba(255,255,255,.34);
background: transparent;
color: #fff;
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-title.active::before {
border-color: var(--alp-mint);
background: var(--alp-mint);
color: var(--alp-ink);
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-title .toggle {
color: #fff;
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-title.active .toggle {
color: #fff;
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .accordion-inner {
color: rgba(255,255,255,.66);
}
body.alp-v55.alp-page-v53 .button.alp-btn-v4 {
min-height: 48px !important;
margin: 0 10px 10px 0 !important;
padding: 0 26px !important;
border: 1px solid var(--alp-mint) !important;
border-radius: 12px !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--alp-ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
transition: transform .18s var(--alp-ease), box-shadow .18s var(--alp-ease), filter .18s var(--alp-ease);
}
body.alp-v55.alp-page-v53 a.button.alp-btn-v4 {
min-height: 48px !important;
margin: 0 10px 10px 0 !important;
padding: 0 26px !important;
border: 1px solid var(--alp-mint) !important;
border-radius: 12px !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--alp-ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
transition: transform .18s var(--alp-ease), box-shadow .18s var(--alp-ease), filter .18s var(--alp-ease);
}
body.alp-v55.alp-page-v53 .button.alp-btn-v4:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(49,199,165,.22);
filter: brightness(1.03);
}
body.alp-v55.alp-page-v53 .button.alp-btn-v4.alp-btn-outline {
border-color: var(--alp-line);
background: #fff !important;
box-shadow: none;
color: var(--alp-ink);
}
body.alp-v55.alp-page-v53 a.button.alp-btn-v4.alp-btn-outline {
border-color: var(--alp-line);
background: #fff !important;
box-shadow: none;
color: var(--alp-ink);
}
body.alp-v55.alp-page-v53 .button.alp-btn-v4.alp-btn-outline:hover {
border-color: var(--alp-mint);
color: var(--alp-mint-dark);
}
body.alp-v55.alp-page-v53 .alp-page-section-dark .button.alp-btn-v4.alp-btn-outline {
border-color: rgba(255,255,255,.3);
background: transparent !important;
color: #fff;
}
body.alp-v55 .alp-coa-trow:hover {
background: rgba(49,199,165,.045);
}
body.alp-v55 .alp-datatable-row:hover {
background: rgba(49,199,165,.045);
}
body.alp-v55.alp-page-v53 [id] {
scroll-margin-top: 110px;
}
body.alp-v55 .alp-brand-link {
display: inline-flex;
align-items: center;
color: inherit;
text-decoration: none;
transition: opacity .18s var(--alp-ease);
}
body.alp-v55 .alp-brand-link:hover {
opacity: .78;
}
body.alp-v55 .alp-brand-link:focus-visible {
outline: 2px solid var(--alp-mint);
outline-offset: 4px;
border-radius: 4px;
}
body.alp-v55 ::selection {
background: rgba(49,199,165,.28);
}
body.alp-v55.woocommerce {
background: #fff;
}
body.alp-v55.woocommerce-page {
background: #fff;
}
body.alp-v55.woocommerce #main {
color: var(--alp-text, #27302e);
}
body.alp-v55.woocommerce-page #main {
color: var(--alp-text, #27302e);
}
body.alp-v55.woocommerce .container {
max-width: var(--alp-container, 1180px) !important;
}
body.alp-v55.woocommerce-page .container {
max-width: var(--alp-container, 1180px) !important;
}
body.alp-v55.woocommerce .row.row-main {
max-width: var(--alp-container, 1180px) !important;
}
body.alp-v55.woocommerce-page .row.row-main {
max-width: var(--alp-container, 1180px) !important;
}
body.alp-v55.woocommerce #main a:not(.button) {
text-underline-offset: 3px;
}
body.alp-v55.woocommerce-page #main a:not(.button) {
text-underline-offset: 3px;
}
body.alp-v55.post-type-archive-product .shop-page-title {
padding: 34px 0 24px;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface) 100%);
border-bottom: 1px solid var(--alp-line, #dfe6e3);
}
body.alp-v55.tax-product_cat .shop-page-title {
padding: 34px 0 24px;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface) 100%);
border-bottom: 1px solid var(--alp-line, #dfe6e3);
}
body.alp-v55.tax-product_tag .shop-page-title {
padding: 34px 0 24px;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface) 100%);
border-bottom: 1px solid var(--alp-line, #dfe6e3);
}
body.alp-v55.post-type-archive-product .shop-page-title .page-title-inner {
min-height: 0;
}
body.alp-v55.tax-product_cat .shop-page-title .page-title-inner {
min-height: 0;
}
body.alp-v55.tax-product_tag .shop-page-title .page-title-inner {
min-height: 0;
}
body.alp-v55.post-type-archive-product .shop-page-title .page-title-inner .page-title {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.alp-v55.tax-product_cat .shop-page-title .page-title-inner .page-title {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.alp-v55.tax-product_tag .shop-page-title .page-title-inner .page-title {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.alp-v55.post-type-archive-product .shop-page-title h1 {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.alp-v55.tax-product_cat .shop-page-title h1 {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.alp-v55.tax-product_tag .shop-page-title h1 {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.alp-v55.woocommerce .shop-container {
padding-top: 38px;
padding-bottom: 72px;
}
body.alp-v55.woocommerce .woocommerce-result-count {
color: var(--alp-muted, #707b78);
font-size: 11px;
}
body.alp-v55.woocommerce .woocommerce-ordering {
color: var(--alp-muted, #707b78);
font-size: 11px;
}
body.alp-v55.woocommerce .category-filtering {
color: var(--alp-muted, #707b78);
font-size: 11px;
}
body.alp-v55.woocommerce .woocommerce-ordering select {
min-height: 42px;
padding: 0 36px 0 13px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 10px;
background-color: #fff;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 11px;
}
body.alp-v55.woocommerce .category-filtering select {
min-height: 42px;
padding: 0 36px 0 13px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 10px;
background-color: #fff;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 11px;
}
body.alp-v55.woocommerce .product-small .box {
height: 100%;
overflow: hidden;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
transition: transform .2s var(--alp-ease), box-shadow .2s var(--alp-ease), border-color .2s var(--alp-ease);
}
body.alp-v55.woocommerce-page .product-small .box {
height: 100%;
overflow: hidden;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
transition: transform .2s var(--alp-ease), box-shadow .2s var(--alp-ease), border-color .2s var(--alp-ease);
}
body.alp-v55.woocommerce .product-small .box-image {
overflow: hidden;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface-2) 100%);
}
body.alp-v55.woocommerce-page .product-small .box-image {
overflow: hidden;
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface-2) 100%);
}
body.alp-v55.woocommerce .product-small .box-image img {
transition: transform .28s var(--alp-ease);
}
body.alp-v55.woocommerce-page .product-small .box-image img {
transition: transform .28s var(--alp-ease);
}
body.alp-v55.woocommerce .product-small .box-text-products {
padding: 18px 18px 20px !important;
}
body.alp-v55.woocommerce-page .product-small .box-text-products {
padding: 18px 18px 20px !important;
}
body.alp-v55.woocommerce .product-small .product-title {
margin-bottom: 7px;
color: var(--alp-ink, #0b1110);
font-size: 13px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -.015em;
}
body.alp-v55.woocommerce-page .product-small .product-title {
margin-bottom: 7px;
color: var(--alp-ink, #0b1110);
font-size: 13px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -.015em;
}
body.alp-v55.woocommerce .product-small .product-title a {
color: inherit;
text-decoration: none;
}
body.alp-v55.woocommerce-page .product-small .product-title a {
color: inherit;
text-decoration: none;
}
body.alp-v55.woocommerce .product-small .category {
margin-bottom: 6px;
color: var(--alp-muted-2, #9aa3a0);
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
body.alp-v55.woocommerce-page .product-small .category {
margin-bottom: 6px;
color: var(--alp-muted-2, #9aa3a0);
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
body.alp-v55.woocommerce .product-small .price-wrapper {
margin-top: 9px;
}
body.alp-v55.woocommerce-page .product-small .price-wrapper {
margin-top: 9px;
}
body.alp-v55.woocommerce .product-small .price {
color: var(--alp-ink, #0b1110);
font-size: 14px;
font-weight: 800;
}
body.alp-v55.woocommerce-page .product-small .price {
color: var(--alp-ink, #0b1110);
font-size: 14px;
font-weight: 800;
}
body.alp-v55.woocommerce .product-small .price del {
color: var(--alp-muted-2, #9aa3a0);
font-size: 11px;
opacity: 1;
}
body.alp-v55.woocommerce-page .product-small .price del {
color: var(--alp-muted-2, #9aa3a0);
font-size: 11px;
opacity: 1;
}
body.alp-v55.woocommerce .product-small .price ins {
color: var(--alp-mint-dark, #159a7d);
text-decoration: none;
}
body.alp-v55.woocommerce-page .product-small .price ins {
color: var(--alp-mint-dark, #159a7d);
text-decoration: none;
}
body.alp-v55.woocommerce .product-small .add-to-cart-button {
margin-top: 14px;
}
body.alp-v55.woocommerce-page .product-small .add-to-cart-button {
margin-top: 14px;
}
body.alp-v55.woocommerce .product-small .add-to-cart-button .button {
width: 100%;
min-height: 42px;
margin: 0;
padding: 0 16px;
border: 1px solid var(--alp-ink, #0b1110);
border-radius: 10px;
background: var(--alp-ink, #0b1110);
box-shadow: none;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.woocommerce-page .product-small .add-to-cart-button .button {
width: 100%;
min-height: 42px;
margin: 0;
padding: 0 16px;
border: 1px solid var(--alp-ink, #0b1110);
border-radius: 10px;
background: var(--alp-ink, #0b1110);
box-shadow: none;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.woocommerce .badge-container {
top: 13px;
left: 13px;
margin: 0;
}
body.alp-v55.woocommerce-page .badge-container {
top: 13px;
left: 13px;
margin: 0;
}
body.alp-v55.woocommerce .badge {
height: auto;
min-height: 0;
margin: 0 6px 6px 0;
}
body.alp-v55.woocommerce-page .badge {
height: auto;
min-height: 0;
margin: 0 6px 6px 0;
}
body.alp-v55.woocommerce .badge-inner {
min-width: 0;
height: auto;
padding: 7px 10px;
border: 0;
border-radius: 999px;
background: var(--alp-ink, #0b1110);
box-shadow: 0 6px 16px rgba(4,15,13,.14);
color: #fff;
font-size: 10px;
font-weight: 900;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.woocommerce-page .badge-inner {
min-width: 0;
height: auto;
padding: 7px 10px;
border: 0;
border-radius: 999px;
background: var(--alp-ink, #0b1110);
box-shadow: 0 6px 16px rgba(4,15,13,.14);
color: #fff;
font-size: 10px;
font-weight: 900;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.woocommerce .badge-inner.on-sale {
background: var(--alp-mint, #31c7a5);
color: var(--alp-ink);
}
body.alp-v55.woocommerce-page .badge-inner.on-sale {
background: var(--alp-mint, #31c7a5);
color: var(--alp-ink);
}
body.alp-v55.woocommerce .out-of-stock-label {
top: 14px;
right: 14px;
bottom: auto;
left: auto;
width: auto;
padding: 8px 11px;
border-radius: 999px;
background: rgba(7,17,22,.92);
color: #fff;
font-size: 10px;
font-weight: 900;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.woocommerce-page .out-of-stock-label {
top: 14px;
right: 14px;
bottom: auto;
left: auto;
width: auto;
padding: 8px 11px;
border-radius: 999px;
background: rgba(7,17,22,.92);
color: #fff;
font-size: 10px;
font-weight: 900;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .alp-product-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0 0 16px;
}
body.alp-v55 .alp-product-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 999px;
background: #fff;
color: var(--alp-muted, #707b78);
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .alp-product-badge--mint {
border-color: rgba(49,199,165,.34);
background: var(--alp-mint-soft, #eaf8f4);
color: var(--alp-mint-dark, #159a7d);
}
body.alp-v55 .alp-product-badge--dark {
border-color: var(--alp-ink, #0b1110);
background: var(--alp-ink, #0b1110);
color: #fff;
}
body.alp-v55.single-product .product-main {
padding-top: 48px;
padding-bottom: 52px;
}
body.alp-v55.single-product .product-gallery .flickity-viewport {
border-radius: var(--alp-radius, 18px);
}
body.alp-v55.single-product .product-gallery .easyzoom-flyout {
border-radius: var(--alp-radius, 18px);
}
body.alp-v55.single-product .product-gallery .product-gallery-slider {
border-radius: var(--alp-radius, 18px);
overflow: hidden;
border: 1px solid var(--alp-line, #dfe6e3);
background: linear-gradient(180deg, var(--alp-surface) 0%, var(--alp-surface-2) 100%);
}
body.alp-v55.single-product .product-info {
padding-top: 6px;
}
body.alp-v55.single-product .product-info .product-title {
margin: 0 0 14px;
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 900;
line-height: .98;
letter-spacing: -.05em;
}
body.alp-v55.single-product .product-info .is-divider {
display: none;
}
body.alp-v55.single-product .product-info .price {
margin: 0 0 20px;
color: var(--alp-ink, #0b1110);
font-size: 20px;
font-weight: 800;
}
body.alp-v55.single-product .product-info .price del {
color: var(--alp-muted-2, #9aa3a0);
font-size: 13px;
opacity: 1;
}
body.alp-v55.single-product .product-info .price ins {
color: var(--alp-mint-dark, #159a7d);
text-decoration: none;
}
body.alp-v55.single-product .woocommerce-product-details__short-description {
margin: 0 0 22px;
color: var(--alp-muted, #707b78);
font-size: 13px;
line-height: 1.75;
}
body.alp-v55.single-product .product-info .stock {
display: inline-flex;
align-items: center;
min-height: 28px;
margin: 0 0 16px;
padding: 0 10px;
border: 1px solid rgba(49,199,165,.32);
border-radius: 999px;
background: var(--alp-mint-soft, #eaf8f4);
color: var(--alp-mint-dark, #159a7d);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.single-product form.cart {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
margin: 20px 0 22px;
}
body.alp-v55.single-product form.cart .quantity {
margin: 0 !important;
}
body.alp-v55.single-product form.cart .quantity input[type="number"] {
height: 48px;
min-height: 48px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 10px;
background: #fff;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 12px;
font-weight: 700;
}
body.alp-v55.single-product form.cart .quantity .qty {
height: 48px;
min-height: 48px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 10px;
background: #fff;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 12px;
font-weight: 700;
}
body.alp-v55.single-product form.cart .button {
min-height: 48px;
margin: 0 !important;
padding: 0 24px !important;
border: 1px solid var(--alp-mint, #31c7a5) !important;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--alp-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.single-product .single_add_to_cart_button {
min-height: 48px;
margin: 0 !important;
padding: 0 24px !important;
border: 1px solid var(--alp-mint, #31c7a5) !important;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--alp-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.single-product .product_meta {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--alp-line, #dfe6e3);
color: var(--alp-muted-2, #9aa3a0);
font-size: 11px;
line-height: 1.7;
}
body.alp-v55.single-product .product_meta > span {
display: block;
margin: 3px 0;
}
body.alp-v55.single-product .product_meta a {
color: var(--alp-muted, #707b78);
}
body.alp-v55 .alp-coa-product-meta span {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 0 9px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 999px;
background: #fff;
color: var(--alp-muted, #707b78);
font-size: 10px;
line-height: 1;
}
body.alp-v55 .alp-coa-product-link:hover {
color: var(--alp-ink, #0b1110);
}
body.alp-v55.single-product .product-footer {
padding-top: 0;
background: linear-gradient(180deg, var(--alp-surface) 0%, #fff 180px);
border-top: 1px solid var(--alp-line, #dfe6e3);
}
body.alp-v55.single-product .woocommerce-tabs {
padding-top: 38px;
padding-bottom: 66px;
}
body.alp-v55.single-product .woocommerce-tabs .nav-tabs {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 26px;
border: 0;
}
body.alp-v55.single-product .woocommerce-tabs .nav-tabs > li {
margin: 0;
}
body.alp-v55.single-product .woocommerce-tabs .nav-tabs > li > a {
min-height: 38px;
padding: 0 13px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 999px;
background: #fff;
color: var(--alp-muted, #707b78);
font-size: 10px;
font-weight: 900;
line-height: 36px;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.single-product .woocommerce-tabs .nav-tabs > li.active > a {
border-color: var(--alp-ink, #0b1110);
background: var(--alp-ink, #0b1110);
color: #fff;
}
body.alp-v55.single-product .woocommerce-tabs .nav-tabs > li > a:hover {
border-color: var(--alp-ink, #0b1110);
background: var(--alp-ink, #0b1110);
color: #fff;
}
body.alp-v55.single-product .woocommerce-Tabs-panel {
max-width: 920px;
margin: 0 auto;
color: var(--alp-text, #27302e);
font-size: 13px;
line-height: 1.8;
}
body.alp-v55.single-product .panel.entry-content {
max-width: 920px;
margin: 0 auto;
color: var(--alp-text, #27302e);
font-size: 13px;
line-height: 1.8;
}
body.alp-v55.single-product .woocommerce-Tabs-panel > p:first-child {
font-size: 14px;
line-height: 1.8;
}
body.alp-v55.single-product .panel.entry-content > p:first-child {
font-size: 14px;
line-height: 1.8;
}
body.alp-v55.single-product .woocommerce-Tabs-panel h2 {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 14px;
font-size: 20px;
}
body.alp-v55.single-product .woocommerce-Tabs-panel h3 {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 13px;
padding-top: 2px;
font-size: 16px;
}
body.alp-v55.single-product .panel.entry-content h2 {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 14px;
font-size: 20px;
}
body.alp-v55.single-product .panel.entry-content h3 {
color: var(--alp-ink, #0b1110);
font-family: var(--alp-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 13px;
padding-top: 2px;
font-size: 16px;
}
body.alp-v55.single-product .woocommerce-Tabs-panel p {
margin: 0 0 16px;
}
body.alp-v55.single-product .panel.entry-content p {
margin: 0 0 16px;
}
body.alp-v55.single-product .woocommerce-Tabs-panel ul {
margin: 0 0 22px;
padding: 0;
list-style: none;
}
body.alp-v55.single-product .panel.entry-content ul {
margin: 0 0 22px;
padding: 0;
list-style: none;
}
body.alp-v55.single-product .woocommerce-Tabs-panel li {
position: relative;
margin: 0;
padding: 9px 0 9px 20px;
border-bottom: 1px solid var(--alp-line, #dfe6e3);
}
body.alp-v55.single-product .panel.entry-content li {
position: relative;
margin: 0;
padding: 9px 0 9px 20px;
border-bottom: 1px solid var(--alp-line, #dfe6e3);
}
body.alp-v55.single-product .woocommerce-Tabs-panel li::before {
content: '';
position: absolute;
top: 17px;
left: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--alp-mint, #31c7a5);
}
body.alp-v55.single-product .panel.entry-content li::before {
content: '';
position: absolute;
top: 17px;
left: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--alp-mint, #31c7a5);
}
body.alp-v55.single-product .woocommerce-Tabs-panel table {
width: 100%;
margin: 14px 0 28px;
overflow: hidden;
border: 1px solid var(--alp-line, #dfe6e3);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--alp-radius, 18px);
background: #fff;
box-shadow: none;
}
body.alp-v55.single-product .panel.entry-content table {
width: 100%;
margin: 14px 0 28px;
overflow: hidden;
border: 1px solid var(--alp-line, #dfe6e3);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--alp-radius, 18px);
background: #fff;
box-shadow: none;
}
body.alp-v55.single-product .woocommerce-Tabs-panel table th {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--alp-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
width: 34%;
background: var(--alp-surface);
color: var(--alp-ink, #0b1110);
font-weight: 800;
}
body.alp-v55.single-product .woocommerce-Tabs-panel table td {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--alp-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
color: var(--alp-text, #27302e);
}
body.alp-v55.single-product .panel.entry-content table th {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--alp-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
width: 34%;
background: var(--alp-surface);
color: var(--alp-ink, #0b1110);
font-weight: 800;
}
body.alp-v55.single-product .panel.entry-content table td {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--alp-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
color: var(--alp-text, #27302e);
}
body.alp-v55.single-product .woocommerce-Tabs-panel table tr:last-child th {
border-bottom: 0;
}
body.alp-v55.single-product .woocommerce-Tabs-panel table tr:last-child td {
border-bottom: 0;
}
body.alp-v55.single-product .panel.entry-content table tr:last-child th {
border-bottom: 0;
}
body.alp-v55.single-product .panel.entry-content table tr:last-child td {
border-bottom: 0;
}
body.alp-v55.single-product .woocommerce-Tabs-panel p:last-child {
margin-top: 28px;
padding: 16px 18px;
border: 1px solid rgba(49,199,165,.28);
border-left: 3px solid var(--alp-mint, #31c7a5);
border-radius: 12px;
background: var(--alp-mint-soft, #eaf8f4);
color: #2f514a;
font-size: 11px;
line-height: 1.7;
}
body.alp-v55.single-product .panel.entry-content p:last-child {
margin-top: 28px;
padding: 16px 18px;
border: 1px solid rgba(49,199,165,.28);
border-left: 3px solid var(--alp-mint, #31c7a5);
border-radius: 12px;
background: var(--alp-mint-soft, #eaf8f4);
color: #2f514a;
font-size: 11px;
line-height: 1.7;
}
body.alp-v55.woocommerce-cart .woocommerce {
padding-top: 44px;
padding-bottom: 72px;
}
body.alp-v55.woocommerce-cart .shop_table {
border-color: var(--alp-line, #dfe6e3);
}
body.alp-v55.woocommerce-cart .cart_totals {
border-color: var(--alp-line, #dfe6e3);
padding: 22px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
}
body.alp-v55.woocommerce-cart .shop_table th {
border-color: var(--alp-line, #dfe6e3);
}
body.alp-v55.woocommerce-cart .shop_table td {
border-color: var(--alp-line, #dfe6e3);
}
body.alp-v55.woocommerce-cart .checkout-button {
min-height: 48px;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
color: var(--alp-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.woocommerce-cart .button.primary {
min-height: 48px;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
color: var(--alp-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55.woocommerce-checkout .checkout-page-title {
display: none;
}
body.alp-v55.woocommerce-checkout .woocommerce {
padding-top: 46px;
padding-bottom: 76px;
}
body.alp-v55.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
gap: 34px;
align-items: start;
}
body.alp-v55.woocommerce-checkout form.checkout > .row {
display: contents;
}
body.alp-v55.woocommerce-checkout form.checkout .row.pt-0 {
display: contents;
}
body.alp-v55.woocommerce-checkout #customer_details {
min-width: 0;
grid-column: 1;
}
body.alp-v55.woocommerce-checkout #order_review_heading {
min-width: 0;
grid-column: 2;
margin: 0 0 -18px;
padding: 0 22px;
color: var(--alp-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.alp-v55.woocommerce-checkout #order_review {
min-width: 0;
grid-column: 2;
position: sticky;
top: 102px;
padding: 22px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
box-shadow: 0 18px 42px rgba(22,43,39,.07);
}
body.alp-v55.woocommerce-checkout .woocommerce-billing-fields {
margin-bottom: 22px;
padding: 24px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
}
body.alp-v55.woocommerce-checkout .woocommerce-shipping-fields {
margin-bottom: 22px;
padding: 24px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
}
body.alp-v55.woocommerce-checkout .woocommerce-additional-fields {
margin-bottom: 22px;
padding: 24px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
background: #fff;
}
body.alp-v55.woocommerce-checkout .woocommerce-billing-fields > h3 {
margin: 0 0 20px;
color: var(--alp-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.alp-v55.woocommerce-checkout .woocommerce-shipping-fields > h3 {
margin: 0 0 20px;
color: var(--alp-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.alp-v55.woocommerce-checkout .woocommerce-additional-fields > h3 {
margin: 0 0 20px;
color: var(--alp-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.alp-v55.woocommerce-checkout .form-row {
margin-bottom: 14px;
}
body.alp-v55.woocommerce-checkout .form-row label {
margin-bottom: 6px;
color: var(--alp-muted, #707b78);
font-size: 11px;
font-weight: 800;
letter-spacing: .055em;
}
body.alp-v55.woocommerce-checkout .woocommerce-input-wrapper label {
margin-bottom: 6px;
color: var(--alp-muted, #707b78);
font-size: 11px;
font-weight: 800;
letter-spacing: .055em;
}
body.alp-v55.woocommerce-checkout input.input-text {
min-height: 46px;
border: 1px solid var(--alp-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 12px;
padding: 10px 13px !important;
}
body.alp-v55.woocommerce-checkout textarea {
min-height: 110px;
border: 1px solid var(--alp-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 12px;
padding: 10px 13px !important;
resize: vertical;
}
body.alp-v55.woocommerce-checkout select {
min-height: 46px;
border: 1px solid var(--alp-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 12px;
padding: 10px 13px !important;
}
body.alp-v55.woocommerce-checkout .select2-container .select2-selection--single {
min-height: 46px;
border: 1px solid var(--alp-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--alp-ink, #0b1110);
font-size: 12px;
}
body.alp-v55.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 13px;
line-height: 44px;
}
body.alp-v55.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
height: 44px;
}
body.alp-v55.woocommerce-checkout input.input-text:focus {
border-color: var(--alp-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.alp-v55.woocommerce-checkout textarea:focus {
border-color: var(--alp-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.alp-v55.woocommerce-checkout select:focus {
border-color: var(--alp-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.alp-v55.woocommerce-checkout .select2-container--focus .select2-selection--single {
border-color: var(--alp-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.alp-v55.woocommerce-checkout #order_review .shop_table {
margin-bottom: 18px;
border: 0;
}
body.alp-v55.woocommerce-checkout #order_review .shop_table th {
padding: 12px 4px;
border-color: var(--alp-line, #dfe6e3);
color: var(--alp-ink, #0b1110);
font-size: 11px;
font-weight: 800;
}
body.alp-v55.woocommerce-checkout #order_review .shop_table td {
padding: 12px 4px;
border-color: var(--alp-line, #dfe6e3);
color: var(--alp-text, #27302e);
font-size: 11px;
}
body.alp-v55.woocommerce-checkout #payment {
margin-top: 16px;
border: 0;
background: transparent;
}
body.alp-v55.woocommerce-checkout #payment ul.payment_methods {
margin: 0;
padding: 0;
border: 0;
}
body.alp-v55.woocommerce-checkout #payment ul.payment_methods > li {
margin: 0 0 9px;
padding: 13px 14px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 10px;
background: #fff;
}
body.alp-v55.woocommerce-checkout #payment .payment_box {
margin: 10px 0 0;
padding: 12px 14px;
border-radius: 8px;
background: var(--alp-surface-2);
color: var(--alp-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.alp-v55.woocommerce-checkout .woocommerce-privacy-policy-text {
color: var(--alp-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.alp-v55.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
color: var(--alp-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.alp-v55.woocommerce-checkout .form-row.validate-required {
color: var(--alp-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.alp-v55.woocommerce-checkout #place_order {
width: 100%;
min-height: 52px;
margin: 14px 0 0 !important;
border: 1px solid var(--alp-mint, #31c7a5) !important;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--alp-mint) 0%,var(--alp-mint) 100%) !important;
box-shadow: 0 9px 24px rgba(49,199,165,.18);
color: var(--alp-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
body.alp-v55.woocommerce-checkout #place_order:hover {
filter: brightness(1.025);
}
body.alp-v55.woocommerce-checkout .woocommerce-form-coupon-toggle {
max-width: var(--alp-container, 1180px);
margin-right: auto;
margin-left: auto;
}
body.alp-v55.woocommerce-checkout form.checkout_coupon {
max-width: var(--alp-container, 1180px);
margin-right: auto;
margin-left: auto;
}
body.alp-v55.woocommerce-checkout .woocommerce-info {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--alp-line, #dfe6e3);
border-left: 3px solid var(--alp-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--alp-text, #27302e);
font-size: 11px;
line-height: 1.6;
}
body.alp-v55.woocommerce-cart .woocommerce-info {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--alp-line, #dfe6e3);
border-left: 3px solid var(--alp-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--alp-text, #27302e);
font-size: 11px;
line-height: 1.6;
}
body.alp-v55.woocommerce .woocommerce-message {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--alp-line, #dfe6e3);
border-left: 3px solid var(--alp-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--alp-text, #27302e);
font-size: 11px;
line-height: 1.6;
}
body.alp-v55.woocommerce .woocommerce-error {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--alp-line, #dfe6e3);
border-left: 3px solid var(--alp-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--alp-text, #27302e);
font-size: 11px;
line-height: 1.6;
border-left-color: #b44d4d;
}
body.alp-v55.woocommerce-account .woocommerce-MyAccount-navigation {
border-color: var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
}
body.alp-v55.woocommerce-account .woocommerce-MyAccount-content {
border-color: var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
}
body.alp-v55.woocommerce-account form.login {
border-color: var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
}
body.alp-v55.woocommerce-account form.register {
border-color: var(--alp-line, #dfe6e3);
border-radius: var(--alp-radius, 18px);
}
body.alp-v55.woocommerce-account input.input-text {
min-height: 44px;
border: 1px solid var(--alp-line, #dfe6e3);
border-radius: 10px;
box-shadow: none;
}
body.alp-v55 .alp-section-text {
margin: 0;
color: var(--alp-muted);
font-size: var(--alp-fs-lead);
line-height: 1.68;
max-width: 54ch;
text-wrap: pretty;
}
body.alp-v55 .alp-coa-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* -- 04 DESKTOP (min-width) ---------------------------------------------- */
@media (min-width: 850px) {
body.alp-v55 .alp-header-logo-col-v53 {
flex-basis: 20% !important;
max-width: 20% !important;
}
body.alp-v55 .alp-header-nav-col-v53 {
flex-basis: 58% !important;
max-width: 58% !important;
}
body.alp-v55 .alp-header-actions-col-v53 {
flex-basis: 22% !important;
max-width: 22% !important;
}
body.alp-v55 .alp-hero-v5 {
position: relative !important;
overflow: hidden !important;
min-height: 610px !important;
background: #061114 !important;
background-image: none !important;
}
body.alp-v55 .alp-hero-v5::before {
display: none !important;
content: none !important;
}
body.alp-v55 .alp-hero-v5::after {
display: none !important;
content: none !important;
}
body.alp-v55 .alp-hero-grid-v5::before {
display: none !important;
content: none !important;
}
body.alp-v55 .alp-hero-grid-v5::after {
display: none !important;
content: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-grid-v5 {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: min(1180px, calc(100% - 48px)) !important;
max-width: 1180px !important;
min-height: 610px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 {
position: relative !important;
z-index: 3 !important;
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
padding: 72px 54px 72px 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 > .col-inner {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
max-width: 520px !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col {
position: relative !important;
z-index: 1 !important;
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
min-height: 520px !important;
height: 520px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col > .col-inner {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image .img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image .img-inner {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image picture {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
filter: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col::after {
content: '' !important;
display: block !important;
position: absolute !important;
z-index: 2 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 18% !important;
pointer-events: none !important;
background: linear-gradient(90deg,
#061114 0%,
rgba(6,17,20,.48) 42%,
rgba(6,17,20,0) 100%) !important;
}
}
@media (min-width: 1024px) {
body.alp-v55 .alp-home-v5 .alp-feature-card:hover {
transform: translateY(-3px);
border-color: rgba(49,199,165,.28);
box-shadow: 0 16px 38px rgba(35,60,55,.08);
}
body.alp-v55 .alp-home-v5 .alp-product-tile:hover {
transform: translateY(-3px);
border-color: rgba(49,199,165,.28);
box-shadow: 0 16px 38px rgba(35,60,55,.08);
}
body.alp-v55 .alp-home-v5 .alp-all-products-card:hover {
transform: translateY(-3px);
border-color: rgba(49,199,165,.28);
box-shadow: 0 16px 38px rgba(35,60,55,.08);
}
body.alp-v55 .alp-home-v5 .alp-feature-card {
transition: transform .2s var(--alp-ease), border-color .2s var(--alp-ease), box-shadow .2s var(--alp-ease);
}
body.alp-v55 .alp-home-v5 .alp-product-tile {
transition: transform .2s var(--alp-ease), border-color .2s var(--alp-ease), box-shadow .2s var(--alp-ease);
}
body.alp-v55 .alp-home-v5 .alp-all-products-card {
transition: transform .2s var(--alp-ease), border-color .2s var(--alp-ease), box-shadow .2s var(--alp-ease);
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-copy-v5 {
flex-basis: 51% !important;
max-width: 51% !important;
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-visual-col {
flex-basis: 49% !important;
max-width: 49% !important;
}
body.alp-v55 .alp-trust-row .alp-trust-col:hover .alp-trust-item {
background: rgba(234,248,244,.48);
}
body.alp-v55 .alp-hero-v5 .alp-hero-title {
white-space: normal;
}
body.alp-v55 .home .page-wrapper {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .home .page-inner {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .home #main {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .home #wide-nav {
display: none !important;
}
body.alp-v55 .home .header-main {
display: none !important;
}
body.alp-v55 .home .header-bottom {
display: none !important;
}
body.alp-v55 .home .header-top {
display: none !important;
}
body.alp-v55 .home .footer-wrapper {
display: none !important;
}
body.alp-v55 .home .absolute-footer {
display: none !important;
}
body.alp-v55 .home .widget-area {
display: none !important;
}
body.alp-v55 .home .page-title {
display: none !important;
}
body.alp-v55 .home .page-header {
display: none !important;
}
body.alp-v55 .home .blog-header {
display: none !important;
}
body.alp-v55 .alp-hero-v5 {
position: relative !important;
overflow: hidden !important;
background: #061114 !important;
background-image: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-grid-v5 {
position: static !important;
z-index: 2 !important;
width: min(1180px, calc(100% - 48px)) !important;
max-width: 1180px !important;
margin: 0 auto !important;
display: block !important;
flex-wrap: nowrap !important;
align-items: center !important;
min-height: 640px !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 {
order: 1 !important;
position: relative !important;
z-index: 5 !important;
flex: none !important;
width: 50% !important;
max-width: 50% !important;
padding: 70px 55px 70px 0 !important;
margin: 0 !important;
float: none !important;
min-height: 640px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col {
order: 2 !important;
position: absolute !important;
z-index: 1 !important;
flex: none !important;
width: auto !important;
max-width: none !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
left: 44% !important;
float: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col > .col-inner {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image .img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image .img-inner {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image picture {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: cover !important;
object-position: 60% center !important;
transform: none !important;
filter: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col::after {
content: '' !important;
display: block !important;
position: absolute !important;
z-index: 2 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: 42% !important;
height: auto !important;
pointer-events: none !important;
background: linear-gradient(90deg,
#061114 0%,
#061114 12%,
rgba(6,17,20,.86) 34%,
rgba(6,17,20,.52) 58%,
rgba(6,17,20,.20) 80%,
rgba(6,17,20,0) 100%) !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col::before {
display: none !important;
}
body.alp-v55 .alp-hero-v5 > .section-content {
position: static !important;
}
body.alp-v55 .alp-principle {
transition: transform .2s var(--alp-ease), box-shadow .2s var(--alp-ease), border-color .2s var(--alp-ease);
}
body.alp-v55 .alp-paycard {
transition: transform .2s var(--alp-ease), box-shadow .2s var(--alp-ease), border-color .2s var(--alp-ease);
}
body.alp-v55 .alp-storage-card {
transition: transform .2s var(--alp-ease), box-shadow .2s var(--alp-ease), border-color .2s var(--alp-ease);
}
body.alp-v55 .alp-contact-card {
transition: transform .2s var(--alp-ease), box-shadow .2s var(--alp-ease), border-color .2s var(--alp-ease);
}
body.alp-v55 .alp-paycard:hover {
transform: translateY(-2px);
border-color: rgba(49,199,165,.3);
box-shadow: 0 14px 32px rgba(35,60,55,.08);
}
body.alp-v55 .alp-storage-card:hover {
transform: translateY(-2px);
border-color: rgba(49,199,165,.3);
box-shadow: 0 14px 32px rgba(35,60,55,.08);
}
body.alp-v55 .alp-contact-card:hover {
transform: translateY(-2px);
border-color: rgba(49,199,165,.3);
box-shadow: 0 14px 32px rgba(35,60,55,.08);
}
body.alp-v55 .alp-principle:hover {
background: var(--alp-surface);
}
body.alp-v55.woocommerce .product-small .box:hover {
transform: translateY(-3px);
border-color: rgba(49,199,165,.34);
box-shadow: 0 18px 42px rgba(22,43,39,.09);
}
body.alp-v55.woocommerce-page .product-small .box:hover {
transform: translateY(-3px);
border-color: rgba(49,199,165,.34);
box-shadow: 0 18px 42px rgba(22,43,39,.09);
}
body.alp-v55.woocommerce .product-small .box:hover .box-image img {
transform: scale(1.025);
}
body.alp-v55.woocommerce-page .product-small .box:hover .box-image img {
transform: scale(1.025);
}
}
/* -- 05 TABLET / MOBILE (max-width, absteigend) -------------------------- */
@media (max-width: 1023px) {
body.alp-v55 .alp-shell {
width: min(calc(100% - 34px), 760px);
}
body.alp-v55 .alp-hero-grid-v5 {
width: min(calc(100% - 34px),760px) !important;
min-height: 0 !important;
grid-template-columns: 1fr;
gap: 0;
}
body.alp-v55 .alp-research-bar-inner {
width: calc(100% - 28px);
grid-template-columns: 1fr auto;
}
body.alp-v55 .alp-research-bar-brand {
order: -1;
justify-self: start;
}
body.alp-v55 .alp-research-bar-side:first-child {
display: none;
}
body.alp-v55 .alp-research-bar-side:last-child {
font-size: 10px;
}
body.alp-v55 .alp-hero-v5 {
min-height: 0;
background: radial-gradient(circle at 70% 62%, rgba(49,199,165,.13), transparent 29%),
linear-gradient(150deg,#071116 0%,#0b1a1f 100%) !important;
}
body.alp-v55 .alp-hero-copy-v5 {
padding: 64px 0 22px;
}
body.alp-v55 .alp-hero-title {
max-width: 720px;
font-size: clamp(3.1rem, 10vw, 5rem) !important;
}
body.alp-v55 .alp-hero-lead {
max-width: 580px;
}
body.alp-v55 .alp-hero-scene {
min-height: 430px;
}
body.alp-v55 .alp-hero-vials {
right: 50%;
bottom: 50px;
width: min(600px, 92vw);
transform: translateX(50%);
}
body.alp-v55 .alp-hero-platform {
right: 50%;
bottom: 42px;
width: min(580px, 88vw);
transform: translateX(50%);
}
body.alp-v55 .alp-hero-labglass--one {
left: 2%;
}
body.alp-v55 .alp-hero-labglass--two {
right: 2%;
}
body.alp-v55 .alp-trust-wrap {
margin-top: -26px;
}
body.alp-v55 .alp-trust-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.alp-v55 .alp-trust-item {
border-right: 0;
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55 .alp-trust-item:nth-child(odd) {
border-right: 1px solid var(--alp-line);
}
body.alp-v55 .alp-trust-item:last-child {
grid-column: 1 / -1;
border-bottom: 0;
border-right: 0;
}
body.alp-v55 .alp-section-intro {
grid-template-columns: 1fr;
gap: 28px;
}
body.alp-v55 .alp-index-head {
grid-template-columns: 1fr;
gap: 28px;
}
body.alp-v55 .alp-coa-layout {
grid-template-columns: 1fr;
gap: 40px;
}
body.alp-v55 .alp-faq-layout {
grid-template-columns: 1fr;
gap: 28px;
}
body.alp-v55 .alp-section-intro .alp-copy {
justify-self: start;
}
body.alp-v55 .alp-catalog-grid {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-feature-card {
min-height: 500px;
}
body.alp-v55 .alp-catalog-side {
min-height: 500px;
}
body.alp-v55 .alp-index-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.alp-v55 .alp-index-item:nth-child(2) {
border-right: 0;
}
body.alp-v55 .alp-index-item:nth-child(n+3) {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-footer-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.alp-v55 .alp-footer-grid > :first-child {
grid-column: 1 / -1;
}
body.alp-v55 .alp-catalog-section .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-index-section .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-coa-section-v5 .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-faq-section-v5 .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-footer-v5 .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner {
padding: 56px 0 10px !important;
}
body.alp-v55 .alp-hero-visual-col {
min-height: 430px;
}
body.alp-v55 .alp-hero-visual-col > .col-inner {
min-height: 430px;
}
body.alp-v55 .alp-hero-vials-image {
width: min(760px,108vw) !important;
margin: 0 0 35px !important;
max-width: none !important;
transform: none;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::before {
width: min(620px,98vw);
bottom: 28px;
height: 94px;
}
body.alp-v55 .alp-trust-section {
margin-top: -26px;
}
body.alp-v55 .alp-trust-section .section-content {
width: 100% !important;
}
body.alp-v55 .alp-trust-row {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.alp-v55 .alp-trust-row > .col:nth-child(odd) .alp-trust-item {
border-right: 1px solid var(--alp-line);
}
body.alp-v55 .alp-trust-row > .col:nth-child(-n+4) .alp-trust-item {
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55 .alp-trust-row > .col:last-child {
grid-column: 1 / -1;
}
body.alp-v55 .alp-trust-row > .col:last-child .alp-trust-item {
border-right: 0;
}
body.alp-v55 .alp-index-row {
grid-template-columns: repeat(2, minmax(0,1fr));
}
body.alp-v55 .alp-index-row > .col:nth-child(2) .alp-index-item {
border-right: 0;
}
body.alp-v55 .alp-index-row > .col:nth-child(n+3) .alp-index-item {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-section-intro-row .alp-copy {
max-width: none;
margin-left: 0;
}
body.alp-v55 .alp-index-head-row .alp-copy {
max-width: none;
margin-left: 0;
}
body.alp-v55 .alp-hero-v5 .alp-hero-title {
font-size: clamp(3rem,9.5vw,4.8rem) !important;
line-height: .92 !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::after {
display: none;
}
body.alp-v55 .alp-hero-v5 .alp-hero-grid-v5 {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col {
order: 1 !important;
position: relative !important;
z-index: 1 !important;
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 {
order: 2 !important;
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
padding: 24px 20px 48px !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col > .col-inner {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image .img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image .img-inner {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image picture {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-image img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col::after {
content: '' !important;
display: block !important;
position: absolute !important;
z-index: 2 !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
height: 30% !important;
pointer-events: none !important;
background: linear-gradient(180deg,
rgba(6,17,20,0) 0%,
rgba(6,17,20,.55) 55%,
#061114 100%) !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 > .col-inner {
position: static !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 .button.alp-btn-v4 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 a.button.alp-btn-v4 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 .button.alp-btn-v4:last-child {
margin-bottom: 0 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-copy-v5 .button.alp-btn-v4:active {
transform: scale(0.97) !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-banner-col::before {
display: none !important;
}
body.alp-v55 .alp-page-hero .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-page-section .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-page-section-dark .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-page-section-soft .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.alp-v55 .alp-page-hero {
padding: 58px 0 50px !important;
}
body.alp-v55 .alp-page-section {
padding: 56px 0 !important;
}
body.alp-v55 .alp-page-section-soft {
padding: 56px 0 !important;
}
body.alp-v55 .alp-page-section-dark {
padding: 52px 0 !important;
}
body.alp-v55 .alp-principle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.alp-v55 .alp-paygrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.alp-v55 .alp-storage-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.alp-v55 .alp-contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.alp-v55 .alp-fieldlist-row {
grid-template-columns: 1fr;
gap: 6px;
}
body.alp-v55 .alp-legal-aside {
position: static;
}
body.alp-v55.woocommerce .shop-container {
padding-top: 24px;
padding-bottom: 54px;
}
body.alp-v55.single-product .product-main {
padding-top: 26px;
padding-bottom: 38px;
}
body.alp-v55.single-product .product-info {
padding-top: 22px;
}
body.alp-v55.single-product .product-info .product-title {
font-size: clamp(1.9rem, 8vw, 2.5rem);
}
body.alp-v55.woocommerce-checkout form.checkout {
display: block;
}
body.alp-v55.woocommerce-checkout #customer_details {
display: block;
width: 100%;
}
body.alp-v55.woocommerce-checkout #order_review_heading {
display: block;
width: 100%;
margin: 30px 0 14px;
padding: 0;
}
body.alp-v55.woocommerce-checkout #order_review {
display: block;
width: 100%;
position: static;
top: auto;
}
}
@media (max-width: 849px) {
body.alp-v55 .admin-bar .alp-bound-header {
top: 46px;
}
body.alp-v55 .alp-header-micro-row-v53 {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-site-header-row-v53 {
width: calc(100% - 28px) !important;
min-height: 62px;
}
body.alp-v55 .alp-header-micro-right {
display: none;
}
body.alp-v55 .alp-header-micro-row-v53 > .col:first-child {
flex-basis: 100% !important;
max-width: 100% !important;
}
body.alp-v55 .alp-header-micro-row-v53 > .col:last-child {
display: none !important;
}
body.alp-v55 .alp-header-micro-text {
font-size: 10px;
}
body.alp-v55 .alp-header-logo-v53 {
font-size: 16px;
}
body.alp-v55 .alp-header-logo-v53 small {
font-size: 10px;
margin-top: 3px !important;
letter-spacing: .16em;
}
body.alp-v55 .alp-header-logo-col-v53 {
flex-basis: 50% !important;
max-width: 50% !important;
}
body.alp-v55 .alp-header-nav-col-v53 {
flex-basis: 25% !important;
max-width: 25% !important;
order: 3;
}
body.alp-v55 .alp-header-actions-col-v53 {
flex-basis: 25% !important;
max-width: 25% !important;
}
body.alp-v55 .alp-header-actions-v53 {
min-height: 62px;
gap: 8px;
}
body.alp-v55 .alp-header-account-v53 {
display: none !important;
}
body.alp-v55 .alp-header-action-v53 {
font-size: 0;
}
body.alp-v55 .alp-cart-action-v53::before {
content: 'Bag';
font-size: 10px;
color: rgba(255,255,255,.78);
}
body.alp-v55 .alp-nav-toggle-v53 {
display: inline-flex !important;
position: relative;
z-index: 100002;
width: 36px;
height: 36px;
margin-left: auto;
padding: 0 !important;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 50% !important;
background: transparent !important;
box-shadow: none;
}
body.alp-v55 .alp-nav-toggle-v53 span {
width: 14px;
height: 1px;
background: #fff;
transition: transform .18s var(--alp-ease), opacity .18s var(--alp-ease);
}
body.alp-v55 .alp-nav-toggle-v53[aria-expanded="true"] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
body.alp-v55 .alp-nav-toggle-v53[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
body.alp-v55 .alp-nav-toggle-v53[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
body.alp-v55 .alp-nav-panel-v53 {
display: none;
position: fixed;
z-index: 100001;
left: 0;
right: 0;
top: 92px;
padding: 18px 22px 28px;
background: rgba(5,12,11,.985);
border-top: 1px solid rgba(255,255,255,.08);
box-shadow: 0 25px 45px rgba(0,0,0,.26);
}
body.alp-v55 .admin-bar .alp-nav-panel-v53 {
top: 138px;
}
body.alp-v55 .alp-nav-panel-v53.is-open {
display: block;
}
body.alp-v55 .alp-nav-list-v53 {
display: grid;
gap: 0;
justify-content: stretch;
}
body.alp-v55 .alp-nav-list-v53 > li {
border-bottom: 1px solid rgba(255,255,255,.08);
}
body.alp-v55 .alp-nav-list-v53 > li > a {
width: 100%;
min-height: 48px;
justify-content: space-between;
font-size: 10px;
}
}
@media (max-width: 767px) {
body.alp-v55 .alp-trust-section {
display: none !important;
}
body.alp-v55 .alp-catalog-section {
padding-top: 62px !important;
}
body.alp-v55 .alp-product-tile-footer {
min-height: 60px !important;
}
body.alp-v55 .alp-product-tile-footer > div {
min-height: 44px !important;
}
body.alp-v55 .alp-product-tile-footer .alp-round-link {
align-self: flex-end;
margin-bottom: 0 !important;
}
body.alp-v55 .alp-hero-v5 {
min-height: 0 !important;
background-image: linear-gradient(180deg,#071116 0%,#09171b 100%) !important;
background: linear-gradient(180deg,#071116 0%,#09171b 100%) !important;
}
body.alp-v55 .alp-hero-grid-v5 {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-visual-col {
display: block !important;
order: 1 !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
inset: auto !important;
height: 330px !important;
min-height: 330px !important;
pointer-events: auto;
}
body.alp-v55 .alp-hero-visual-col {
min-height: 0 !important;
height: 330px !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner {
min-height: 330px !important;
height: 330px !important;
position: relative !important;
display: block !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
inset: auto !important;
width: 100% !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::before {
display: none !important;
content: none !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::after {
display: none !important;
content: none !important;
}
body.alp-v55 .alp-hero-keyvisual-image {
width: 100% !important;
height: 330px !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
inset: auto !important;
}
body.alp-v55 .alp-hero-keyvisual-image .img-inner {
width: 100% !important;
height: 330px !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
inset: auto !important;
}
body.alp-v55 .alp-hero-keyvisual-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
object-fit: cover !important;
object-position: 78% center !important;
filter: none !important;
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-copy-v5 {
display: block !important;
order: 2 !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
padding: 0 20px 38px !important;
margin: 0 !important;
position: relative !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .button {
width: 100% !important;
min-height: 48px !important;
margin: 0 0 9px !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > a.button {
width: 100% !important;
min-height: 48px !important;
margin: 0 0 9px !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .button:first-of-type {
order: 1 !important;
margin-top: 18px !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > a.button:first-of-type {
order: 1 !important;
margin-top: 18px !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .button:nth-of-type(2) {
order: 2 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > a.button:nth-of-type(2) {
order: 2 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .ux-text {
order: 3 !important;
margin-top: 24px !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-title {
max-width: 100% !important;
font-size: 2.55rem !important;
line-height: .94 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-lead {
margin: 18px 0 0 !important;
font-size: 11.5px !important;
line-height: 1.7 !important;
}
body.alp-v55 .alp-hero-grid-v5::before {
display: none !important;
content: none !important;
}
body.alp-v55 .alp-hero-keyvisual-image picture {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 330px !important;
}
}
@media (max-width: 640px) {
body.alp-v55 .alp-shell {
width: calc(100% - 28px);
}
body.alp-v55 .alp-hero-grid-v5 {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
max-width: none !important;
margin: 0 !important;
}
body.alp-v55 .alp-research-bar-side:last-child {
display: none;
}
body.alp-v55 .alp-research-bar-inner {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-research-bar-brand {
justify-self: center;
}
body.alp-v55 .alp-hero-copy-v5 {
padding-top: 50px;
}
body.alp-v55 .alp-hero-title {
font-size: 2.75rem !important;
line-height: .93 !important;
}
body.alp-v55 .alp-hero-lead {
margin-top: 20px;
font-size: 12px;
}
body.alp-v55 .alp-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
body.alp-v55 .alp-btn-v5 {
width: 100% !important;
}
body.alp-v55 .alp-home-v5 .button.alp-btn-v5 {
width: 100% !important;
}
body.alp-v55 .alp-hero-scene {
min-height: 340px;
}
body.alp-v55 .alp-hero-vials {
bottom: 45px;
width: 108vw;
}
body.alp-v55 .alp-hero-platform {
bottom: 38px;
width: 100vw;
height: 72px;
}
body.alp-v55 .alp-hero-labglass {
display: none;
}
body.alp-v55 .alp-trust-strip {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-trust-item {
grid-column: auto;
border-right: 0;
border-bottom: 1px solid var(--alp-line);
padding: 15px 20px !important;
min-height: 0;
}
body.alp-v55 .alp-trust-item:nth-child(odd) {
grid-column: auto;
border-right: 0;
border-bottom: 1px solid var(--alp-line);
padding: 16px 17px;
}
body.alp-v55 .alp-trust-item:last-child {
grid-column: auto;
border-right: 0;
border-bottom: 0;
padding: 16px 17px;
}
body.alp-v55 .alp-catalog-section {
padding: 84px 0 72px;
}
body.alp-v55 .alp-section-title {
font-size: 2.2rem;
}
body.alp-v55 .alp-feature-card {
min-height: 470px;
}
body.alp-v55 .alp-feature-media {
inset: 50px 10px 78px;
}
body.alp-v55 .alp-feature-media img {
width: 78%;
}
body.alp-v55 .alp-catalog-side {
grid-template-columns: repeat(2,minmax(0,1fr));
min-height: 0;
}
body.alp-v55 .alp-product-tile {
min-height: 230px;
}
body.alp-v55 .alp-all-products-card {
min-height: 230px;
}
body.alp-v55 .alp-product-tile-media {
height: 148px;
}
body.alp-v55 .alp-product-tile-media img {
width: 110px;
height: 140px;
}
body.alp-v55 .alp-all-products-media img {
width: 100%;
}
body.alp-v55 .alp-index-grid {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-index-item {
padding: 20px 0;
margin: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-index-item + .alp-index-item {
padding: 20px 0;
margin: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-index-item:nth-child(n+3) {
padding: 20px 0;
margin: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-coa-section-v5 {
padding: 70px 0;
}
body.alp-v55 .alp-faq-section-v5 {
padding: 70px 0;
}
body.alp-v55 .alp-coa-doc {
padding: 15px;
}
body.alp-v55 .alp-coa-doc-title h3 {
font-size: 16px;
}
body.alp-v55 .alp-coa-metrics {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.alp-v55 .alp-coa-metric:nth-child(2) {
border-right: 0;
}
body.alp-v55 .alp-coa-metric:nth-child(-n+2) {
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55 .alp-faq-row {
grid-template-columns: 28px 1fr 26px;
}
body.alp-v55 .alp-faq-question {
font-size: 10px;
}
body.alp-v55 .alp-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px 24px;
}
body.alp-v55 .alp-footer-bottom {
flex-direction: column;
}
body.alp-v55 .alp-catalog-section .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-index-section .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-coa-section-v5 .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-faq-section-v5 .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-footer-v5 .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner {
padding-top: 50px !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-visual-col {
min-height: 365px !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner {
min-height: 365px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-vials-image {
width: 112vw !important;
margin-left: -8vw !important;
margin-bottom: 20px !important;
max-width: none !important;
margin: 0 0 22px -6vw !important;
transform: none !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::before {
width: 104vw !important;
height: 76px !important;
bottom: 19px !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner::after {
display: none;
}
body.alp-v55 .alp-trust-section .section-content {
width: calc(100% - 28px);
}
body.alp-v55 .alp-trust-row {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-trust-row > .col {
grid-column: auto;
}
body.alp-v55 .alp-trust-row > .col:last-child {
grid-column: auto;
}
body.alp-v55 .alp-trust-row > .col .alp-trust-item {
border-right: 0;
border-bottom: 1px solid var(--alp-line);
padding: 16px 17px;
}
body.alp-v55 .alp-trust-row > .col:nth-child(odd) .alp-trust-item {
border-right: 0;
border-bottom: 1px solid var(--alp-line);
padding: 16px 17px;
}
body.alp-v55 .alp-trust-row > .col:last-child .alp-trust-item {
border-right: 0;
border-bottom: 0;
padding: 16px 17px;
}
body.alp-v55 .alp-index-row {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-index-row > .col .alp-index-item {
padding: 20px 0 !important;
margin: 0 !important;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-index-row > .col:nth-child(n+3) .alp-index-item {
padding: 20px 0 !important;
margin: 0 !important;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.alp-v55 .alp-footer-grid-v5 > .col:first-child {
flex-basis: 100% !important;
max-width: 100% !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-title {
font-size: 2.55rem !important;
line-height: .94 !important;
}
body.alp-v55 .alp-hero-v5 .alp-hero-lead {
font-size: 11.5px !important;
line-height: 1.7 !important;
margin: 18px 0 0 !important;
}
body.alp-v55 .alp-hero-copy-v5 .button.alp-btn-v4 {
display: flex !important;
width: 100% !important;
margin-right: 0 !important;
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-visual-col {
order: 1 !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
padding: 0 !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-copy-v5 {
order: 2 !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
padding: 0 20px 38px !important;
margin: 0 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .ux-text {
order: 3 !important;
margin-top: 26px !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .button {
width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
margin: 0 0 9px 0 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > a.button {
width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
margin: 0 0 9px 0 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .button:first-of-type {
order: 1 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > a.button:first-of-type {
order: 1 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > .button:nth-of-type(2) {
order: 2 !important;
}
body.alp-v55 .alp-hero-copy-v5 > .col-inner > a.button:nth-of-type(2) {
order: 2 !important;
}
body.alp-v55 .alp-hero-v5 .alp-kicker {
margin-bottom: 12px !important;
}
body.alp-v55 .alp-page-hero .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-page-section .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-page-section-dark .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-page-section-soft .section-content > .row {
width: calc(100% - 28px) !important;
}
body.alp-v55 .alp-page-hero {
padding: 46px 0 42px !important;
}
body.alp-v55 .alp-page-title {
font-size: 2.15rem;
}
body.alp-v55 .alp-principle-grid {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-paygrid {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-storage-grid {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-contact-grid {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-chain-step {
grid-template-columns: 42px 1fr;
gap: 12px;
}
body.alp-v55 .alp-coa-thead {
display: none;
}
body.alp-v55 .alp-datatable-head {
display: none;
}
body.alp-v55 .alp-coa-trow {
grid-template-columns: 1fr;
gap: 8px;
padding: 18px;
}
body.alp-v55 .alp-datatable-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 18px;
}
body.alp-v55 .alp-coa-trow span {
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
align-items: baseline;
}
body.alp-v55 .alp-datatable-row span {
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
align-items: baseline;
}
body.alp-v55 .alp-coa-trow span::before {
content: attr(data-label);
color: var(--alp-muted-2);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .alp-datatable-row span::before {
content: attr(data-label);
color: var(--alp-muted-2);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .alp-form {
grid-template-columns: 1fr;
}
body.alp-v55 .alp-form-wrap {
padding: 22px 20px 26px;
}
body.alp-v55 .alp-form-submit {
width: 100%;
justify-self: stretch;
}
body.alp-v55 .alp-cta-band {
padding: 26px 22px;
}
}
@media (max-width: 549px) {
body.alp-v55.woocommerce .product-small .box-text-products {
padding: 14px 13px 16px !important;
}
body.alp-v55.woocommerce .product-small .product-title {
font-size: 12px;
}
body.alp-v55.woocommerce .badge-container {
top: 9px;
left: 9px;
}
body.alp-v55.woocommerce .badge-inner {
padding: 6px 8px;
font-size: 10px;
}
body.alp-v55.single-product form.cart {
display: grid;
grid-template-columns: 94px 1fr;
}
body.alp-v55.single-product form.cart .single_add_to_cart_button {
width: 100%;
}
body.alp-v55.single-product .woocommerce-tabs {
padding-top: 26px;
padding-bottom: 48px;
}
body.alp-v55.single-product .woocommerce-Tabs-panel {
font-size: 12.5px;
}
body.alp-v55.single-product .panel.entry-content {
font-size: 12.5px;
}
body.alp-v55.single-product .woocommerce-Tabs-panel table {
display: block;
overflow-x: auto;
border-radius: 12px;
}
body.alp-v55.single-product .panel.entry-content table {
display: block;
overflow-x: auto;
border-radius: 12px;
}
body.alp-v55.single-product .woocommerce-Tabs-panel table th {
min-width: 135px;
padding: 11px 12px;
}
body.alp-v55.single-product .woocommerce-Tabs-panel table td {
min-width: 135px;
padding: 11px 12px;
}
body.alp-v55.single-product .panel.entry-content table th {
min-width: 135px;
padding: 11px 12px;
}
body.alp-v55.single-product .panel.entry-content table td {
min-width: 135px;
padding: 11px 12px;
}
body.alp-v55.woocommerce-checkout .woocommerce {
padding-top: 28px;
padding-bottom: 54px;
}
body.alp-v55.woocommerce-checkout .woocommerce-billing-fields {
padding: 18px;
border-radius: 13px;
}
body.alp-v55.woocommerce-checkout .woocommerce-shipping-fields {
padding: 18px;
border-radius: 13px;
}
body.alp-v55.woocommerce-checkout .woocommerce-additional-fields {
padding: 18px;
border-radius: 13px;
}
body.alp-v55.woocommerce-checkout #order_review {
padding: 18px;
border-radius: 13px;
}
}
@media (max-width: 420px) {
body.alp-v55 .alp-hero-visual-col {
height: 300px !important;
}
body.alp-v55 .alp-hero-visual-col > .col-inner {
height: 300px !important;
min-height: 300px !important;
}
body.alp-v55 .alp-hero-keyvisual-image {
height: 300px !important;
min-height: 300px !important;
}
body.alp-v55 .alp-hero-keyvisual-image .img-inner {
height: 300px !important;
min-height: 300px !important;
}
body.alp-v55 .alp-hero-keyvisual-image img {
object-position: 79% center !important;
}
body.alp-v55 .alp-hero-grid-v5 > .alp-hero-visual-col {
height: 300px !important;
min-height: 300px !important;
}
body.alp-v55 .alp-hero-keyvisual-image picture {
height: 300px !important;
min-height: 300px !important;
}
}
/* -- 06 FLATSOME-RESTFLAECHEN UND BROWSER-OBERFLAECHEN --------------------
Alles hier war vorher ungestylt und lief daher in Flatsomes Blau
(#446084) oder im Browser-Default. Die Schnellansicht im Shop war das
sichtbarste Symptom, aber nicht das einzige. ---------------------- */
/* Logo als Link zur Startseite. Der Wrapper kommt aus functions.php. */
body.alp-v55 a.alp-header-logo-v53 {
text-decoration: none;
transition: opacity var(--alp-dur) var(--alp-ease);
}
body.alp-v55 a.alp-header-logo-v53:hover { opacity: .82; }
body.alp-v55 a.alp-header-logo-v53:hover span { color: var(--alp-mint); }
body.alp-v55 a.alp-header-logo-v53:focus-visible {
outline: 2px solid var(--alp-mint);
outline-offset: 6px;
border-radius: 6px;
}
/* Schnellansicht und Wunschliste auf den Produktkacheln. */
body.alp-v55 .image-tools .quick-view,
body.alp-v55 a.quick-view,
body.alp-v55 .button.quick-view {
padding: 0 14px;
height: 32px;
line-height: 32px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
background: rgba(11,17,16,.82);
backdrop-filter: blur(10px);
color: #fff;
font-family: var(--alp-font);
font-size: var(--alp-fs-micro);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
text-shadow: none;
box-shadow: 0 6px 18px rgba(8,17,15,.22);
transition: background-color var(--alp-dur) var(--alp-ease),
border-color var(--alp-dur) var(--alp-ease),
color var(--alp-dur) var(--alp-ease);
}
body.alp-v55 .image-tools .quick-view:hover,
body.alp-v55 a.quick-view:hover,
body.alp-v55 .button.quick-view:hover {
background: var(--alp-mint);
border-color: var(--alp-mint);
color: var(--alp-ink);
}
body.alp-v55 .image-tools {
border-radius: 999px;
box-shadow: none;
}
body.alp-v55 .wishlist-icon .wishlist-button,
body.alp-v55 .wishlist-button {
border-radius: 999px;
background: rgba(11,17,16,.82);
backdrop-filter: blur(10px);
color: #fff;
box-shadow: none;
}
body.alp-v55 .wishlist-button:hover { color: var(--alp-mint); }
/* Bewertungssterne: Flatsome faerbt sie sonst im Primaerton. */
body.alp-v55 .star-rating span::before,
body.alp-v55 .stars a::before { color: var(--alp-mint-dark); }
/* Blaettern im Produktarchiv. */
body.alp-v55 .page-numbers li a,
body.alp-v55 .page-numbers li span {
min-width: 40px;
height: 40px;
line-height: 38px;
border: 1px solid var(--alp-line);
border-radius: 12px;
background: #fff;
color: var(--alp-text);
font-size: var(--alp-fs-small);
font-weight: 800;
transition: border-color var(--alp-dur) var(--alp-ease),
color var(--alp-dur) var(--alp-ease);
}
body.alp-v55 .page-numbers li a:hover { border-color: var(--alp-mint); color: var(--alp-mint-dark); }
body.alp-v55 .page-numbers li span.current,
body.alp-v55 .page-numbers li .current {
border-color: var(--alp-ink);
background: var(--alp-ink);
color: #fff;
}
/* Formularelemente: Checkboxen und Radios im Checkout waren Browser-Blau. */
body.alp-v55 { accent-color: var(--alp-mint-dark); caret-color: var(--alp-mint-dark); }
/* Scrollbalken. Gehoert genauso zum Design wie der Rest. */
body.alp-v55 { scrollbar-color: var(--alp-line-2) transparent; scrollbar-width: thin; }
body.alp-v55 ::-webkit-scrollbar { width: 11px; height: 11px; }
body.alp-v55 ::-webkit-scrollbar-track { background: transparent; }
body.alp-v55 ::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: 999px;
background-clip: content-box;
background-color: var(--alp-line-2);
}
body.alp-v55 ::-webkit-scrollbar-thumb:hover { background-color: var(--alp-muted-2); }
/* Links im Fliesstext: Unterlaenge nicht durchschneiden. */
body.alp-v55 .alp-legal a,
body.alp-v55 .alp-copy a,
body.alp-v55 .alp-section-text a,
body.alp-v55 .woocommerce-product-details__short-description a {
color: var(--alp-mint-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: color-mix(in srgb, var(--alp-mint-dark) 45%, transparent);
transition: text-decoration-color var(--alp-dur) var(--alp-ease);
}
body.alp-v55 .alp-legal a:hover,
body.alp-v55 .alp-copy a:hover,
body.alp-v55 .alp-section-text a:hover {
text-decoration-color: var(--alp-mint-dark);
}
/* Chargen, Reinheitswerte und Preise sind Messwerte, keine Fliesstext-Zahlen. */
body.alp-v55 .alp-coa-trow,
body.alp-v55 .alp-coa-doc-head,
body.alp-v55 .alp-coa-metric strong,
body.alp-v55 .alp-product-pill,
body.alp-v55 .alp-card-price,
body.alp-v55 .alp-card-price-small,
body.alp-v55 .woocommerce-Price-amount {
font-family: var(--alp-font-mono);
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'tnum' 1;
}
/* Produktkachel: eine Bewegung, nicht vier. */
@media (min-width: 1024px) and (hover: hover) {
body.alp-v55.woocommerce .product-small .box-image,
body.alp-v55.woocommerce-page .product-small .box-image {
overflow: hidden;
border-radius: var(--alp-radius-sm);
}
body.alp-v55.woocommerce .product-small .box-image img,
body.alp-v55.woocommerce-page .product-small .box-image img {
transition: transform 420ms var(--alp-ease);
}
body.alp-v55.woocommerce .product-small:hover .box-image img,
body.alp-v55.woocommerce-page .product-small:hover .box-image img {
transform: scale(1.035);
}
}
/* -- 07 BILDRAHMEN (alp_figure) ------------------------------------------
Passend zu den neuen Keyvisuals: dunkler Rahmen, Mint-Kantenlicht,
feines Korn statt flacher Bildkachel. ------------------------------ */
body.alp-v55 .alp-figure-frame {
isolation: isolate;
border-color: color-mix(in srgb, var(--alp-ink) 12%, transparent);
background: var(--alp-ink);
box-shadow: 0 24px 60px rgba(8,17,15,.14), 0 2px 6px rgba(8,17,15,.06);
}
body.alp-v55 .alp-figure--dark .alp-figure-frame {
border-color: color-mix(in srgb, var(--alp-mint) 16%, transparent);
}
body.alp-v55 .alp-figure-frame picture { display: block; height: 100%; }
body.alp-v55 .alp-figure-frame img {
transition: transform 520ms var(--alp-ease), filter 520ms var(--alp-ease);
}
/* Kantenlicht: eine duenne Mint-Linie oben links, wie ein Streiflicht.
Kein Farbverlauf ueber das ganze Bild, nur die Kante. */
body.alp-v55 .alp-figure-edge {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
border-radius: inherit;
box-shadow:
inset 1px 1px 0 color-mix(in srgb, var(--alp-mint) 26%, transparent),
inset 0 -60px 90px -60px rgba(8,17,15,.65);
}
/* Feines Korn. Bricht das Banding in den dunklen Flaechen der Keyvisuals. */
body.alp-v55 .alp-figure-grain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
border-radius: inherit;
opacity: .16;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 140px 140px;
}
@media (min-width: 1024px) and (hover: hover) {
body.alp-v55 .alp-figure-frame:hover img {
transform: scale(1.028);
filter: saturate(1.06);
}
}
/* Zusaetzliche Seitenverhaeltnisse fuer die neuen Formate. */
body.alp-v55 .alp-figure--1-1 .alp-figure-frame { aspect-ratio: 1 / 1; }
body.alp-v55 .alp-figure--4-5 .alp-figure-frame { aspect-ratio: 4 / 5; }
body.alp-v55 .alp-figure--21-9 .alp-figure-frame { aspect-ratio: 21 / 9; }
body.alp-v55 .alp-figure figcaption {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--alp-font-mono);
}
body.alp-v55 .alp-figure figcaption::before {
content: '';
width: 14px;
height: 1px;
background: var(--alp-mint);
flex: none;
}
/* -- 08 TRUST-BAND ------------------------------------------------------
Vorher: weisse Kachelreihe, die das dunkle Hero-Bild abgeschnitten
hat, mit fuenf vollhohen Trennlinien und mintfarbener Subline auf
Weiss (Kontrast rund 2,5:1, unter dem Mindestwert).
Jetzt: dunkles Band, das den Hero nach unten fortsetzt. Die einzige
harte Kante der Startseite sitzt damit dort, wo sie hingehoert -
zwischen Band und Katalog. ------------------------------------- */
body.alp-v55 .alp-trust-section {
background: linear-gradient(180deg, #061114 0%, #08110f 100%) !important;
border-top: 1px solid color-mix(in srgb, var(--alp-mint) 15%, transparent);
border-bottom: 0;
padding: 0 !important;
}
/* Eigener Innencontainer. Das Band haengt nicht mehr an Flatsomes
row/col-Rechnung, die die Reihe nach rechts verschoben hat. */
body.alp-v55 .alp-trust-section .row,
body.alp-v55 .alp-trust-section .col,
body.alp-v55 .alp-trust-section .col-inner,
body.alp-v55 .alp-trust-section > .section-content {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.alp-v55 .alp-trust-row {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
width: min(calc(100% - (var(--alp-gutter) * 2)), var(--alp-container)) !important;
max-width: var(--alp-container) !important;
margin: 0 auto !important;
background: transparent !important;
border: 0 !important;
overflow: visible;
}
body.alp-v55 .alp-trust-item {
position: relative;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
gap: 13px;
min-height: 0;
padding: 26px 26px 26px 0 !important;
border: 0 !important;
}
/* Kurze Trennlinien statt vollhoher Kaesten. Ein Band, keine Tabelle. */
body.alp-v55 .alp-trust-item + .alp-trust-item::before {
content: '';
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 30px;
background: rgba(255,255,255,.11);
}
body.alp-v55 .alp-trust-item + .alp-trust-item { padding-left: 26px !important; }
body.alp-v55 .alp-trust-icon {
width: 22px;
height: 22px;
display: block;
color: var(--alp-mint);
}
body.alp-v55 .alp-trust-icon svg {
width: 22px;
height: 22px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
body.alp-v55 .alp-trust-copy strong {
display: block;
margin-bottom: 5px;
color: #fff;
font-size: var(--alp-fs-micro);
font-weight: 700;
line-height: 1.2;
letter-spacing: .085em;
text-transform: uppercase;
}
body.alp-v55 .alp-trust-copy span {
display: block;
color: rgba(255,255,255,.56);
font-size: var(--alp-fs-micro);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
}
@media (max-width: 1023px) {
body.alp-v55 .alp-trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.alp-v55 .alp-trust-item { padding: 20px 18px 20px 0 !important; }
body.alp-v55 .alp-trust-item + .alp-trust-item { padding-left: 18px !important; }
/* Waagerechte Trenner zwischen den Reihen, senkrechte nur mittig. */
body.alp-v55 .alp-trust-item::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: rgba(255,255,255,.08);
}
body.alp-v55 .alp-trust-item:nth-child(odd) + .alp-trust-item::before { height: 26px; }
body.alp-v55 .alp-trust-item:nth-child(even) + .alp-trust-item::before { display: none; }
body.alp-v55 .alp-trust-item:nth-child(even) { padding-left: 18px !important; }
body.alp-v55 .alp-trust-item:last-child {
grid-column: 1 / -1;
padding-left: 0 !important;
}
body.alp-v55 .alp-trust-item:last-child::after { display: none; }
}
@media (max-width: 560px) {
body.alp-v55 .alp-trust-row { grid-template-columns: 1fr; }
body.alp-v55 .alp-trust-item,
body.alp-v55 .alp-trust-item + .alp-trust-item { padding: 17px 0 !important; }
body.alp-v55 .alp-trust-item + .alp-trust-item::before { display: none; }
}
/* -- 09 BUTTONS UND HINWEISBOX ------------------------------------------
Vorher zwei verschiedene Primaerbuttons auf derselben Seite:
Startseite dunkel gefuellt, Unterseiten mintgefuellt mit farbigem
Schein darunter. Dazu 12px Radius bei 48px Hoehe - das liest sich
als Pille und damit weich. Fuer einen Laborshop ist kantig und
ruhig die richtige Richtung. ------------------------------------ */
/* Ein Primaerbutton fuer die ganze Seite: Tinte gefuellt, weisse
Schrift. Mint bleibt Akzentfarbe fuer Icons, Links und Hover -
nicht die Grundfarbe grosser Flaechen. */
body.alp-v55 .alp-btn-v4,
body.alp-v55 .button.alp-btn-v4,
body.alp-v55 a.button.alp-btn-v4,
body.alp-v55.alp-page-v53 .button.alp-btn-v4,
body.alp-v55.alp-page-v53 a.button.alp-btn-v4 {
min-height: var(--alp-btn-h) !important;
padding: 0 22px !important;
border: 1px solid var(--alp-ink) !important;
border-radius: var(--alp-btn-radius) !important;
background: var(--alp-ink) !important;
background-image: none !important;
box-shadow: none !important;
color: #fff;
font-size: var(--alp-fs-micro);
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
transition: background-color 150ms var(--alp-ease),
border-color 150ms var(--alp-ease),
color 150ms var(--alp-ease);
}
/* Hover ohne Sprung und ohne farbigen Schein. Nur die Flaeche
wechselt - das ist bei 150ms schneller wahrnehmbar als eine
Bewegung und wirkt praeziser. */
body.alp-v55 .alp-btn-v4:hover,
body.alp-v55 .button.alp-btn-v4:hover,
body.alp-v55.alp-page-v53 .button.alp-btn-v4:hover {
transform: none;
filter: none;
background: var(--alp-mint-dark) !important;
border-color: var(--alp-mint-dark) !important;
box-shadow: none !important;
color: #fff;
}
body.alp-v55 .alp-btn-v4:active,
body.alp-v55 .button.alp-btn-v4:active {
background: var(--alp-ink) !important;
border-color: var(--alp-ink) !important;
}
/* Sekundaer: reine Kontur, gleiche Geometrie. */
body.alp-v55 .alp-btn-v4.alp-btn-outline,
body.alp-v55 .button.alp-btn-v4.alp-btn-outline,
body.alp-v55 a.button.alp-btn-v4.alp-btn-outline,
body.alp-v55.alp-page-v53 .button.alp-btn-v4.alp-btn-outline,
body.alp-v55.alp-page-v53 a.button.alp-btn-v4.alp-btn-outline {
border-color: color-mix(in srgb, var(--alp-ink) 26%, transparent) !important;
background: transparent !important;
backdrop-filter: none;
box-shadow: none !important;
color: var(--alp-ink);
}
body.alp-v55 .alp-btn-v4.alp-btn-outline:hover,
body.alp-v55 .button.alp-btn-v4.alp-btn-outline:hover,
body.alp-v55.alp-page-v53 .button.alp-btn-v4.alp-btn-outline:hover {
border-color: var(--alp-ink) !important;
background: transparent !important;
color: var(--alp-ink);
}
/* Auf dunklem Grund kehrt sich das Paar um. */
body.alp-v55 .alp-hero-v5 .button.alp-btn-v4,
body.alp-v55 .alp-hero-v5 a.button.alp-btn-v4,
body.alp-v55 .alp-index-section .button.alp-btn-v4,
body.alp-v55 .alp-page-section-dark .button.alp-btn-v4 {
border-color: var(--alp-mint) !important;
background: var(--alp-mint) !important;
color: var(--alp-ink);
}
body.alp-v55 .alp-hero-v5 .button.alp-btn-v4:hover,
body.alp-v55 .alp-index-section .button.alp-btn-v4:hover,
body.alp-v55 .alp-page-section-dark .button.alp-btn-v4:hover {
background: #fff !important;
border-color: #fff !important;
color: var(--alp-ink);
}
body.alp-v55 .alp-hero-v5 .button.alp-btn-v4.alp-btn-outline,
body.alp-v55 .alp-hero-v5 a.button.alp-btn-v4.alp-btn-outline,
body.alp-v55 .alp-page-section-dark .button.alp-btn-v4.alp-btn-outline {
border-color: rgba(255,255,255,.32) !important;
background: transparent !important;
color: #fff;
}
body.alp-v55 .alp-hero-v5 .button.alp-btn-v4.alp-btn-outline:hover,
body.alp-v55 .alp-page-section-dark .button.alp-btn-v4.alp-btn-outline:hover {
border-color: #fff !important;
color: #fff;
}
/* Alle uebrigen runden Flaechen auf dasselbe Mass ziehen. */
body.alp-v55 .alp-round-link,
body.alp-v55 .alp-coa-open,
body.alp-v55 .alp-form-submit,
body.alp-v55.woocommerce .button,
body.alp-v55.woocommerce-page .button,
body.alp-v55.woocommerce-checkout #place_order,
body.alp-v55 .image-tools .quick-view,
body.alp-v55 a.quick-view,
body.alp-v55 .button.quick-view,
body.alp-v55 .image-tools,
body.alp-v55 .wishlist-button {
border-radius: var(--alp-btn-radius) !important;
}
/* ---------- Hinweisbox ----------
Der 3px-Balken links plus Mintfuellung ist das Standardmuster einer
WordPress-Admin-Meldung. Fuer einen rechtlich verbindlichen Hinweis
ist ein ruhiger, umrandeter Block richtiger - und 12px Schrift war
fuer Pflichttext ohnehin zu klein. */
body.alp-v55 .alp-notice {
position: relative;
max-width: 78ch;
margin-inline: auto;
padding: 26px 28px 28px !important;
border: 1px solid color-mix(in srgb, var(--alp-ink) 14%, transparent) !important;
border-left-width: 1px !important;
border-radius: var(--alp-btn-radius) !important;
background: var(--alp-surface) !important;
}
body.alp-v55 .alp-notice strong {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 12px !important;
color: var(--alp-mint-dark);
font-family: var(--alp-font-mono);
font-size: var(--alp-fs-micro);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
/* Kleines Quadrat statt Randbalken. Traegt die Farbe, ohne die
ganze Box einzufaerben. */
body.alp-v55 .alp-notice strong::before {
content: '';
width: 7px;
height: 7px;
flex: none;
background: var(--alp-mint);
}
body.alp-v55 .alp-notice p {
margin: 0 !important;
color: var(--alp-text);
font-size: var(--alp-fs-small);
line-height: 1.68;
text-wrap: pretty;
}
body.alp-v55 .alp-page-section-dark .alp-notice {
border-color: rgba(255,255,255,.16) !important;
background: rgba(255,255,255,.035) !important;
}
body.alp-v55 .alp-page-section-dark .alp-notice p { color: rgba(255,255,255,.76); }
body.alp-v55 .alp-page-section-dark .alp-notice strong { color: var(--alp-mint); }
/* ---------- Zentrierung der Inhaltssektionen ----------
Hinweisbox und Trustzeile sassen beide nach rechts versetzt, weil
Flatsomes row/col-Margins in diesen Sektionen nicht symmetrisch
aufgehen. Hier deterministisch geradegezogen. */
body.alp-v55 .alp-page-section > .section-content > .row,
body.alp-v55 .alp-page-section-soft > .section-content > .row,
body.alp-v55 .alp-page-section-dark > .section-content > .row {
margin-left: auto !important;
margin-right: auto !important;
}
body.alp-v55 .alp-page-section .col,
body.alp-v55 .alp-page-section-soft .col,
body.alp-v55 .alp-page-section-dark .col {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* -- 10 FAQ-TOGGLE UND BANDING ------------------------------------------
BEFUND 1 - die fremden Zeichen
.accordion-title::before war als 24px-Kreis gestylt, hatte aber
selbst kein content. Das Zeichen darin kam aus Flatsomes eigener
Regel als Codepoint der Icon-Schrift. Gleichzeitig setzt das Theme
.alp-faq-section-v5 * auf font-family: var(--alp-font) !important.
Pseudo-Elemente erben die Schrift ihres Ursprungselements - also
wurde der Icon-Codepoint in Inter gerendert. Dort existiert er
nicht, und der Browser zeigt das Ersatzzeichen.
Loesung: den Umschalter selbst zeichnen. Zwei Balken aus
linear-gradient, kein content-Glyph, keine Icon-Schrift, keine
Abhaengigkeit von Flatsome. -------------------------------------- */
body.alp-v55 .alp-faq-section-v5 .accordion-title,
body.alp-v55.alp-page-v53 .accordion-title {
position: relative;
}
/* Flatsomes eigenes Icon abschalten. Geklickt wird der Titel selbst. */
body.alp-v55 .alp-faq-section-v5 .accordion-title .toggle,
body.alp-v55.alp-page-v53 .accordion-title .toggle { display: none !important; }
/* Rahmen des Umschalters. content wird hier explizit gesetzt, damit
nichts mehr aus einer fremden Regel einfliesst. */
body.alp-v55 .alp-faq-section-v5 .accordion-title::before,
body.alp-v55.alp-page-v53 .accordion-title::before {
content: '' !important;
position: absolute !important;
right: 0 !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%);
width: 26px !important;
height: 26px !important;
border: 1px solid rgba(255,255,255,.20) !important;
border-radius: var(--alp-btn-radius) !important;
background: transparent !important;
font-size: 0 !important;
transition: border-color 150ms var(--alp-ease);
}
body.alp-v55.alp-page-v53 .accordion-title::before {
border-color: color-mix(in srgb, var(--alp-ink) 18%, transparent) !important;
}
/* Plus und Minus als zwei Balken. Der senkrechte faehrt beim
Oeffnen auf null zusammen - eine Bewegung, kein Zeichenwechsel. */
body.alp-v55 .alp-faq-section-v5 .accordion-title::after,
body.alp-v55.alp-page-v53 .accordion-title::after {
content: '';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background:
linear-gradient(var(--alp-mint) 0 0) center / 10px 1.5px no-repeat,
linear-gradient(var(--alp-mint) 0 0) center / 1.5px 10px no-repeat;
transition: background-size 180ms var(--alp-ease);
}
body.alp-v55 .alp-faq-section-v5 .accordion-title.active::after,
body.alp-v55.alp-page-v53 .accordion-title.active::after {
background:
linear-gradient(var(--alp-mint) 0 0) center / 10px 1.5px no-repeat,
linear-gradient(var(--alp-mint) 0 0) center / 1.5px 0 no-repeat;
}
body.alp-v55 .alp-faq-section-v5 .accordion-title:hover::before,
body.alp-v55.alp-page-v53 .accordion-title:hover::before {
border-color: var(--alp-mint) !important;
}
/* Fragen und Antworten standen auf 11px, also am unteren Anschlag.
Eine Frage ist eine Ueberschrift, keine Fussnote. */
body.alp-v55 .alp-faq-section-v5 .accordion-title {
padding-right: 46px !important;
font-size: var(--alp-fs-small);
line-height: 1.4;
}
body.alp-v55 .alp-faq-section-v5 .accordion-inner {
padding-right: 46px !important;
font-size: var(--alp-fs-small);
line-height: 1.7;
color: rgba(255,255,255,.68);
}
/* BEFUND 2 - die diagonalen Schlieren im dunklen Grund
linear-gradient(135deg, #07100F, #0B1110) laeuft ueber zwei Farben,
die nur vier Punkte auseinanderliegen, verteilt auf mehr als 1200px.
Bei 8 Bit pro Kanal ergibt das eine Handvoll sichtbarer Stufen -
und weil der Verlauf diagonal liegt, erscheinen sie als schraege
Streifen. Kein Symbol, kein Grafikfehler: Banding.
Eine feine Kornebene bricht die Stufenkanten auf. Kostet null
Bytes, weil sie als Data-URI im Stylesheet steht. */
body.alp-v55 .alp-faq-section-v5,
body.alp-v55 .alp-index-section,
body.alp-v55 .alp-page-section-dark { position: relative; }
body.alp-v55 .alp-faq-section-v5::after,
body.alp-v55 .alp-index-section::after,
body.alp-v55 .alp-page-section-dark::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
body.alp-v55 .alp-faq-section-v5 > .section-content,
body.alp-v55 .alp-index-section > .section-content,
body.alp-v55 .alp-page-section-dark > .section-content {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
body.alp-v55 .alp-faq-section-v5 .accordion-inner { will-change: auto; }
}
/* -- 11 SHOP: MENGENWAEHLER UND KAUFBUTTON -------------------------------
Vorher waren Minus, Plus und "Add to cart" drei gleich laute,
mintgefuellte Bloecke nebeneinander. Damit konkurrieren zwei
Nebenhandlungen (Menge aendern) mit der Haupthandlung (kaufen) um
dieselbe Aufmerksamkeit. Plus der mintfarbene Schein darunter
(box-shadow 0 8px 22px rgba(49,199,165,.16)), der die Flaeche noch
groesser wirken laesst.
Jetzt: der Mengenwaehler ist ein ruhiges, umrandetes Bauteil in
Neutralfarbe, der Kaufbutton traegt allein die Farbe. Eine
Hierarchie statt drei gleichberechtigter Kaesten. ------------- */
/* --- Mengenwaehler als EIN Bauteil, nicht drei Buttons --- */
body.alp-v55.woocommerce .quantity,
body.alp-v55.woocommerce-page .quantity,
body.alp-v55.single-product form.cart .quantity {
display: inline-flex !important;
align-items: stretch;
height: var(--alp-btn-h);
margin: 0 !important;
overflow: hidden;
border: 1px solid var(--alp-line);
border-radius: var(--alp-btn-radius);
background: #fff;
}
body.alp-v55 .quantity .minus,
body.alp-v55 .quantity .plus,
body.alp-v55 .quantity input.minus,
body.alp-v55 .quantity input.plus {
width: 40px !important;
min-width: 40px !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: var(--alp-muted) !important;
font-family: var(--alp-font);
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: background-color 140ms var(--alp-ease), color 140ms var(--alp-ease);
}
body.alp-v55 .quantity .minus:hover,
body.alp-v55 .quantity .plus:hover {
background: var(--alp-surface-2) !important;
color: var(--alp-ink) !important;
}
body.alp-v55 .quantity .minus:focus-visible,
body.alp-v55 .quantity .plus:focus-visible { outline-offset: -2px; }
body.alp-v55 .quantity .qty,
body.alp-v55 .quantity input[type="number"],
body.alp-v55.single-product form.cart .quantity .qty,
body.alp-v55.single-product form.cart .quantity input[type="number"] {
width: 50px !important;
min-width: 50px !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-left: 1px solid var(--alp-line) !important;
border-right: 1px solid var(--alp-line) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--alp-ink) !important;
font-family: var(--alp-font-mono);
font-size: 13px !important;
font-weight: 500 !important;
text-align: center;
}
/* Die nativen Zaehlpfeile weg - der Waehler hat eigene. */
body.alp-v55 .quantity input[type="number"] { -moz-appearance: textfield; }
body.alp-v55 .quantity input[type="number"]::-webkit-outer-spin-button,
body.alp-v55 .quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* --- Kaufbutton: traegt allein die Farbe --- */
body.alp-v55.single-product form.cart .button,
body.alp-v55.single-product .single_add_to_cart_button,
body.alp-v55.woocommerce .product-small .add-to-cart-button .button,
body.alp-v55.woocommerce-page .product-small .add-to-cart-button .button,
body.alp-v55.woocommerce .button.alt,
body.alp-v55.woocommerce-page .button.alt,
body.alp-v55 .checkout-button,
body.alp-v55.woocommerce-checkout #place_order {
min-height: var(--alp-btn-h) !important;
padding: 0 26px !important;
border: 1px solid var(--alp-ink) !important;
border-radius: var(--alp-btn-radius) !important;
background: var(--alp-ink) !important;
background-image: none !important;
box-shadow: none !important;
color: #fff !important;
font-family: var(--alp-font);
font-size: var(--alp-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em;
text-transform: uppercase;
transition: background-color 150ms var(--alp-ease),
border-color 150ms var(--alp-ease);
}
body.alp-v55.single-product form.cart .button:hover,
body.alp-v55.single-product .single_add_to_cart_button:hover,
body.alp-v55.woocommerce .product-small .add-to-cart-button .button:hover,
body.alp-v55.woocommerce-page .product-small .add-to-cart-button .button:hover,
body.alp-v55.woocommerce .button.alt:hover,
body.alp-v55 .checkout-button:hover,
body.alp-v55.woocommerce-checkout #place_order:hover {
transform: none !important;
background: var(--alp-mint-dark) !important;
border-color: var(--alp-mint-dark) !important;
box-shadow: none !important;
color: #fff !important;
}
/* Ausverkauft und deaktiviert lesbar halten, ohne Mint. */
body.alp-v55.woocommerce .button.disabled,
body.alp-v55.woocommerce button.disabled,
body.alp-v55.woocommerce .button:disabled {
border-color: var(--alp-line) !important;
background: var(--alp-surface-2) !important;
color: var(--alp-muted) !important;
opacity: 1 !important;
}
body.alp-v55.single-product form.cart {
align-items: center;
gap: 12px;
}
/* -- 12 BEWERTUNGSFORMULAR -----------------------------------------------
War komplett ungestylt: 0 Regeln fuer #review_form, #respond,
.comment-form oder #submit im gesamten Theme. Deshalb Flatsomes
Primaerblau #446084 fuer Rahmen und Absendebutton - mitten in einem
mint-schwarzen Shop. -------------------------------------------- */
body.alp-v55 #review_form_wrapper,
body.alp-v55 #review_form,
body.alp-v55 #respond {
margin-top: 22px;
padding: 28px 30px 30px !important;
border: 1px solid var(--alp-line) !important;
border-radius: var(--alp-radius-sm) !important;
background: var(--alp-surface) !important;
box-shadow: none !important;
}
body.alp-v55 #reply-title,
body.alp-v55 .comment-reply-title {
display: block;
margin: 0 0 20px !important;
color: var(--alp-ink);
font-family: var(--alp-font-display);
font-size: var(--alp-fs-h3);
font-weight: 700;
line-height: 1.25;
letter-spacing: -.015em;
}
body.alp-v55 .comment-form label,
body.alp-v55 #respond label {
display: block;
margin-bottom: 7px;
color: var(--alp-muted);
font-family: var(--alp-font-mono);
font-size: var(--alp-fs-micro);
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
}
body.alp-v55 .comment-form .required { color: var(--alp-mint-dark); }
body.alp-v55 #respond textarea,
body.alp-v55 #respond input[type="text"],
body.alp-v55 #respond input[type="email"] {
width: 100%;
padding: 12px 14px !important;
border: 1px solid var(--alp-line) !important;
border-radius: var(--alp-btn-radius) !important;
background: #fff !important;
box-shadow: none !important;
color: var(--alp-ink);
font-family: var(--alp-font);
font-size: var(--alp-fs-small);
line-height: 1.6;
transition: border-color 150ms var(--alp-ease);
}
body.alp-v55 #respond textarea { min-height: 132px; resize: vertical; }
body.alp-v55 #respond textarea:focus,
body.alp-v55 #respond input:focus { border-color: var(--alp-mint) !important; }
/* Sternwahl: Flatsome legt fuenf gestaffelte Sterngruppen nebeneinander,
die wie ein Rendering-Fehler aussehen. Auf eine Reihe reduziert. */
body.alp-v55 #respond .stars {
display: inline-flex;
gap: 2px;
margin: 0 0 20px !important;
}
body.alp-v55 #respond .stars a {
position: relative;
width: 26px;
height: 26px;
border: 0 !important;
color: var(--alp-line-2);
text-indent: 0;
transition: color 120ms var(--alp-ease);
}
body.alp-v55 #respond .stars a::before,
body.alp-v55 #respond .stars a::after { color: inherit; }
body.alp-v55 #respond .stars:hover a,
body.alp-v55 #respond .stars a.active,
body.alp-v55 #respond .stars a.active ~ a { color: var(--alp-mint-dark); }
body.alp-v55 #respond .stars a:hover ~ a { color: var(--alp-line-2); }
body.alp-v55 #respond #submit,
body.alp-v55 #respond input[type="submit"],
body.alp-v55 #review_form #submit {
min-height: var(--alp-btn-h) !important;
padding: 0 26px !important;
border: 1px solid var(--alp-ink) !important;
border-radius: var(--alp-btn-radius) !important;
background: var(--alp-ink) !important;
background-image: none !important;
box-shadow: none !important;
color: #fff !important;
font-family: var(--alp-font);
font-size: var(--alp-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em;
text-transform: uppercase;
transition: background-color 150ms var(--alp-ease), border-color 150ms var(--alp-ease);
}
body.alp-v55 #respond #submit:hover,
body.alp-v55 #review_form #submit:hover {
background: var(--alp-mint-dark) !important;
border-color: var(--alp-mint-dark) !important;
}
/* "Noch keine Bewertungen" trug dasselbe Admin-Meldungs-Muster wie
die Hinweisbox: Mintfuellung plus dicker Balken links. */
body.alp-v55.woocommerce .woocommerce-info,
body.alp-v55.woocommerce-page .woocommerce-info,
body.alp-v55 .woocommerce-noreviews {
padding: 15px 18px !important;
border: 1px solid var(--alp-line) !important;
border-left-width: 1px !important;
border-radius: var(--alp-btn-radius) !important;
background: var(--alp-surface) !important;
color: var(--alp-muted) !important;
font-size: var(--alp-fs-small);
}
body.alp-v55 .woocommerce-info::before,
body.alp-v55 .woocommerce-noreviews::before { display: none !important; }
/* -- 13 COA-BIBLIOTHEK ---------------------------------------------------
BEFUND: In jeder Zeile stand die Methode zweimal. Die Reinheit kam
als "99 % (HPLC)" aus dem Produktfeld, daneben lief eine eigene
Methodenspalte mit "HPLC". Der Shortcode raeumt das jetzt auf,
ohne die Daten am Produkt anzufassen.
Zweiter Befund: die ganze Tabelle lief im Mono, auch die
Produktnamen und der Laborname. Das liest sich wie ein
Terminal-Dump. Mono ist fuer Messwerte und Kennungen richtig -
fuer Namen nicht. ------------------------------------------------ */
/* Namen im Textschnitt, Kennungen und Werte im Mono. */
body.alp-v55 .alp-coa-trow { font-family: var(--alp-font); }
body.alp-v55 .alp-coa-cell-id,
body.alp-v55 .alp-coa-cell-value {
font-family: var(--alp-font-mono);
font-variant-numeric: tabular-nums lining-nums;
}
body.alp-v55 .alp-coa-cell-product a {
color: var(--alp-ink);
font-size: var(--alp-fs-small);
font-weight: 600;
letter-spacing: -.005em;
text-decoration: none;
}
body.alp-v55 .alp-coa-cell-product a:hover { color: var(--alp-mint-dark); }
body.alp-v55 .alp-coa-cell-product small {
display: block;
margin-top: 3px;
color: var(--alp-muted-2);
font-family: var(--alp-font);
font-size: var(--alp-fs-micro);
letter-spacing: 0;
}
body.alp-v55 .alp-coa-cell-value { color: var(--alp-ink); font-weight: 600; }
body.alp-v55 .alp-coa-na { color: var(--alp-muted-2); font-weight: 400; }
/* Kopfzeile bleibt beim Scrollen stehen. Bei 12 Zeilen und fuenf
Spalten weiss man sonst in der Mitte nicht mehr, was wo steht. */
body.alp-v55 .alp-coa-thead {
position: sticky;
top: 0;
z-index: 3;
background: var(--alp-surface-2);
border-bottom: 1px solid var(--alp-line);
}
body.alp-v55.admin-bar .alp-coa-thead { top: 32px; }
/* Zeilenstatus als schmale Kante links statt als Farbe im Text. */
body.alp-v55 .alp-coa-trow { position: relative; }
body.alp-v55 .alp-coa-trow::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: transparent;
transition: background-color 140ms var(--alp-ease);
}
body.alp-v55 .alp-coa-trow.is-documented:hover::before { background: var(--alp-mint); }
/* Dokumentlink als erkennbare Handlung, nicht als Fliesstext. */
body.alp-v55 .alp-coa-doclink {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 1px solid var(--alp-line);
border-radius: var(--alp-btn-radius);
background: #fff;
color: var(--alp-ink);
font-family: var(--alp-font);
font-size: var(--alp-fs-micro);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 140ms var(--alp-ease), color 140ms var(--alp-ease);
}
body.alp-v55 .alp-coa-doclink svg {
width: 15px; height: 15px; flex: none;
fill: none; stroke: var(--alp-mint-dark);
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
body.alp-v55 .alp-coa-doclink:hover {
border-color: var(--alp-mint);
color: var(--alp-mint-dark);
}
body.alp-v55 .alp-coa-request {
color: var(--alp-muted-2);
font-family: var(--alp-font);
font-size: var(--alp-fs-micro);
font-style: normal;
}
body.alp-v55 .alp-coa-verifylink {
display: inline-block;
margin-left: 10px;
color: var(--alp-muted);
font-size: var(--alp-fs-micro);
text-decoration: underline;
text-underline-offset: .18em;
}
body.alp-v55 .alp-coa-verifylink:hover { color: var(--alp-mint-dark); }
/* Suchfeld: gleiche Geometrie wie alles andere, mit Lupe. */
body.alp-v55 .alp-coa-search-field { position: relative; max-width: 420px; }
body.alp-v55 .alp-coa-search-icon {
position: absolute;
left: 13px; top: 50%;
transform: translateY(-50%);
width: 17px; height: 17px;
pointer-events: none;
fill: none; stroke: var(--alp-muted-2);
stroke-width: 1.5; stroke-linecap: round;
}
body.alp-v55 .alp-coa-filter input[type="search"] {
width: 100%;
height: var(--alp-btn-h);
padding: 0 14px 0 40px !important;
border: 1px solid var(--alp-line) !important;
border-radius: var(--alp-btn-radius) !important;
background: #fff !important;
box-shadow: none !important;
color: var(--alp-ink);
font-family: var(--alp-font);
font-size: var(--alp-fs-small);
transition: border-color 150ms var(--alp-ease);
}
body.alp-v55 .alp-coa-filter input[type="search"]:focus { border-color: var(--alp-mint) !important; }
body.alp-v55 .alp-coa-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; }
body.alp-v55 .alp-coa-filter label { flex-basis: 100%; }
body.alp-v55 .alp-coa-count {
margin: 0 0 2px !important;
color: var(--alp-muted-2);
font-family: var(--alp-font-mono);
font-size: var(--alp-fs-micro);
letter-spacing: .04em;
}
body.alp-v55 .alp-coa-count-num { color: var(--alp-ink); font-weight: 600; }
@media (max-width: 860px) {
/* Fuenf Spalten auf dem Handy sind unlesbar. Jede Zeile wird zur
Karte, die Spaltennamen kommen aus data-label. */
body.alp-v55 .alp-coa-thead { display: none !important; }
body.alp-v55 .alp-coa-trow {
display: grid !important;
grid-template-columns: 1fr;
gap: 9px;
padding: 18px 16px !important;
border: 1px solid var(--alp-line);
border-radius: var(--alp-radius-sm);
margin-bottom: 10px;
}
body.alp-v55 .alp-coa-trow > span[data-label] {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
align-items: baseline;
gap: 12px;
}
body.alp-v55 .alp-coa-trow > span[data-label]::before {
content: attr(data-label);
color: var(--alp-muted-2);
font-family: var(--alp-font-mono);
font-size: var(--alp-fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
}
body.alp-v55 .alp-coa-trow > .alp-coa-cell-product { grid-template-columns: 1fr; }
body.alp-v55 .alp-coa-trow > .alp-coa-cell-product::before { display: none; }
body.alp-v55 .alp-coa-search-field { max-width: none; }
}
/* -- 06 A11Y / PRINT ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body.alp-v55 *,
body.alp-v55 *::before,
body.alp-v55 *::after {
animation-duration: .01ms;
animation-iteration-count: 1;
transition-duration: .01ms;
scroll-behavior: auto;
}
body.alp-v55 *:hover { transform: none; }
}
@media print {
body.alp-v55 .alp-header-micro-v53,
body.alp-v55 .alp-site-header-v53,
body.alp-v55 .alp-bound-header,
body.alp-v55 .alp-footer-v5,
body.alp-v55 .alp-nav-panel-v53 { display: none; }
body.alp-v55 .alp-page-hero,
body.alp-v55 .alp-page-section,
body.alp-v55 .alp-page-section-soft { padding: 12px 0; background: #fff; color: #000; }
body.alp-v55 .alp-legal { border: 0; padding: 0; }
body.alp-v55 .alp-legal-aside { position: static; }
body.alp-v55 a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}