/* ==========================================================================
ISOLITE PEPTIDES — DESIGN SYSTEM V5.5
Eine Datei fuer alle Seiten. Ersetzt isolite-base.css,
isolite-desktop.css, isolite-mobile.css, isolite-pages.css
und isolite-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.iso-v1 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 --iso-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 {
/* --- Schrift ------------------------------------------------------- */
--iso-font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
--iso-font: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
--iso-font-mono: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
/* --- Kernpalette, aus den Etikettrenderings ausgemessen ------------- */
--iso-navy: #0a1a2b;
--iso-navy-deep: #05101c;
--iso-ink: #0a1a2b; /* Alias: traegt die geerbten Regeln */
--iso-dark: #0d2033;
--iso-dark-2: #14293e;
--iso-blue: #4e9fcd; /* Akzent. NUR gross, Flaeche, Linie. */
--iso-blue-text: #1f6a94; /* Akzent fuer Text: 4,9:1 auf Weiss. */
--iso-blue-cap: #83b6d7;
--iso-blue-soft: #eaf3f9;
--iso-blue-line: #cfe1ee;
/* Aliasse fuer die aus dem Vorgaengertheme geerbten Regeln */
--iso-mint: #4e9fcd;
--iso-mint-dark: #1f6a94;
--iso-mint-light: #83b6d7;
--iso-mint-soft: #eaf3f9;
--iso-text: #23303c;
--iso-muted: #5f6f7d;
--iso-muted-2: #7d8b98;
--iso-line: #e0e4e9;
--iso-line-2: #cfd6de;
--iso-surface: #f7f7f9; /* identisch zum Renderhintergrund */
--iso-surface-2: #eef0f3;
--iso-white: #ffffff;
--iso-danger: #a33b3b;
--iso-danger-soft: #fbf1f1;
--iso-success: #2f7d55;
/* --- Layout -------------------------------------------------------- */
--iso-container: 1240px;
--iso-gutter: clamp(20px, 4vw, 56px);
--iso-radius: 12px;
--iso-radius-sm: 8px;
--iso-btn-radius: 6px;
--iso-btn-h: 46px;
--iso-section: clamp(56px, 7vw, 112px);
--iso-section-lg: clamp(68px, 8.5vw, 136px);
/* --- Typo-Skala ---------------------------------------------------- */
--iso-fs-micro: 11px;
--iso-fs-label: 12px;
--iso-fs-small: 14px;
--iso-fs-body: 16px;
--iso-fs-lead: clamp(16px, 1.15vw, 19px);
--iso-fs-h3: clamp(1.2rem, 1.6vw, 1.5rem);
--iso-fs-h2: clamp(2rem, 3.8vw, 3.2rem);
--iso-fs-h1: clamp(2.5rem, 4.6vw, 4.4rem);
--iso-track-wide: .30em;
/* --- Motion / Fokus ------------------------------------------------ */
--iso-ease: cubic-bezier(.23, 1, .32, 1);
--iso-dur: 180ms;
--iso-focus: #1f6a94;
}
/* -- 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.iso-v1 {
overflow-x: clip;
font-family: var(--iso-font);
font-size: var(--iso-fs-body);
color: var(--iso-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums lining-nums;
}
body.iso-v1 ::selection { background: var(--iso-mint); color: #06110f; }
body.iso-v1 h1,
body.iso-v1 h2,
body.iso-v1 .iso-hero-title,
body.iso-v1 .iso-page-title,
body.iso-v1 .iso-section-title { text-wrap: balance; font-optical-sizing: auto; }
body.iso-v1 .iso-hero-lead,
body.iso-v1 .iso-page-lead,
body.iso-v1 .iso-copy { text-wrap: pretty; }
/* Sichtbarer Fokus. Vorher exakt 2 Regeln in 141 KB CSS. */
body.iso-v1 :focus-visible {
outline: 2px solid var(--iso-focus);
outline-offset: 3px;
border-radius: 4px;
}
body.iso-v1 .iso-hero-v5 :focus-visible,
body.iso-v1 .iso-index-section :focus-visible,
body.iso-v1 .iso-site-header-v53 :focus-visible,
body.iso-v1 .iso-header-micro-v53 :focus-visible,
body.iso-v1 .iso-bound-header :focus-visible,
body.iso-v1 .iso-footer-v5 :focus-visible { outline-color: var(--iso-mint); }
body.iso-v1 .iso-skip-link {
position: absolute; left: -9999px; top: 0; z-index: 99999;
padding: 12px 18px; background: var(--iso-ink); color: #fff;
font-size: var(--iso-fs-label); font-weight: 700; border-radius: 0 0 10px 0;
}
body.iso-v1 .iso-skip-link:focus { left: 0; }
/* -- 03 KOMPONENTEN ------------------------------------------------------ */
html {
overflow-x: clip;
}
body.iso-v1 {
overflow-x: clip;
font-family: var(--iso-font) !important;
}
body.iso-v1 button {
font-family: var(--iso-font) !important;
}
body.iso-v1 input {
font-family: var(--iso-font) !important;
}
body.iso-v1 select {
font-family: var(--iso-font) !important;
}
body.iso-v1 textarea {
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-home-v4 {
box-sizing: border-box;
font-family: var(--iso-font);
color: var(--iso-ink);
background: #fff;
}
body.iso-v1 .iso-home-v4 * {
box-sizing: border-box;
}
body.iso-v1 .iso-home-v4 a {
text-decoration: none;
}
body.iso-v1 .iso-shell {
width: min(calc(100% - 48px), var(--iso-container));
margin-inline: auto;
}
body.iso-v1 .iso-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
color: var(--iso-mint-dark);
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .12em;
text-transform: uppercase;
}
body.iso-v1 .iso-kicker::before {
content: '';
width: 18px;
height: 2px;
background: var(--iso-mint);
}
body.iso-v1 .iso-section-title {
margin: 0;
font-family: var(--iso-font-display) !important;
font-weight: 900;
color: var(--iso-ink);
letter-spacing: -.02em;
font-size: var(--iso-fs-h2);
line-height: 1.04;
}
body.iso-v1 .iso-hero-title {
margin: 0;
font-family: var(--iso-font-display) !important;
font-weight: 900 !important;
color: var(--iso-ink) !important;
letter-spacing: -.022em;
max-width: 690px;
font-size: var(--iso-fs-h1);
line-height: 1.02;
}
body.iso-v1 .iso-copy {
margin: 0;
color: var(--iso-muted);
font-size: 13px;
line-height: 1.75;
}
body.iso-v1 .iso-research-bar {
position: relative;
z-index: 5;
background: var(--iso-ink) !important;
color: #fff;
box-sizing: border-box;
font-family: var(--iso-font) !important;
padding: 0 !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-research-bar-side:first-child {
color: rgba(255,255,255,.76);
}
body.iso-v1 .iso-research-bar-side:last-child {
justify-content: flex-end;
color: rgba(255,255,255,.72);
}
body.iso-v1 .iso-research-bar-side strong {
color: var(--iso-mint);
}
body.iso-v1 .iso-research-bar-brand {
color: #fff;
font-size: 18px;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
body.iso-v1 .iso-research-bar-brand span {
color: var(--iso-mint);
}
body.iso-v1 .iso-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.iso-v1 .iso-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(--iso-surface) 0%, var(--iso-surface-2) 45%, #dcebe7 100%);
}
body.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-hero-grid-v4 {
position: relative;
z-index: 2;
width: min(calc(100% - 48px), var(--iso-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.iso-v1 .iso-hero-copy-v4 {
padding: 80px 0 145px;
}
body.iso-v1 .iso-hero-title span {
display: block;
color: var(--iso-mint);
}
body.iso-v1 .iso-hero-lead {
max-width: 510px;
margin: 28px 0 30px;
color: #4c5955;
font-size: 13px;
line-height: 1.8;
}
body.iso-v1 .iso-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.iso-v1 .iso-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(--iso-ink) !important;
border-radius: 9px !important;
background: var(--iso-ink) !important;
color: #fff;
box-shadow: none;
font-family: var(--iso-font) !important;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
line-height: 1;
text-transform: uppercase;
transition: transform .18s var(--iso-ease), background .18s var(--iso-ease), border-color .18s var(--iso-ease);
}
body.iso-v1 .iso-home-v4 .button.iso-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(--iso-ink) !important;
border-radius: 9px !important;
background: var(--iso-ink) !important;
color: #fff;
box-shadow: none;
font-family: var(--iso-font) !important;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
line-height: 1;
text-transform: uppercase;
transition: transform .18s var(--iso-ease), background .18s var(--iso-ease), border-color .18s var(--iso-ease);
}
body.iso-v1 .iso-btn-v4:hover {
transform: translateY(-1px);
background: var(--iso-mint-dark) !important;
border-color: var(--iso-mint-dark);
}
body.iso-v1 .iso-home-v4 .button.iso-btn-v4:hover {
transform: translateY(-1px);
background: var(--iso-mint-dark) !important;
border-color: var(--iso-mint-dark);
}
body.iso-v1 .iso-btn-v4.iso-btn-outline {
background: rgba(255,255,255,.45) !important;
color: var(--iso-ink);
border-color: rgba(11,17,16,.32);
backdrop-filter: blur(8px);
}
body.iso-v1 .iso-hero-scene {
position: relative;
min-height: 560px;
align-self: end;
}
body.iso-v1 .iso-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.iso-v1 .iso-hero-platform {
position: absolute;
z-index: 2;
right: -35px;
bottom: 54px;
width: 550px;
height: 88px;
border-radius: 50%;
background: linear-gradient(180deg, var(--iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-hero-labglass--one {
left: 6%;
transform: rotate(6deg);
}
body.iso-v1 .iso-hero-labglass--two {
right: 8%;
height: 310px;
width: 88px;
opacity: .36;
}
body.iso-v1 .iso-trust-wrap {
position: relative;
z-index: 8;
margin-top: -40px;
}
body.iso-v1 .iso-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.iso-v1 .iso-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(--iso-line);
min-height: 96px;
}
body.iso-v1 .iso-trust-item:last-child {
border-right: 0;
}
body.iso-v1 .iso-trust-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
color: var(--iso-mint-dark);
}
body.iso-v1 .iso-trust-icon svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
}
body.iso-v1 .iso-trust-copy strong {
display: block;
margin-bottom: 4px;
color: var(--iso-ink);
font-size: 11px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -.01em;
}
body.iso-v1 .iso-trust-copy span {
display: block;
color: var(--iso-muted);
font-size: 10px;
line-height: 1.45;
}
body.iso-v1 .iso-catalog-section {
padding: 82px 0 82px !important;
background: #fff;
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-section-intro {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 48px;
align-items: end;
margin-bottom: 34px;
}
body.iso-v1 .iso-section-intro .iso-copy {
max-width: 430px;
justify-self: end;
}
body.iso-v1 .iso-catalog-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 14px;
}
body.iso-v1 .iso-feature-card {
position: relative;
overflow: hidden;
border: 1px solid var(--iso-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(--iso-ink) 100%);
color: #fff;
}
body.iso-v1 .iso-product-tile {
position: relative;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: 18px;
min-height: 253px;
padding: 14px;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface-2) 100%);
color: var(--iso-ink);
display: flex !important;
flex-direction: column;
}
body.iso-v1 .iso-all-products-card {
position: relative;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: 18px;
min-height: 253px;
padding: 14px;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface-2) 100%);
color: var(--iso-ink);
display: flex !important;
flex-direction: column;
justify-content: space-between;
}
body.iso-v1 .iso-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.iso-v1 .iso-card-badge {
position: relative;
z-index: 3;
align-self: flex-start;
padding: 6px 9px;
border-radius: 999px;
background: var(--iso-mint);
color: #072019;
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
body.iso-v1 .iso-feature-media {
position: absolute;
z-index: 2;
inset: 46px 22px 78px;
display: grid;
place-items: center;
}
body.iso-v1 .iso-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.iso-v1 .iso-feature-footer {
position: relative;
z-index: 3;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
}
body.iso-v1 .iso-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(--iso-line);
color: var(--iso-ink);
flex: 0 0 auto;
min-height: 58px;
}
body.iso-v1 .iso-feature-footer small {
display: block;
margin-bottom: 6px;
color: var(--iso-mint);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1 .iso-product-tile-footer small {
display: block;
margin-bottom: 6px;
color: var(--iso-muted-2);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1 .iso-feature-footer h3 {
margin: 0;
color: inherit;
font-family: var(--iso-font) !important;
font-size: 17px;
font-weight: 800;
letter-spacing: -.025em;
}
body.iso-v1 .iso-product-tile-footer h3 {
margin: 0;
color: inherit;
font-family: var(--iso-font) !important;
font-size: 12px;
font-weight: 800;
letter-spacing: -.025em;
min-height: 15px;
line-height: 1.25;
}
body.iso-v1 .iso-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(--iso-ease), background .18s var(--iso-ease);
}
body.iso-v1 .iso-round-link:hover {
transform: translateX(2px);
}
body.iso-v1 .iso-catalog-side {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
grid-template-rows: repeat(2, minmax(0,1fr));
gap: 14px;
}
body.iso-v1 .iso-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.iso-v1 .iso-product-tile-media {
height: 165px;
display: grid;
place-items: center;
flex: 1 1 auto;
}
body.iso-v1 .iso-product-tile-media img {
width: 132px;
height: 158px;
object-fit: contain;
filter: drop-shadow(0 15px 16px rgba(35,60,55,.10));
}
body.iso-v1 .iso-product-tile-footer .iso-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.iso-v1 .iso-all-products-media {
flex: 1 1 auto;
display: grid;
place-items: center;
padding: 12px 0 4px;
}
body.iso-v1 .iso-all-products-media img {
width: 88%;
max-height: 160px;
object-fit: contain;
filter: drop-shadow(0 15px 18px rgba(35,60,55,.10));
}
body.iso-v1 .iso-index-section {
padding: 60px 0 66px !important;
background: linear-gradient(135deg, #07100f 0%, var(--iso-ink) 100%) !important;
color: #fff;
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-index-head {
display: grid;
grid-template-columns: 1fr .8fr;
gap: 60px;
align-items: end;
margin-bottom: 32px;
}
body.iso-v1 .iso-index-head .iso-section-title {
color: #fff;
font-size: clamp(2rem,3.4vw,3.15rem);
}
body.iso-v1 .iso-index-head .iso-copy {
color: rgba(255,255,255,.58);
}
body.iso-v1 .iso-index-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
border-top: 1px solid rgba(255,255,255,.12);
}
body.iso-v1 .iso-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.iso-v1 .iso-index-item + .iso-index-item {
padding-left: 22px;
}
body.iso-v1 .iso-index-item:last-child {
border-right: 0;
}
body.iso-v1 .iso-index-num {
color: var(--iso-mint);
font-size: 10px;
font-weight: 800;
}
body.iso-v1 .iso-index-icon {
color: #fff;
}
body.iso-v1 .iso-index-icon svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
body.iso-v1 .iso-index-copy strong {
display: block;
margin-bottom: 7px;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1.35;
text-transform: uppercase;
}
body.iso-v1 .iso-index-copy span {
color: rgba(255,255,255,.56);
font-size: 11px;
line-height: 1.55;
}
body.iso-v1 .iso-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(--iso-surface) 0%,var(--iso-surface) 100%);
}
body.iso-v1 .iso-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.iso-v1 .iso-coa-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: 70px;
align-items: center;
}
body.iso-v1 .iso-coa-copy .iso-section-title {
max-width: 420px;
margin-bottom: 20px;
}
body.iso-v1 .iso-coa-copy .iso-copy {
max-width: 440px;
margin-bottom: 26px;
}
body.iso-v1 .iso-coa-doc {
padding: 22px;
background: #fff;
border: 1px solid var(--iso-line);
border-radius: 18px;
box-shadow: 0 22px 55px rgba(35,60,55,.10);
transform: rotate(-.3deg);
}
body.iso-v1 .iso-coa-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
color: var(--iso-ink);
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-doc-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 15px;
}
body.iso-v1 .iso-coa-metrics {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 20px;
border: 1px solid var(--iso-line);
}
body.iso-v1 .iso-coa-verified {
padding: 5px 8px;
border: 1px solid rgba(49,199,165,.38);
border-radius: 999px;
color: var(--iso-mint-dark);
font-size: 10px;
}
body.iso-v1 .iso-coa-doc-title h3 {
margin: 0;
color: var(--iso-ink);
font-family: var(--iso-font) !important;
font-size: 20px;
font-weight: 800;
letter-spacing: -.035em;
}
body.iso-v1 .iso-coa-metric {
flex: 1;
min-width: 0;
padding: 12px;
border-right: 1px solid var(--iso-line);
}
body.iso-v1 .iso-coa-metric:last-child {
border-right: 0;
}
body.iso-v1 .iso-coa-metric span {
display: block;
margin-bottom: 5px;
color: var(--iso-muted-2);
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-metric strong {
display: block;
color: var(--iso-ink);
font-size: 10px;
font-weight: 800;
}
body.iso-v1 .iso-coa-chart {
position: relative;
height: 150px;
margin-top: 16px;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: 10px;
background: linear-gradient(to right, transparent 0 9.8%, var(--iso-surface-2) 10% 10.2%, transparent 10.4% 19.8%, var(--iso-surface-2) 20% 20.2%, transparent 20.4% 29.8%, var(--iso-surface-2) 30% 30.2%, transparent 30.4% 39.8%, var(--iso-surface-2) 40% 40.2%, transparent 40.4% 49.8%, var(--iso-surface-2) 50% 50.2%, transparent 50.4% 59.8%, var(--iso-surface-2) 60% 60.2%, transparent 60.4% 69.8%, var(--iso-surface-2) 70% 70.2%, transparent 70.4% 79.8%, var(--iso-surface-2) 80% 80.2%, transparent 80.4% 89.8%, var(--iso-surface-2) 90% 90.2%, transparent 90.4%),
linear-gradient(to bottom, transparent 0 24%, var(--iso-surface-2) 25% 25.5%, transparent 26% 49%, var(--iso-surface-2) 50% 50.5%, transparent 51% 74%, var(--iso-surface-2) 75% 75.5%, transparent 76%);
}
body.iso-v1 .iso-coa-chart-line {
position: absolute;
left: 7%;
right: 7%;
bottom: 31px;
height: 1px;
background: var(--iso-mint);
}
body.iso-v1 .iso-coa-chart-line::before {
content: '';
position: absolute;
bottom: 0;
width: 2px;
background: var(--iso-mint);
left: 36%;
height: 18px;
}
body.iso-v1 .iso-coa-chart-line::after {
content: '';
position: absolute;
bottom: 0;
width: 2px;
background: var(--iso-mint);
left: 63%;
height: 66px;
}
body.iso-v1 .iso-coa-chart-note {
position: absolute;
left: 12px;
bottom: 9px;
color: var(--iso-muted-2);
font-size: 10px;
letter-spacing: .05em;
text-transform: uppercase;
}
body.iso-v1 .iso-faq-section-v4 {
padding: 76px 0 84px;
background: #fff;
}
body.iso-v1 .iso-faq-layout {
display: grid;
grid-template-columns: .65fr 1.35fr;
gap: 70px;
}
body.iso-v1 .iso-faq-list {
border-top: 1px solid var(--iso-line);
}
body.iso-v1 .iso-faq-row {
display: grid;
grid-template-columns: 40px 1fr 30px;
align-items: center;
gap: 14px;
min-height: 58px;
border-bottom: 1px solid var(--iso-line);
color: var(--iso-ink);
}
body.iso-v1 .iso-faq-num {
color: var(--iso-mint);
font-size: 11px;
font-weight: 800;
}
body.iso-v1 .iso-faq-question {
font-size: 11px;
font-weight: 700;
}
body.iso-v1 .iso-faq-plus {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 1px solid #aeb8b5;
border-radius: 50%;
font-size: 14px;
}
body.iso-v1 .iso-footer-v4 {
padding: 54px 0 28px;
background: #07100f;
color: rgba(255,255,255,.58);
}
body.iso-v1 .iso-footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(3, .7fr);
gap: 50px;
}
body.iso-v1 .iso-footer-brand {
margin-bottom: 12px;
color: #fff;
font-size: 18px;
font-weight: 900;
letter-spacing: -.04em;
}
body.iso-v1 .iso-footer-brand span {
color: var(--iso-mint);
}
body.iso-v1 .iso-footer-text {
max-width: 300px;
margin: 0;
font-size: 11px;
line-height: 1.7;
}
body.iso-v1 .iso-footer-title {
margin: 0 0 13px;
color: var(--iso-mint);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1 .iso-footer-links {
list-style: none;
margin: 0;
padding: 0;
}
body.iso-v1 .iso-footer-links li {
margin-bottom: 8px;
}
body.iso-v1 .iso-footer-links a {
color: rgba(255,255,255,.60);
font-size: 11px;
}
body.iso-v1 .iso-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.iso-v1 .iso-coa-product-box {
margin-top: 22px;
padding: 18px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
margin: 22px 0 0;
overflow: hidden;
}
body.iso-v1 .iso-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(--iso-line, #dfe6e3);
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-mint-soft) 100%);
}
body.iso-v1 .iso-coa-product-title {
font-size: 10px;
font-weight: 900;
letter-spacing: .075em;
text-transform: uppercase;
color: var(--iso-ink, #0b1110);
}
body.iso-v1 .iso-coa-product-charge {
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--iso-mint-dark, #159a7d);
}
body.iso-v1 .iso-coa-product-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
color: var(--iso-muted);
font-size: 11px;
padding: 15px 17px 10px;
}
body.iso-v1 .iso-coa-product-links {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
padding: 4px 17px 16px;
}
body.iso-v1 .iso-coa-product-meta strong {
color: var(--iso-ink, #0b1110);
margin-left: 4px;
}
body.iso-v1 .iso-coa-product-link {
color: var(--iso-mint-dark, #159a7d);
font-size: 11px;
font-weight: 900;
letter-spacing: .035em;
text-transform: uppercase;
text-decoration: none;
}
body.iso-v1 #header {
font-family: var(--iso-font) !important;
}
body.iso-v1 .header-wrapper {
font-family: var(--iso-font) !important;
}
body.iso-v1 .header-main {
font-family: var(--iso-font) !important;
}
body.iso-v1 .nav > li > a {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
body.iso-v1 .header-main .nav > li > a {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
body.iso-v1 .button {
font-family: var(--iso-font) !important;
}
body.iso-v1 input[type='submit'] {
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-card-price {
margin-top: 7px;
color: rgba(255,255,255,.72);
font-size: 11px;
font-weight: 700;
}
body.iso-v1 .iso-card-price .amount {
color: inherit;
font-size: inherit;
}
body.iso-v1 .iso-card-price ins {
color: inherit;
font-size: inherit;
}
body.iso-v1 .iso-card-price del {
color: inherit;
font-size: inherit;
}
body.iso-v1 .iso-card-price-small {
color: #52605c;
font-size: 11px;
}
body.iso-v1 .iso-hero-v5 {
box-sizing: border-box;
font-family: var(--iso-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.iso-v1 .iso-trust-section {
box-sizing: border-box;
font-family: var(--iso-font) !important;
padding: 0 !important;
position: relative;
z-index: 9;
margin-top: 0 !important;
background: #fff !important;
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-coa-section-v5 {
box-sizing: border-box;
font-family: var(--iso-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(--iso-surface) 0%,var(--iso-surface) 100%) !important;
}
body.iso-v1 .iso-faq-section-v5 {
box-sizing: border-box;
font-family: var(--iso-font) !important;
padding: 58px 0 62px !important;
background: linear-gradient(135deg,#07100f 0%,var(--iso-ink) 100%) !important;
color: #fff;
}
body.iso-v1 .iso-footer-v5 {
box-sizing: border-box;
font-family: var(--iso-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.iso-v1 .iso-research-bar * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-hero-v5 * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-trust-section * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-catalog-section * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-index-section * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-coa-section-v5 * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-faq-section-v5 * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-footer-v5 * {
box-sizing: border-box;
font-family: var(--iso-font) !important;
}
body.iso-v1 .iso-research-bar > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-hero-v5 > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-trust-section > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-catalog-section > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-index-section > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-coa-section-v5 > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-faq-section-v5 > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-footer-v5 > .section-content {
position: relative;
z-index: 2;
}
body.iso-v1 .iso-research-bar .row {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .iso-research-bar .col {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .iso-research-bar .col-inner {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-hero-grid-v5 {
width: min(calc(100% - 48px), var(--iso-container)) !important;
max-width: var(--iso-container) !important;
min-height: 650px !important;
margin: 0 auto !important;
align-items: center !important;
position: relative !important;
z-index: 1;
}
body.iso-v1 .iso-hero-grid-v5 > .col {
padding-bottom: 0 !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner {
padding: 92px 0 88px !important;
}
body.iso-v1 .iso-hero-copy-v5 .button.iso-btn-v4 {
margin-right: 8px !important;
margin-bottom: 8px !important;
}
body.iso-v1 .iso-hero-visual-col {
min-height: 540px;
}
body.iso-v1 .iso-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.iso-v1 .iso-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(--iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-hero-vials-image .img-inner {
width: 100% !important;
max-width: none !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-trust-section .section-content {
width: min(calc(100% - 48px), var(--iso-container));
margin: 0 auto;
}
body.iso-v1 .iso-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.iso-v1 .iso-trust-row > .col {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
padding: 0 !important;
}
body.iso-v1 .iso-trust-row > .col > .col-inner {
height: 100%;
}
body.iso-v1 .iso-trust-row .iso-trust-item {
height: 100%;
}
body.iso-v1 .iso-catalog-section .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-index-section .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-coa-section-v5 .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-faq-section-v5 .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-footer-v5 .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-section-intro-row {
margin-bottom: 34px !important;
}
body.iso-v1 .iso-index-head-row {
margin-bottom: 34px !important;
}
body.iso-v1 .iso-section-intro-row .iso-copy {
max-width: 430px;
margin-left: auto;
}
body.iso-v1 .iso-index-head-row .iso-copy {
max-width: 430px;
margin-left: auto;
}
body.iso-v1 .iso-index-section .iso-section-title {
color: #fff;
font-size: clamp(2rem,3.4vw,3.15rem);
}
body.iso-v1 .iso-index-section .iso-copy {
color: rgba(255,255,255,.58);
}
body.iso-v1 .iso-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.iso-v1 .iso-index-row > .col {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
padding: 0 !important;
}
body.iso-v1 .iso-index-row .iso-index-item {
height: 100%;
}
body.iso-v1 .iso-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.iso-v1 .iso-coa-layout-v5 {
position: relative;
z-index: 2;
align-items: center;
}
body.iso-v1 .iso-coa-layout-v5 .iso-section-title {
max-width: 420px;
margin-bottom: 20px !important;
}
body.iso-v1 .iso-coa-layout-v5 .iso-copy {
max-width: 440px;
margin-bottom: 26px;
}
body.iso-v1 .iso-coa-open {
margin-top: 14px;
}
body.iso-v1 .iso-faq-layout-v5 {
align-items: flex-start;
}
body.iso-v1 .iso-faq-section-v5 .accordion {
margin: 0 !important;
border-top: 1px solid var(--iso-line);
border-top-color: rgba(255,255,255,.13);
}
body.iso-v1 .iso-faq-section-v5 .accordion-item {
border-bottom: 1px solid var(--iso-line);
border-bottom-color: rgba(255,255,255,.13);
}
body.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-footer-v5 .iso-footer-brand {
margin-top: 0 !important;
}
body.iso-v1 .iso-footer-v5 .iso-footer-title {
margin-top: 0 !important;
}
body.iso-v1 .iso-footer-link {
margin: 0 0 8px !important;
line-height: 1.35;
}
body.iso-v1 .iso-footer-link a {
color: rgba(255,255,255,.60);
font-size: 11px;
text-decoration: none;
}
body.iso-v1 .iso-footer-bottom-row {
margin-top: 20px !important;
}
body.iso-v1 .iso-hero-v5 .iso-kicker {
color: rgba(255,255,255,.78) !important;
}
body.iso-v1 .iso-hero-v5 .iso-kicker::before {
background: var(--iso-mint) !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-title {
max-width: 650px;
color: #fff !important;
font-size: clamp(3.2rem,5.6vw,5.65rem) !important;
line-height: .91 !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-title span {
color: var(--iso-mint) !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-lead {
max-width: 500px;
margin: 24px 0 28px;
color: rgba(255,255,255,.76) !important;
font-size: 13px;
line-height: 1.78;
}
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4 {
min-height: 46px !important;
padding: 0 22px !important;
border-color: var(--iso-mint) !important;
background: linear-gradient(180deg,var(--iso-mint) 0%,var(--iso-mint) 100%) !important;
color: var(--iso-ink) !important;
box-shadow: 0 8px 24px rgba(49,199,165,.14) !important;
}
body.iso-v1 .iso-hero-v5 a.button.iso-btn-v4 {
min-height: 46px !important;
padding: 0 22px !important;
border-color: var(--iso-mint) !important;
background: linear-gradient(180deg,var(--iso-mint) 0%,var(--iso-mint) 100%) !important;
color: var(--iso-ink) !important;
box-shadow: 0 8px 24px rgba(49,199,165,.14) !important;
}
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4.iso-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.iso-v1 .iso-hero-v5 a.button.iso-btn-v4.iso-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.iso-v1 .iso-faq-section-v5 .iso-section-title {
color: #fff;
}
body.iso-v1 .iso-faq-section-v5 .iso-kicker {
color: var(--iso-mint);
}
body.iso-v1.iso-custom-footer-active #footer .footer-1 {
display: none !important;
}
body.iso-v1.iso-custom-footer-active #footer .footer-2 {
display: none !important;
}
body.iso-v1.iso-custom-footer-active #footer .absolute-footer {
display: none !important;
}
body.iso-v1.iso-custom-footer-active #footer {
margin: 0 !important;
padding: 0 !important;
background: #050c0b !important;
}
body.iso-v1.iso-custom-footer-active .footer-wrapper {
margin: 0 !important;
padding: 0 !important;
background: #050c0b !important;
}
body.iso-v1 .iso-bound-footer {
width: 100%;
margin: 0;
padding: 0;
background: #050c0b;
}
body.iso-v1 .iso-bound-footer .iso-footer-v5 {
margin: 0 !important;
}
body.iso-v1 .iso-trust-section .row {
width: 100% !important;
max-width: none !important;
}
body.iso-v1 .iso-trust-section .col {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
}
body.iso-v1 .iso-trust-section .col-inner {
width: 100% !important;
max-width: none !important;
}
body.iso-v1 .iso-hero-v5 .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-catalog-section .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-index-section .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-coa-section-v5 .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-faq-section-v5 .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-footer-v5 .ux-text {
margin: 0 !important;
}
body.iso-v1.iso-custom-header-active #header {
display: none !important;
}
body.iso-v1.iso-custom-header-active .header-wrapper {
display: none !important;
}
body.iso-v1.iso-custom-header-active #wide-nav {
display: none !important;
}
body.iso-v1 .iso-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.iso-v1 .admin-bar .iso-bound-header {
top: 32px;
}
body.iso-v1 .iso-bound-header .section {
margin: 0 !important;
}
body.iso-v1 .iso-bound-header .section-content {
margin: 0 !important;
}
body.iso-v1 .iso-header-micro-v53 {
min-height: 30px;
padding: 0 !important;
background: #030807 !important;
border-bottom: 1px solid rgba(255,255,255,.07);
}
body.iso-v1 .iso-header-micro-row-v53 {
width: min(calc(100% - 48px), 1320px) !important;
max-width: 1320px !important;
margin: 0 auto !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-header-micro-row-v53 > .col {
padding-bottom: 0 !important;
}
body.iso-v1 .iso-site-header-row-v53 > .col {
padding-bottom: 0 !important;
}
body.iso-v1 .iso-header-micro-row-v53 .col-inner {
padding: 0 !important;
}
body.iso-v1 .iso-site-header-row-v53 .col-inner {
padding: 0 !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-header-micro-text strong {
color: var(--iso-mint);
}
body.iso-v1 .iso-header-micro-right {
text-align: right;
}
body.iso-v1 .iso-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.iso-v1 .iso-header-logo-v53 {
display: block !important;
flex-direction: column;
margin: 0 !important;
color: #fff;
font-family: var(--iso-font-display) !important;
font-size: 17px;
font-weight: 900;
line-height: 1;
letter-spacing: -.04em;
white-space: nowrap;
}
body.iso-v1 .iso-header-logo-v53 span {
color: var(--iso-mint);
display: inline !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-main-nav-v53 {
width: 100%;
}
body.iso-v1 .iso-nav-list-v53 {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
body.iso-v1 .iso-nav-list-v53 > li {
margin: 0 !important;
}
body.iso-v1 .iso-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(--iso-ease);
}
body.iso-v1 .iso-nav-list-v53 > li > a:hover {
color: var(--iso-mint);
}
body.iso-v1 .iso-nav-list-v53 > li.current-menu-item > a {
color: var(--iso-mint);
}
body.iso-v1 .iso-nav-list-v53 > li.current_page_item > a {
color: var(--iso-mint);
}
body.iso-v1 .iso-nav-toggle-v53 {
display: none !important;
}
body.iso-v1 .iso-header-actions-v53 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
min-height: 70px;
}
body.iso-v1 .iso-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.iso-v1 .iso-header-action-v53:hover {
color: var(--iso-mint);
}
body.iso-v1 .iso-cart-action-v53 {
display: inline-flex;
align-items: center;
gap: 7px;
}
body.iso-v1 .iso-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(--iso-mint);
font-size: 10px;
}
html.iso-custom-header-rendered body #header {
display: none !important;
}
html.iso-custom-header-rendered body .header-wrapper {
display: none !important;
}
html.iso-custom-header-rendered body #wide-nav {
display: none !important;
}
body.iso-v1 #iso-header-fallback-mount:empty {
display: none !important;
}
body.iso-v1 .iso-product-tile-footer > div {
min-width: 0;
min-height: 42px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
body.iso-v1 .iso-hero-grid-v5 > .iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-hero-grid-v5 > .iso-hero-copy-v5 {
position: relative !important;
z-index: 3 !important;
flex-basis: 49% !important;
max-width: 49% !important;
pointer-events: auto;
}
body.iso-v1.iso-page-v53 .page-title {
display: none !important;
}
body.iso-v1.iso-page-v53 .page-header {
display: none !important;
}
body.iso-v1.iso-page-v53 .entry-header {
display: none !important;
}
body.iso-v1.iso-page-v53 .breadcrumbs {
display: none !important;
}
body.iso-v1.iso-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.iso-v1.iso-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.iso-v1 .iso-page-hero .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-page-section .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-page-section-dark .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-page-section-soft .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container));
max-width: var(--iso-container) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-page-hero .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-page-section .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-page-section-dark .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-page-section-soft .ux-text {
margin: 0 !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-page-hero .iso-kicker {
color: var(--iso-mint) !important;
}
body.iso-v1 .iso-page-hero-inner {
position: relative;
z-index: 2;
max-width: 780px;
}
body.iso-v1 .iso-page-title {
margin: 0;
color: #fff;
font-family: var(--iso-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.iso-v1 .iso-page-lead {
max-width: 620px;
margin: 22px 0 0;
color: rgba(255,255,255,.74);
font-size: 13px;
line-height: 1.78;
}
body.iso-v1 .iso-page-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
body.iso-v1 .iso-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.iso-v1 .iso-page-section {
padding: 74px 0 !important;
background: #fff !important;
}
body.iso-v1 .iso-page-section-soft {
padding: 74px 0 !important;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface) 100%) !important;
}
body.iso-v1 .iso-page-section-dark {
padding: 66px 0 !important;
background: linear-gradient(135deg, #07100f 0%, var(--iso-ink) 100%) !important;
color: #fff;
}
body.iso-v1 .iso-page-section-dark .iso-section-title {
color: #fff;
font-size: clamp(1.7rem, 3vw, 2.6rem);
margin-bottom: 18px !important;
}
body.iso-v1 .iso-page-section-dark .iso-kicker {
color: var(--iso-mint);
}
body.iso-v1 .iso-page-section-dark .iso-copy {
color: rgba(255,255,255,.6);
}
body.iso-v1 .iso-page-section .iso-section-title {
font-size: clamp(1.7rem, 3vw, 2.6rem);
margin-bottom: 18px !important;
}
body.iso-v1 .iso-page-section-soft .iso-section-title {
font-size: clamp(1.7rem, 3vw, 2.6rem);
margin-bottom: 18px !important;
}
body.iso-v1 .iso-lead-copy {
max-width: 620px;
margin: 0;
color: var(--iso-text);
font-size: 14px;
line-height: 1.8;
}
body.iso-v1 .iso-principle-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--iso-line);
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
overflow: hidden;
}
body.iso-v1 .iso-principle {
padding: 30px 26px 32px;
background: #fff;
}
body.iso-v1 .iso-principle-num {
display: block;
margin-bottom: 16px;
color: var(--iso-mint);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
}
body.iso-v1 .iso-principle h3 {
margin: 0 0 10px;
color: var(--iso-ink);
font-size: 14px;
font-weight: 800;
letter-spacing: -.02em;
}
body.iso-v1 .iso-principle p {
margin: 0;
color: var(--iso-muted);
font-size: 12px;
line-height: 1.75;
}
body.iso-v1 .iso-chain {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--iso-line);
}
body.iso-v1 .iso-page-section-dark .iso-chain {
border-top-color: rgba(255,255,255,.12);
}
body.iso-v1 .iso-chain-step {
display: grid;
grid-template-columns: 62px 1fr;
gap: 18px;
align-items: start;
padding: 22px 0;
margin: 0;
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-page-section-dark .iso-chain-step {
border-bottom-color: rgba(255,255,255,.12);
}
body.iso-v1 .iso-chain-num {
color: var(--iso-mint);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
}
body.iso-v1 .iso-chain-body strong {
display: block;
margin-bottom: 6px;
color: var(--iso-ink);
font-size: 13px;
letter-spacing: -.01em;
}
body.iso-v1 .iso-page-section-dark .iso-chain-body strong {
color: #fff;
}
body.iso-v1 .iso-chain-body span {
display: block;
max-width: 620px;
color: var(--iso-muted);
font-size: 12px;
line-height: 1.75;
}
body.iso-v1 .iso-page-section-dark .iso-chain-body span {
color: rgba(255,255,255,.58);
}
body.iso-v1 .iso-fieldlist {
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
overflow: hidden;
}
body.iso-v1 .iso-fieldlist-row {
display: grid;
grid-template-columns: 210px 1fr;
gap: 20px;
padding: 17px 22px;
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-fieldlist-row:last-child {
border-bottom: 0;
}
body.iso-v1 .iso-fieldlist-row strong {
color: var(--iso-ink);
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
body.iso-v1 .iso-fieldlist-row span {
color: var(--iso-muted);
font-size: 12px;
line-height: 1.7;
}
body.iso-v1 .iso-coa-filter {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 420px;
margin-bottom: 24px;
}
body.iso-v1 .iso-coa-filter label {
color: var(--iso-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-filter input {
height: 46px;
padding: 0 16px;
border: 1px solid var(--iso-line) !important;
border-radius: 12px;
background: #fff;
box-shadow: none;
color: var(--iso-ink);
font-size: 12px;
}
body.iso-v1 .iso-coa-filter input:focus {
border-color: var(--iso-mint);
outline: 2px solid rgba(49,199,165,.28);
outline-offset: 1px;
}
body.iso-v1 .iso-coa-table {
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
overflow: hidden;
}
body.iso-v1 .iso-coa-thead {
display: grid;
grid-template-columns: 2fr 1.2fr .8fr 1fr 1.1fr;
gap: 16px;
align-items: center;
padding: 15px 22px;
background: var(--iso-surface-2);
border-bottom: 1px solid var(--iso-line);
color: var(--iso-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-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(--iso-line);
color: var(--iso-text);
font-size: 12px;
transition: background-color .16s var(--iso-ease);
}
body.iso-v1 .iso-coa-trow:last-child {
border-bottom: 0;
}
body.iso-v1 .iso-coa-trow a {
color: var(--iso-ink);
font-weight: 700;
}
body.iso-v1 .iso-coa-trow small {
display: block;
margin-top: 3px;
color: var(--iso-muted-2);
font-size: 11px;
}
body.iso-v1 .iso-coa-trow em {
color: var(--iso-muted-2);
font-size: 10px;
font-style: normal;
}
body.iso-v1 .iso-coa-trow .iso-coa-product-link + .iso-coa-product-link {
margin-left: 10px;
}
body.iso-v1 .iso-coa-empty-hint {
margin: 18px 0 0;
padding: 22px;
border: 1px dashed var(--iso-line);
border-radius: var(--iso-radius);
color: var(--iso-muted);
font-size: 12px;
line-height: 1.7;
}
body.iso-v1 .iso-empty {
margin: 18px 0 0;
padding: 22px;
border: 1px dashed var(--iso-line);
border-radius: var(--iso-radius);
color: var(--iso-muted);
font-size: 12px;
line-height: 1.7;
}
body.iso-v1 .iso-datatable {
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
overflow: hidden;
}
body.iso-v1 .iso-datatable-head {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 16px;
padding: 16px 22px;
background: var(--iso-surface-2);
border-bottom: 1px solid var(--iso-line);
color: var(--iso-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-datatable-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 16px;
padding: 16px 22px;
border-bottom: 1px solid var(--iso-line);
color: var(--iso-text);
font-size: 12px;
transition: background-color .16s var(--iso-ease);
}
body.iso-v1 .iso-datatable-row:last-child {
border-bottom: 0;
}
body.iso-v1 .iso-paygrid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.iso-v1 .iso-storage-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.iso-v1 .iso-contact-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.iso-v1 .iso-paycard {
padding: 24px 22px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
}
body.iso-v1 .iso-storage-card {
padding: 24px 22px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
}
body.iso-v1 .iso-contact-card {
padding: 24px 22px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
}
body.iso-v1 .iso-paycard strong {
display: block;
margin-bottom: 9px;
color: var(--iso-ink);
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.01em;
}
body.iso-v1 .iso-storage-card strong {
display: block;
margin-bottom: 9px;
color: var(--iso-ink);
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.01em;
}
body.iso-v1 .iso-contact-card strong {
display: block;
margin-bottom: 9px;
color: var(--iso-ink);
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.01em;
}
body.iso-v1 .iso-paycard span {
display: block;
margin: 0;
color: var(--iso-muted);
font-size: 12px;
line-height: 1.72;
}
body.iso-v1 .iso-storage-card p {
display: block;
margin: 0;
color: var(--iso-muted);
font-size: 12px;
line-height: 1.72;
}
body.iso-v1 .iso-contact-card p {
display: block;
margin: 0;
color: var(--iso-muted);
font-size: 12px;
line-height: 1.72;
}
body.iso-v1 .iso-contact-mail {
display: inline-block;
margin-top: 14px;
color: var(--iso-mint-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: .02em;
}
body.iso-v1 .iso-notice {
padding: 22px 24px;
border: 1px solid rgba(49,199,165,.32);
border-left: 3px solid var(--iso-mint);
border-radius: 14px;
background: var(--iso-mint-soft);
}
body.iso-v1 .iso-notice strong {
display: block;
margin-bottom: 8px;
color: #10564a;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-notice p {
margin: 0;
color: #23413b;
font-size: 12px;
line-height: 1.75;
}
body.iso-v1 .iso-page-section-dark .iso-notice {
border-color: rgba(49,199,165,.28);
background: rgba(49,199,165,.08);
}
body.iso-v1 .iso-page-section-dark .iso-notice strong {
color: var(--iso-mint);
}
body.iso-v1 .iso-page-section-dark .iso-notice p {
color: rgba(255,255,255,.7);
}
body.iso-v1 .iso-figure {
margin: 0;
}
body.iso-v1 .iso-figure-frame {
position: relative;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: linear-gradient(140deg, var(--iso-surface-2) 0%, var(--iso-line) 100%);
}
body.iso-v1 .iso-figure--16-9 .iso-figure-frame {
aspect-ratio: 16 / 9;
}
body.iso-v1 .iso-figure--3-2 .iso-figure-frame {
aspect-ratio: 3 / 2;
}
body.iso-v1 .iso-figure--4-3 .iso-figure-frame {
aspect-ratio: 4 / 3;
}
body.iso-v1 .iso-figure-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.iso-v1 .iso-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.iso-v1 .iso-figure figcaption {
margin-top: 12px;
color: var(--iso-muted-2);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
}
body.iso-v1 .iso-form-wrap {
padding: 30px 30px 34px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
}
body.iso-v1 .iso-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 18px;
margin: 0;
}
body.iso-v1 .iso-form-row {
display: flex;
flex-direction: column;
gap: 7px;
}
body.iso-v1 .iso-form-row--full {
grid-column: 1 / -1;
}
body.iso-v1 .iso-form-consent {
grid-column: 1 / -1;
}
body.iso-v1 .iso-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(--iso-mint) 0%, var(--iso-mint) 100%);
color: var(--iso-ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
body.iso-v1 .iso-form label {
color: var(--iso-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-form label span {
color: var(--iso-muted-2);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
body.iso-v1 .iso-form input[type='text'] {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--iso-line) !important;
border-radius: 12px;
background: var(--iso-surface);
box-shadow: none;
color: var(--iso-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.iso-v1 .iso-form input[type='email'] {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--iso-line) !important;
border-radius: 12px;
background: var(--iso-surface);
box-shadow: none;
color: var(--iso-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.iso-v1 .iso-form select {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--iso-line) !important;
border-radius: 12px;
background: var(--iso-surface);
box-shadow: none;
color: var(--iso-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.iso-v1 .iso-form textarea {
margin: 0 !important;
padding: 12px 15px;
border: 1px solid var(--iso-line) !important;
border-radius: 12px;
background: var(--iso-surface);
box-shadow: none;
color: var(--iso-ink);
font-size: 12.5px;
line-height: 1.6;
}
body.iso-v1 .iso-form input:focus {
border-color: var(--iso-mint);
outline: 2px solid rgba(49,199,165,.26);
outline-offset: 1px;
}
body.iso-v1 .iso-form select:focus {
border-color: var(--iso-mint);
outline: 2px solid rgba(49,199,165,.26);
outline-offset: 1px;
}
body.iso-v1 .iso-form textarea:focus {
border-color: var(--iso-mint);
outline: 2px solid rgba(49,199,165,.26);
outline-offset: 1px;
}
body.iso-v1 .iso-form-consent label {
display: grid;
grid-template-columns: 18px 1fr;
gap: 11px;
align-items: start;
color: var(--iso-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.65;
letter-spacing: 0;
text-transform: none;
}
body.iso-v1 .iso-form-consent input {
margin: 2px 0 0 !important;
}
body.iso-v1 .iso-form-consent a {
color: var(--iso-mint-dark);
text-decoration: underline;
}
body.iso-v1 .iso-form-submit:hover {
filter: brightness(1.04);
}
body.iso-v1 .iso-form-hp {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
body.iso-v1 .iso-form-note {
margin-bottom: 20px;
padding: 14px 18px;
border-radius: 12px;
font-size: 12px;
line-height: 1.6;
}
body.iso-v1 .iso-form-note--ok {
border: 1px solid rgba(49,199,165,.35);
background: var(--iso-mint-soft);
color: #15564a;
}
body.iso-v1 .iso-form-note--error {
border: 1px solid #f0d0cc;
background: var(--iso-danger-soft);
color: var(--iso-danger);
}
body.iso-v1 .iso-legal {
max-width: 760px;
}
body.iso-v1 .iso-legal h2 {
margin: 44px 0 14px;
color: var(--iso-ink);
font-size: 17px;
font-weight: 800;
letter-spacing: -.02em;
}
body.iso-v1 .iso-legal h2:first-child {
margin-top: 0;
}
body.iso-v1 .iso-legal h3 {
margin: 26px 0 10px;
color: var(--iso-ink);
font-size: 13px;
font-weight: 800;
}
body.iso-v1 .iso-legal p {
color: var(--iso-text);
font-size: 12.5px;
line-height: 1.85;
margin: 0 0 12px;
}
body.iso-v1 .iso-legal li {
color: var(--iso-text);
font-size: 12.5px;
line-height: 1.85;
margin-bottom: 6px;
}
body.iso-v1 .iso-legal ul {
margin: 0 0 16px 18px;
padding: 0;
}
body.iso-v1 .iso-legal ol {
margin: 0 0 16px 18px;
padding: 0;
}
body.iso-v1 .iso-legal a {
color: var(--iso-mint-dark);
text-decoration: underline;
}
body.iso-v1 .iso-legal-updated {
display: inline-block;
margin-top: 30px;
padding: 8px 14px;
border: 1px solid var(--iso-line);
border-radius: 999px;
color: var(--iso-muted-2);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
}
body.iso-v1 .iso-legal-aside {
position: sticky;
top: 110px;
padding: 22px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: var(--iso-surface);
}
body.iso-v1 .iso-legal-aside p {
margin: 0 0 10px;
color: var(--iso-muted);
font-size: 11px;
line-height: 1.7;
}
body.iso-v1 .iso-legal-aside p:last-child {
margin-bottom: 0;
}
body.iso-v1 .iso-legal-aside strong {
display: block;
margin-bottom: 10px;
color: var(--iso-mint-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-cta-band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 22px;
padding: 34px 36px;
border-radius: var(--iso-radius);
background: linear-gradient(135deg, #0b1a1f 0%, #113029 100%);
margin-bottom: 20px;
box-shadow: 0 20px 44px rgba(8,20,18,.14);
}
body.iso-v1 .iso-cta-band h3 {
margin: 0 0 8px;
color: #fff;
font-size: 20px;
font-weight: 900;
letter-spacing: -.035em;
}
body.iso-v1 .iso-cta-band p {
margin: 0;
max-width: 480px;
color: rgba(255,255,255,.66);
font-size: 12px;
line-height: 1.7;
}
body.iso-v1.iso-page-v53 #main {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 .page-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 .entry-content {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 article.page {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 #content > .row {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 #content > .row > .col {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 #content > .row > .large-12 {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 .page-wrapper > .row {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 .page-wrapper > .row > .col {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 .entry-content > .row {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-page-v53 .entry-content > .row > .col {
width: 100% !important;
max-width: none !important;
flex-basis: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.iso-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.iso-v1.iso-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.iso-v1.iso-page-v53 .iso-page-hero {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.iso-v1.iso-page-v53 .iso-page-section {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.iso-v1.iso-page-v53 .iso-page-section-soft {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.iso-v1.iso-page-v53 .iso-page-section-dark {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body.iso-v1.iso-page-v53 .accordion {
margin: 0 !important;
border-top: 1px solid var(--iso-line);
}
body.iso-v1.iso-page-v53 .accordion-item {
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1.iso-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(--iso-ink);
font-size: 12.5px;
font-weight: 700;
line-height: 1.5;
letter-spacing: -.005em;
transition: color .18s var(--iso-ease), background-color .18s var(--iso-ease), padding-left .18s var(--iso-ease);
}
body.iso-v1.iso-page-v53 .accordion-title:hover {
background: rgba(49,199,165,.05) !important;
padding-left: 12px !important;
color: var(--iso-mint-dark);
}
body.iso-v1.iso-page-v53 .accordion-title.active {
color: var(--iso-mint-dark);
}
body.iso-v1.iso-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(--iso-ink);
font-size: 15px;
font-weight: 500;
line-height: 28px;
transform: translateY(-50%);
transition: background-color .2s var(--iso-ease), border-color .2s var(--iso-ease), color .2s var(--iso-ease), transform .2s var(--iso-ease);
}
body.iso-v1.iso-page-v53 .accordion-title:hover::before {
border-color: var(--iso-mint);
color: var(--iso-mint-dark);
}
body.iso-v1.iso-page-v53 .accordion-title.active::before {
border-color: var(--iso-mint);
background: var(--iso-mint);
color: var(--iso-ink);
}
body.iso-v1.iso-page-v53 .accordion-title .toggle {
position: absolute;
top: 50%;
right: 14px;
left: auto;
margin: 0;
transform: translateY(-50%);
opacity: 1;
color: var(--iso-ink);
transition: transform .25s var(--iso-ease), color .2s var(--iso-ease);
}
body.iso-v1.iso-page-v53 .accordion-title.active .toggle {
transform: translateY(-50%) rotate(180deg);
color: var(--iso-mint-dark);
}
body.iso-v1.iso-page-v53 .accordion-inner {
padding: 0 62px 24px 2px !important;
color: var(--iso-muted);
font-size: 12.5px;
line-height: 1.85;
}
body.iso-v1.iso-page-v53 .accordion-title:focus-visible {
outline: 2px solid var(--iso-mint);
outline-offset: -2px;
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion {
border-top-color: rgba(255,255,255,.14);
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-item {
border-bottom-color: rgba(255,255,255,.14);
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-title {
color: #fff;
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-title:hover {
background: rgba(49,199,165,.07) !important;
color: var(--iso-mint);
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-title.active {
background: rgba(49,199,165,.07) !important;
color: var(--iso-mint);
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-title::before {
border-color: rgba(255,255,255,.34);
background: transparent;
color: #fff;
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-title.active::before {
border-color: var(--iso-mint);
background: var(--iso-mint);
color: var(--iso-ink);
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-title .toggle {
color: #fff;
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-title.active .toggle {
color: #fff;
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .accordion-inner {
color: rgba(255,255,255,.66);
}
body.iso-v1.iso-page-v53 .button.iso-btn-v4 {
min-height: 48px !important;
margin: 0 10px 10px 0 !important;
padding: 0 26px !important;
border: 1px solid var(--iso-mint) !important;
border-radius: 12px !important;
background: linear-gradient(180deg,var(--iso-mint) 0%,var(--iso-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--iso-ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
transition: transform .18s var(--iso-ease), box-shadow .18s var(--iso-ease), filter .18s var(--iso-ease);
}
body.iso-v1.iso-page-v53 a.button.iso-btn-v4 {
min-height: 48px !important;
margin: 0 10px 10px 0 !important;
padding: 0 26px !important;
border: 1px solid var(--iso-mint) !important;
border-radius: 12px !important;
background: linear-gradient(180deg,var(--iso-mint) 0%,var(--iso-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--iso-ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
transition: transform .18s var(--iso-ease), box-shadow .18s var(--iso-ease), filter .18s var(--iso-ease);
}
body.iso-v1.iso-page-v53 .button.iso-btn-v4:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(49,199,165,.22);
filter: brightness(1.03);
}
body.iso-v1.iso-page-v53 .button.iso-btn-v4.iso-btn-outline {
border-color: var(--iso-line);
background: #fff !important;
box-shadow: none;
color: var(--iso-ink);
}
body.iso-v1.iso-page-v53 a.button.iso-btn-v4.iso-btn-outline {
border-color: var(--iso-line);
background: #fff !important;
box-shadow: none;
color: var(--iso-ink);
}
body.iso-v1.iso-page-v53 .button.iso-btn-v4.iso-btn-outline:hover {
border-color: var(--iso-mint);
color: var(--iso-mint-dark);
}
body.iso-v1.iso-page-v53 .iso-page-section-dark .button.iso-btn-v4.iso-btn-outline {
border-color: rgba(255,255,255,.3);
background: transparent !important;
color: #fff;
}
body.iso-v1 .iso-coa-trow:hover {
background: rgba(49,199,165,.045);
}
body.iso-v1 .iso-datatable-row:hover {
background: rgba(49,199,165,.045);
}
body.iso-v1.iso-page-v53 [id] {
scroll-margin-top: 110px;
}
body.iso-v1 .iso-brand-link {
display: inline-flex;
align-items: center;
color: inherit;
text-decoration: none;
transition: opacity .18s var(--iso-ease);
}
body.iso-v1 .iso-brand-link:hover {
opacity: .78;
}
body.iso-v1 .iso-brand-link:focus-visible {
outline: 2px solid var(--iso-mint);
outline-offset: 4px;
border-radius: 4px;
}
body.iso-v1 ::selection {
background: rgba(49,199,165,.28);
}
body.iso-v1.woocommerce {
background: #fff;
}
body.iso-v1.woocommerce-page {
background: #fff;
}
body.iso-v1.woocommerce #main {
color: var(--iso-text, #27302e);
}
body.iso-v1.woocommerce-page #main {
color: var(--iso-text, #27302e);
}
body.iso-v1.woocommerce .container {
max-width: var(--iso-container, 1180px) !important;
}
body.iso-v1.woocommerce-page .container {
max-width: var(--iso-container, 1180px) !important;
}
body.iso-v1.woocommerce .row.row-main {
max-width: var(--iso-container, 1180px) !important;
}
body.iso-v1.woocommerce-page .row.row-main {
max-width: var(--iso-container, 1180px) !important;
}
body.iso-v1.woocommerce #main a:not(.button) {
text-underline-offset: 3px;
}
body.iso-v1.woocommerce-page #main a:not(.button) {
text-underline-offset: 3px;
}
body.iso-v1.post-type-archive-product .shop-page-title {
padding: 34px 0 24px;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface) 100%);
border-bottom: 1px solid var(--iso-line, #dfe6e3);
}
body.iso-v1.tax-product_cat .shop-page-title {
padding: 34px 0 24px;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface) 100%);
border-bottom: 1px solid var(--iso-line, #dfe6e3);
}
body.iso-v1.tax-product_tag .shop-page-title {
padding: 34px 0 24px;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface) 100%);
border-bottom: 1px solid var(--iso-line, #dfe6e3);
}
body.iso-v1.post-type-archive-product .shop-page-title .page-title-inner {
min-height: 0;
}
body.iso-v1.tax-product_cat .shop-page-title .page-title-inner {
min-height: 0;
}
body.iso-v1.tax-product_tag .shop-page-title .page-title-inner {
min-height: 0;
}
body.iso-v1.post-type-archive-product .shop-page-title .page-title-inner .page-title {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.iso-v1.tax-product_cat .shop-page-title .page-title-inner .page-title {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.iso-v1.tax-product_tag .shop-page-title .page-title-inner .page-title {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.iso-v1.post-type-archive-product .shop-page-title h1 {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.iso-v1.tax-product_cat .shop-page-title h1 {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.iso-v1.tax-product_tag .shop-page-title h1 {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.045em;
text-transform: uppercase;
}
body.iso-v1.woocommerce .shop-container {
padding-top: 38px;
padding-bottom: 72px;
}
body.iso-v1.woocommerce .woocommerce-result-count {
color: var(--iso-muted, #707b78);
font-size: 11px;
}
body.iso-v1.woocommerce .woocommerce-ordering {
color: var(--iso-muted, #707b78);
font-size: 11px;
}
body.iso-v1.woocommerce .category-filtering {
color: var(--iso-muted, #707b78);
font-size: 11px;
}
body.iso-v1.woocommerce .woocommerce-ordering select {
min-height: 42px;
padding: 0 36px 0 13px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 10px;
background-color: #fff;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 11px;
}
body.iso-v1.woocommerce .category-filtering select {
min-height: 42px;
padding: 0 36px 0 13px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 10px;
background-color: #fff;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 11px;
}
body.iso-v1.woocommerce .product-small .box {
height: 100%;
overflow: hidden;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
transition: transform .2s var(--iso-ease), box-shadow .2s var(--iso-ease), border-color .2s var(--iso-ease);
}
body.iso-v1.woocommerce-page .product-small .box {
height: 100%;
overflow: hidden;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
transition: transform .2s var(--iso-ease), box-shadow .2s var(--iso-ease), border-color .2s var(--iso-ease);
}
body.iso-v1.woocommerce .product-small .box-image {
overflow: hidden;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface-2) 100%);
}
body.iso-v1.woocommerce-page .product-small .box-image {
overflow: hidden;
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface-2) 100%);
}
body.iso-v1.woocommerce .product-small .box-image img {
transition: transform .28s var(--iso-ease);
}
body.iso-v1.woocommerce-page .product-small .box-image img {
transition: transform .28s var(--iso-ease);
}
body.iso-v1.woocommerce .product-small .box-text-products {
padding: 18px 18px 20px !important;
}
body.iso-v1.woocommerce-page .product-small .box-text-products {
padding: 18px 18px 20px !important;
}
body.iso-v1.woocommerce .product-small .product-title {
margin-bottom: 7px;
color: var(--iso-ink, #0b1110);
font-size: 13px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -.015em;
}
body.iso-v1.woocommerce-page .product-small .product-title {
margin-bottom: 7px;
color: var(--iso-ink, #0b1110);
font-size: 13px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -.015em;
}
body.iso-v1.woocommerce .product-small .product-title a {
color: inherit;
text-decoration: none;
}
body.iso-v1.woocommerce-page .product-small .product-title a {
color: inherit;
text-decoration: none;
}
body.iso-v1.woocommerce .product-small .category {
margin-bottom: 6px;
color: var(--iso-muted-2, #9aa3a0);
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
body.iso-v1.woocommerce-page .product-small .category {
margin-bottom: 6px;
color: var(--iso-muted-2, #9aa3a0);
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
body.iso-v1.woocommerce .product-small .price-wrapper {
margin-top: 9px;
}
body.iso-v1.woocommerce-page .product-small .price-wrapper {
margin-top: 9px;
}
body.iso-v1.woocommerce .product-small .price {
color: var(--iso-ink, #0b1110);
font-size: 14px;
font-weight: 800;
}
body.iso-v1.woocommerce-page .product-small .price {
color: var(--iso-ink, #0b1110);
font-size: 14px;
font-weight: 800;
}
body.iso-v1.woocommerce .product-small .price del {
color: var(--iso-muted-2, #9aa3a0);
font-size: 11px;
opacity: 1;
}
body.iso-v1.woocommerce-page .product-small .price del {
color: var(--iso-muted-2, #9aa3a0);
font-size: 11px;
opacity: 1;
}
body.iso-v1.woocommerce .product-small .price ins {
color: var(--iso-mint-dark, #159a7d);
text-decoration: none;
}
body.iso-v1.woocommerce-page .product-small .price ins {
color: var(--iso-mint-dark, #159a7d);
text-decoration: none;
}
body.iso-v1.woocommerce .product-small .add-to-cart-button {
margin-top: 14px;
}
body.iso-v1.woocommerce-page .product-small .add-to-cart-button {
margin-top: 14px;
}
body.iso-v1.woocommerce .product-small .add-to-cart-button .button {
width: 100%;
min-height: 42px;
margin: 0;
padding: 0 16px;
border: 1px solid var(--iso-ink, #0b1110);
border-radius: 10px;
background: var(--iso-ink, #0b1110);
box-shadow: none;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1.woocommerce-page .product-small .add-to-cart-button .button {
width: 100%;
min-height: 42px;
margin: 0;
padding: 0 16px;
border: 1px solid var(--iso-ink, #0b1110);
border-radius: 10px;
background: var(--iso-ink, #0b1110);
box-shadow: none;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1.woocommerce .badge-container {
top: 13px;
left: 13px;
margin: 0;
}
body.iso-v1.woocommerce-page .badge-container {
top: 13px;
left: 13px;
margin: 0;
}
body.iso-v1.woocommerce .badge {
height: auto;
min-height: 0;
margin: 0 6px 6px 0;
}
body.iso-v1.woocommerce-page .badge {
height: auto;
min-height: 0;
margin: 0 6px 6px 0;
}
body.iso-v1.woocommerce .badge-inner {
min-width: 0;
height: auto;
padding: 7px 10px;
border: 0;
border-radius: 999px;
background: var(--iso-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.iso-v1.woocommerce-page .badge-inner {
min-width: 0;
height: auto;
padding: 7px 10px;
border: 0;
border-radius: 999px;
background: var(--iso-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.iso-v1.woocommerce .badge-inner.on-sale {
background: var(--iso-mint, #31c7a5);
color: var(--iso-ink);
}
body.iso-v1.woocommerce-page .badge-inner.on-sale {
background: var(--iso-mint, #31c7a5);
color: var(--iso-ink);
}
body.iso-v1.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.iso-v1.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.iso-v1 .iso-product-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0 0 16px;
}
body.iso-v1 .iso-product-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 999px;
background: #fff;
color: var(--iso-muted, #707b78);
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1 .iso-product-badge--mint {
border-color: rgba(49,199,165,.34);
background: var(--iso-mint-soft, #eaf8f4);
color: var(--iso-mint-dark, #159a7d);
}
body.iso-v1 .iso-product-badge--dark {
border-color: var(--iso-ink, #0b1110);
background: var(--iso-ink, #0b1110);
color: #fff;
}
body.iso-v1.single-product .product-main {
padding-top: 48px;
padding-bottom: 52px;
}
body.iso-v1.single-product .product-gallery .flickity-viewport {
border-radius: var(--iso-radius, 18px);
}
body.iso-v1.single-product .product-gallery .easyzoom-flyout {
border-radius: var(--iso-radius, 18px);
}
body.iso-v1.single-product .product-gallery .product-gallery-slider {
border-radius: var(--iso-radius, 18px);
overflow: hidden;
border: 1px solid var(--iso-line, #dfe6e3);
background: linear-gradient(180deg, var(--iso-surface) 0%, var(--iso-surface-2) 100%);
}
body.iso-v1.single-product .product-info {
padding-top: 6px;
}
body.iso-v1.single-product .product-info .product-title {
margin: 0 0 14px;
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 900;
line-height: .98;
letter-spacing: -.05em;
}
body.iso-v1.single-product .product-info .is-divider {
display: none;
}
body.iso-v1.single-product .product-info .price {
margin: 0 0 20px;
color: var(--iso-ink, #0b1110);
font-size: 20px;
font-weight: 800;
}
body.iso-v1.single-product .product-info .price del {
color: var(--iso-muted-2, #9aa3a0);
font-size: 13px;
opacity: 1;
}
body.iso-v1.single-product .product-info .price ins {
color: var(--iso-mint-dark, #159a7d);
text-decoration: none;
}
body.iso-v1.single-product .woocommerce-product-details__short-description {
margin: 0 0 22px;
color: var(--iso-muted, #707b78);
font-size: 13px;
line-height: 1.75;
}
body.iso-v1.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(--iso-mint-soft, #eaf8f4);
color: var(--iso-mint-dark, #159a7d);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1.single-product form.cart {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
margin: 20px 0 22px;
}
body.iso-v1.single-product form.cart .quantity {
margin: 0 !important;
}
body.iso-v1.single-product form.cart .quantity input[type="number"] {
height: 48px;
min-height: 48px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 10px;
background: #fff;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 12px;
font-weight: 700;
}
body.iso-v1.single-product form.cart .quantity .qty {
height: 48px;
min-height: 48px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 10px;
background: #fff;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 12px;
font-weight: 700;
}
body.iso-v1.single-product form.cart .button {
min-height: 48px;
margin: 0 !important;
padding: 0 24px !important;
border: 1px solid var(--iso-mint, #31c7a5) !important;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--iso-mint) 0%,var(--iso-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--iso-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1.single-product .single_add_to_cart_button {
min-height: 48px;
margin: 0 !important;
padding: 0 24px !important;
border: 1px solid var(--iso-mint, #31c7a5) !important;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--iso-mint) 0%,var(--iso-mint) 100%) !important;
box-shadow: 0 8px 22px rgba(49,199,165,.16);
color: var(--iso-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1.single-product .product_meta {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--iso-line, #dfe6e3);
color: var(--iso-muted-2, #9aa3a0);
font-size: 11px;
line-height: 1.7;
}
body.iso-v1.single-product .product_meta > span {
display: block;
margin: 3px 0;
}
body.iso-v1.single-product .product_meta a {
color: var(--iso-muted, #707b78);
}
body.iso-v1 .iso-coa-product-meta span {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 0 9px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 999px;
background: #fff;
color: var(--iso-muted, #707b78);
font-size: 10px;
line-height: 1;
}
body.iso-v1 .iso-coa-product-link:hover {
color: var(--iso-ink, #0b1110);
}
body.iso-v1.single-product .product-footer {
padding-top: 0;
background: linear-gradient(180deg, var(--iso-surface) 0%, #fff 180px);
border-top: 1px solid var(--iso-line, #dfe6e3);
}
body.iso-v1.single-product .woocommerce-tabs {
padding-top: 38px;
padding-bottom: 66px;
}
body.iso-v1.single-product .woocommerce-tabs .nav-tabs {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 26px;
border: 0;
}
body.iso-v1.single-product .woocommerce-tabs .nav-tabs > li {
margin: 0;
}
body.iso-v1.single-product .woocommerce-tabs .nav-tabs > li > a {
min-height: 38px;
padding: 0 13px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 999px;
background: #fff;
color: var(--iso-muted, #707b78);
font-size: 10px;
font-weight: 900;
line-height: 36px;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1.single-product .woocommerce-tabs .nav-tabs > li.active > a {
border-color: var(--iso-ink, #0b1110);
background: var(--iso-ink, #0b1110);
color: #fff;
}
body.iso-v1.single-product .woocommerce-tabs .nav-tabs > li > a:hover {
border-color: var(--iso-ink, #0b1110);
background: var(--iso-ink, #0b1110);
color: #fff;
}
body.iso-v1.single-product .woocommerce-Tabs-panel {
max-width: 920px;
margin: 0 auto;
color: var(--iso-text, #27302e);
font-size: 13px;
line-height: 1.8;
}
body.iso-v1.single-product .panel.entry-content {
max-width: 920px;
margin: 0 auto;
color: var(--iso-text, #27302e);
font-size: 13px;
line-height: 1.8;
}
body.iso-v1.single-product .woocommerce-Tabs-panel > p:first-child {
font-size: 14px;
line-height: 1.8;
}
body.iso-v1.single-product .panel.entry-content > p:first-child {
font-size: 14px;
line-height: 1.8;
}
body.iso-v1.single-product .woocommerce-Tabs-panel h2 {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 14px;
font-size: 20px;
}
body.iso-v1.single-product .woocommerce-Tabs-panel h3 {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 13px;
padding-top: 2px;
font-size: 16px;
}
body.iso-v1.single-product .panel.entry-content h2 {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 14px;
font-size: 20px;
}
body.iso-v1.single-product .panel.entry-content h3 {
color: var(--iso-ink, #0b1110);
font-family: var(--iso-font, inherit);
font-weight: 900;
letter-spacing: -.025em;
margin: 34px 0 13px;
padding-top: 2px;
font-size: 16px;
}
body.iso-v1.single-product .woocommerce-Tabs-panel p {
margin: 0 0 16px;
}
body.iso-v1.single-product .panel.entry-content p {
margin: 0 0 16px;
}
body.iso-v1.single-product .woocommerce-Tabs-panel ul {
margin: 0 0 22px;
padding: 0;
list-style: none;
}
body.iso-v1.single-product .panel.entry-content ul {
margin: 0 0 22px;
padding: 0;
list-style: none;
}
body.iso-v1.single-product .woocommerce-Tabs-panel li {
position: relative;
margin: 0;
padding: 9px 0 9px 20px;
border-bottom: 1px solid var(--iso-line, #dfe6e3);
}
body.iso-v1.single-product .panel.entry-content li {
position: relative;
margin: 0;
padding: 9px 0 9px 20px;
border-bottom: 1px solid var(--iso-line, #dfe6e3);
}
body.iso-v1.single-product .woocommerce-Tabs-panel li::before {
content: '';
position: absolute;
top: 17px;
left: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--iso-mint, #31c7a5);
}
body.iso-v1.single-product .panel.entry-content li::before {
content: '';
position: absolute;
top: 17px;
left: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--iso-mint, #31c7a5);
}
body.iso-v1.single-product .woocommerce-Tabs-panel table {
width: 100%;
margin: 14px 0 28px;
overflow: hidden;
border: 1px solid var(--iso-line, #dfe6e3);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--iso-radius, 18px);
background: #fff;
box-shadow: none;
}
body.iso-v1.single-product .panel.entry-content table {
width: 100%;
margin: 14px 0 28px;
overflow: hidden;
border: 1px solid var(--iso-line, #dfe6e3);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--iso-radius, 18px);
background: #fff;
box-shadow: none;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table th {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--iso-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
width: 34%;
background: var(--iso-surface);
color: var(--iso-ink, #0b1110);
font-weight: 800;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table td {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--iso-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
color: var(--iso-text, #27302e);
}
body.iso-v1.single-product .panel.entry-content table th {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--iso-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
width: 34%;
background: var(--iso-surface);
color: var(--iso-ink, #0b1110);
font-weight: 800;
}
body.iso-v1.single-product .panel.entry-content table td {
padding: 12px 15px;
border: 0;
border-bottom: 1px solid var(--iso-line, #dfe6e3);
text-align: left;
vertical-align: top;
font-size: 11px;
line-height: 1.55;
color: var(--iso-text, #27302e);
}
body.iso-v1.single-product .woocommerce-Tabs-panel table tr:last-child th {
border-bottom: 0;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table tr:last-child td {
border-bottom: 0;
}
body.iso-v1.single-product .panel.entry-content table tr:last-child th {
border-bottom: 0;
}
body.iso-v1.single-product .panel.entry-content table tr:last-child td {
border-bottom: 0;
}
body.iso-v1.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(--iso-mint, #31c7a5);
border-radius: 12px;
background: var(--iso-mint-soft, #eaf8f4);
color: #2f514a;
font-size: 11px;
line-height: 1.7;
}
body.iso-v1.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(--iso-mint, #31c7a5);
border-radius: 12px;
background: var(--iso-mint-soft, #eaf8f4);
color: #2f514a;
font-size: 11px;
line-height: 1.7;
}
body.iso-v1.woocommerce-cart .woocommerce {
padding-top: 44px;
padding-bottom: 72px;
}
body.iso-v1.woocommerce-cart .shop_table {
border-color: var(--iso-line, #dfe6e3);
}
body.iso-v1.woocommerce-cart .cart_totals {
border-color: var(--iso-line, #dfe6e3);
padding: 22px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
}
body.iso-v1.woocommerce-cart .shop_table th {
border-color: var(--iso-line, #dfe6e3);
}
body.iso-v1.woocommerce-cart .shop_table td {
border-color: var(--iso-line, #dfe6e3);
}
/* V1.40: die Mint-Knopfregeln aus dem Vorgaengertheme sind hier entfernt.
Sie wurden weiter unten ohnehin ueberschrieben und beschrieben eine
Farbe, die es im Isolite-System nicht mehr gibt. */
body.iso-v1.woocommerce-checkout .checkout-page-title {
display: none;
}
body.iso-v1.woocommerce-checkout .woocommerce {
padding-top: 46px;
padding-bottom: 76px;
}
body.iso-v1.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
gap: 34px;
align-items: start;
}
body.iso-v1.woocommerce-checkout form.checkout > .row {
display: contents;
}
body.iso-v1.woocommerce-checkout form.checkout .row.pt-0 {
display: contents;
}
body.iso-v1.woocommerce-checkout #customer_details {
min-width: 0;
grid-column: 1;
}
body.iso-v1.woocommerce-checkout #order_review_heading {
min-width: 0;
grid-column: 2;
margin: 0 0 -18px;
padding: 0 22px;
color: var(--iso-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.iso-v1.woocommerce-checkout #order_review {
min-width: 0;
grid-column: 2;
position: sticky;
top: 102px;
padding: 22px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
box-shadow: 0 18px 42px rgba(22,43,39,.07);
}
body.iso-v1.woocommerce-checkout .woocommerce-billing-fields {
margin-bottom: 22px;
padding: 24px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
}
body.iso-v1.woocommerce-checkout .woocommerce-shipping-fields {
margin-bottom: 22px;
padding: 24px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
}
body.iso-v1.woocommerce-checkout .woocommerce-additional-fields {
margin-bottom: 22px;
padding: 24px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
background: #fff;
}
body.iso-v1.woocommerce-checkout .woocommerce-billing-fields > h3 {
margin: 0 0 20px;
color: var(--iso-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.iso-v1.woocommerce-checkout .woocommerce-shipping-fields > h3 {
margin: 0 0 20px;
color: var(--iso-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.iso-v1.woocommerce-checkout .woocommerce-additional-fields > h3 {
margin: 0 0 20px;
color: var(--iso-ink, #0b1110);
font-size: 17px;
font-weight: 900;
letter-spacing: -.02em;
}
body.iso-v1.woocommerce-checkout .form-row {
margin-bottom: 14px;
}
body.iso-v1.woocommerce-checkout .form-row label {
margin-bottom: 6px;
color: var(--iso-muted, #707b78);
font-size: 11px;
font-weight: 800;
letter-spacing: .055em;
}
body.iso-v1.woocommerce-checkout .woocommerce-input-wrapper label {
margin-bottom: 6px;
color: var(--iso-muted, #707b78);
font-size: 11px;
font-weight: 800;
letter-spacing: .055em;
}
body.iso-v1.woocommerce-checkout input.input-text {
min-height: 46px;
border: 1px solid var(--iso-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 12px;
padding: 10px 13px !important;
}
body.iso-v1.woocommerce-checkout textarea {
min-height: 110px;
border: 1px solid var(--iso-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 12px;
padding: 10px 13px !important;
resize: vertical;
}
body.iso-v1.woocommerce-checkout select {
min-height: 46px;
border: 1px solid var(--iso-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 12px;
padding: 10px 13px !important;
}
body.iso-v1.woocommerce-checkout .select2-container .select2-selection--single {
min-height: 46px;
border: 1px solid var(--iso-line, #dfe6e3) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
color: var(--iso-ink, #0b1110);
font-size: 12px;
}
body.iso-v1.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 13px;
line-height: 44px;
}
body.iso-v1.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
height: 44px;
}
body.iso-v1.woocommerce-checkout input.input-text:focus {
border-color: var(--iso-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.iso-v1.woocommerce-checkout textarea:focus {
border-color: var(--iso-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.iso-v1.woocommerce-checkout select:focus {
border-color: var(--iso-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.iso-v1.woocommerce-checkout .select2-container--focus .select2-selection--single {
border-color: var(--iso-mint, #31c7a5);
outline: 2px solid rgba(49,199,165,.18);
outline-offset: 1px;
}
body.iso-v1.woocommerce-checkout #order_review .shop_table {
margin-bottom: 18px;
border: 0;
}
body.iso-v1.woocommerce-checkout #order_review .shop_table th {
padding: 12px 4px;
border-color: var(--iso-line, #dfe6e3);
color: var(--iso-ink, #0b1110);
font-size: 11px;
font-weight: 800;
}
body.iso-v1.woocommerce-checkout #order_review .shop_table td {
padding: 12px 4px;
border-color: var(--iso-line, #dfe6e3);
color: var(--iso-text, #27302e);
font-size: 11px;
}
body.iso-v1.woocommerce-checkout #payment {
margin-top: 16px;
border: 0;
background: transparent;
}
body.iso-v1.woocommerce-checkout #payment ul.payment_methods {
margin: 0;
padding: 0;
border: 0;
}
body.iso-v1.woocommerce-checkout #payment ul.payment_methods > li {
margin: 0 0 9px;
padding: 13px 14px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 10px;
background: #fff;
}
body.iso-v1.woocommerce-checkout #payment .payment_box {
margin: 10px 0 0;
padding: 12px 14px;
border-radius: 8px;
background: var(--iso-surface-2);
color: var(--iso-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.iso-v1.woocommerce-checkout .woocommerce-privacy-policy-text {
color: var(--iso-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.iso-v1.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
color: var(--iso-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.iso-v1.woocommerce-checkout .form-row.validate-required {
color: var(--iso-muted, #707b78);
font-size: 10px;
line-height: 1.65;
}
body.iso-v1.woocommerce-checkout #place_order {
width: 100%;
min-height: 52px;
margin: 14px 0 0 !important;
border: 1px solid var(--iso-mint, #31c7a5) !important;
border-radius: 10px !important;
background: linear-gradient(180deg,var(--iso-mint) 0%,var(--iso-mint) 100%) !important;
box-shadow: 0 9px 24px rgba(49,199,165,.18);
color: var(--iso-ink);
font-size: 10px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
body.iso-v1.woocommerce-checkout #place_order:hover {
filter: brightness(1.025);
}
body.iso-v1.woocommerce-checkout .woocommerce-form-coupon-toggle {
max-width: var(--iso-container, 1180px);
margin-right: auto;
margin-left: auto;
}
body.iso-v1.woocommerce-checkout form.checkout_coupon {
max-width: var(--iso-container, 1180px);
margin-right: auto;
margin-left: auto;
}
body.iso-v1.woocommerce-checkout .woocommerce-info {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--iso-line, #dfe6e3);
border-left: 3px solid var(--iso-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--iso-text, #27302e);
font-size: 11px;
line-height: 1.6;
}
body.iso-v1.woocommerce-cart .woocommerce-info {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--iso-line, #dfe6e3);
border-left: 3px solid var(--iso-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--iso-text, #27302e);
font-size: 11px;
line-height: 1.6;
}
body.iso-v1.woocommerce .woocommerce-message {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--iso-line, #dfe6e3);
border-left: 3px solid var(--iso-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--iso-text, #27302e);
font-size: 11px;
line-height: 1.6;
}
body.iso-v1.woocommerce .woocommerce-error {
margin-bottom: 18px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--iso-line, #dfe6e3);
border-left: 3px solid var(--iso-mint, #31c7a5);
border-radius: 10px;
background: #fff;
color: var(--iso-text, #27302e);
font-size: 11px;
line-height: 1.6;
border-left-color: #b44d4d;
}
body.iso-v1.woocommerce-account .woocommerce-MyAccount-navigation {
border-color: var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
}
body.iso-v1.woocommerce-account .woocommerce-MyAccount-content {
border-color: var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
}
body.iso-v1.woocommerce-account form.login {
border-color: var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
}
body.iso-v1.woocommerce-account form.register {
border-color: var(--iso-line, #dfe6e3);
border-radius: var(--iso-radius, 18px);
}
body.iso-v1.woocommerce-account input.input-text {
min-height: 44px;
border: 1px solid var(--iso-line, #dfe6e3);
border-radius: 10px;
box-shadow: none;
}
body.iso-v1 .iso-section-text {
margin: 0;
color: var(--iso-muted);
font-size: var(--iso-fs-lead);
line-height: 1.68;
max-width: 54ch;
text-wrap: pretty;
}
body.iso-v1 .iso-coa-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* -- 04 DESKTOP (min-width) ---------------------------------------------- */
@media (min-width: 850px) {
body.iso-v1 .iso-header-logo-col-v53 {
flex-basis: 20% !important;
max-width: 20% !important;
}
body.iso-v1 .iso-header-nav-col-v53 {
flex-basis: 58% !important;
max-width: 58% !important;
}
body.iso-v1 .iso-header-actions-col-v53 {
flex-basis: 22% !important;
max-width: 22% !important;
}
body.iso-v1 .iso-hero-v5 {
position: relative !important;
overflow: hidden !important;
min-height: 610px !important;
background: #061114 !important;
background-image: none !important;
}
body.iso-v1 .iso-hero-v5::before {
display: none !important;
content: none !important;
}
body.iso-v1 .iso-hero-v5::after {
display: none !important;
content: none !important;
}
body.iso-v1 .iso-hero-grid-v5::before {
display: none !important;
content: none !important;
}
body.iso-v1 .iso-hero-grid-v5::after {
display: none !important;
content: none !important;
}
body.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-home-v5 .iso-feature-card:hover {
transform: translateY(-3px);
border-color: rgba(49,199,165,.28);
box-shadow: 0 16px 38px rgba(35,60,55,.08);
}
body.iso-v1 .iso-home-v5 .iso-product-tile:hover {
transform: translateY(-3px);
border-color: rgba(49,199,165,.28);
box-shadow: 0 16px 38px rgba(35,60,55,.08);
}
body.iso-v1 .iso-home-v5 .iso-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.iso-v1 .iso-home-v5 .iso-feature-card {
transition: transform .2s var(--iso-ease), border-color .2s var(--iso-ease), box-shadow .2s var(--iso-ease);
}
body.iso-v1 .iso-home-v5 .iso-product-tile {
transition: transform .2s var(--iso-ease), border-color .2s var(--iso-ease), box-shadow .2s var(--iso-ease);
}
body.iso-v1 .iso-home-v5 .iso-all-products-card {
transition: transform .2s var(--iso-ease), border-color .2s var(--iso-ease), box-shadow .2s var(--iso-ease);
}
body.iso-v1 .iso-hero-grid-v5 > .iso-hero-copy-v5 {
flex-basis: 51% !important;
max-width: 51% !important;
}
body.iso-v1 .iso-hero-grid-v5 > .iso-hero-visual-col {
flex-basis: 49% !important;
max-width: 49% !important;
}
body.iso-v1 .iso-trust-row .iso-trust-col:hover .iso-trust-item {
background: rgba(234,248,244,.48);
}
body.iso-v1 .iso-hero-v5 .iso-hero-title {
white-space: normal;
}
body.iso-v1 .home .page-wrapper {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .home .page-inner {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .home #main {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .home #wide-nav {
display: none !important;
}
body.iso-v1 .home .header-main {
display: none !important;
}
body.iso-v1 .home .header-bottom {
display: none !important;
}
body.iso-v1 .home .header-top {
display: none !important;
}
body.iso-v1 .home .footer-wrapper {
display: none !important;
}
body.iso-v1 .home .absolute-footer {
display: none !important;
}
body.iso-v1 .home .widget-area {
display: none !important;
}
body.iso-v1 .home .page-title {
display: none !important;
}
body.iso-v1 .home .page-header {
display: none !important;
}
body.iso-v1 .home .blog-header {
display: none !important;
}
body.iso-v1 .iso-hero-v5 {
position: relative !important;
overflow: hidden !important;
background: #061114 !important;
background-image: none !important;
}
body.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-hero-banner-col::before {
display: none !important;
}
body.iso-v1 .iso-hero-v5 > .section-content {
position: static !important;
}
body.iso-v1 .iso-principle {
transition: transform .2s var(--iso-ease), box-shadow .2s var(--iso-ease), border-color .2s var(--iso-ease);
}
body.iso-v1 .iso-paycard {
transition: transform .2s var(--iso-ease), box-shadow .2s var(--iso-ease), border-color .2s var(--iso-ease);
}
body.iso-v1 .iso-storage-card {
transition: transform .2s var(--iso-ease), box-shadow .2s var(--iso-ease), border-color .2s var(--iso-ease);
}
body.iso-v1 .iso-contact-card {
transition: transform .2s var(--iso-ease), box-shadow .2s var(--iso-ease), border-color .2s var(--iso-ease);
}
body.iso-v1 .iso-paycard:hover {
transform: translateY(-2px);
border-color: rgba(49,199,165,.3);
box-shadow: 0 14px 32px rgba(35,60,55,.08);
}
body.iso-v1 .iso-storage-card:hover {
transform: translateY(-2px);
border-color: rgba(49,199,165,.3);
box-shadow: 0 14px 32px rgba(35,60,55,.08);
}
body.iso-v1 .iso-contact-card:hover {
transform: translateY(-2px);
border-color: rgba(49,199,165,.3);
box-shadow: 0 14px 32px rgba(35,60,55,.08);
}
body.iso-v1 .iso-principle:hover {
background: var(--iso-surface);
}
body.iso-v1.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.iso-v1.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.iso-v1.woocommerce .product-small .box:hover .box-image img {
transform: scale(1.025);
}
body.iso-v1.woocommerce-page .product-small .box:hover .box-image img {
transform: scale(1.025);
}
}
/* -- 05 TABLET / MOBILE (max-width, absteigend) -------------------------- */
@media (max-width: 1023px) {
body.iso-v1 .iso-shell {
width: min(calc(100% - 34px), 760px);
}
body.iso-v1 .iso-hero-grid-v5 {
width: min(calc(100% - 34px),760px) !important;
min-height: 0 !important;
grid-template-columns: 1fr;
gap: 0;
}
body.iso-v1 .iso-research-bar-inner {
width: calc(100% - 28px);
grid-template-columns: 1fr auto;
}
body.iso-v1 .iso-research-bar-brand {
order: -1;
justify-self: start;
}
body.iso-v1 .iso-research-bar-side:first-child {
display: none;
}
body.iso-v1 .iso-research-bar-side:last-child {
font-size: 10px;
}
body.iso-v1 .iso-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.iso-v1 .iso-hero-copy-v5 {
padding: 64px 0 22px;
}
body.iso-v1 .iso-hero-title {
max-width: 720px;
font-size: clamp(3.1rem, 10vw, 5rem) !important;
}
body.iso-v1 .iso-hero-lead {
max-width: 580px;
}
body.iso-v1 .iso-hero-scene {
min-height: 430px;
}
body.iso-v1 .iso-hero-vials {
right: 50%;
bottom: 50px;
width: min(600px, 92vw);
transform: translateX(50%);
}
body.iso-v1 .iso-hero-platform {
right: 50%;
bottom: 42px;
width: min(580px, 88vw);
transform: translateX(50%);
}
body.iso-v1 .iso-hero-labglass--one {
left: 2%;
}
body.iso-v1 .iso-hero-labglass--two {
right: 2%;
}
body.iso-v1 .iso-trust-wrap {
margin-top: -26px;
}
body.iso-v1 .iso-trust-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.iso-v1 .iso-trust-item {
border-right: 0;
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-trust-item:nth-child(odd) {
border-right: 1px solid var(--iso-line);
}
body.iso-v1 .iso-trust-item:last-child {
grid-column: 1 / -1;
border-bottom: 0;
border-right: 0;
}
body.iso-v1 .iso-section-intro {
grid-template-columns: 1fr;
gap: 28px;
}
body.iso-v1 .iso-index-head {
grid-template-columns: 1fr;
gap: 28px;
}
body.iso-v1 .iso-coa-layout {
grid-template-columns: 1fr;
gap: 40px;
}
body.iso-v1 .iso-faq-layout {
grid-template-columns: 1fr;
gap: 28px;
}
body.iso-v1 .iso-section-intro .iso-copy {
justify-self: start;
}
body.iso-v1 .iso-catalog-grid {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-feature-card {
min-height: 500px;
}
body.iso-v1 .iso-catalog-side {
min-height: 500px;
}
body.iso-v1 .iso-index-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.iso-v1 .iso-index-item:nth-child(2) {
border-right: 0;
}
body.iso-v1 .iso-index-item:nth-child(n+3) {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.10);
}
body.iso-v1 .iso-footer-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.iso-v1 .iso-footer-grid > :first-child {
grid-column: 1 / -1;
}
body.iso-v1 .iso-catalog-section .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-index-section .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-coa-section-v5 .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-faq-section-v5 .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-footer-v5 .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner {
padding: 56px 0 10px !important;
}
body.iso-v1 .iso-hero-visual-col {
min-height: 430px;
}
body.iso-v1 .iso-hero-visual-col > .col-inner {
min-height: 430px;
}
body.iso-v1 .iso-hero-vials-image {
width: min(760px,108vw) !important;
margin: 0 0 35px !important;
max-width: none !important;
transform: none;
}
body.iso-v1 .iso-hero-visual-col > .col-inner::before {
width: min(620px,98vw);
bottom: 28px;
height: 94px;
}
body.iso-v1 .iso-trust-section {
margin-top: -26px;
}
body.iso-v1 .iso-trust-section .section-content {
width: 100% !important;
}
body.iso-v1 .iso-trust-row {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.iso-v1 .iso-trust-row > .col:nth-child(odd) .iso-trust-item {
border-right: 1px solid var(--iso-line);
}
body.iso-v1 .iso-trust-row > .col:nth-child(-n+4) .iso-trust-item {
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-trust-row > .col:last-child {
grid-column: 1 / -1;
}
body.iso-v1 .iso-trust-row > .col:last-child .iso-trust-item {
border-right: 0;
}
body.iso-v1 .iso-index-row {
grid-template-columns: repeat(2, minmax(0,1fr));
}
body.iso-v1 .iso-index-row > .col:nth-child(2) .iso-index-item {
border-right: 0;
}
body.iso-v1 .iso-index-row > .col:nth-child(n+3) .iso-index-item {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.10);
}
body.iso-v1 .iso-section-intro-row .iso-copy {
max-width: none;
margin-left: 0;
}
body.iso-v1 .iso-index-head-row .iso-copy {
max-width: none;
margin-left: 0;
}
body.iso-v1 .iso-hero-v5 .iso-hero-title {
font-size: clamp(3rem,9.5vw,4.8rem) !important;
line-height: .92 !important;
}
body.iso-v1 .iso-hero-visual-col > .col-inner::after {
display: none;
}
body.iso-v1 .iso-hero-v5 .iso-hero-grid-v5 {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
}
body.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-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.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 > .col-inner {
position: static !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 .button.iso-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.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 a.button.iso-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.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 .button.iso-btn-v4:last-child {
margin-bottom: 0 !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 .button.iso-btn-v4:active {
transform: scale(0.97) !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col::before {
display: none !important;
}
body.iso-v1 .iso-page-hero .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-page-section .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-page-section-dark .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-page-section-soft .section-content > .row {
width: min(calc(100% - 34px), 760px) !important;
}
body.iso-v1 .iso-page-hero {
padding: 58px 0 50px !important;
}
body.iso-v1 .iso-page-section {
padding: 56px 0 !important;
}
body.iso-v1 .iso-page-section-soft {
padding: 56px 0 !important;
}
body.iso-v1 .iso-page-section-dark {
padding: 52px 0 !important;
}
body.iso-v1 .iso-principle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.iso-v1 .iso-paygrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.iso-v1 .iso-storage-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.iso-v1 .iso-contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.iso-v1 .iso-fieldlist-row {
grid-template-columns: 1fr;
gap: 6px;
}
body.iso-v1 .iso-legal-aside {
position: static;
}
body.iso-v1.woocommerce .shop-container {
padding-top: 24px;
padding-bottom: 54px;
}
body.iso-v1.single-product .product-main {
padding-top: 26px;
padding-bottom: 38px;
}
body.iso-v1.single-product .product-info {
padding-top: 22px;
}
body.iso-v1.single-product .product-info .product-title {
font-size: clamp(1.9rem, 8vw, 2.5rem);
}
body.iso-v1.woocommerce-checkout form.checkout {
display: block;
}
body.iso-v1.woocommerce-checkout #customer_details {
display: block;
width: 100%;
}
body.iso-v1.woocommerce-checkout #order_review_heading {
display: block;
width: 100%;
margin: 30px 0 14px;
padding: 0;
}
body.iso-v1.woocommerce-checkout #order_review {
display: block;
width: 100%;
position: static;
top: auto;
}
}
@media (max-width: 849px) {
body.iso-v1 .admin-bar .iso-bound-header {
top: 46px;
}
body.iso-v1 .iso-header-micro-row-v53 {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-site-header-row-v53 {
width: calc(100% - 28px) !important;
min-height: 62px;
}
body.iso-v1 .iso-header-micro-right {
display: none;
}
body.iso-v1 .iso-header-micro-row-v53 > .col:first-child {
flex-basis: 100% !important;
max-width: 100% !important;
}
body.iso-v1 .iso-header-micro-row-v53 > .col:last-child {
display: none !important;
}
body.iso-v1 .iso-header-micro-text {
font-size: 10px;
}
body.iso-v1 .iso-header-logo-v53 {
font-size: 16px;
}
body.iso-v1 .iso-header-logo-v53 small {
font-size: 10px;
margin-top: 3px !important;
letter-spacing: .16em;
}
body.iso-v1 .iso-header-logo-col-v53 {
flex-basis: 50% !important;
max-width: 50% !important;
}
body.iso-v1 .iso-header-nav-col-v53 {
flex-basis: 25% !important;
max-width: 25% !important;
order: 3;
}
body.iso-v1 .iso-header-actions-col-v53 {
flex-basis: 25% !important;
max-width: 25% !important;
}
body.iso-v1 .iso-header-actions-v53 {
min-height: 62px;
gap: 8px;
}
body.iso-v1 .iso-header-account-v53 {
display: none !important;
}
body.iso-v1 .iso-header-action-v53 {
font-size: 0;
}
body.iso-v1 .iso-cart-action-v53::before {
content: 'Bag';
font-size: 10px;
color: rgba(255,255,255,.78);
}
body.iso-v1 .iso-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.iso-v1 .iso-nav-toggle-v53 span {
width: 14px;
height: 1px;
background: #fff;
transition: transform .18s var(--iso-ease), opacity .18s var(--iso-ease);
}
body.iso-v1 .iso-nav-toggle-v53[aria-expanded="true"] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
body.iso-v1 .iso-nav-toggle-v53[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
body.iso-v1 .iso-nav-toggle-v53[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
body.iso-v1 .iso-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.iso-v1 .admin-bar .iso-nav-panel-v53 {
top: 138px;
}
body.iso-v1 .iso-nav-panel-v53.is-open {
display: block;
}
body.iso-v1 .iso-nav-list-v53 {
display: grid;
gap: 0;
justify-content: stretch;
}
body.iso-v1 .iso-nav-list-v53 > li {
border-bottom: 1px solid rgba(255,255,255,.08);
}
body.iso-v1 .iso-nav-list-v53 > li > a {
width: 100%;
min-height: 48px;
justify-content: space-between;
font-size: 10px;
}
}
@media (max-width: 767px) {
body.iso-v1 .iso-trust-section {
display: none !important;
}
body.iso-v1 .iso-catalog-section {
padding-top: 62px !important;
}
body.iso-v1 .iso-product-tile-footer {
min-height: 60px !important;
}
body.iso-v1 .iso-product-tile-footer > div {
min-height: 44px !important;
}
body.iso-v1 .iso-product-tile-footer .iso-round-link {
align-self: flex-end;
margin-bottom: 0 !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-hero-grid-v5 > .iso-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.iso-v1 .iso-hero-visual-col {
min-height: 0 !important;
height: 330px !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-hero-visual-col > .col-inner::before {
display: none !important;
content: none !important;
}
body.iso-v1 .iso-hero-visual-col > .col-inner::after {
display: none !important;
content: none !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-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.iso-v1 .iso-hero-grid-v5 > .iso-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.iso-v1 .iso-hero-copy-v5 > .col-inner {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > .button {
width: 100% !important;
min-height: 48px !important;
margin: 0 0 9px !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > a.button {
width: 100% !important;
min-height: 48px !important;
margin: 0 0 9px !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > .button:first-of-type {
order: 1 !important;
margin-top: 18px !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > a.button:first-of-type {
order: 1 !important;
margin-top: 18px !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > .button:nth-of-type(2) {
order: 2 !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > a.button:nth-of-type(2) {
order: 2 !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > .ux-text {
order: 3 !important;
margin-top: 24px !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-title {
max-width: 100% !important;
font-size: 2.55rem !important;
line-height: .94 !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-lead {
margin: 18px 0 0 !important;
font-size: 11.5px !important;
line-height: 1.7 !important;
}
body.iso-v1 .iso-hero-grid-v5::before {
display: none !important;
content: none !important;
}
body.iso-v1 .iso-hero-keyvisual-image picture {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 330px !important;
}
}
@media (max-width: 640px) {
body.iso-v1 .iso-shell {
width: calc(100% - 28px);
}
body.iso-v1 .iso-hero-grid-v5 {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
max-width: none !important;
margin: 0 !important;
}
body.iso-v1 .iso-research-bar-side:last-child {
display: none;
}
body.iso-v1 .iso-research-bar-inner {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-research-bar-brand {
justify-self: center;
}
body.iso-v1 .iso-hero-copy-v5 {
padding-top: 50px;
}
body.iso-v1 .iso-hero-title {
font-size: 2.75rem !important;
line-height: .93 !important;
}
body.iso-v1 .iso-hero-lead {
margin-top: 20px;
font-size: 12px;
}
body.iso-v1 .iso-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
body.iso-v1 .iso-btn-v5 {
width: 100% !important;
}
body.iso-v1 .iso-home-v5 .button.iso-btn-v5 {
width: 100% !important;
}
body.iso-v1 .iso-hero-scene {
min-height: 340px;
}
body.iso-v1 .iso-hero-vials {
bottom: 45px;
width: 108vw;
}
body.iso-v1 .iso-hero-platform {
bottom: 38px;
width: 100vw;
height: 72px;
}
body.iso-v1 .iso-hero-labglass {
display: none;
}
body.iso-v1 .iso-trust-strip {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-trust-item {
grid-column: auto;
border-right: 0;
border-bottom: 1px solid var(--iso-line);
padding: 15px 20px !important;
min-height: 0;
}
body.iso-v1 .iso-trust-item:nth-child(odd) {
grid-column: auto;
border-right: 0;
border-bottom: 1px solid var(--iso-line);
padding: 16px 17px;
}
body.iso-v1 .iso-trust-item:last-child {
grid-column: auto;
border-right: 0;
border-bottom: 0;
padding: 16px 17px;
}
body.iso-v1 .iso-catalog-section {
padding: 84px 0 72px;
}
body.iso-v1 .iso-section-title {
font-size: 2.2rem;
}
body.iso-v1 .iso-feature-card {
min-height: 470px;
}
body.iso-v1 .iso-feature-media {
inset: 50px 10px 78px;
}
body.iso-v1 .iso-feature-media img {
width: 78%;
}
body.iso-v1 .iso-catalog-side {
grid-template-columns: repeat(2,minmax(0,1fr));
min-height: 0;
}
body.iso-v1 .iso-product-tile {
min-height: 230px;
}
body.iso-v1 .iso-all-products-card {
min-height: 230px;
}
body.iso-v1 .iso-product-tile-media {
height: 148px;
}
body.iso-v1 .iso-product-tile-media img {
width: 110px;
height: 140px;
}
body.iso-v1 .iso-all-products-media img {
width: 100%;
}
body.iso-v1 .iso-index-grid {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-index-item {
padding: 20px 0;
margin: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.iso-v1 .iso-index-item + .iso-index-item {
padding: 20px 0;
margin: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.iso-v1 .iso-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.iso-v1 .iso-coa-section-v5 {
padding: 70px 0;
}
body.iso-v1 .iso-faq-section-v5 {
padding: 70px 0;
}
body.iso-v1 .iso-coa-doc {
padding: 15px;
}
body.iso-v1 .iso-coa-doc-title h3 {
font-size: 16px;
}
body.iso-v1 .iso-coa-metrics {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.iso-v1 .iso-coa-metric:nth-child(2) {
border-right: 0;
}
body.iso-v1 .iso-coa-metric:nth-child(-n+2) {
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-faq-row {
grid-template-columns: 28px 1fr 26px;
}
body.iso-v1 .iso-faq-question {
font-size: 10px;
}
body.iso-v1 .iso-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px 24px;
}
body.iso-v1 .iso-footer-bottom {
flex-direction: column;
}
body.iso-v1 .iso-catalog-section .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-index-section .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-coa-section-v5 .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-faq-section-v5 .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-footer-v5 .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-hero-visual-col {
min-height: 365px !important;
}
body.iso-v1 .iso-hero-visual-col > .col-inner {
min-height: 365px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-hero-visual-col > .col-inner::before {
width: 104vw !important;
height: 76px !important;
bottom: 19px !important;
}
body.iso-v1 .iso-hero-visual-col > .col-inner::after {
display: none;
}
body.iso-v1 .iso-trust-section .section-content {
width: calc(100% - 28px);
}
body.iso-v1 .iso-trust-row {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-trust-row > .col {
grid-column: auto;
}
body.iso-v1 .iso-trust-row > .col:last-child {
grid-column: auto;
}
body.iso-v1 .iso-trust-row > .col .iso-trust-item {
border-right: 0;
border-bottom: 1px solid var(--iso-line);
padding: 16px 17px;
}
body.iso-v1 .iso-trust-row > .col:nth-child(odd) .iso-trust-item {
border-right: 0;
border-bottom: 1px solid var(--iso-line);
padding: 16px 17px;
}
body.iso-v1 .iso-trust-row > .col:last-child .iso-trust-item {
border-right: 0;
border-bottom: 0;
padding: 16px 17px;
}
body.iso-v1 .iso-index-row {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-index-row > .col .iso-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.iso-v1 .iso-index-row > .col:nth-child(n+3) .iso-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.iso-v1 .iso-footer-grid-v5 > .col:first-child {
flex-basis: 100% !important;
max-width: 100% !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-title {
font-size: 2.55rem !important;
line-height: .94 !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-lead {
font-size: 11.5px !important;
line-height: 1.7 !important;
margin: 18px 0 0 !important;
}
body.iso-v1 .iso-hero-copy-v5 .button.iso-btn-v4 {
display: flex !important;
width: 100% !important;
margin-right: 0 !important;
}
body.iso-v1 .iso-hero-grid-v5 > .iso-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.iso-v1 .iso-hero-grid-v5 > .iso-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.iso-v1 .iso-hero-copy-v5 > .col-inner > .ux-text {
order: 3 !important;
margin-top: 26px !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > .button {
width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
margin: 0 0 9px 0 !important;
}
body.iso-v1 .iso-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.iso-v1 .iso-hero-copy-v5 > .col-inner > .button:first-of-type {
order: 1 !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > a.button:first-of-type {
order: 1 !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > .button:nth-of-type(2) {
order: 2 !important;
}
body.iso-v1 .iso-hero-copy-v5 > .col-inner > a.button:nth-of-type(2) {
order: 2 !important;
}
body.iso-v1 .iso-hero-v5 .iso-kicker {
margin-bottom: 12px !important;
}
body.iso-v1 .iso-page-hero .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-page-section .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-page-section-dark .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-page-section-soft .section-content > .row {
width: calc(100% - 28px) !important;
}
body.iso-v1 .iso-page-hero {
padding: 46px 0 42px !important;
}
body.iso-v1 .iso-page-title {
font-size: 2.15rem;
}
body.iso-v1 .iso-principle-grid {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-paygrid {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-storage-grid {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-contact-grid {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-chain-step {
grid-template-columns: 42px 1fr;
gap: 12px;
}
body.iso-v1 .iso-coa-thead {
display: none;
}
body.iso-v1 .iso-datatable-head {
display: none;
}
body.iso-v1 .iso-coa-trow {
grid-template-columns: 1fr;
gap: 8px;
padding: 18px;
}
body.iso-v1 .iso-datatable-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 18px;
}
body.iso-v1 .iso-coa-trow span {
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
align-items: baseline;
}
body.iso-v1 .iso-datatable-row span {
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
align-items: baseline;
}
body.iso-v1 .iso-coa-trow span::before {
content: attr(data-label);
color: var(--iso-muted-2);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1 .iso-datatable-row span::before {
content: attr(data-label);
color: var(--iso-muted-2);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1 .iso-form {
grid-template-columns: 1fr;
}
body.iso-v1 .iso-form-wrap {
padding: 22px 20px 26px;
}
body.iso-v1 .iso-form-submit {
width: 100%;
justify-self: stretch;
}
body.iso-v1 .iso-cta-band {
padding: 26px 22px;
}
}
@media (max-width: 549px) {
body.iso-v1.woocommerce .product-small .box-text-products {
padding: 14px 13px 16px !important;
}
body.iso-v1.woocommerce .product-small .product-title {
font-size: 12px;
}
body.iso-v1.woocommerce .badge-container {
top: 9px;
left: 9px;
}
body.iso-v1.woocommerce .badge-inner {
padding: 6px 8px;
font-size: 10px;
}
/* V1.34: hier standen 94px. Der Mengenwaehler braucht 132px
(40 + 50 + 40 plus Rahmen), und weil .quantity overflow:hidden
traegt, wurde exakt das Plus abgeschnitten - 38px zu wenig.
max-content misst das Bauteil, statt eine Zahl zu raten. */
body.iso-v1.single-product form.cart {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
}
body.iso-v1.single-product form.cart .single_add_to_cart_button {
width: 100%;
min-width: 0;
}
body.iso-v1.single-product .woocommerce-tabs {
padding-top: 26px;
padding-bottom: 48px;
}
body.iso-v1.single-product .woocommerce-Tabs-panel {
font-size: 12.5px;
}
body.iso-v1.single-product .panel.entry-content {
font-size: 12.5px;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table {
display: block;
overflow-x: auto;
border-radius: 12px;
}
body.iso-v1.single-product .panel.entry-content table {
display: block;
overflow-x: auto;
border-radius: 12px;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table th {
min-width: 135px;
padding: 11px 12px;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table td {
min-width: 135px;
padding: 11px 12px;
}
body.iso-v1.single-product .panel.entry-content table th {
min-width: 135px;
padding: 11px 12px;
}
body.iso-v1.single-product .panel.entry-content table td {
min-width: 135px;
padding: 11px 12px;
}
body.iso-v1.woocommerce-checkout .woocommerce {
padding-top: 28px;
padding-bottom: 54px;
}
body.iso-v1.woocommerce-checkout .woocommerce-billing-fields {
padding: 18px;
border-radius: 13px;
}
body.iso-v1.woocommerce-checkout .woocommerce-shipping-fields {
padding: 18px;
border-radius: 13px;
}
body.iso-v1.woocommerce-checkout .woocommerce-additional-fields {
padding: 18px;
border-radius: 13px;
}
body.iso-v1.woocommerce-checkout #order_review {
padding: 18px;
border-radius: 13px;
}
}
@media (max-width: 420px) {
body.iso-v1 .iso-hero-visual-col {
height: 300px !important;
}
body.iso-v1 .iso-hero-visual-col > .col-inner {
height: 300px !important;
min-height: 300px !important;
}
body.iso-v1 .iso-hero-keyvisual-image {
height: 300px !important;
min-height: 300px !important;
}
body.iso-v1 .iso-hero-keyvisual-image .img-inner {
height: 300px !important;
min-height: 300px !important;
}
body.iso-v1 .iso-hero-keyvisual-image img {
object-position: 79% center !important;
}
body.iso-v1 .iso-hero-grid-v5 > .iso-hero-visual-col {
height: 300px !important;
min-height: 300px !important;
}
body.iso-v1 .iso-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.iso-v1 a.iso-header-logo-v53 {
text-decoration: none;
transition: opacity var(--iso-dur) var(--iso-ease);
}
body.iso-v1 a.iso-header-logo-v53:hover { opacity: .82; }
body.iso-v1 a.iso-header-logo-v53:hover span { color: var(--iso-mint); }
body.iso-v1 a.iso-header-logo-v53:focus-visible {
outline: 2px solid var(--iso-mint);
outline-offset: 6px;
border-radius: 6px;
}
/* Schnellansicht und Wunschliste auf den Produktkacheln. */
body.iso-v1 .image-tools .quick-view,
body.iso-v1 a.quick-view,
body.iso-v1 .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(--iso-font);
font-size: var(--iso-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(--iso-dur) var(--iso-ease),
border-color var(--iso-dur) var(--iso-ease),
color var(--iso-dur) var(--iso-ease);
}
body.iso-v1 .image-tools .quick-view:hover,
body.iso-v1 a.quick-view:hover,
body.iso-v1 .button.quick-view:hover {
background: var(--iso-mint);
border-color: var(--iso-mint);
color: var(--iso-ink);
}
body.iso-v1 .image-tools {
border-radius: 999px;
box-shadow: none;
}
body.iso-v1 .wishlist-icon .wishlist-button,
body.iso-v1 .wishlist-button {
border-radius: 999px;
background: rgba(11,17,16,.82);
backdrop-filter: blur(10px);
color: #fff;
box-shadow: none;
}
body.iso-v1 .wishlist-button:hover { color: var(--iso-mint); }
/* Bewertungssterne: Flatsome faerbt sie sonst im Primaerton. */
body.iso-v1 .star-rating span::before,
body.iso-v1 .stars a::before { color: var(--iso-mint-dark); }
/* Blaettern im Produktarchiv. */
body.iso-v1 .page-numbers li a,
body.iso-v1 .page-numbers li span {
min-width: 40px;
height: 40px;
line-height: 38px;
border: 1px solid var(--iso-line);
border-radius: 12px;
background: #fff;
color: var(--iso-text);
font-size: var(--iso-fs-small);
font-weight: 800;
transition: border-color var(--iso-dur) var(--iso-ease),
color var(--iso-dur) var(--iso-ease);
}
body.iso-v1 .page-numbers li a:hover { border-color: var(--iso-mint); color: var(--iso-mint-dark); }
body.iso-v1 .page-numbers li span.current,
body.iso-v1 .page-numbers li .current {
border-color: var(--iso-ink);
background: var(--iso-ink);
color: #fff;
}
/* Formularelemente: Checkboxen und Radios im Checkout waren Browser-Blau. */
body.iso-v1 { accent-color: var(--iso-mint-dark); caret-color: var(--iso-mint-dark); }
/* Scrollbalken. Gehoert genauso zum Design wie der Rest. */
body.iso-v1 { scrollbar-color: var(--iso-line-2) transparent; scrollbar-width: thin; }
body.iso-v1 ::-webkit-scrollbar { width: 11px; height: 11px; }
body.iso-v1 ::-webkit-scrollbar-track { background: transparent; }
body.iso-v1 ::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: 999px;
background-clip: content-box;
background-color: var(--iso-line-2);
}
body.iso-v1 ::-webkit-scrollbar-thumb:hover { background-color: var(--iso-muted-2); }
/* Links im Fliesstext: Unterlaenge nicht durchschneiden. */
body.iso-v1 .iso-legal a,
body.iso-v1 .iso-copy a,
body.iso-v1 .iso-section-text a,
body.iso-v1 .woocommerce-product-details__short-description a {
color: var(--iso-mint-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: color-mix(in srgb, var(--iso-mint-dark) 45%, transparent);
transition: text-decoration-color var(--iso-dur) var(--iso-ease);
}
body.iso-v1 .iso-legal a:hover,
body.iso-v1 .iso-copy a:hover,
body.iso-v1 .iso-section-text a:hover {
text-decoration-color: var(--iso-mint-dark);
}
/* Chargen, Reinheitswerte und Preise sind Messwerte, keine Fliesstext-Zahlen. */
body.iso-v1 .iso-coa-trow,
body.iso-v1 .iso-coa-doc-head,
body.iso-v1 .iso-coa-metric strong,
body.iso-v1 .iso-product-pill,
body.iso-v1 .iso-card-price,
body.iso-v1 .iso-card-price-small,
body.iso-v1 .woocommerce-Price-amount {
font-family: var(--iso-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.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image {
overflow: hidden;
border-radius: var(--iso-radius-sm);
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img {
transition: transform 420ms var(--iso-ease);
}
body.iso-v1.woocommerce .product-small:hover .box-image img,
body.iso-v1.woocommerce-page .product-small:hover .box-image img {
transform: scale(1.035);
}
}
/* -- 07 BILDRAHMEN (iso_figure) ------------------------------------------
Passend zu den neuen Keyvisuals: dunkler Rahmen, Mint-Kantenlicht,
feines Korn statt flacher Bildkachel. ------------------------------ */
body.iso-v1 .iso-figure-frame {
isolation: isolate;
border-color: color-mix(in srgb, var(--iso-ink) 12%, transparent);
background: var(--iso-ink);
box-shadow: 0 24px 60px rgba(8,17,15,.14), 0 2px 6px rgba(8,17,15,.06);
}
body.iso-v1 .iso-figure--dark .iso-figure-frame {
border-color: color-mix(in srgb, var(--iso-mint) 16%, transparent);
}
body.iso-v1 .iso-figure-frame picture { display: block; height: 100%; }
body.iso-v1 .iso-figure-frame img {
transition: transform 520ms var(--iso-ease), filter 520ms var(--iso-ease);
}
/* Kantenlicht: eine duenne Mint-Linie oben links, wie ein Streiflicht.
Kein Farbverlauf ueber das ganze Bild, nur die Kante. */
body.iso-v1 .iso-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(--iso-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.iso-v1 .iso-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.iso-v1 .iso-figure-frame:hover img {
transform: scale(1.028);
filter: saturate(1.06);
}
}
/* Zusaetzliche Seitenverhaeltnisse fuer die neuen Formate. */
body.iso-v1 .iso-figure--1-1 .iso-figure-frame { aspect-ratio: 1 / 1; }
body.iso-v1 .iso-figure--4-5 .iso-figure-frame { aspect-ratio: 4 / 5; }
body.iso-v1 .iso-figure--21-9 .iso-figure-frame { aspect-ratio: 21 / 9; }
body.iso-v1 .iso-figure figcaption {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--iso-font-mono);
}
body.iso-v1 .iso-figure figcaption::before {
content: '';
width: 14px;
height: 1px;
background: var(--iso-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.iso-v1 .iso-trust-section {
background: linear-gradient(180deg, #061114 0%, #08110f 100%) !important;
border-top: 1px solid color-mix(in srgb, var(--iso-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.iso-v1 .iso-trust-section .row,
body.iso-v1 .iso-trust-section .col,
body.iso-v1 .iso-trust-section .col-inner,
body.iso-v1 .iso-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.iso-v1 .iso-trust-row {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
width: min(calc(100% - (var(--iso-gutter) * 2)), var(--iso-container)) !important;
max-width: var(--iso-container) !important;
margin: 0 auto !important;
background: transparent !important;
border: 0 !important;
overflow: visible;
}
body.iso-v1 .iso-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.iso-v1 .iso-trust-item + .iso-trust-item::before {
content: '';
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 30px;
background: rgba(255,255,255,.11);
}
body.iso-v1 .iso-trust-item + .iso-trust-item { padding-left: 26px !important; }
body.iso-v1 .iso-trust-icon {
width: 22px;
height: 22px;
display: block;
color: var(--iso-mint);
}
body.iso-v1 .iso-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.iso-v1 .iso-trust-copy strong {
display: block;
margin-bottom: 5px;
color: #fff;
font-size: var(--iso-fs-micro);
font-weight: 700;
line-height: 1.2;
letter-spacing: .085em;
text-transform: uppercase;
}
body.iso-v1 .iso-trust-copy span {
display: block;
color: rgba(255,255,255,.56);
font-size: var(--iso-fs-micro);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
}
@media (max-width: 1023px) {
body.iso-v1 .iso-trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.iso-v1 .iso-trust-item { padding: 20px 18px 20px 0 !important; }
body.iso-v1 .iso-trust-item + .iso-trust-item { padding-left: 18px !important; }
/* Waagerechte Trenner zwischen den Reihen, senkrechte nur mittig. */
body.iso-v1 .iso-trust-item::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: rgba(255,255,255,.08);
}
body.iso-v1 .iso-trust-item:nth-child(odd) + .iso-trust-item::before { height: 26px; }
body.iso-v1 .iso-trust-item:nth-child(even) + .iso-trust-item::before { display: none; }
body.iso-v1 .iso-trust-item:nth-child(even) { padding-left: 18px !important; }
body.iso-v1 .iso-trust-item:last-child {
grid-column: 1 / -1;
padding-left: 0 !important;
}
body.iso-v1 .iso-trust-item:last-child::after { display: none; }
}
@media (max-width: 560px) {
body.iso-v1 .iso-trust-row { grid-template-columns: 1fr; }
body.iso-v1 .iso-trust-item,
body.iso-v1 .iso-trust-item + .iso-trust-item { padding: 17px 0 !important; }
body.iso-v1 .iso-trust-item + .iso-trust-item::before { display: none; }
}
/* -- 06 A11Y / PRINT ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body.iso-v1 *,
body.iso-v1 *::before,
body.iso-v1 *::after {
animation-duration: .01ms;
animation-iteration-count: 1;
transition-duration: .01ms;
scroll-behavior: auto;
}
body.iso-v1 *:hover { transform: none; }
}
@media print {
body.iso-v1 .iso-header-micro-v53,
body.iso-v1 .iso-site-header-v53,
body.iso-v1 .iso-bound-header,
body.iso-v1 .iso-footer-v5,
body.iso-v1 .iso-nav-panel-v53 { display: none; }
body.iso-v1 .iso-page-hero,
body.iso-v1 .iso-page-section,
body.iso-v1 .iso-page-section-soft { padding: 12px 0; background: #fff; color: #000; }
body.iso-v1 .iso-legal { border: 0; padding: 0; }
body.iso-v1 .iso-legal-aside { position: static; }
body.iso-v1 a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}
/* ==========================================================================
NACHGEZOGEN AUS AMINOLABSPRO V5.6.3 - V5.6.6
Die hochgeladene Design-CSS war Stand V5.6.2. Die Ebenen fuer
Buttons, Hinweisbox, FAQ-Umschalter, Banding, Mengenwaehler,
Bewertungsformular und COA-Tabelle fehlten darin. Hier auf Isolite
umgestellt nachgezogen - Sektion 14 und 15 gewinnen darueber.
========================================================================== */
/* -- 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.iso-v1 .iso-btn-v4,
body.iso-v1 .button.iso-btn-v4,
body.iso-v1 a.button.iso-btn-v4,
body.iso-v1.iso-page-v53 .button.iso-btn-v4,
body.iso-v1.iso-page-v53 a.button.iso-btn-v4 {
min-height: var(--iso-btn-h) !important;
padding: 0 22px !important;
border: 1px solid var(--iso-ink) !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-ink) !important;
background-image: none !important;
box-shadow: none !important;
color: #fff;
font-size: var(--iso-fs-micro);
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
transition: background-color 150ms var(--iso-ease),
border-color 150ms var(--iso-ease),
color 150ms var(--iso-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.iso-v1 .iso-btn-v4:hover,
body.iso-v1 .button.iso-btn-v4:hover,
body.iso-v1.iso-page-v53 .button.iso-btn-v4:hover {
transform: none;
filter: none;
background: var(--iso-mint-dark) !important;
border-color: var(--iso-mint-dark) !important;
box-shadow: none !important;
color: #fff;
}
body.iso-v1 .iso-btn-v4:active,
body.iso-v1 .button.iso-btn-v4:active {
background: var(--iso-ink) !important;
border-color: var(--iso-ink) !important;
}
/* Sekundaer: reine Kontur, gleiche Geometrie. */
body.iso-v1 .iso-btn-v4.iso-btn-outline,
body.iso-v1 .button.iso-btn-v4.iso-btn-outline,
body.iso-v1 a.button.iso-btn-v4.iso-btn-outline,
body.iso-v1.iso-page-v53 .button.iso-btn-v4.iso-btn-outline,
body.iso-v1.iso-page-v53 a.button.iso-btn-v4.iso-btn-outline {
border-color: color-mix(in srgb, var(--iso-ink) 26%, transparent) !important;
background: transparent !important;
backdrop-filter: none;
box-shadow: none !important;
color: var(--iso-ink);
}
body.iso-v1 .iso-btn-v4.iso-btn-outline:hover,
body.iso-v1 .button.iso-btn-v4.iso-btn-outline:hover,
body.iso-v1.iso-page-v53 .button.iso-btn-v4.iso-btn-outline:hover {
border-color: var(--iso-ink) !important;
background: transparent !important;
color: var(--iso-ink);
}
/* Auf dunklem Grund kehrt sich das Paar um. */
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4,
body.iso-v1 .iso-hero-v5 a.button.iso-btn-v4,
body.iso-v1 .iso-index-section .button.iso-btn-v4,
body.iso-v1 .iso-page-section-dark .button.iso-btn-v4 {
border-color: var(--iso-mint) !important;
background: var(--iso-mint) !important;
color: var(--iso-ink);
}
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4:hover,
body.iso-v1 .iso-index-section .button.iso-btn-v4:hover,
body.iso-v1 .iso-page-section-dark .button.iso-btn-v4:hover {
background: #fff !important;
border-color: #fff !important;
color: var(--iso-ink);
}
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4.iso-btn-outline,
body.iso-v1 .iso-hero-v5 a.button.iso-btn-v4.iso-btn-outline,
body.iso-v1 .iso-page-section-dark .button.iso-btn-v4.iso-btn-outline {
border-color: rgba(255,255,255,.32) !important;
background: transparent !important;
color: #fff;
}
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4.iso-btn-outline:hover,
body.iso-v1 .iso-page-section-dark .button.iso-btn-v4.iso-btn-outline:hover {
border-color: #fff !important;
color: #fff;
}
/* Alle uebrigen runden Flaechen auf dasselbe Mass ziehen. */
body.iso-v1 .iso-round-link,
body.iso-v1 .iso-coa-open,
body.iso-v1 .iso-form-submit,
body.iso-v1.woocommerce .button,
body.iso-v1.woocommerce-page .button,
body.iso-v1.woocommerce-checkout #place_order,
body.iso-v1 .image-tools .quick-view,
body.iso-v1 a.quick-view,
body.iso-v1 .button.quick-view,
body.iso-v1 .image-tools,
body.iso-v1 .wishlist-button {
border-radius: var(--iso-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.iso-v1 .iso-notice {
position: relative;
max-width: 78ch;
margin-inline: auto;
padding: 26px 28px 28px !important;
border: 1px solid color-mix(in srgb, var(--iso-ink) 14%, transparent) !important;
border-left-width: 1px !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-surface) !important;
}
body.iso-v1 .iso-notice strong {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 12px !important;
color: var(--iso-mint-dark);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
/* Kleines Quadrat statt Randbalken. Traegt die Farbe, ohne die
ganze Box einzufaerben. */
body.iso-v1 .iso-notice strong::before {
content: '';
width: 7px;
height: 7px;
flex: none;
background: var(--iso-mint);
}
body.iso-v1 .iso-notice p {
margin: 0 !important;
color: var(--iso-text);
font-size: var(--iso-fs-small);
line-height: 1.68;
text-wrap: pretty;
}
body.iso-v1 .iso-page-section-dark .iso-notice {
border-color: rgba(255,255,255,.16) !important;
background: rgba(255,255,255,.035) !important;
}
body.iso-v1 .iso-page-section-dark .iso-notice p { color: rgba(255,255,255,.76); }
body.iso-v1 .iso-page-section-dark .iso-notice strong { color: var(--iso-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.iso-v1 .iso-page-section > .section-content > .row,
body.iso-v1 .iso-page-section-soft > .section-content > .row,
body.iso-v1 .iso-page-section-dark > .section-content > .row {
margin-left: auto !important;
margin-right: auto !important;
}
body.iso-v1 .iso-page-section .col,
body.iso-v1 .iso-page-section-soft .col,
body.iso-v1 .iso-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
.iso-faq-section-v5 * auf font-family: var(--iso-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.iso-v1 .iso-faq-section-v5 .accordion-title,
body.iso-v1.iso-page-v53 .accordion-title {
position: relative;
}
/* Flatsomes eigenes Icon abschalten. Geklickt wird der Titel selbst. */
body.iso-v1 .iso-faq-section-v5 .accordion-title .toggle,
body.iso-v1.iso-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.iso-v1 .iso-faq-section-v5 .accordion-title::before,
body.iso-v1.iso-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(--iso-btn-radius) !important;
background: transparent !important;
font-size: 0 !important;
transition: border-color 150ms var(--iso-ease);
}
body.iso-v1.iso-page-v53 .accordion-title::before {
border-color: color-mix(in srgb, var(--iso-ink) 18%, transparent) !important;
}
/* Plus und Minus als zwei Balken. Der senkrechte faehrt beim
Oeffnen auf null zusammen - eine Bewegung, kein Zeichenwechsel. */
body.iso-v1 .iso-faq-section-v5 .accordion-title::after,
body.iso-v1.iso-page-v53 .accordion-title::after {
content: '';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background:
linear-gradient(var(--iso-mint) 0 0) center / 10px 1.5px no-repeat,
linear-gradient(var(--iso-mint) 0 0) center / 1.5px 10px no-repeat;
transition: background-size 180ms var(--iso-ease);
}
body.iso-v1 .iso-faq-section-v5 .accordion-title.active::after,
body.iso-v1.iso-page-v53 .accordion-title.active::after {
background:
linear-gradient(var(--iso-mint) 0 0) center / 10px 1.5px no-repeat,
linear-gradient(var(--iso-mint) 0 0) center / 1.5px 0 no-repeat;
}
body.iso-v1 .iso-faq-section-v5 .accordion-title:hover::before,
body.iso-v1.iso-page-v53 .accordion-title:hover::before {
border-color: var(--iso-mint) !important;
}
/* Fragen und Antworten standen auf 11px, also am unteren Anschlag.
Eine Frage ist eine Ueberschrift, keine Fussnote. */
body.iso-v1 .iso-faq-section-v5 .accordion-title {
padding-right: 46px !important;
font-size: var(--iso-fs-small);
line-height: 1.4;
}
body.iso-v1 .iso-faq-section-v5 .accordion-inner {
padding-right: 46px !important;
font-size: var(--iso-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.iso-v1 .iso-faq-section-v5,
body.iso-v1 .iso-index-section,
body.iso-v1 .iso-page-section-dark { position: relative; }
body.iso-v1 .iso-faq-section-v5::after,
body.iso-v1 .iso-index-section::after,
body.iso-v1 .iso-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.iso-v1 .iso-faq-section-v5 > .section-content,
body.iso-v1 .iso-index-section > .section-content,
body.iso-v1 .iso-page-section-dark > .section-content {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
body.iso-v1 .iso-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.iso-v1.woocommerce .quantity,
body.iso-v1.woocommerce-page .quantity,
body.iso-v1.single-product form.cart .quantity {
display: inline-flex !important;
align-items: stretch;
height: var(--iso-btn-h);
margin: 0 !important;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: var(--iso-btn-radius);
background: #fff;
}
body.iso-v1 .quantity .minus,
body.iso-v1 .quantity .plus,
body.iso-v1 .quantity input.minus,
body.iso-v1 .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(--iso-muted) !important;
font-family: var(--iso-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(--iso-ease), color 140ms var(--iso-ease);
}
body.iso-v1 .quantity .minus:hover,
body.iso-v1 .quantity .plus:hover {
background: var(--iso-surface-2) !important;
color: var(--iso-ink) !important;
}
body.iso-v1 .quantity .minus:focus-visible,
body.iso-v1 .quantity .plus:focus-visible { outline-offset: -2px; }
body.iso-v1 .quantity .qty,
body.iso-v1 .quantity input[type="number"],
body.iso-v1.single-product form.cart .quantity .qty,
body.iso-v1.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(--iso-line) !important;
border-right: 1px solid var(--iso-line) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--iso-ink) !important;
font-family: var(--iso-font-mono);
font-size: 13px !important;
font-weight: 500 !important;
text-align: center;
}
/* Die nativen Zaehlpfeile weg - der Waehler hat eigene. */
body.iso-v1 .quantity input[type="number"] { -moz-appearance: textfield; }
body.iso-v1 .quantity input[type="number"]::-webkit-outer-spin-button,
body.iso-v1 .quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* --- Kaufbutton: traegt allein die Farbe --- */
body.iso-v1.single-product form.cart .button,
body.iso-v1.single-product .single_add_to_cart_button,
body.iso-v1.woocommerce .product-small .add-to-cart-button .button,
body.iso-v1.woocommerce-page .product-small .add-to-cart-button .button,
body.iso-v1.woocommerce .button.alt,
body.iso-v1.woocommerce-page .button.alt,
body.iso-v1 .checkout-button,
body.iso-v1.woocommerce-checkout #place_order {
min-height: var(--iso-btn-h) !important;
padding: 0 26px !important;
border: 1px solid var(--iso-ink) !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-ink) !important;
background-image: none !important;
box-shadow: none !important;
color: #fff !important;
font-family: var(--iso-font);
font-size: var(--iso-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em;
text-transform: uppercase;
transition: background-color 150ms var(--iso-ease),
border-color 150ms var(--iso-ease);
}
body.iso-v1.single-product form.cart .button:hover,
body.iso-v1.single-product .single_add_to_cart_button:hover,
body.iso-v1.woocommerce .product-small .add-to-cart-button .button:hover,
body.iso-v1.woocommerce-page .product-small .add-to-cart-button .button:hover,
body.iso-v1.woocommerce .button.alt:hover,
body.iso-v1 .checkout-button:hover,
body.iso-v1.woocommerce-checkout #place_order:hover {
transform: none !important;
background: var(--iso-mint-dark) !important;
border-color: var(--iso-mint-dark) !important;
box-shadow: none !important;
color: #fff !important;
}
/* Ausverkauft und deaktiviert lesbar halten, ohne Mint. */
body.iso-v1.woocommerce .button.disabled,
body.iso-v1.woocommerce button.disabled,
body.iso-v1.woocommerce .button:disabled {
border-color: var(--iso-line) !important;
background: var(--iso-surface-2) !important;
color: var(--iso-muted) !important;
opacity: 1 !important;
}
body.iso-v1.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.iso-v1 #review_form_wrapper,
body.iso-v1 #review_form,
body.iso-v1 #respond {
margin-top: 22px;
padding: 28px 30px 30px !important;
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-radius-sm) !important;
background: var(--iso-surface) !important;
box-shadow: none !important;
}
body.iso-v1 #reply-title,
body.iso-v1 .comment-reply-title {
display: block;
margin: 0 0 20px !important;
color: var(--iso-ink);
font-family: var(--iso-font-display);
font-size: var(--iso-fs-h3);
font-weight: 700;
line-height: 1.25;
letter-spacing: -.015em;
}
body.iso-v1 .comment-form label,
body.iso-v1 #respond label {
display: block;
margin-bottom: 7px;
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1 .comment-form .required { color: var(--iso-mint-dark); }
body.iso-v1 #respond textarea,
body.iso-v1 #respond input[type="text"],
body.iso-v1 #respond input[type="email"] {
width: 100%;
padding: 12px 14px !important;
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-btn-radius) !important;
background: #fff !important;
box-shadow: none !important;
color: var(--iso-ink);
font-family: var(--iso-font);
font-size: var(--iso-fs-small);
line-height: 1.6;
transition: border-color 150ms var(--iso-ease);
}
body.iso-v1 #respond textarea { min-height: 132px; resize: vertical; }
body.iso-v1 #respond textarea:focus,
body.iso-v1 #respond input:focus { border-color: var(--iso-mint) !important; }
/* Sternwahl: Flatsome legt fuenf gestaffelte Sterngruppen nebeneinander,
die wie ein Rendering-Fehler aussehen. Auf eine Reihe reduziert. */
body.iso-v1 #respond .stars {
display: inline-flex;
gap: 2px;
margin: 0 0 20px !important;
}
body.iso-v1 #respond .stars a {
position: relative;
width: 26px;
height: 26px;
border: 0 !important;
color: var(--iso-line-2);
text-indent: 0;
transition: color 120ms var(--iso-ease);
}
body.iso-v1 #respond .stars a::before,
body.iso-v1 #respond .stars a::after { color: inherit; }
body.iso-v1 #respond .stars:hover a,
body.iso-v1 #respond .stars a.active,
body.iso-v1 #respond .stars a.active ~ a { color: var(--iso-mint-dark); }
body.iso-v1 #respond .stars a:hover ~ a { color: var(--iso-line-2); }
body.iso-v1 #respond #submit,
body.iso-v1 #respond input[type="submit"],
body.iso-v1 #review_form #submit {
min-height: var(--iso-btn-h) !important;
padding: 0 26px !important;
border: 1px solid var(--iso-ink) !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-ink) !important;
background-image: none !important;
box-shadow: none !important;
color: #fff !important;
font-family: var(--iso-font);
font-size: var(--iso-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em;
text-transform: uppercase;
transition: background-color 150ms var(--iso-ease), border-color 150ms var(--iso-ease);
}
body.iso-v1 #respond #submit:hover,
body.iso-v1 #review_form #submit:hover {
background: var(--iso-mint-dark) !important;
border-color: var(--iso-mint-dark) !important;
}
/* "Noch keine Bewertungen" trug dasselbe Admin-Meldungs-Muster wie
die Hinweisbox: Mintfuellung plus dicker Balken links. */
body.iso-v1.woocommerce .woocommerce-info,
body.iso-v1.woocommerce-page .woocommerce-info,
body.iso-v1 .woocommerce-noreviews {
padding: 15px 18px !important;
border: 1px solid var(--iso-line) !important;
border-left-width: 1px !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-surface) !important;
color: var(--iso-muted) !important;
font-size: var(--iso-fs-small);
}
body.iso-v1 .woocommerce-info::before,
body.iso-v1 .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.iso-v1 .iso-coa-trow { font-family: var(--iso-font); }
body.iso-v1 .iso-coa-cell-id,
body.iso-v1 .iso-coa-cell-value {
font-family: var(--iso-font-mono);
font-variant-numeric: tabular-nums lining-nums;
}
body.iso-v1 .iso-coa-cell-product a {
color: var(--iso-ink);
font-size: var(--iso-fs-small);
font-weight: 600;
letter-spacing: -.005em;
text-decoration: none;
}
body.iso-v1 .iso-coa-cell-product a:hover { color: var(--iso-mint-dark); }
body.iso-v1 .iso-coa-cell-product small {
display: block;
margin-top: 3px;
color: var(--iso-muted-2);
font-family: var(--iso-font);
font-size: var(--iso-fs-micro);
letter-spacing: 0;
}
body.iso-v1 .iso-coa-cell-value { color: var(--iso-ink); font-weight: 600; }
body.iso-v1 .iso-coa-na { color: var(--iso-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.iso-v1 .iso-coa-thead {
position: sticky;
top: 0;
z-index: 3;
background: var(--iso-surface-2);
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1.admin-bar .iso-coa-thead { top: 32px; }
/* Zeilenstatus als schmale Kante links statt als Farbe im Text. */
body.iso-v1 .iso-coa-trow { position: relative; }
body.iso-v1 .iso-coa-trow::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: transparent;
transition: background-color 140ms var(--iso-ease);
}
body.iso-v1 .iso-coa-trow.is-documented:hover::before { background: var(--iso-mint); }
/* Dokumentlink als erkennbare Handlung, nicht als Fliesstext. */
body.iso-v1 .iso-coa-doclink {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-btn-radius);
background: #fff;
color: var(--iso-ink);
font-family: var(--iso-font);
font-size: var(--iso-fs-micro);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 140ms var(--iso-ease), color 140ms var(--iso-ease);
}
body.iso-v1 .iso-coa-doclink svg {
width: 15px; height: 15px; flex: none;
fill: none; stroke: var(--iso-mint-dark);
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
body.iso-v1 .iso-coa-doclink:hover {
border-color: var(--iso-mint);
color: var(--iso-mint-dark);
}
body.iso-v1 .iso-coa-request {
color: var(--iso-muted-2);
font-family: var(--iso-font);
font-size: var(--iso-fs-micro);
font-style: normal;
}
body.iso-v1 .iso-coa-verifylink {
display: inline-block;
margin-left: 10px;
color: var(--iso-muted);
font-size: var(--iso-fs-micro);
text-decoration: underline;
text-underline-offset: .18em;
}
body.iso-v1 .iso-coa-verifylink:hover { color: var(--iso-mint-dark); }
/* Suchfeld: gleiche Geometrie wie alles andere, mit Lupe. */
body.iso-v1 .iso-coa-search-field { position: relative; max-width: 420px; }
body.iso-v1 .iso-coa-search-icon {
position: absolute;
left: 13px; top: 50%;
transform: translateY(-50%);
width: 17px; height: 17px;
pointer-events: none;
fill: none; stroke: var(--iso-muted-2);
stroke-width: 1.5; stroke-linecap: round;
}
body.iso-v1 .iso-coa-filter input[type="search"] {
width: 100%;
height: var(--iso-btn-h);
padding: 0 14px 0 40px !important;
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-btn-radius) !important;
background: #fff !important;
box-shadow: none !important;
color: var(--iso-ink);
font-family: var(--iso-font);
font-size: var(--iso-fs-small);
transition: border-color 150ms var(--iso-ease);
}
body.iso-v1 .iso-coa-filter input[type="search"]:focus { border-color: var(--iso-mint) !important; }
body.iso-v1 .iso-coa-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; }
body.iso-v1 .iso-coa-filter label { flex-basis: 100%; }
body.iso-v1 .iso-coa-count {
margin: 0 0 2px !important;
color: var(--iso-muted-2);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .04em;
}
body.iso-v1 .iso-coa-count-num { color: var(--iso-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.iso-v1 .iso-coa-thead { display: none !important; }
body.iso-v1 .iso-coa-trow {
display: grid !important;
grid-template-columns: 1fr;
gap: 9px;
padding: 18px 16px !important;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
margin-bottom: 10px;
}
body.iso-v1 .iso-coa-trow > span[data-label] {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
align-items: baseline;
gap: 12px;
}
body.iso-v1 .iso-coa-trow > span[data-label]::before {
content: attr(data-label);
color: var(--iso-muted-2);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-trow > .iso-coa-cell-product { grid-template-columns: 1fr; }
body.iso-v1 .iso-coa-trow > .iso-coa-cell-product::before { display: none; }
body.iso-v1 .iso-coa-search-field { max-width: none; }
}
/* ==========================================================================
14 ISOLITE — HELLE MARKENFUEHRUNG
Das Vorgaengertheme war dunkel gebaut. Isolite ist es nicht.
Der Grund ist kein Geschmack: die Produktrenderings stehen auf
#F7F7F9. Setzt man den Hero auf denselben Wert, verschwindet die
Kante um den Freisteller vollstaendig - das Vial steht dann in der
Seite statt auf einer Kachel. Auf dunklem Grund waere jedes
Produktbild ein heller Kasten.
Navy bleibt Struktur- und Schriftfarbe, Blau ist Akzent, dunkel
sind nur noch Research-Index und Footer.
========================================================================== */
/* ---------- Hero: hell, nahtlos zum Freisteller ---------- */
body.iso-v1 .iso-hero-v5 {
background: var(--iso-surface) !important;
background-image: none !important;
color: var(--iso-text);
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-hero-v5::before,
body.iso-v1 .iso-hero-v5::after { display: none !important; }
body.iso-v1 .iso-hero-title { color: var(--iso-navy); }
body.iso-v1 .iso-hero-lead { color: var(--iso-muted); }
body.iso-v1 .iso-hero-v5 .iso-kicker {
color: var(--iso-blue-text);
letter-spacing: var(--iso-track-wide);
}
/* Der Verlauf ueber dem Banner hat auf hellem Grund keine Aufgabe
mehr - er wuerde einen grauen Schleier ueber das Vial legen. */
@media (min-width: 1024px) {
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col::after,
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col::before { display: none !important; }
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col {
left: 50% !important;
background: var(--iso-surface) !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-banner-image img {
object-fit: contain !important;
object-position: center center !important;
padding: 0 clamp(12px, 3vw, 56px) !important;
}
}
/* ---------- Trustband: hell, mit Haarlinien statt Farbflaeche ---------- */
body.iso-v1 .iso-trust-section {
background: var(--iso-white) !important;
border-top: 1px solid var(--iso-line);
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1 .iso-trust-icon { color: var(--iso-blue-text); }
body.iso-v1 .iso-trust-copy strong { color: var(--iso-navy); }
body.iso-v1 .iso-trust-copy span { color: var(--iso-muted); }
body.iso-v1 .iso-trust-item + .iso-trust-item::before { background: var(--iso-line); }
@media (max-width: 1023px) {
body.iso-v1 .iso-trust-item::after { background: var(--iso-line); }
}
/* ---------- Kopfzeile: Navy statt Schwarz ---------- */
body.iso-v1 .iso-header-micro-v53 {
background: var(--iso-navy) !important;
border-bottom: 1px solid rgba(255,255,255,.08);
}
body.iso-v1 .iso-site-header-v53,
body.iso-v1 .iso-bound-header {
background: var(--iso-navy) !important;
border-bottom: 1px solid rgba(255,255,255,.08);
}
body.iso-v1 .iso-header-logo-v53 span { color: var(--iso-blue-cap); }
body.iso-v1 .iso-header-logo-v53 small {
color: rgba(255,255,255,.62);
letter-spacing: var(--iso-track-wide);
}
/* ---------- Dunkle Sektionen: Navy statt Gruen-Schwarz ---------- */
body.iso-v1 .iso-index-section,
body.iso-v1 .iso-page-section-dark {
background: linear-gradient(168deg, var(--iso-navy) 0%, var(--iso-navy-deep) 100%) !important;
}
body.iso-v1 .iso-footer-v5 {
background: var(--iso-navy-deep) !important;
}
body.iso-v1 .iso-index-section .iso-kicker,
body.iso-v1 .iso-page-section-dark .iso-kicker { color: var(--iso-blue-cap); }
/* ---------- FAQ auf hell umstellen ---------- */
body.iso-v1 .iso-faq-section-v5 {
background: var(--iso-surface) !important;
color: var(--iso-text);
}
body.iso-v1 .iso-faq-section-v5::after { display: none; }
body.iso-v1 .iso-faq-section-v5 .iso-section-title { color: var(--iso-navy); }
body.iso-v1 .iso-faq-section-v5 .accordion-title {
color: var(--iso-navy);
border-color: var(--iso-line);
}
body.iso-v1 .iso-faq-section-v5 .accordion-inner { color: var(--iso-muted); }
body.iso-v1 .iso-faq-section-v5 .accordion-title::before {
border-color: var(--iso-line-2) !important;
}
body.iso-v1 .iso-faq-section-v5 .accordion-title::after,
body.iso-v1.iso-page-v53 .accordion-title::after {
background:
linear-gradient(var(--iso-blue-text) 0 0) center / 10px 1.5px no-repeat,
linear-gradient(var(--iso-blue-text) 0 0) center / 1.5px 10px no-repeat;
}
body.iso-v1 .iso-faq-section-v5 .accordion-title.active::after {
background:
linear-gradient(var(--iso-blue-text) 0 0) center / 10px 1.5px no-repeat,
linear-gradient(var(--iso-blue-text) 0 0) center / 1.5px 0 no-repeat;
}
/* ---------- Produktkachel: der Freisteller braucht keine Kachel ---------- */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image {
background: var(--iso-surface);
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
}
/* ---------- Kontrastregel fuer das Akzentblau ----------
#4E9FCD erreicht auf Weiss nur 2,93:1. Es darf deshalb Flaechen,
Linien, Icons und grosse Schrift tragen, aber keinen Kleintext.
Fuer Text gilt --iso-blue-text (#1F6A94, 4,9:1). */
body.iso-v1 a:not(.button):not(.iso-btn-v4) { color: var(--iso-blue-text); }
body.iso-v1 .iso-legal a,
body.iso-v1 .iso-copy a,
body.iso-v1 .iso-section-text a {
color: var(--iso-blue-text);
text-decoration-color: color-mix(in srgb, var(--iso-blue-text) 45%, transparent);
}
body.iso-v1 .iso-coa-doclink svg { stroke: var(--iso-blue-text); }
body.iso-v1 ::selection { background: var(--iso-blue); color: #fff; }
/* ---------- Etikett-Signatur: weite Versalien unter der Marke ---------- */
body.iso-v1 .iso-kicker {
letter-spacing: var(--iso-track-wide);
font-weight: 600;
}
/* ==========================================================================
15 COA — DREI PRUEFARTEN
Neue Bausteine fuer die erweiterte Struktur.
========================================================================== */
/* ---------- Kopfzahlen ueber der Bibliothek ---------- */
body.iso-v1 .iso-coa-summary {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
body.iso-v1 .iso-coa-stat {
display: flex;
align-items: baseline;
gap: 8px;
padding: 12px 16px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
background: var(--iso-white);
}
body.iso-v1 .iso-coa-stat strong {
color: var(--iso-navy);
font-family: var(--iso-font-mono);
font-size: 20px;
font-weight: 600;
line-height: 1;
}
body.iso-v1 .iso-coa-stat span {
color: var(--iso-muted);
font-size: var(--iso-fs-micro);
letter-spacing: .04em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-stat.is-muted strong { color: var(--iso-muted-2); }
/* ---------- Tabelle: fuenf Spalten statt drei ---------- */
body.iso-v1 .iso-coa-thead,
body.iso-v1 .iso-coa-trow {
display: grid;
grid-template-columns: minmax(0,1.5fr) minmax(0,.7fr) repeat(3, minmax(0,1.1fr));
gap: 16px;
align-items: center;
}
body.iso-v1 .iso-coa-trow { padding: 16px 18px; border-bottom: 1px solid var(--iso-line); }
body.iso-v1 .iso-coa-trow.is-pending { background: var(--iso-surface); }
body.iso-v1 .iso-coa-trow.is-full::before { background: var(--iso-blue); }
body.iso-v1 .iso-coa-trow.is-partial::before{ background: var(--iso-blue-cap); }
body.iso-v1 .iso-coa-cell-test {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
body.iso-v1 .iso-coa-test-value {
color: var(--iso-navy);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-small);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
body.iso-v1 .iso-coa-test-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.iso-v1 .iso-coa-cell-test.is-missing .iso-coa-na {
color: var(--iso-muted-2);
font-size: var(--iso-fs-micro);
font-style: normal;
}
/* ---------- Der Pruefschluessel: das eigentliche Vertrauenselement ---------- */
body.iso-v1 .iso-coa-verifykey {
display: inline-block;
padding: 3px 7px;
border: 1px solid var(--iso-blue-line);
border-radius: 4px;
background: var(--iso-blue-soft);
color: var(--iso-blue-text);
font-family: var(--iso-font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .06em;
text-decoration: none;
transition: border-color var(--iso-dur) var(--iso-ease),
background-color var(--iso-dur) var(--iso-ease);
}
body.iso-v1 .iso-coa-verifykey:hover {
border-color: var(--iso-blue);
background: #fff;
}
body.iso-v1 .iso-coa-legend {
margin-top: 18px;
color: var(--iso-muted);
font-size: var(--iso-fs-small);
line-height: 1.65;
max-width: 76ch;
}
/* ---------- Produktseite: Prueflliste ---------- */
body.iso-v1 .iso-coa-testlist { list-style: none; margin: 14px 0 0; padding: 0; }
body.iso-v1 .iso-coa-testrow {
display: grid;
grid-template-columns: minmax(0,.9fr) minmax(0,1fr) auto;
gap: 12px;
align-items: center;
padding: 10px 0;
border-top: 1px solid var(--iso-line);
}
body.iso-v1 .iso-coa-test-label {
color: var(--iso-muted);
font-size: var(--iso-fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-test-result {
color: var(--iso-navy);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-small);
font-variant-numeric: tabular-nums;
}
body.iso-v1 .iso-coa-testrow.is-missing .iso-coa-test-result { color: var(--iso-muted-2); }
body.iso-v1 .iso-coa-test-actions { display: flex; gap: 8px; align-items: center; }
body.iso-v1 .iso-coa-verify-note {
margin: 14px 0 0;
color: var(--iso-muted);
font-size: var(--iso-fs-micro);
line-height: 1.6;
}
/* ---------- Fehlendes Zertifikat: offen benennen ---------- */
body.iso-v1 .iso-coa-pending {
border-style: dashed !important;
background: var(--iso-surface) !important;
}
body.iso-v1 .iso-coa-pending-label {
display: block;
margin-bottom: 8px;
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-pending p {
margin: 0;
color: var(--iso-muted);
font-size: var(--iso-fs-small);
line-height: 1.65;
}
/* ---------- Startseiten-Karte: Schluessel statt Fake-Kurve ---------- */
body.iso-v1 .iso-coa-doc-batch {
margin: 6px 0 0;
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
}
body.iso-v1 .iso-coa-metric.is-missing strong { color: var(--iso-muted-2); }
body.iso-v1 .iso-coa-keys { margin-top: 18px; }
body.iso-v1 .iso-coa-keys-label {
display: block;
margin-bottom: 8px;
color: var(--iso-muted);
font-size: var(--iso-fs-micro);
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-keys ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body.iso-v1 .iso-coa-keys li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: var(--iso-fs-micro);
color: var(--iso-muted);
}
body.iso-v1 .iso-coa-chart { display: none; }
@media (max-width: 900px) {
body.iso-v1 .iso-coa-thead { display: none !important; }
body.iso-v1 .iso-coa-trow {
grid-template-columns: 1fr;
gap: 10px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
margin-bottom: 10px;
}
body.iso-v1 .iso-coa-trow > span[data-label] {
display: grid;
grid-template-columns: 104px minmax(0,1fr);
align-items: baseline;
gap: 12px;
}
body.iso-v1 .iso-coa-trow > span[data-label]::before {
content: attr(data-label);
color: var(--iso-muted-2);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .05em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-trow > .iso-coa-cell-product { grid-template-columns: 1fr; }
body.iso-v1 .iso-coa-trow > .iso-coa-cell-product::before { display: none; }
body.iso-v1 .iso-coa-testrow { grid-template-columns: 1fr; gap: 6px; }
}
/* ==========================================================================
16 HERO-SLIDER
Drei Banner im Wechsel, nach links weich in die Heroflaeche
auslaufend. Crossfade per CSS-Keyframes, kein Slider-Skript.
========================================================================== */
body.iso-v1 .iso-hero-slider {
position: absolute !important;
/* Der Slider fuellt seine Spalte. Die Position regelt allein
.iso-hero-banner-col - sonst addieren sich zwei Versaetze. */
inset: 0;
overflow: hidden;
background: var(--iso-surface);
z-index: 1;
--active: 0;
}
body.iso-v1 .iso-hero-track { position: absolute; inset: 0; }
body.iso-v1 .iso-hero-slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
transform: scale(1.015);
transition: opacity 900ms var(--iso-ease), transform 7s linear;
will-change: opacity;
}
/* Aktives Bild: der Index wird per --active gesetzt.
Kein Rechnen mit nth-child, damit die Zahl der Slides offen bleibt. */
body.iso-v1 .iso-hero-slide { --shown: 0; }
body.iso-v1 .iso-hero-slider[style*="--active: 0"] .iso-hero-slide:nth-child(1),
body.iso-v1 .iso-hero-slider[style*="--active: 1"] .iso-hero-slide:nth-child(2),
body.iso-v1 .iso-hero-slider[style*="--active: 2"] .iso-hero-slide:nth-child(3),
body.iso-v1 .iso-hero-slider:not([style*="--active"]) .iso-hero-slide:nth-child(1) {
opacity: 1;
transform: scale(1);
}
body.iso-v1 .iso-hero-slide picture,
body.iso-v1 .iso-hero-slide img {
display: block;
width: 100%;
height: 100%;
/* Wird im UX Builder umgeschaltet: formatfuellend oder vollstaendig. */
object-fit: var(--iso-hero-fit, cover);
object-position: 62% center;
}
/* Der Verlauf: von der Heroflaeche links nach transparent rechts.
Er blendet in DIESELBE Farbe aus, auf der der Hero steht - deshalb
ist die Kante zur Textspalte nicht sichtbar. Bei einem dunklen
Verlauf auf hellem Grund waere sie es. */
body.iso-v1 .iso-hero-fade {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(90deg,
var(--iso-surface) 0%,
var(--iso-surface) 10%,
color-mix(in srgb, var(--iso-surface) 88%, transparent) 30%,
color-mix(in srgb, var(--iso-surface) 55%, transparent) 52%,
color-mix(in srgb, var(--iso-surface) 18%, transparent) 74%,
transparent 100%);
}
/* Zusaetzlich eine schmale Weichzeichnung an der Kante. Der Verlauf
allein laesst scharfe Bildkanten durchscheinen; der Blur nimmt
ihnen die Konturen, bevor die Deckung greift. */
body.iso-v1 .iso-hero-fade::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 34%;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 100%);
}
/* Punkte */
body.iso-v1 .iso-hero-dots {
position: absolute;
right: clamp(18px, 3vw, 40px);
bottom: clamp(18px, 3vw, 36px);
z-index: 3;
display: flex;
gap: 8px;
}
body.iso-v1 .iso-hero-dot {
width: 26px;
height: 3px;
padding: 10px 0;
border: 0;
background: none;
cursor: pointer;
position: relative;
}
body.iso-v1 .iso-hero-dot::before {
content: '';
position: absolute;
left: 0; right: 0; top: 50%;
height: 2px;
transform: translateY(-50%);
background: color-mix(in srgb, var(--iso-navy) 24%, transparent);
transition: background-color var(--iso-dur) var(--iso-ease);
}
body.iso-v1 .iso-hero-dot[aria-current="true"]::before { background: var(--iso-navy); }
body.iso-v1 .iso-hero-dot:hover::before { background: var(--iso-blue-text); }
body.iso-v1 .iso-hero-dot:focus-visible { outline: 2px solid var(--iso-focus); outline-offset: 2px; }
/* Kein Bild hinterlegt: der Hero bleibt eine ruhige Flaeche,
keine leere Box mit Rahmen. */
body.iso-v1 .iso-hero-slider.is-empty { background: var(--iso-surface); }
/* Mobil steht der Slider ueber dem Text, nicht dahinter.
Der Verlauf dreht sich deshalb nach unten. */
@media (max-width: 1023px) {
body.iso-v1 .iso-hero-slider {
position: relative !important;
inset: auto;
height: clamp(220px, 46vw, 360px);
margin: 0 calc(var(--iso-gutter) * -1);
}
body.iso-v1 .iso-hero-fade {
background: linear-gradient(180deg,
transparent 0%,
color-mix(in srgb, var(--iso-surface) 30%, transparent) 62%,
var(--iso-surface) 100%);
}
body.iso-v1 .iso-hero-fade::before { display: none; }
body.iso-v1 .iso-hero-slide img { object-position: center 42%; }
}
@media (prefers-reduced-motion: reduce) {
body.iso-v1 .iso-hero-slide { transition: none; transform: none; }
}
/* ---------- Fallbacks, wenn noch keine Bilder hinterlegt sind ---------- */
body.iso-v1 .iso-tile-placeholder {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
background:
repeating-linear-gradient(135deg,
var(--iso-surface) 0 10px,
var(--iso-surface-2) 10px 20px);
border-radius: var(--iso-radius-sm);
}
body.iso-v1 .iso-all-products-fan {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0;
height: 100%;
}
body.iso-v1 .iso-all-products-fan img {
width: 44%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(10,26,43,.10));
}
body.iso-v1 .iso-all-products-fan img:nth-child(1) { transform: rotate(-7deg) translateX(14%); z-index: 1; }
body.iso-v1 .iso-all-products-fan img:nth-child(2) { z-index: 3; }
body.iso-v1 .iso-all-products-fan img:nth-child(3) { transform: rotate(7deg) translateX(-14%); z-index: 2; }
/* ==========================================================================
17 KOPFZEILE — LESBARKEIT
BEFUND
1. Die Wortmarke stand als aminolabspro im UX-Block.
Beim Umbenennen des Themes wurde sie nicht erfasst, weil das
Wort durch die -Tags in drei Teile zerlegt ist: weder
"aminolabs" noch "aminolabspro" kommt darin als
zusammenhaengende Zeichenkette vor. Behoben in den beiden
Templates - der bereits gebaute UX-Block muss von Hand
nachgezogen werden, siehe LIESMICH.
2. Die Zeile unter der Wortmarke lief mit rgba(255,255,255,.42)
bei 10px. Das sind 4,03:1 gegen Navy, unter dem Mindestwert
von 4,5:1 fuer Kleintext. Jetzt .68 = 8,7:1.
3. Die Kopfzeile war halbtransparent mit 16px backdrop-blur. Auf
einer hellen Seite erzeugt das beim Scrollen einen milchigen
Streifen ueber dem Inhalt statt einer klaren Kante. Jetzt
deckend, mit einer duennen Linie statt eines weichen Schattens.
========================================================================== */
body.iso-v1 .iso-site-header-v53,
body.iso-v1 .iso-bound-header {
background: var(--iso-navy) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
/* Beim Scrollen eine praezise Kante statt eines Schleiers. */
body.iso-v1 .iso-bound-header.is-stuck,
body.iso-v1 .iso-site-header-v53.is-stuck {
box-shadow: 0 1px 0 rgba(10,26,43,.18), 0 6px 18px rgba(10,26,43,.10) !important;
}
/* Wortmarke: groesser, ruhiger, mit lesbarer Unterzeile. */
body.iso-v1 .iso-header-logo-v53 {
font-size: 21px;
font-weight: 800;
letter-spacing: -.025em;
}
body.iso-v1 .iso-header-logo-v53 span {
color: var(--iso-blue-cap);
font-weight: 400;
}
body.iso-v1 .iso-header-logo-v53 small {
margin-top: 5px !important;
color: rgba(255,255,255,.68);
font-size: var(--iso-fs-micro);
font-weight: 600;
letter-spacing: var(--iso-track-wide);
}
/* Navigation: heller und eine Spur groesser. 11px bei 72 Prozent
Weiss ist rechnerisch in Ordnung, wirkt in Versalien mit weiter
Laufweite aber duenner als es misst. */
body.iso-v1 .iso-nav-list-v53 > li > a {
color: rgba(255,255,255,.86);
font-size: var(--iso-fs-label);
font-weight: 600;
letter-spacing: .07em;
}
body.iso-v1 .iso-nav-list-v53 > li > a:hover,
body.iso-v1 .iso-nav-list-v53 > li.current-menu-item > a,
body.iso-v1 .iso-nav-list-v53 > li.current_page_item > a {
color: var(--iso-blue-cap);
}
/* Microbar */
body.iso-v1 .iso-header-micro-text {
color: rgba(255,255,255,.66);
font-size: var(--iso-fs-micro);
font-weight: 600;
letter-spacing: .1em;
}
body.iso-v1 .iso-header-micro-text strong { color: var(--iso-blue-cap); }
/* Footer-Wortmarke im gleichen Schnitt */
body.iso-v1 .iso-footer-brand span {
color: var(--iso-blue-cap);
font-weight: 400;
}
/* ==========================================================================
18 HERO IM HELLEN — BUTTONS UND TEXT
BEFUND
Die Regeln fuer Buttons auf dunklem Grund stammen aus dem
Vorgaengertheme und greifen weiterhin auf .iso-hero-v5. Dort war
der Hero dunkel. Bei Isolite ist er hell — der Sekundaerbutton
stand damit als WEISSE Schrift auf einer fast weissen Flaeche.
Das ist der unlesbare Banner.
Der Hero ist der einzige Ort, an dem sich die Helligkeit
umgedreht hat. Deshalb hier gezielt zurueckgedreht, statt die
allgemeinen Dunkel-Regeln anzufassen — die gelten fuer
Research-Index und dunkle Contentsektionen weiterhin.
========================================================================== */
/* Primaer: Tinte gefuellt, wie ueberall im Hellen. */
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4,
body.iso-v1 .iso-hero-v5 a.button.iso-btn-v4 {
border-color: var(--iso-navy) !important;
background: var(--iso-navy) !important;
color: #fff !important;
}
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4:hover,
body.iso-v1 .iso-hero-v5 a.button.iso-btn-v4:hover {
border-color: var(--iso-blue-text) !important;
background: var(--iso-blue-text) !important;
color: #fff !important;
}
/* Sekundaer: Kontur in Tinte statt weiss. */
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4.iso-btn-outline,
body.iso-v1 .iso-hero-v5 a.button.iso-btn-v4.iso-btn-outline {
border-color: color-mix(in srgb, var(--iso-navy) 28%, transparent) !important;
background: transparent !important;
color: var(--iso-navy) !important;
}
body.iso-v1 .iso-hero-v5 .button.iso-btn-v4.iso-btn-outline:hover,
body.iso-v1 .iso-hero-v5 a.button.iso-btn-v4.iso-btn-outline:hover {
border-color: var(--iso-navy) !important;
background: transparent !important;
color: var(--iso-navy) !important;
}
/* Sicherheitsnetz: alles, was im Hero noch aus der Dunkelzeit weiss
gesetzt wird, auf Tinte ziehen. */
body.iso-v1 .iso-hero-v5,
body.iso-v1 .iso-hero-v5 p,
body.iso-v1 .iso-hero-v5 h1,
body.iso-v1 .iso-hero-v5 h2,
body.iso-v1 .iso-hero-v5 li,
body.iso-v1 .iso-hero-v5 strong { color: var(--iso-text); }
body.iso-v1 .iso-hero-v5 .iso-hero-title { color: var(--iso-navy) !important; }
body.iso-v1 .iso-hero-v5 .iso-hero-lead { color: var(--iso-muted) !important; }
body.iso-v1 .iso-hero-v5 .iso-hero-proof li,
body.iso-v1 .iso-hero-v5 .iso-hero-proof span { color: var(--iso-muted) !important; }
body.iso-v1 .iso-hero-v5 .iso-hero-proof li::before { background: var(--iso-blue) !important; }
/* Flatsome setzt auf dark="true"-Sektionen eigene Textfarben.
Die Sektion ist im Template noch als dark markiert, damit der
Builder sie gleich behandelt — die Farbe kommt von hier. */
body.iso-v1 .iso-hero-v5.dark,
body.iso-v1 .iso-hero-v5.dark p,
body.iso-v1 .iso-hero-v5.dark h1 { color: var(--iso-text); }
/* ==========================================================================
19 MOBILER HERO — KORREKTUR
BEFUND
Die Bannerspalte traegt aus dem Vorgaengertheme mobil
aspect-ratio: 1/1 und ein absolut gesetztes .col-inner. Der
Slider stand darin als relatives Element mit eigener Hoehe und
negativem Seitenrand — er sass also in der oberen Haelfte eines
Quadrats und ragte seitlich heraus.
Dazu kam der Zuschnitt: die Banner sind 3:2 mit dem Motiv rechts
und bewusst leerer linker Haelfte. In einem hohen Ausschnitt mit
object-fit: cover zeigt der Mittelpunkt genau die Leerstelle —
das Bild wirkt dann nach rechts verschoben.
LOESUNG
Der Slider fuellt die Spalte vollstaendig, die Spalte bekommt ein
flacheres Seitenverhaeltnis, und das Bild laeuft auf contain
statt cover. Der Bildhintergrund ist exakt --iso-surface, also
entstehen keine sichtbaren Balken.
========================================================================== */
@media (max-width: 1023px) {
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col {
aspect-ratio: 3 / 2 !important;
max-height: 62vh !important;
background: var(--iso-surface) !important;
}
body.iso-v1 .iso-hero-slider {
position: absolute !important;
inset: 0 !important;
height: auto !important;
margin: 0 !important;
}
/* contain statt cover: das Motiv bleibt vollstaendig, nichts
verschiebt sich. Moeglich, weil der Bildhintergrund identisch
zur Flaeche ist. */
body.iso-v1 .iso-hero-slide img {
object-fit: contain !important;
object-position: center center !important;
padding: 0 clamp(8px, 4vw, 28px) !important;
}
/* Der seitliche Verlauf hat auf dem Handy keine Aufgabe mehr —
der Text steht darunter, nicht daneben. Nur eine weiche Kante
nach unten bleibt. */
body.iso-v1 .iso-hero-fade {
background: linear-gradient(180deg,
transparent 0%,
transparent 72%,
color-mix(in srgb, var(--iso-surface) 55%, transparent) 88%,
var(--iso-surface) 100%) !important;
}
body.iso-v1 .iso-hero-fade::before { display: none !important; }
body.iso-v1 .iso-hero-dots {
right: 50% !important;
transform: translateX(50%);
bottom: 10px !important;
}
}
/* ==========================================================================
20 HANDWERKSPRUEFUNG — BEFUNDE AUS DEM UI-AUDIT
Geprueft gegen die Web Interface Guidelines. Nur echte Maengel,
keine Geschmacksfragen.
========================================================================== */
/* BEFUND: --iso-muted-2 erreicht auf Weiss 3,49:1 und auf der
Flaeche 3,26:1. Fuer Text unter 18px sind 4,5:1 noetig. Der Ton
wird deshalb abgedunkelt — er bleibt sichtbar leichter als
--iso-muted, ist aber lesbar. */
:root { --iso-muted-2: #66727f; } /* 4,91:1 auf Weiss, 4,59:1 auf --iso-surface */
/* BEFUND: kein touch-action gesetzt. Ohne das wartet der Browser
auf einen moeglichen Doppeltipp und verzoegert jeden Klick um
rund 300ms. */
body.iso-v1 a,
body.iso-v1 button,
body.iso-v1 input[type="submit"],
body.iso-v1 .button,
body.iso-v1 [role="button"] {
touch-action: manipulation;
-webkit-tap-highlight-color: color-mix(in srgb, var(--iso-blue) 22%, transparent);
}
/* BEFUND: keine Beruecksichtigung von Notches. Volle Breiten
liefen unter die Statusleiste. */
@supports (padding: env(safe-area-inset-left)) {
body.iso-v1 .iso-header-micro-row-v53,
body.iso-v1 .iso-site-header-row-v53,
body.iso-v1 .iso-footer-grid-v5,
body.iso-v1 .iso-trust-row {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
body.iso-v1 .iso-footer-bottom-row { padding-bottom: env(safe-area-inset-bottom); }
}
/* BEFUND: Sprungziele lagen unter dem klebenden Header. */
body.iso-v1 :target,
body.iso-v1 h2[id],
body.iso-v1 h3[id] { scroll-margin-top: 120px; }
/* BEFUND: Tippziele unter 44px. Die COA-Verify-Codes waren als
10px-Pillen kaum zu treffen. */
@media (pointer: coarse) {
body.iso-v1 .iso-coa-verifykey,
body.iso-v1 .iso-coa-doclink,
body.iso-v1 .iso-hero-dot,
body.iso-v1 .iso-nav-list-v53 > li > a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
body.iso-v1 .iso-coa-verifykey { padding: 6px 10px; }
}
/* BEFUND: Zahlenspalten ohne Tabellenziffern springen beim
Filtern in der Breite. */
body.iso-v1 .iso-coa-table,
body.iso-v1 .iso-coa-testlist,
body.iso-v1 .woocommerce-Price-amount { font-variant-numeric: tabular-nums lining-nums; }
/* BEFUND: lange Produktnamen sprengten die Kachel, weil
Flex-Kinder ohne min-width nicht umbrechen. */
body.iso-v1 .iso-coa-cell-product,
body.iso-v1 .iso-product-tile-footer > div,
body.iso-v1 .iso-trust-copy { min-width: 0; }
body.iso-v1 .iso-coa-cell-product a,
body.iso-v1 .iso-product-tile-footer h3 { overflow-wrap: anywhere; }
/* BEFUND: der klebende Header konnte ein fokussiertes Element
verdecken. */
body.iso-v1 :focus-visible { scroll-margin-top: 120px; }
/* BEFUND: Farbe allein trug die Zustandsinformation in der
COA-Tabelle. Ein zusaetzlicher Strich links macht sie auch ohne
Farbwahrnehmung erkennbar. */
body.iso-v1 .iso-coa-trow.is-pending .iso-coa-na::before {
content: '';
display: inline-block;
width: 8px;
height: 1px;
margin-right: 6px;
vertical-align: middle;
background: currentColor;
}
/* Vollstaendige Darstellung: der Freisteller darf dann nicht am
rechten Rand kleben, sondern steht mittig im Bildfeld. */
body.iso-v1 .iso-hero-slider[style*="contain"] .iso-hero-slide img {
object-position: center center;
padding: 0 clamp(10px, 2.5vw, 44px);
}
/* ==========================================================================
21 STARTSEITE — KATALOGKACHELN
BEFUND 1: Die grosse Kachel lief in einem Gruenverlauf
(#073F35 → #0B2B27). Das ist ein Erbstueck aus dem Mint-Theme
und die einzige gruene Flaeche im ganzen Isolite-Auftritt.
BEFUND 2: Die Vials waren auf 132x158px begrenzt, die Kachel ist
aber ueber 250px hoch. Ein Freisteller in einer halb leeren
Kachel wirkt wie ein Platzhalter, nicht wie ein Produkt.
BEFUND 3: Alle drei Kacheln gleich gross und gleich gefuellt -
drei Vials nebeneinander ohne Groessenunterschied lesen sich als
Wiederholung, nicht als Auswahl.
========================================================================== */
/* Grosse Kachel: Navy statt Gruen, mit einem Hauch Blau als Tiefe. */
body.iso-v1 .iso-feature-card {
background:
radial-gradient(circle at 74% 30%, color-mix(in srgb, var(--iso-blue) 22%, transparent), transparent 42%),
linear-gradient(150deg, var(--iso-navy) 0%, var(--iso-navy-deep) 100%) !important;
border-color: color-mix(in srgb, var(--iso-navy) 18%, transparent);
}
body.iso-v1 .iso-feature-card::after {
background: radial-gradient(circle, color-mix(in srgb, var(--iso-blue) 26%, transparent), transparent 70%) !important;
}
/* Das Produktbild fuellt die Kachel jetzt aus. */
body.iso-v1 .iso-featured-media,
body.iso-v1 .iso-feature-card .iso-featured-media {
flex: 1 1 auto;
display: grid;
place-items: center;
min-height: 0;
}
body.iso-v1 .iso-feature-card img {
width: auto;
max-width: 82%;
max-height: 340px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 22px 30px rgba(5,16,28,.45));
}
/* Kleine Kacheln: Bild deutlich groesser, Kachel etwas hoeher. */
body.iso-v1 .iso-product-tile { min-height: 300px; }
body.iso-v1 .iso-product-tile-media {
height: auto;
min-height: 190px;
padding: 6px 0 2px;
}
body.iso-v1 .iso-product-tile-media img {
width: auto;
max-width: 78%;
height: auto;
max-height: 220px;
object-fit: contain;
filter: drop-shadow(0 16px 20px rgba(10,26,43,.14));
}
/* Alle Produkte: der Faecher aus drei echten Bildern braucht Platz. */
body.iso-v1 .iso-all-products-card { min-height: 300px; }
body.iso-v1 .iso-all-products-media { padding: 8px 0 2px; min-height: 190px; }
body.iso-v1 .iso-all-products-fan img {
width: 46%;
max-height: 200px;
}
/* Rhythmus statt Wiederholung: die mittlere Kachel etwas hoeher,
damit die Reihe eine Mitte bekommt. Nur am Desktop, mobil stehen
sie ohnehin untereinander. */
@media (min-width: 1024px) {
body.iso-v1 .iso-product-tile:nth-of-type(2) .iso-product-tile-media img {
max-height: 250px;
max-width: 84%;
}
}
@media (max-width: 1023px) {
body.iso-v1 .iso-product-tile,
body.iso-v1 .iso-all-products-card { min-height: 260px; }
body.iso-v1 .iso-product-tile-media img { max-height: 180px; max-width: 66%; }
body.iso-v1 .iso-feature-card img { max-height: 260px; }
}
/* ==========================================================================
22 FAQ — SEITENSPRUNG BEIM AUFKLAPPEN
Flatsomes Accordion-Titel ist ein . Ein Klick darauf
setzt die Adresse auf "#" und der Browser springt zum
Seitenanfang beziehungsweise an das Ziel. Das Aufklappen selbst
funktioniert, die Seite verrutscht nur.
Reines CSS reicht dagegen nicht - der Sprung passiert im Browser.
Die Korrektur sitzt deshalb in functions.php als kurzer
Klick-Halter. Hier nur die Vorbereitung: der Titel bekommt eine
eigene Scroll-Verankerung, damit beim Aufklappen darueber
liegender Inhalt die Position nicht verschiebt.
========================================================================== */
body.iso-v1 .iso-faq-section-v5 .accordion,
body.iso-v1.iso-page-v53 .accordion { overflow-anchor: none; }
body.iso-v1 .iso-faq-section-v5 .accordion-title,
body.iso-v1.iso-page-v53 .accordion-title { scroll-margin-top: 120px; }
/* ==========================================================================
24 CHECKOUT UND WARENKORB IN DER ISOLITE-CI
Der Checkout kam aus dem Mint-Theme. Farben, Rundungen und
Abstaende passten dort - hier stehen sie gegen Navy und Blau.
========================================================================== */
/* ---------- Formularfelder ---------- */
body.iso-v1.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.iso-v1.woocommerce-checkout .woocommerce form .form-row textarea,
body.iso-v1.woocommerce-checkout .woocommerce form .form-row select,
body.iso-v1.woocommerce-cart input.input-text,
body.iso-v1.woocommerce .select2-container--default .select2-selection--single {
min-height: var(--iso-btn-h) !important;
padding: 11px 14px !important;
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-btn-radius) !important;
background: #fff !important;
box-shadow: none !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font);
font-size: var(--iso-fs-small);
transition: border-color var(--iso-dur) var(--iso-ease);
}
body.iso-v1.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.iso-v1.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.iso-v1.woocommerce-checkout .woocommerce form .form-row select:focus {
border-color: var(--iso-blue) !important;
}
body.iso-v1.woocommerce-checkout .woocommerce form .form-row label {
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
}
body.iso-v1 .required { color: var(--iso-blue-text) !important; }
/* Native Auswahlfelder brauchen explizite Farben, sonst uebernimmt
Windows im dunklen Systemmodus eigene. */
body.iso-v1 select {
background-color: #fff;
color: var(--iso-navy);
}
/* ---------- Bestelluebersicht ---------- */
body.iso-v1 #order_review,
body.iso-v1 .woocommerce-checkout-review-order,
body.iso-v1 .cart_totals {
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-radius-sm) !important;
background: var(--iso-surface) !important;
box-shadow: none !important;
}
body.iso-v1 .woocommerce-checkout-review-order-table th,
body.iso-v1 .cart_totals th {
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
}
body.iso-v1 .woocommerce-checkout-review-order-table td,
body.iso-v1 .cart_totals td {
color: var(--iso-navy);
font-variant-numeric: tabular-nums lining-nums;
}
body.iso-v1 .woocommerce-checkout-review-order-table tfoot .order-total td,
body.iso-v1 .cart_totals .order-total td {
color: var(--iso-navy);
font-family: var(--iso-font-display);
font-size: var(--iso-fs-h3);
font-weight: 700;
}
/* ---------- Zahlarten ---------- */
body.iso-v1 #payment,
body.iso-v1 .woocommerce-checkout #payment {
border-radius: var(--iso-radius-sm) !important;
background: transparent !important;
}
body.iso-v1 #payment ul.payment_methods {
padding: 0 !important;
border: 0 !important;
display: grid;
gap: 8px;
}
body.iso-v1 #payment ul.payment_methods li {
padding: 14px 16px !important;
border: 1px solid var(--iso-line);
border-radius: var(--iso-btn-radius);
background: #fff;
transition: border-color var(--iso-dur) var(--iso-ease);
}
body.iso-v1 #payment ul.payment_methods li:has(input:checked) {
border-color: var(--iso-blue);
background: var(--iso-blue-soft);
}
body.iso-v1 #payment ul.payment_methods li label {
color: var(--iso-navy);
font-size: var(--iso-fs-small);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
body.iso-v1 #payment div.payment_box {
border-radius: var(--iso-radius-sm) !important;
background: var(--iso-surface) !important;
color: var(--iso-muted);
font-size: var(--iso-fs-small);
}
body.iso-v1 #payment div.payment_box::before {
border-bottom-color: var(--iso-surface) !important;
}
/* ---------- Warenkorbtabelle ---------- */
body.iso-v1 .woocommerce table.shop_table {
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-radius-sm) !important;
border-collapse: separate;
overflow: hidden;
}
body.iso-v1 .woocommerce table.shop_table th {
background: var(--iso-surface-2);
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
}
body.iso-v1 .woocommerce table.shop_table td { border-color: var(--iso-line); }
body.iso-v1 .woocommerce a.remove {
color: var(--iso-muted-2) !important;
font-weight: 400;
}
body.iso-v1 .woocommerce a.remove:hover {
background: transparent !important;
color: var(--iso-danger) !important;
}
/* ---------- Meldungen ---------- */
body.iso-v1.woocommerce .woocommerce-message,
body.iso-v1.woocommerce-page .woocommerce-message {
padding: 14px 18px !important;
border: 1px solid color-mix(in srgb, var(--iso-success) 35%, transparent) !important;
border-left-width: 1px !important;
border-radius: var(--iso-btn-radius) !important;
background: color-mix(in srgb, var(--iso-success) 7%, #fff) !important;
color: var(--iso-navy) !important;
font-size: var(--iso-fs-small);
}
body.iso-v1.woocommerce .woocommerce-error,
body.iso-v1.woocommerce-page .woocommerce-error {
padding: 14px 18px !important;
border: 1px solid color-mix(in srgb, var(--iso-danger) 35%, transparent) !important;
border-left-width: 1px !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-danger-soft) !important;
color: var(--iso-navy) !important;
list-style: none;
}
body.iso-v1 .woocommerce-message::before,
body.iso-v1 .woocommerce-error::before { display: none !important; }
/* ---------- Coupon und Mengen im Warenkorb ---------- */
body.iso-v1 .woocommerce .coupon input.input-text {
min-width: 180px;
}
body.iso-v1 .woocommerce-cart .quantity { height: 40px; }
/* ---------- Mobil ---------- */
@media (max-width: 767px) {
body.iso-v1.woocommerce-checkout .col2-set .col-1,
body.iso-v1.woocommerce-checkout .col2-set .col-2 {
width: 100% !important;
float: none !important;
padding: 0 !important;
}
body.iso-v1 #order_review { position: static !important; margin-top: 22px; }
body.iso-v1 .woocommerce table.shop_table_responsive tr td {
border-color: var(--iso-line) !important;
}
body.iso-v1 .woocommerce table.shop_table_responsive tr td::before {
color: var(--iso-muted-2);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .05em;
text-transform: uppercase;
}
/* Der Bestellbutton bleibt am unteren Rand erreichbar. */
body.iso-v1.woocommerce-checkout #place_order {
width: 100%;
position: sticky;
bottom: max(10px, env(safe-area-inset-bottom));
z-index: 5;
}
}
/* ==========================================================================
52 V1.30.0 — SCHNELLANSICHT UND PRUEFSCHLUESSEL
Die Schnellansicht nutzt denselben WooCommerce-Summary-Hook wie die
Produktseite. Die COA-Box wird serverseitig nicht mehr mitgeliefert. Die
CSS-Regel bleibt als Sicherheitsnetz fuer bereits gecachte AJAX-Antworten.
Der Schnellansicht-Knopf wird nur noch ueber seinen Wrapper positioniert,
damit er beim Laden nicht zur Angebotsplakette hochspringt.
========================================================================== */
body.iso-v1.woocommerce .product-small .box-image .image-tools,
body.iso-v1.woocommerce-page .product-small .box-image .image-tools,
body.iso-v1 .shop-container .product-small .box-image .image-tools {
position: absolute !important;
inset: auto 12px 12px 12px !important;
z-index: 4 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
}
body.iso-v1.woocommerce .product-small .box-image .image-tools .quick-view,
body.iso-v1.woocommerce-page .product-small .box-image .image-tools .quick-view,
body.iso-v1 .shop-container .product-small .box-image .image-tools .quick-view,
body.iso-v1.woocommerce .product-small .box-image .image-tools .quick-view-added,
body.iso-v1.woocommerce-page .product-small .box-image .image-tools .quick-view-added {
position: static !important;
inset: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
height: 34px !important;
margin: 0 !important;
padding: 0 14px !important;
transform: none !important;
white-space: nowrap !important;
}
/* Das Dialogfenster bleibt im Viewport. Nur sein Inhalt scrollt. */
body.iso-v1 .product-lightbox,
body.iso-v1 .product-quick-view-container {
width: min(960px, calc(100vw - 32px)) !important;
max-height: calc(100dvh - 32px) !important;
margin: 16px auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
border-radius: 12px !important;
background: #fff !important;
}
body.iso-v1 .product-lightbox .iso-coa-product-box,
body.iso-v1 .product-quick-view-container .iso-coa-product-box {
display: none !important;
}
/* Jede Zeile nutzt dieselben beiden Spalten. Alle Keys beginnen und enden
deshalb exakt an derselben Stelle, auf Desktop und Mobil. */
body.iso-v1 .iso-coa-keys ul {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body.iso-v1 .iso-coa-keys li {
display: grid !important;
grid-template-columns: minmax(92px, 1fr) 132px !important;
align-items: center !important;
column-gap: 16px !important;
width: 100% !important;
}
body.iso-v1 .iso-coa-keys li > span {
min-width: 0 !important;
}
body.iso-v1 .iso-coa-keys li .iso-coa-verifykey {
box-sizing: border-box !important;
width: 132px !important;
max-width: 132px !important;
justify-self: end !important;
text-align: center !important;
}
@media (max-width: 767px) {
body.iso-v1 .product-lightbox,
body.iso-v1 .product-quick-view-container {
width: calc(100vw - 16px) !important;
max-height: calc(100dvh - 16px) !important;
margin: 8px auto !important;
border-radius: 10px !important;
}
body.iso-v1 .iso-coa-keys li {
grid-template-columns: minmax(84px, 1fr) minmax(126px, 46%) !important;
column-gap: 10px !important;
}
body.iso-v1 .iso-coa-keys li .iso-coa-verifykey {
width: 100% !important;
max-width: 132px !important;
}
}
/* ---------- Logo im Kopf und Fuss ---------- */
body.iso-v1 .iso-header-logo-img {
display: block;
width: auto;
height: clamp(26px, 2.4vw, 34px);
max-width: 220px;
}
body.iso-v1 a.iso-header-logo-v53 {
display: inline-flex !important;
align-items: center;
line-height: 1;
}
body.iso-v1 .iso-footer-logo-img {
display: block;
width: auto;
height: 30px;
max-width: 200px;
}
body.iso-v1 .iso-footer-brand { margin-bottom: 16px !important; }
@media (max-width: 767px) {
body.iso-v1 .iso-header-logo-img { height: 24px; max-width: 165px; }
}
/* ==========================================================================
25 HERO-BANNER — DOPPELTE VERSCHIEBUNG
BEFUND
Der Slider stand auf inset: 0 0 0 44%. Gemeint war: er beginnt
bei 44 Prozent der Hero-Breite. Tatsaechlich sitzt er aber INNEN
in .iso-hero-banner-col, und die beginnt selbst schon bei 50
Prozent. Die 44 Prozent haben sich also auf die halbe Breite
bezogen - der Slider startete bei 72 Prozent und war nur noch
ein schmaler Streifen, in dem die Vials angeschnitten waren.
Das ist der Ausschnitt auf deinem Screenshot.
LOESUNG
Der Slider fuellt seine Spalte vollstaendig. Die Position regelt
allein die Spalte - eine Zustaendigkeit, nicht zwei.
========================================================================== */
@media (min-width: 1024px) {
/* Die Spalte beginnt frueher, damit das Motiv Luft bekommt.
Der Verlauf blendet ohnehin nach links aus - er darf ruhig
ueber einen Teil des Bildes laufen. */
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col {
left: 42% !important;
}
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 {
width: 46% !important;
max-width: 46% !important;
}
/* Formatfuellend, damit die Vials die Hoehe des Heros nutzen.
Der Bildhintergrund ist ohnehin die Heroflaeche. */
body.iso-v1 .iso-hero-slide img {
object-fit: var(--iso-hero-fit, cover);
object-position: 58% center;
}
/* Der Verlauf endet frueher, sonst liegt ein Schleier ueber dem
mittleren Vial. */
body.iso-v1 .iso-hero-fade {
background: linear-gradient(90deg,
var(--iso-surface) 0%,
var(--iso-surface) 8%,
color-mix(in srgb, var(--iso-surface) 82%, transparent) 24%,
color-mix(in srgb, var(--iso-surface) 40%, transparent) 44%,
transparent 66%) !important;
}
body.iso-v1 .iso-hero-fade::before { width: 26%; }
/* Der Hero darf hoeher werden - bei 640px stehen die Vials
gedraengt. */
body.iso-v1 .iso-hero-v5 .iso-hero-grid-v5,
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 {
min-height: clamp(640px, 74vh, 820px) !important;
}
}
/* Sehr breite Schirme: das Motiv nicht endlos mitwachsen lassen. */
@media (min-width: 1700px) {
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col { left: 46% !important; }
body.iso-v1 .iso-hero-slide img { object-position: 54% center; }
}
/* ==========================================================================
27 HERO NEU AUFGEBAUT — NACH DEM PEPWERK-MUSTER
WARUM NEU
Mein Aufbau hat den Slider absolut in die Sektion gesetzt und die
Position ueber Prozentwerte geregelt. Das kollidiert mit Flatsomes
Spaltenrechnung: die Sektion hat einen Container mit Seitenrand,
die Reihe eine Maximalbreite, die Spalte ein Padding. Ergebnis war
ein Bild, das im Container klebt und links wie rechts Luft hat.
Das Pepwerk-Muster loest das anders und robuster: der Slider ist
ein normales relatives Element, das seine Spalte fuellt. Die
Spalte macht die Breite, das Bild macht die Hoehe. Keine
Prozentrechnung, kein zweiter Versatz.
========================================================================== */
/* ---------- Sektion und Reihe randlos ---------- */
body.iso-v1 .iso-hero-v5 {
padding: 0 !important;
overflow: hidden;
}
body.iso-v1 .iso-hero-v5 > .row,
body.iso-v1 .iso-hero-grid-v5 {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1 .iso-hero-grid-v5 > .col {
padding: 0 !important;
margin: 0 !important;
}
/* ---------- Bildspalte ---------- */
body.iso-v1 .iso-hero-banner-col,
body.iso-v1 .iso-hero-banner-col > .col-inner {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
height: 100%;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
background: transparent !important;
aspect-ratio: auto !important;
}
body.iso-v1 .iso-hero-banner-col::before,
body.iso-v1 .iso-hero-banner-col::after { display: none !important; }
/* ---------- Slider fuellt die Spalte ---------- */
body.iso-v1 .iso-hero-slider {
position: relative !important;
inset: auto !important;
width: 100%;
height: 100%;
min-height: clamp(560px, 72vh, 780px);
overflow: hidden;
}
body.iso-v1 .iso-hero-track { position: absolute; inset: 0; }
body.iso-v1 .iso-hero-slide { position: absolute; inset: 0; }
body.iso-v1 .iso-hero-slide picture,
body.iso-v1 .iso-hero-slide img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
object-fit: contain;
object-position: center center;
padding: clamp(20px, 3vw, 56px) clamp(16px, 3vw, 48px) clamp(28px, 4vw, 64px);
}
/* ---------- Verlauf nach links, wie bei Pepwerk ---------- */
body.iso-v1 .iso-hero-fade {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
background: linear-gradient(90deg,
var(--iso-surface) 0%,
color-mix(in srgb, var(--iso-surface) 82%, transparent) 6%,
color-mix(in srgb, var(--iso-surface) 56%, transparent) 12%,
color-mix(in srgb, var(--iso-surface) 30%, transparent) 18%,
color-mix(in srgb, var(--iso-surface) 10%, transparent) 24%,
transparent 32%) !important;
}
body.iso-v1 .iso-hero-fade::before { display: none !important; }
/* ---------- Textspalte ---------- */
body.iso-v1 .iso-hero-copy-v5,
body.iso-v1 .iso-hero-copy-v5 > .col-inner {
position: relative;
z-index: 6;
padding: clamp(40px, 5vw, 76px) clamp(22px, 4vw, 64px) !important;
}
@media (min-width: 1024px) {
body.iso-v1 .iso-hero-grid-v5 {
display: flex !important;
align-items: stretch !important;
}
body.iso-v1 .iso-hero-copy-v5 {
flex: 0 0 46% !important;
width: 46% !important;
max-width: 46% !important;
display: flex;
align-items: center;
}
body.iso-v1 .iso-hero-banner-col {
flex: 1 1 54% !important;
width: 54% !important;
max-width: 54% !important;
}
}
/* ---------- Mobil: Bild oben, Text darunter ---------- */
@media (max-width: 1023px) {
body.iso-v1 .iso-hero-grid-v5 {
display: flex !important;
flex-direction: column !important;
}
body.iso-v1 .iso-hero-banner-col {
order: 1 !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3 !important;
}
body.iso-v1 .iso-hero-copy-v5 {
order: 2 !important;
width: 100% !important;
max-width: 100% !important;
}
body.iso-v1 .iso-hero-slider { min-height: 0; }
body.iso-v1 .iso-hero-fade {
background: linear-gradient(180deg,
transparent 0%,
transparent 76%,
color-mix(in srgb, var(--iso-surface) 45%, transparent) 90%,
var(--iso-surface) 100%) !important;
}
body.iso-v1 .iso-hero-slide img { padding: 18px 14px 22px; }
}
/* ==========================================================================
28 SHOP — PRODUKTBILDER AUF MASS
Die Freisteller sind 1100px hoch. Ohne feste Kachelhoehe fuellen
sie die Karte komplett aus und die Kacheln werden riesig.
Feste Bildhoehe wie bei Pepwerk, Bild darin auf contain.
========================================================================== */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
height: 260px !important;
overflow: hidden;
}
body.iso-v1.woocommerce .product-small .box-image .image-fade_in_back,
body.iso-v1.woocommerce .product-small .box-image .image-none,
body.iso-v1.woocommerce .product-small .box-image .image-zoom { height: 100% !important; }
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
width: 100% !important;
height: 100% !important;
padding: 18px !important;
box-sizing: border-box;
object-fit: contain !important;
}
/* Einzelproduktseite: Galerie nicht ins Endlose wachsen lassen */
/* (V1.9.1 entfernt: max-height und width:auto haben die
Flickity-Hoehenberechnung gestoert.) */
/* Startseitenkacheln zuruecknehmen — die Vials waren zu gross */
body.iso-v1 .iso-product-tile { min-height: 268px; }
body.iso-v1 .iso-product-tile-media { min-height: 158px; }
body.iso-v1 .iso-product-tile-media img { max-height: 168px; max-width: 62%; }
body.iso-v1 .iso-feature-card img { max-height: 280px; max-width: 64%; }
body.iso-v1 .iso-all-products-media { min-height: 158px; }
body.iso-v1 .iso-all-products-fan img { width: 38%; max-height: 150px; }
@media (min-width: 1024px) {
body.iso-v1 .iso-product-tile:nth-of-type(2) .iso-product-tile-media img {
max-height: 188px;
max-width: 68%;
}
}
@media (max-width: 549px) {
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image { height: 190px !important; }
body.iso-v1.woocommerce .product-small .box-image img { padding: 12px !important; }
body.iso-v1 .iso-product-tile-media img { max-height: 140px; }
}
/* ==========================================================================
30 PRODUKTBILDER — KEINE FREISTELLER MEHR
KEHRTWENDE, UND ZWAR BEWUSST
Die Freisteller haben mehr Probleme gemacht als geloest. Meine
Kontur war an einzelnen Stellen ungenau, und jeder Versuch, das
zu beheben, hat an anderer Stelle etwas aufgerissen.
Die Renderings brauchen gar keine Freistellung: sie stehen auf
#F7F7F9. Steht die Bildflaeche auf demselben Wert, ist die
Bildkante unsichtbar. Kein Alphakanal, keine Kontur, nichts, das
danebengehen kann.
Genau so macht es Pepwerk: .box-image auf #F8FAFB, Bild auf
contain mit Innenabstand. Die Trennung vom Weiss der Seite macht
die Kachel mit Rahmen und Schatten, nicht das Bild.
========================================================================== */
/* ---------- Bildflaeche exakt auf dem Renderhintergrund ---------- */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image,
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media,
body.iso-v1 .iso-figure-frame,
body.iso-v1.single-product .woocommerce-product-gallery__image {
background: var(--iso-surface) !important;
background-image: none !important;
}
/* Die Buehne entfaellt - sie lag hinter einem undurchsichtigen Bild
und war ohnehin nie sichtbar. */
body.iso-v1 .iso-product-tile-media::after,
body.iso-v1 .iso-all-products-media::after,
body.iso-v1 .iso-hero-slider::before,
body.iso-v1 .iso-hero-slider::after { display: none !important; }
body.iso-v1 .iso-product-tile-media img,
body.iso-v1 .iso-all-products-fan img,
body.iso-v1 .iso-hero-slide img,
body.iso-v1 .iso-figure-frame img,
body.iso-v1.woocommerce .product-small .box-image img { filter: none !important; }
/* Trennung macht die Kachel, nicht das Bild. */
body.iso-v1.woocommerce .product-small .col-inner,
body.iso-v1 .shop-container .product-small .col-inner {
background: #fff;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
overflow: hidden;
}
/* ---------- Produktseite: Bild mittig und vollstaendig ---------- */
/* BEFUND: die Produktgalerie war leer. Ursache waren genau diese
drei Eingriffe von mir:
- display:flex auf .slide -> Flatsome positioniert die Slides
absolut, ein Flex-Container kollabiert dann auf Hoehe 0
- height:auto auf .flickity-viewport -> Flickity setzt diese
Hoehe selbst per JavaScript; ueberschreibt man sie, faellt der
ganze Viewport auf 0
- height:auto auf dem Bild in einem 0 hohen Container
Der Slider bringt seine Groesse selbst mit. Er braucht von mir
nur eine Bildflaeche und einen Innenabstand, sonst nichts. */
body.iso-v1.single-product .woocommerce-product-gallery__image,
body.iso-v1.single-product .product-gallery-slider .slide {
background: var(--iso-surface);
}
body.iso-v1.single-product .woocommerce-product-gallery__image img,
body.iso-v1.single-product .product-gallery-slider img {
object-fit: contain;
padding: clamp(14px, 2.5vw, 34px);
background: var(--iso-surface);
}
/* ---------- Hero: Bild sitzt auf derselben Flaeche ---------- */
body.iso-v1 .iso-hero-slider { background: var(--iso-surface); }
body.iso-v1 .iso-hero-slide img {
object-fit: cover !important;
object-position: center center !important;
padding: 0 !important;
}
@media (max-width: 1023px) {
body.iso-v1 .iso-hero-slide img { object-position: 62% center !important; }
}
/* ==========================================================================
31 BEFUNDE AUS DEM BROWSER
Ab hier nicht mehr geraten: die Seite wird lokal gerendert und
die berechneten Werte werden ausgelesen. Was hier steht, hat der
Browser gemeldet.
========================================================================== */
/* BEFUND: .iso-hero-v5 .iso-kicker berechnet zu
rgba(255,255,255,.78) - Weiss auf der hellen Heroflaeche. Die
Regel stammt aus der Dunkelfassung und hat meine spaetere
ueberholt, weil sie mit .dark hoehere Spezifitaet hat. */
body.iso-v1 .iso-hero-v5 .iso-kicker,
body.iso-v1 .iso-hero-v5.dark .iso-kicker,
body.iso-v1 .iso-hero-copy-v5 .iso-kicker {
color: var(--iso-blue-text) !important;
}
body.iso-v1 .iso-hero-v5 .iso-kicker::before,
body.iso-v1 .iso-hero-copy-v5 .iso-kicker::before {
background: var(--iso-blue) !important;
}
/* BEFUND: das Hero-Bild misst 748x565 in einem 835x666 grossen
Slider - es fuellt seine Flaeche nicht. Ursache ist die
figure/picture-Verschachtelung: beide brauchen eine eigene
Groesse, height:100% allein greift dort nicht durch. */
body.iso-v1 .iso-hero-slide,
body.iso-v1 .iso-hero-slide picture {
position: absolute !important;
inset: 0 !important;
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
body.iso-v1 .iso-hero-slide img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* BEFUND: auf der dunklen Featured-Kachel steht ein
undurchsichtiges helles Bild - das sah aus wie ein aufgeklebter
Zettel. Da die Bilder jetzt bewusst nicht freigestellt sind,
bekommt es eine eigene helle Flaeche mit Radius. Absicht statt
Unfall. */
body.iso-v1 .iso-feature-card .iso-featured-media {
padding: 18px;
border-radius: var(--iso-radius-sm);
background: var(--iso-surface);
}
body.iso-v1 .iso-feature-card img {
border-radius: calc(var(--iso-radius-sm) - 4px);
}
/* BEFUND: die Kachelbilder standen mit 148px in einem 208px hohen
Feld - viel Luft, kleines Produkt. */
body.iso-v1 .iso-product-tile-media { min-height: 176px; padding: 10px 0 4px; }
body.iso-v1 .iso-product-tile-media img { max-height: 176px; max-width: 78%; }
/* BEFUND (mobil, gemessen): .iso-hero-slider hatte Hoehe 0.
Die Spalte bekommt ihre Hoehe aus aspect-ratio, und height:100%
loest sich gegen eine solche Hoehe nicht auf - das ist eine
bekannte Eigenheit, kein Tippfehler. Das Bild war deshalb 48px
hoch statt 260.
Loesung: die Spalte spannt den Raum auf, col-inner und Slider
liegen absolut darin. Damit haengt die Hoehe an keiner
Prozentkette mehr. */
@media (max-width: 1023px) {
body.iso-v1 .iso-hero-banner-col { position: relative !important; }
body.iso-v1 .iso-hero-banner-col > .col-inner {
position: absolute !important;
inset: 0 !important;
height: auto !important;
}
body.iso-v1 .iso-hero-slider {
position: absolute !important;
inset: 0 !important;
height: auto !important;
min-height: 0 !important;
}
/* BEFUND: die Textspalte hatte mobil padding 0 - die Ueberschrift
klebte am linken Rand. Die geerbte Regel aus der Dunkelfassung
hat eine Klasse mehr und gewinnt, obwohl meine spaeter steht. */
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5,
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 > .col-inner {
padding: 30px 22px 42px !important;
}
}
/* BEFUND (mobil, gemessen): auf .iso-hero-banner-col lag ein
::after mit linear-gradient(rgba(6,17,20,0) → rgb(6,17,20)) -
das Schwarzgruen des Vorgaengerthemes. Es hat die untere
Bildhaelfte abgedunkelt.
Mein frueheres display:none hat es nicht erwischt, weil die
geerbte Regel in einer Media Query mit hoeherer Spezifitaet
steht. Deshalb hier ueber dieselbe Verschachtelung. */
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col::after,
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col::before,
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col > .col-inner::after,
body.iso-v1 .iso-hero-v5 .iso-hero-banner-col > .col-inner::before {
content: none !important;
display: none !important;
background: none !important;
}
/* BEFUND: die Katalogkacheln sind als ganzes ein . Meine
Linkfarbe hat deshalb Produktname, Kategorie und Preis blau
eingefaerbt und unterstrichen - eine Kachel ist aber kein
Fliesstextlink. */
body.iso-v1 a.iso-product-tile,
body.iso-v1 a.iso-all-products-card,
body.iso-v1 a.iso-feature-card {
color: var(--iso-navy) !important;
text-decoration: none !important;
}
body.iso-v1 .iso-product-tile-footer h3,
body.iso-v1 .iso-all-products-card h3 {
color: var(--iso-navy) !important;
text-decoration: none !important;
}
body.iso-v1 .iso-product-tile-footer small,
body.iso-v1 .iso-all-products-card small {
color: var(--iso-muted) !important;
text-decoration: none !important;
}
body.iso-v1 .iso-card-price,
body.iso-v1 .iso-card-price-small {
color: var(--iso-navy) !important;
text-decoration: none !important;
}
body.iso-v1 .iso-feature-card h3,
body.iso-v1 .iso-feature-card small,
body.iso-v1 .iso-feature-card .iso-card-price { color: #fff !important; }
/* BEFUND: das Vial stand mit 155px in einem 230px hohen Feld. */
body.iso-v1 .iso-product-tile-media { min-height: 196px; }
body.iso-v1 .iso-product-tile-media img { max-height: 196px; max-width: 88%; }
body.iso-v1 .iso-all-products-media { min-height: 196px; }
/* BEFUND: der Faecher in "Alle Produkte" lief seitlich aus der
Kachel heraus - die Bilder waren am Rand angeschnitten. */
body.iso-v1 .iso-all-products-media { overflow: hidden; }
body.iso-v1 .iso-all-products-fan { gap: 0; width: 100%; }
body.iso-v1 .iso-all-products-fan img {
width: 30%;
max-height: 168px;
transform: none !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(1) { transform: rotate(-5deg) !important; }
body.iso-v1 .iso-all-products-fan img:nth-child(3) { transform: rotate(5deg) !important; }
/* BEFUND: der Pfeil auf der dunklen Featured-Kachel war dunkel auf
dunkel und praktisch unsichtbar. */
body.iso-v1 .iso-feature-card .iso-round-link {
border-color: rgba(255,255,255,.34) !important;
color: #fff !important;
}
/* BEFUND (Tablet und mobil, gemessen): .iso-coa-verifykey lief mit
9px - unter meiner eigenen Untergrenze von 10px. */
@media (max-width: 900px) {
body.iso-v1 .iso-coa-verifykey,
body.iso-v1 .iso-coa-cell-test::before { font-size: 10px; }
}
/* BEFUND (mobil): .iso-coa-test-links ragte aus dem Viewport.
Flex-Kinder ohne min-width brechen nicht um. */
body.iso-v1 .iso-coa-cell-test,
body.iso-v1 .iso-coa-test-links {
min-width: 0;
max-width: 100%;
flex-wrap: wrap;
}
body.iso-v1 .iso-coa-verifykey {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
32 COA-BOX IN SCHMALEN SPALTEN
BEFUND
Auf der Produktseite steht die Box in der Zusammenfassungsspalte -
auf dem Desktop rund 350px breit. Die dreispaltige Zeile
(Label / Wert / Aktionen) hat dort keinen Platz: die Werte
brechen mitten im Wort und laufen ueber das Label.
Eine Media Query hilft nicht, weil das Fenster breit ist und die
Spalte trotzdem schmal. Die Zeile muss sich am verfuegbaren Platz
orientieren, nicht am Viewport.
========================================================================== */
body.iso-v1 .iso-coa-product-box { container-type: inline-size; }
body.iso-v1 .iso-coa-testrow {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
grid-template-columns: none !important;
padding: 11px 0;
}
body.iso-v1 .iso-coa-test-label {
flex: 0 0 100%;
margin-bottom: 1px;
}
body.iso-v1 .iso-coa-test-result {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
body.iso-v1 .iso-coa-test-actions {
flex: 0 0 auto;
margin-left: auto;
}
/* Ist die Box breit genug, passt alles wieder in eine Zeile. */
@container (min-width: 560px) {
body.iso-v1 .iso-coa-test-label {
flex: 0 0 130px;
margin-bottom: 0;
}
}
/* Rueckfall fuer Browser ohne Container Queries: die gestapelte
Fassung ist dort dauerhaft aktiv - lesbar, nur etwas hoeher. */
@supports not (container-type: inline-size) {
body.iso-v1 .iso-coa-test-label { flex: 0 0 100%; }
}
body.iso-v1 .iso-coa-product-meta {
gap: 6px;
flex-wrap: wrap;
}
body.iso-v1 .iso-coa-product-meta span { white-space: nowrap; }
body.iso-v1 .iso-coa-doclink span { white-space: nowrap; }
/* ==========================================================================
33 SEITENKOPF — ABSTAENDE
BEFUND: der dunkle Kopf der Unterseiten war ueberhoch und der
Inhalt sass oben, weil Hoehe und Innenabstand aus dem
Vorgaengertheme stammen, wo dort ein Bild lag.
========================================================================== */
body.iso-v1 .iso-page-hero {
padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 84px) !important;
min-height: 0 !important;
}
body.iso-v1 .iso-page-hero-inner,
body.iso-v1 .iso-page-hero .col-inner { padding-bottom: 0 !important; }
body.iso-v1 .iso-page-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
body.iso-v1 .iso-page-hero-meta span {
padding: 7px 14px;
font-size: var(--iso-fs-micro);
line-height: 1.35;
white-space: normal;
overflow-wrap: anywhere;
}
/* Contentsektionen: gleichmaessiger Rhythmus statt der geerbten
Sprungwerte. */
body.iso-v1 .iso-page-section {
padding: clamp(44px, 5.5vw, 84px) 0 !important;
}
body.iso-v1 .iso-page-section + .iso-page-section { padding-top: 0 !important; }
/* ==========================================================================
34 COA-BIBLIOTHEK ALS GALERIE
Die Tabelle war korrekt und langweilig. Auf einer Seite, deren
einziger Zweck der Nachweis ist, sollte man die Nachweise auch
sehen - nicht Zahlen ueber sie lesen.
Jeder Bericht ist jetzt eine Karte mit dem echten Dokument als
Blatt. Der Rahmen macht die Anmutung, nicht das Bild: heller
Grund, feine Kante, eine schmale Akzentlinie oben, ein weicher
Schatten. Angelehnt an die Pepwerk-Galerie, in Isolite-Farben.
========================================================================== */
body.iso-v1 .iso-coa-wrap { max-width: var(--iso-container); margin: 0 auto; }
body.iso-v1 .iso-coa-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 26px;
}
body.iso-v1 .iso-coa-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
box-shadow: 0 12px 32px rgba(10, 26, 43, .055);
color: inherit !important;
text-decoration: none !important;
transition: transform 260ms var(--iso-ease),
border-color 260ms var(--iso-ease),
box-shadow 260ms var(--iso-ease);
}
/* Die Akzentlinie oben: laesst die Karte wie ein Dokument mit
Registerfarbe wirken statt wie eine Bildkachel. */
body.iso-v1 .iso-coa-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
z-index: 2;
height: 3px;
background: linear-gradient(90deg,
var(--iso-blue) 0%, var(--iso-blue-cap) 55%, transparent 100%);
}
/* ---------- Das Blatt ---------- */
body.iso-v1 .iso-coa-card-sheet {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1 / 1.28;
margin: 10px 10px 0;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
background: var(--iso-surface);
}
body.iso-v1 .iso-coa-card-sheet img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Oben ausrichten: dort stehen Labor, Produkt und Charge -
der Teil, an dem man den Bericht erkennt. */
object-position: top center;
transition: transform 420ms var(--iso-ease);
}
/* Weicher Auslauf nach unten, damit die angeschnittene Kante
nicht wie ein Fehler aussieht. */
body.iso-v1 .iso-coa-card-sheet::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 38%;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.92) 82%, #fff 100%);
}
@media (min-width: 1024px) and (hover: hover) {
body.iso-v1 .iso-coa-card:hover {
transform: translateY(-4px);
border-color: var(--iso-blue-line);
box-shadow: 0 22px 46px rgba(10, 26, 43, .11);
}
body.iso-v1 .iso-coa-card:hover .iso-coa-card-sheet img { transform: scale(1.03); }
}
/* ---------- Text unter dem Blatt ---------- */
body.iso-v1 .iso-coa-card-body {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1 1 auto;
padding: 14px 16px 16px;
}
/* Die Fusszeile sitzt unten, damit unterschiedlich lange
Ergebnisse die Karten nicht ungleich hoch machen. */
body.iso-v1 .iso-coa-card-foot { margin-top: auto; }
body.iso-v1 .iso-coa-card-test {
color: var(--iso-blue-text);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-card-product {
color: var(--iso-navy);
font-family: var(--iso-font-display);
font-size: var(--iso-fs-small);
font-weight: 700;
letter-spacing: -.01em;
overflow-wrap: anywhere;
}
body.iso-v1 .iso-coa-card-value {
margin-top: 4px;
color: var(--iso-navy);
font-family: var(--iso-font-mono);
font-size: 15px;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
body.iso-v1 .iso-coa-card-value.is-open {
color: var(--iso-muted-2);
font-size: var(--iso-fs-small);
}
body.iso-v1 .iso-coa-card-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--iso-line);
}
body.iso-v1 .iso-coa-card-batch {
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
}
body.iso-v1 .iso-coa-card-foot .iso-coa-verifykey { margin-left: auto; }
/* ---------- Offener Fall ---------- */
body.iso-v1 .iso-coa-card.is-pending {
background: var(--iso-surface);
box-shadow: none;
}
body.iso-v1 .iso-coa-card.is-pending::before {
background: color-mix(in srgb, var(--iso-navy) 12%, transparent);
}
body.iso-v1 .iso-coa-card-empty {
display: block;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(135deg,
transparent 0 9px,
color-mix(in srgb, var(--iso-navy) 5%, transparent) 9px 18px);
}
body.iso-v1 .iso-coa-card.is-pending .iso-coa-card-sheet { border-style: dashed; }
/* ---------- Kopfbereich ---------- */
body.iso-v1 .iso-coa-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-top: 22px;
}
body.iso-v1 .iso-coa-search-field {
position: relative;
flex: 1 1 320px;
min-width: 0;
}
body.iso-v1 .iso-coa-search-field input {
width: 100%;
min-height: var(--iso-btn-h);
padding: 11px 14px 11px 42px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-btn-radius);
background: #fff;
color: var(--iso-navy);
font-family: var(--iso-font);
font-size: var(--iso-fs-small);
}
body.iso-v1 .iso-coa-search-field input:focus {
outline: none;
border-color: var(--iso-blue);
}
body.iso-v1 .iso-coa-search-icon {
position: absolute;
left: 14px;
top: 50%;
width: 17px;
height: 17px;
transform: translateY(-50%);
fill: none;
stroke: var(--iso-muted-2);
stroke-width: 1.7;
stroke-linecap: round;
pointer-events: none;
}
body.iso-v1 .iso-coa-filter label {
flex: 0 0 100%;
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .07em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-count {
margin: 0;
color: var(--iso-muted);
font-size: var(--iso-fs-small);
white-space: nowrap;
}
body.iso-v1 .iso-coa-count-num {
color: var(--iso-navy);
font-family: var(--iso-font-mono);
font-weight: 600;
}
body.iso-v1 .iso-coa-empty-hint {
margin: 24px 0 0;
color: var(--iso-muted);
font-size: var(--iso-fs-small);
}
@media (max-width: 1023px) {
body.iso-v1 .iso-coa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 560px) {
body.iso-v1 .iso-coa-grid { gap: 10px; }
body.iso-v1 .iso-coa-card-sheet { margin: 7px 7px 0; }
body.iso-v1 .iso-coa-card-body { padding: 11px 12px 13px; }
body.iso-v1 .iso-coa-card-value { font-size: 13px; }
body.iso-v1 .iso-coa-card-foot { gap: 4px; }
body.iso-v1 .iso-coa-card-foot .iso-coa-verifykey { margin-left: 0; }
}
/* BEFUND (gemessen): .iso-coa-filter war 420px breit und
flex-direction column - Reste aus zwei aelteren Fassungen. Das
Suchfeld wurde dadurch 320px hoch, das Lupensymbol rutschte
darunter und die Trefferzahl stand allein in der Zeile. */
body.iso-v1 .iso-coa-filter {
flex-direction: row !important;
max-width: none !important;
width: 100%;
margin-bottom: 0 !important;
}
body.iso-v1 .iso-coa-search-field {
max-width: 520px !important;
height: auto !important;
}
body.iso-v1 .iso-coa-search-field input,
body.iso-v1 .iso-coa-filter input[type="search"] {
height: auto !important;
min-height: var(--iso-btn-h) !important;
padding: 11px 14px 11px 42px !important;
border-color: var(--iso-line) !important;
border-radius: var(--iso-btn-radius) !important;
}
body.iso-v1 .iso-coa-filter input[type="search"]:focus {
border-color: var(--iso-blue) !important;
}
body.iso-v1 .iso-coa-summary { margin-bottom: 0; }
/* Karten im Raster gleich hoch */
body.iso-v1 .iso-coa-grid { align-items: stretch; }
body.iso-v1 .iso-coa-card { height: 100%; }
/* Der offene Fall soll dieselbe Blatthoehe haben wie ein Bericht,
sonst reisst das Raster auf. */
body.iso-v1 .iso-coa-card.is-pending .iso-coa-card-sheet::after { display: none; }
/* ---------- Offene Chargen unter der Galerie ---------- */
body.iso-v1 .iso-coa-open {
margin-top: 34px;
padding: 20px 22px;
border: 1px dashed var(--iso-line-2);
border-radius: var(--iso-radius-sm);
background: var(--iso-surface);
}
body.iso-v1 .iso-coa-open-title {
margin: 0 0 12px;
color: var(--iso-muted);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
letter-spacing: .09em;
text-transform: uppercase;
}
body.iso-v1 .iso-coa-open-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 8px 22px;
margin: 0;
padding: 0;
list-style: none;
}
body.iso-v1 .iso-coa-open-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid var(--iso-line);
font-size: var(--iso-fs-small);
}
body.iso-v1 .iso-coa-open-list a {
color: var(--iso-navy) !important;
font-weight: 600;
text-decoration: none !important;
}
body.iso-v1 .iso-coa-open-list a:hover { color: var(--iso-blue-text) !important; }
body.iso-v1 .iso-coa-open-list span {
color: var(--iso-muted-2);
font-family: var(--iso-font-mono);
font-size: var(--iso-fs-micro);
}
body.iso-v1 .iso-coa-open-note {
margin: 14px 0 0;
color: var(--iso-muted);
font-size: var(--iso-fs-micro);
}
/* ==========================================================================
35 SHOP-ARCHIV — DAS RASTER STAND RECHTS
BEFUND AUS DEM SCREENSHOT
Die Produktkacheln belegen nur die rechte Haelfte, links steht
rund 40 Prozent leere Flaeche. Das ist keine CSS-Panne, sondern
Flatsomes Shop-Sidebar: sie ist eingeschaltet, aber leer. Die
Spalte wird trotzdem reserviert.
Sauber abstellen laesst sich das im Customizer:
Customizer > WooCommerce > Shop-Seite > Sidebar: aus
Bis das gesetzt ist, faengt die Regel unten den Fall ab: eine
Sidebar ohne Widgets wird ausgeblendet und die Produktspalte
nimmt die volle Breite.
========================================================================== */
body.iso-v1.woocommerce .shop-sidebar:not(:has(.widget)),
body.iso-v1.woocommerce-page #shop-sidebar:not(:has(.widget)),
body.iso-v1.woocommerce .sidebar-shop:not(:has(.widget)) {
display: none !important;
}
body.iso-v1.woocommerce .shop-container > .row > .large-9,
body.iso-v1.woocommerce-page .shop-container > .row > .large-9,
body.iso-v1.woocommerce .shop-container > .row > .col.large-9 {
flex-basis: 100% !important;
max-width: 100% !important;
}
/* Hat die Sidebar Widgets, bleibt sie - dann nur die Breite
vernuenftig setzen. */
body.iso-v1.woocommerce .shop-container > .row > .large-9:has(~ .shop-sidebar .widget) {
flex-basis: 75% !important;
max-width: 75% !important;
}
/* ==========================================================================
36 PRODUKTBILDER GROESSER
BEFUND: die Vials standen in allen Kacheln mit viel Luft. Auf der
Startseite rund 120px in einem 200px hohen Feld, im Shoparchiv
mit 18px Innenabstand in einem 260px hohen Feld. Ein Produkt,
das nur ein Drittel seiner Kachel fuellt, wirkt wie ein
Platzhalter.
========================================================================== */
/* ---------- Shoparchiv ---------- */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
height: 300px !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
padding: 6px !important;
}
/* ---------- Startseite: kleine Kacheln ---------- */
body.iso-v1 .iso-product-tile { min-height: 320px; }
body.iso-v1 .iso-product-tile-media {
min-height: 224px;
padding: 6px 0 0;
}
body.iso-v1 .iso-product-tile-media img {
max-height: 224px;
max-width: 96%;
}
/* ---------- Startseite: Alle Produkte ---------- */
body.iso-v1 .iso-all-products-card { min-height: 320px; }
body.iso-v1 .iso-all-products-media { min-height: 224px; padding: 6px 0 0; }
body.iso-v1 .iso-all-products-fan img { width: 34%; max-height: 208px; }
/* ---------- Featured-Kachel ----------
BEFUND aus dem gerenderten Aufbau: die Bildflaeche heisst
.iso-feature-media (nicht .iso-featured-media, wie ich zuvor
angenommen hatte) und ist absolut positioniert. Die Fusszeile
sitzt darunter, den Platz dafuer macht das Padding der Kachel.
Mein padding:0 hat genau diesen Platz entfernt - deshalb lag der
Text ueber dem Bild. Zurueckgenommen.
Das Vial sass ausserdem als kleines Quadrat mitten auf Navy. Es
fuellt seine Flaeche jetzt aus, mit dem Renderhintergrund als
Bildflaeche. */
body.iso-v1 .iso-feature-media {
background: var(--iso-surface) !important;
border-radius: var(--iso-radius-sm);
overflow: hidden;
}
body.iso-v1 .iso-feature-media img,
body.iso-v1 .iso-feature-card img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center;
border-radius: 0 !important;
filter: none !important;
}
@media (max-width: 549px) {
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image { height: 210px !important; }
body.iso-v1 .iso-product-tile,
body.iso-v1 .iso-all-products-card { min-height: 276px; }
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media { min-height: 186px; }
body.iso-v1 .iso-product-tile-media img { max-height: 186px; }
}
/* BEFUND: der Faecher lief seitlich aus der Kachel. Bei drei
Bildern zu je 34 Prozent plus Drehung passt das nicht. */
body.iso-v1 .iso-all-products-fan {
justify-content: center;
padding: 0 8px;
}
body.iso-v1 .iso-all-products-fan img {
width: 27%;
max-height: 196px;
}
body.iso-v1 .iso-all-products-fan img:nth-child(1) { transform: rotate(-6deg) translateX(9%) !important; }
body.iso-v1 .iso-all-products-fan img:nth-child(2) { transform: none !important; }
body.iso-v1 .iso-all-products-fan img:nth-child(3) { transform: rotate(6deg) translateX(-9%) !important; }
body.iso-v1 .iso-all-products-fan img:nth-child(n+4) { display: none; }
/* ==========================================================================
37 V1.12 — VERBINDLICHE LAYOUT- UND RESPONSIVE-KORREKTUREN
Dieser Abschlussblock ist absichtlich die letzte Ebene. Das Theme enthaelt
historische Flatsome-Korrekturen mit hoher Spezifitaet; hier werden nur die
im aktuellen Shop tatsaechlich benoetigten Zielwerte festgelegt.
========================================================================== */
/* ---------- Markenfuehrung, Kopf und Fuss ---------- */
body.iso-v1 .iso-header-logo-img {
width: auto !important;
height: 34px !important;
max-width: 190px !important;
object-fit: contain;
}
body.iso-v1 .iso-footer-logo-img {
width: auto !important;
height: 34px !important;
max-width: 178px !important;
object-fit: contain;
}
body.iso-v1 .iso-footer-brand {
min-height: 34px;
margin: 0 0 18px !important;
line-height: 1;
}
body.iso-v1 .iso-footer-v5 {
padding: 44px 0 22px !important;
}
body.iso-v1 .iso-footer-v5 .section-content > .row {
width: min(calc(100% - 48px), var(--iso-container)) !important;
}
body.iso-v1 .iso-footer-text {
max-width: 360px;
font-size: 13px !important;
line-height: 1.65;
}
body.iso-v1 .iso-footer-title {
margin-bottom: 14px !important;
color: var(--iso-blue-cap) !important;
font-size: 11px !important;
}
body.iso-v1 .iso-footer-link {
margin-bottom: 9px !important;
}
body.iso-v1 .iso-footer-link a {
color: rgba(255,255,255,.72) !important;
font-size: 12.5px !important;
}
body.iso-v1 .iso-footer-link a:hover {
color: #fff !important;
}
body.iso-v1 .iso-footer-bottom-row {
margin-top: 24px !important;
}
body.iso-v1 .iso-footer-bottom {
margin-top: 0 !important;
font-size: 11px !important;
}
/* ---------- FAQ: auf Desktop und Mobil lesbare Schrift ---------- */
body.iso-v1 .iso-faq-section-v5 .accordion-title {
min-height: 60px;
font-size: 14px !important;
line-height: 1.45;
}
body.iso-v1 .iso-faq-section-v5 .accordion-inner {
font-size: 14px !important;
line-height: 1.7;
}
/* ---------- Shoparchiv: keine reservierte Leerspalte ---------- */
body.iso-v1.post-type-archive-product #shop-sidebar,
body.iso-v1.post-type-archive-product .shop-sidebar,
body.iso-v1.post-type-archive-product .sidebar-shop,
body.iso-v1.tax-product_cat #shop-sidebar,
body.iso-v1.tax-product_cat .shop-sidebar,
body.iso-v1.tax-product_cat .sidebar-shop,
body.iso-v1.tax-product_tag #shop-sidebar,
body.iso-v1.tax-product_tag .shop-sidebar,
body.iso-v1.tax-product_tag .sidebar-shop {
display: none !important;
}
body.iso-v1.post-type-archive-product .shop-container > .row > .large-9,
body.iso-v1.post-type-archive-product .shop-container > .row > .col.large-9,
body.iso-v1.tax-product_cat .shop-container > .row > .large-9,
body.iso-v1.tax-product_cat .shop-container > .row > .col.large-9,
body.iso-v1.tax-product_tag .shop-container > .row > .large-9,
body.iso-v1.tax-product_tag .shop-container > .row > .col.large-9 {
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
body.iso-v1.post-type-archive-product .shop-page-title .page-title-inner,
body.iso-v1.tax-product_cat .shop-page-title .page-title-inner,
body.iso-v1.tax-product_tag .shop-page-title .page-title-inner,
body.iso-v1.post-type-archive-product .shop-container,
body.iso-v1.tax-product_cat .shop-container,
body.iso-v1.tax-product_tag .shop-container {
width: min(calc(100% - 48px), var(--iso-container)) !important;
max-width: var(--iso-container) !important;
margin-right: auto !important;
margin-left: auto !important;
}
body.iso-v1.post-type-archive-product .shop-page-title,
body.iso-v1.tax-product_cat .shop-page-title,
body.iso-v1.tax-product_tag .shop-page-title {
padding: 30px 0 24px !important;
}
body.iso-v1.post-type-archive-product .shop-container,
body.iso-v1.tax-product_cat .shop-container,
body.iso-v1.tax-product_tag .shop-container {
padding-top: 34px !important;
padding-bottom: 72px !important;
}
/* Ein definiertes Raster verhindert die winzige, rechtsbuendige 3er-Spalte. */
body.iso-v1.post-type-archive-product .shop-container .products.row,
body.iso-v1.tax-product_cat .shop-container .products.row,
body.iso-v1.tax-product_tag .shop-container .products.row {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
body.iso-v1.post-type-archive-product .shop-container .products.row > .product-small,
body.iso-v1.tax-product_cat .shop-container .products.row > .product-small,
body.iso-v1.tax-product_tag .shop-container .products.row > .product-small {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
padding: 0 !important;
}
body.iso-v1.woocommerce .product-small .box,
body.iso-v1.woocommerce-page .product-small .box,
body.iso-v1 .shop-container .product-small .col-inner {
border-radius: 10px !important;
box-shadow: 0 8px 28px rgba(10,26,43,.055);
}
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
height: 278px !important;
border: 0 !important;
border-bottom: 1px solid var(--iso-line) !important;
border-radius: 0 !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
width: 100% !important;
height: 100% !important;
padding: 8px !important;
object-fit: contain !important;
object-position: center !important;
}
body.iso-v1.woocommerce .product-small .box-text-products,
body.iso-v1.woocommerce-page .product-small .box-text-products {
padding: 16px 17px 18px !important;
}
body.iso-v1.woocommerce .product-small .category,
body.iso-v1.woocommerce-page .product-small .category {
display: none !important;
}
body.iso-v1.woocommerce .product-small .product-title,
body.iso-v1.woocommerce-page .product-small .product-title {
min-height: 2.7em;
margin-bottom: 8px;
font-size: 15px !important;
line-height: 1.35;
}
body.iso-v1.woocommerce .product-small .price,
body.iso-v1.woocommerce-page .product-small .price {
font-size: 15px !important;
}
body.iso-v1.woocommerce .badge-inner,
body.iso-v1.woocommerce-page .badge-inner {
min-width: 0 !important;
height: auto !important;
padding: 7px 10px !important;
border-radius: 999px !important;
font-size: 10px !important;
line-height: 1 !important;
}
/* ---------- Einzelprodukt: mehr Nutzbreite und klare Hierarchie ---------- */
body.iso-v1.single-product .product-main > .row,
body.iso-v1.single-product .product-main .row.content-row,
body.iso-v1.single-product .product-footer > .container,
body.iso-v1.single-product .related-products-wrapper {
width: min(calc(100% - 48px), var(--iso-container)) !important;
max-width: var(--iso-container) !important;
margin-right: auto !important;
margin-left: auto !important;
}
body.iso-v1.single-product .product-main {
padding-top: 54px !important;
padding-bottom: 64px !important;
}
body.iso-v1.single-product .product-gallery {
flex-basis: 54% !important;
max-width: 54% !important;
}
body.iso-v1.single-product .product-info {
flex-basis: 46% !important;
max-width: 46% !important;
padding-top: 4px !important;
padding-left: clamp(28px, 4vw, 58px) !important;
}
body.iso-v1.single-product .product-info .product-title {
font-size: clamp(2.25rem, 3.5vw, 3.35rem) !important;
line-height: 1 !important;
}
body.iso-v1.single-product .woocommerce-product-details__short-description {
max-width: 540px;
font-size: 15px !important;
line-height: 1.65;
}
body.iso-v1 .iso-coa-product-box {
max-width: 100%;
padding: 20px !important;
border-radius: 10px !important;
}
body.iso-v1.single-product .woocommerce-tabs {
padding-top: 44px !important;
padding-bottom: 72px !important;
}
body.iso-v1.single-product .woocommerce-Tabs-panel,
body.iso-v1.single-product .panel.entry-content {
width: 100%;
max-width: 1080px !important;
font-size: 15px !important;
line-height: 1.75;
}
body.iso-v1.single-product .woocommerce-Tabs-panel > p:first-child,
body.iso-v1.single-product .panel.entry-content > p:first-child {
font-size: 16px !important;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table th,
body.iso-v1.single-product .woocommerce-Tabs-panel table td,
body.iso-v1.single-product .panel.entry-content table th,
body.iso-v1.single-product .panel.entry-content table td {
padding: 13px 16px !important;
font-size: 13px !important;
}
body.iso-v1.single-product .related-products-wrapper .products.row {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
width: 100% !important;
margin: 0 !important;
}
body.iso-v1.single-product .related-products-wrapper .products.row > .product-small {
width: auto !important;
max-width: none !important;
flex-basis: auto !important;
padding: 0 !important;
}
/* ---------- Tablet ---------- */
@media (min-width: 768px) and (max-width: 1100px) {
body.iso-v1.post-type-archive-product .shop-container .products.row,
body.iso-v1.tax-product_cat .shop-container .products.row,
body.iso-v1.tax-product_tag .shop-container .products.row {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
height: 244px !important;
}
body.iso-v1.single-product .related-products-wrapper .products.row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ---------- Mobil ---------- */
@media (max-width: 767px) {
body.iso-v1 .iso-header-logo-img {
height: 27px !important;
max-width: 150px !important;
}
body.iso-v1 .iso-footer-logo-img {
height: 30px !important;
max-width: 160px !important;
}
body.iso-v1 .iso-cart-action-v53::before {
content: 'Korb' !important;
}
body.iso-v1 .iso-footer-v5 {
padding: 36px 0 20px !important;
}
body.iso-v1 .iso-footer-v5 .section-content > .row,
body.iso-v1.post-type-archive-product .shop-page-title .page-title-inner,
body.iso-v1.tax-product_cat .shop-page-title .page-title-inner,
body.iso-v1.tax-product_tag .shop-page-title .page-title-inner,
body.iso-v1.post-type-archive-product .shop-container,
body.iso-v1.tax-product_cat .shop-container,
body.iso-v1.tax-product_tag .shop-container,
body.iso-v1.single-product .product-main > .row,
body.iso-v1.single-product .product-main .row.content-row,
body.iso-v1.single-product .product-footer > .container,
body.iso-v1.single-product .related-products-wrapper {
width: min(calc(100% - 28px), var(--iso-container)) !important;
}
body.iso-v1 .iso-footer-text,
body.iso-v1 .iso-footer-link a {
font-size: 13px !important;
}
body.iso-v1 .iso-footer-bottom {
display: grid !important;
gap: 7px;
line-height: 1.5;
}
body.iso-v1.post-type-archive-product .shop-page-title,
body.iso-v1.tax-product_cat .shop-page-title,
body.iso-v1.tax-product_tag .shop-page-title {
padding: 22px 0 18px !important;
}
body.iso-v1.post-type-archive-product .shop-container,
body.iso-v1.tax-product_cat .shop-container,
body.iso-v1.tax-product_tag .shop-container {
padding-top: 22px !important;
padding-bottom: 48px !important;
}
body.iso-v1.post-type-archive-product .shop-container .products.row,
body.iso-v1.tax-product_cat .shop-container .products.row,
body.iso-v1.tax-product_tag .shop-container .products.row,
body.iso-v1.single-product .related-products-wrapper .products.row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
height: clamp(170px, 48vw, 216px) !important;
}
body.iso-v1.woocommerce .product-small .box-text-products,
body.iso-v1.woocommerce-page .product-small .box-text-products {
padding: 12px 12px 15px !important;
}
body.iso-v1.woocommerce .product-small .product-title,
body.iso-v1.woocommerce-page .product-small .product-title {
min-height: 2.8em;
font-size: 13px !important;
}
body.iso-v1.woocommerce .product-small .price,
body.iso-v1.woocommerce-page .product-small .price {
font-size: 13px !important;
}
body.iso-v1.single-product .product-main {
padding-top: 24px !important;
padding-bottom: 40px !important;
}
body.iso-v1.single-product .product-gallery,
body.iso-v1.single-product .product-info {
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
body.iso-v1.single-product .product-info {
padding: 24px 0 0 !important;
}
body.iso-v1.single-product .product-info .product-title {
font-size: clamp(2rem, 10vw, 2.7rem) !important;
}
body.iso-v1.single-product .woocommerce-product-details__short-description {
font-size: 14px !important;
}
body.iso-v1.single-product .woocommerce-tabs {
padding-top: 28px !important;
padding-bottom: 48px !important;
}
body.iso-v1.single-product .woocommerce-tabs .nav-tabs {
gap: 6px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 5px;
}
body.iso-v1.single-product .woocommerce-tabs .nav-tabs > li {
flex: 0 0 auto;
}
body.iso-v1.single-product .woocommerce-Tabs-panel,
body.iso-v1.single-product .panel.entry-content {
font-size: 14px !important;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table,
body.iso-v1.single-product .panel.entry-content table {
width: 100%;
display: table;
overflow: hidden;
table-layout: fixed;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table th,
body.iso-v1.single-product .woocommerce-Tabs-panel table td,
body.iso-v1.single-product .panel.entry-content table th,
body.iso-v1.single-product .panel.entry-content table td {
min-width: 0 !important;
padding: 11px 10px !important;
font-size: 12px !important;
overflow-wrap: anywhere;
}
body.iso-v1.single-product .woocommerce-Tabs-panel table th,
body.iso-v1.single-product .panel.entry-content table th {
width: 40% !important;
}
}
@media (max-width: 360px) {
body.iso-v1.post-type-archive-product .shop-container .products.row,
body.iso-v1.tax-product_cat .shop-container .products.row,
body.iso-v1.tax-product_tag .shop-container .products.row,
body.iso-v1.single-product .related-products-wrapper .products.row {
grid-template-columns: 1fr;
}
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
height: 268px !important;
}
}
/* ==========================================================================
38 V1.13 — TYPOGRAFIE, SEITENRHYTHMUS UND PRODUKTBILD-BUEHNE
========================================================================== */
/* ---------- Lesbarkeit und Inhaltsbreite ---------- */
body.iso-v1 .iso-section-text,
body.iso-v1 .iso-copy,
body.iso-v1 .iso-lead-copy {
color: var(--iso-muted) !important;
font-size: 16px !important;
line-height: 1.72 !important;
}
body.iso-v1 .iso-page-lead {
max-width: 720px;
color: rgba(255,255,255,.82) !important;
font-size: 16px !important;
line-height: 1.68 !important;
}
body.iso-v1 .iso-page-meta span {
color: rgba(255,255,255,.86) !important;
font-size: 11px !important;
}
body.iso-v1 .iso-kicker {
font-size: 11px !important;
line-height: 1.4;
}
/* Die alte Null-Padding-Regel liess benachbarte Spalten aneinanderkleben. */
body.iso-v1 .iso-page-section > .section-content > .row,
body.iso-v1 .iso-page-section-soft > .section-content > .row,
body.iso-v1 .iso-page-section-dark > .section-content > .row {
width: min(calc(100% - 56px), 1320px) !important;
max-width: 1320px !important;
align-items: center;
}
body.iso-v1 .iso-page-section .col,
body.iso-v1 .iso-page-section-soft .col,
body.iso-v1 .iso-page-section-dark .col {
padding-right: clamp(18px, 2vw, 32px) !important;
padding-left: clamp(18px, 2vw, 32px) !important;
}
body.iso-v1 .iso-page-section,
body.iso-v1 .iso-page-section-soft {
padding: clamp(78px, 7vw, 112px) 0 !important;
}
body.iso-v1 .iso-page-section-dark {
padding: clamp(72px, 6.5vw, 104px) 0 !important;
}
body.iso-v1 .iso-page-section + .iso-page-section,
body.iso-v1 .iso-page-section + .iso-page-section-soft,
body.iso-v1 .iso-page-section-soft + .iso-page-section,
body.iso-v1 .iso-page-section-soft + .iso-page-section-dark {
padding-top: clamp(78px, 7vw, 112px) !important;
}
body.iso-v1 .iso-fieldlist {
border-radius: 10px !important;
}
body.iso-v1 .iso-fieldlist-row {
grid-template-columns: minmax(150px, .72fr) minmax(0, 1.55fr) !important;
gap: 28px !important;
padding: 18px 22px !important;
}
body.iso-v1 .iso-fieldlist-row strong {
font-size: 12px !important;
line-height: 1.5;
}
body.iso-v1 .iso-fieldlist-row span {
font-size: 14px !important;
line-height: 1.6;
}
body.iso-v1 .iso-figure {
margin: 0 !important;
}
body.iso-v1 .iso-figure-frame {
border-radius: 12px !important;
box-shadow: 0 22px 54px rgba(10,26,43,.12) !important;
}
body.iso-v1 .iso-figure figcaption {
margin-top: 14px !important;
font-size: 11px !important;
}
/* ---------- Helle CI-Buehne statt weisser Bildquadrate ---------- */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image,
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media,
body.iso-v1 .iso-feature-media,
body.iso-v1.single-product .woocommerce-product-gallery__image,
body.iso-v1.single-product .product-gallery-slider .slide {
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 50% 78%, rgba(78,159,205,.20), transparent 34%),
linear-gradient(155deg, #fbfdff 0%, #eef6fb 58%, #e8f2f8 100%) !important;
}
body.iso-v1.woocommerce .product-small .box-image::after,
body.iso-v1.woocommerce-page .product-small .box-image::after,
body.iso-v1 .shop-container .product-small .box-image::after,
body.iso-v1 .iso-product-tile-media::after,
body.iso-v1 .iso-all-products-media::after,
body.iso-v1 .iso-feature-media::after,
body.iso-v1.single-product .woocommerce-product-gallery__image::after {
content: '' !important;
display: block !important;
position: absolute;
z-index: 3;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, transparent 0 49.7%, rgba(78,159,205,.07) 49.8% 50.2%, transparent 50.3%),
linear-gradient(0deg, transparent 0 76%, rgba(78,159,205,.06) 76.1% 76.5%, transparent 76.6%);
opacity: .7;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img,
body.iso-v1 .iso-product-tile-media img,
body.iso-v1 .iso-all-products-fan img,
body.iso-v1 .iso-feature-media img,
body.iso-v1.single-product .woocommerce-product-gallery__image img,
body.iso-v1.single-product .product-gallery-slider img {
position: relative;
z-index: 2;
background: transparent !important;
mix-blend-mode: multiply;
}
/* Die Vials sitzen im Quellbild leicht oberhalb der optischen Mitte. */
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
transform: translateY(12px) scale(.96) !important;
transform-origin: center center;
}
@media (min-width: 1024px) and (hover: hover) {
body.iso-v1.woocommerce .product-small:hover .box-image img,
body.iso-v1.woocommerce-page .product-small:hover .box-image img {
transform: translateY(12px) scale(1) !important;
}
}
/* ---------- Startseite: Produktkacheln und Sammelbild ---------- */
body.iso-v1 .iso-catalog-section,
body.iso-v1 .iso-index-section,
body.iso-v1 .iso-coa-section-v5,
body.iso-v1 .iso-faq-section-v5 {
padding-top: clamp(76px, 7vw, 112px) !important;
padding-bottom: clamp(76px, 7vw, 112px) !important;
}
body.iso-v1 .iso-section-intro-row,
body.iso-v1 .iso-index-head-row {
margin-bottom: 44px !important;
}
body.iso-v1 .iso-product-tile-media img {
width: 92% !important;
height: 92% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
transform: translateY(7px) scale(.94);
}
body.iso-v1 .iso-all-products-media {
position: relative;
overflow: hidden;
}
body.iso-v1 .iso-all-products-fan {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
align-items: flex-end !important;
justify-content: center !important;
}
body.iso-v1 .iso-all-products-fan img {
width: 46% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
margin: 0 -8% -5% !important;
object-fit: contain !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(1) {
transform: rotate(-7deg) translate(7%, 2%) !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(2) {
z-index: 4;
transform: scale(1.12) translateY(-2%) !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(3) {
transform: rotate(7deg) translate(-7%, 2%) !important;
}
/* ---------- Startseiten-COA: Werte, Bericht und Schluessel ---------- */
body.iso-v1 .iso-coa-doc {
border-radius: 12px !important;
box-shadow: 0 18px 48px rgba(10,26,43,.08);
}
body.iso-v1 .iso-coa-doc-head,
body.iso-v1 .iso-coa-doc-title,
body.iso-v1 .iso-coa-metric,
body.iso-v1 .iso-coa-keys,
body.iso-v1 .iso-coa-open {
padding-right: clamp(18px, 2.4vw, 30px) !important;
padding-left: clamp(18px, 2.4vw, 30px) !important;
}
body.iso-v1 .iso-coa-doc-title h3 {
font-size: clamp(1.45rem, 2vw, 2rem) !important;
}
body.iso-v1 .iso-coa-doc-batch {
font-size: 12px !important;
line-height: 1.6;
}
body.iso-v1 .iso-coa-metric-value {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
}
body.iso-v1 .iso-coa-metric-value a {
flex: none;
color: var(--iso-blue-text) !important;
font-family: var(--iso-font);
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-decoration: underline;
text-underline-offset: 3px;
text-transform: uppercase;
}
/* ---------- Mobil: keine 10- bis 12-px-Fliesstexte ---------- */
@media (max-width: 767px) {
body.iso-v1 {
font-size: 16px !important;
line-height: 1.6;
}
body.iso-v1 .iso-hero-title {
font-size: clamp(2.35rem, 12vw, 3.35rem) !important;
line-height: .98 !important;
}
body.iso-v1 .iso-section-title,
body.iso-v1 .iso-page-section .iso-section-title,
body.iso-v1 .iso-page-section-soft .iso-section-title,
body.iso-v1 .iso-page-section-dark .iso-section-title,
body.iso-v1 .iso-faq-section-v5 .iso-section-title {
font-size: clamp(2rem, 9.5vw, 2.75rem) !important;
line-height: 1.02 !important;
letter-spacing: -.045em !important;
}
body.iso-v1 .iso-hero-lead,
body.iso-v1 .iso-section-text,
body.iso-v1 .iso-copy,
body.iso-v1 .iso-lead-copy,
body.iso-v1 .iso-page-lead,
body.iso-v1 .woocommerce-product-details__short-description {
font-size: 16px !important;
line-height: 1.68 !important;
}
body.iso-v1 .iso-kicker {
font-size: 11px !important;
letter-spacing: .16em !important;
}
body.iso-v1 .iso-page-meta span {
padding: 8px 10px !important;
font-size: 11px !important;
line-height: 1.4;
}
body.iso-v1 .iso-page-hero {
padding: 48px 0 44px !important;
}
body.iso-v1 .iso-page-hero .section-content > .row,
body.iso-v1 .iso-page-section > .section-content > .row,
body.iso-v1 .iso-page-section-soft > .section-content > .row,
body.iso-v1 .iso-page-section-dark > .section-content > .row,
body.iso-v1 .iso-catalog-section .section-content > .row,
body.iso-v1 .iso-index-section .section-content > .row,
body.iso-v1 .iso-coa-section-v5 .section-content > .row,
body.iso-v1 .iso-faq-section-v5 .section-content > .row {
width: min(calc(100% - 32px), var(--iso-container)) !important;
}
body.iso-v1 .iso-page-section,
body.iso-v1 .iso-page-section-soft,
body.iso-v1 .iso-page-section-dark,
body.iso-v1 .iso-catalog-section,
body.iso-v1 .iso-index-section,
body.iso-v1 .iso-coa-section-v5,
body.iso-v1 .iso-faq-section-v5 {
padding-top: 58px !important;
padding-bottom: 58px !important;
}
body.iso-v1 .iso-page-section .col,
body.iso-v1 .iso-page-section-soft .col,
body.iso-v1 .iso-page-section-dark .col {
padding-right: 0 !important;
padding-left: 0 !important;
}
body.iso-v1 .iso-page-section .row > .col + .col,
body.iso-v1 .iso-page-section-soft .row > .col + .col,
body.iso-v1 .iso-page-section-dark .row > .col + .col {
margin-top: 34px !important;
}
body.iso-v1 .iso-figure figcaption {
font-size: 11px !important;
}
body.iso-v1 .iso-fieldlist-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 7px !important;
padding: 16px !important;
}
body.iso-v1 .iso-fieldlist-row strong {
font-size: 12px !important;
}
body.iso-v1 .iso-fieldlist-row span {
font-size: 14px !important;
}
body.iso-v1 .iso-catalog-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
body.iso-v1 .iso-catalog-side {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body.iso-v1 .iso-product-tile,
body.iso-v1 .iso-all-products-card {
min-height: 286px !important;
}
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media {
min-height: 186px !important;
}
body.iso-v1 .iso-product-tile-footer small,
body.iso-v1 .iso-feature-footer small {
font-size: 10px !important;
line-height: 1.35;
}
body.iso-v1 .iso-product-tile-footer h3,
body.iso-v1 .iso-feature-footer h3 {
font-size: 14px !important;
line-height: 1.35;
}
body.iso-v1 .iso-card-price,
body.iso-v1 .iso-card-price-small {
font-size: 13px !important;
}
body.iso-v1.woocommerce .woocommerce-result-count,
body.iso-v1.woocommerce .woocommerce-ordering,
body.iso-v1.woocommerce .category-filtering {
font-size: 13px !important;
}
body.iso-v1.woocommerce .woocommerce-ordering select,
body.iso-v1.woocommerce .category-filtering select {
min-height: 46px;
font-size: 14px !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
transform: translateY(8px) scale(.95) !important;
}
body.iso-v1.woocommerce .product-small .product-title,
body.iso-v1.woocommerce-page .product-small .product-title {
font-size: 15px !important;
line-height: 1.35 !important;
}
body.iso-v1.woocommerce .product-small .price,
body.iso-v1.woocommerce-page .product-small .price {
font-size: 14px !important;
}
body.iso-v1.woocommerce .badge-inner,
body.iso-v1.woocommerce-page .badge-inner {
font-size: 11px !important;
}
body.iso-v1 .iso-coa-doc-head,
body.iso-v1 .iso-coa-doc-batch,
body.iso-v1 .iso-coa-keys-label,
body.iso-v1 .iso-coa-metric span,
body.iso-v1 .iso-coa-verified {
font-size: 12px !important;
}
body.iso-v1 .iso-coa-metric strong,
body.iso-v1 .iso-coa-verifykey,
body.iso-v1 .iso-coa-metric-value a {
font-size: 12px !important;
}
body.iso-v1 .iso-coa-metric-value {
align-items: flex-end;
flex-direction: column;
gap: 5px;
}
body.iso-v1 .iso-faq-section-v5 .accordion-title,
body.iso-v1.iso-page-v53 .accordion-title {
padding: 17px 46px 17px 0 !important;
font-size: 16px !important;
line-height: 1.45 !important;
}
body.iso-v1 .iso-faq-section-v5 .accordion-inner,
body.iso-v1.iso-page-v53 .accordion-inner {
padding: 0 38px 22px 0 !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
}
@media (max-width: 390px) {
body.iso-v1 .iso-catalog-side {
grid-template-columns: 1fr !important;
}
body.iso-v1 .iso-product-tile,
body.iso-v1 .iso-all-products-card {
min-height: 320px !important;
}
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media {
min-height: 216px !important;
}
}
/* ==========================================================================
39 V1.14 — MONTSERRAT UND ECHTE PNG-FREISTELLER
========================================================================== */
/* Eine Schriftfamilie, klare Gewichtung. Icon-Fonts bleiben unangetastet. */
body.iso-v1,
body.iso-v1 h1,
body.iso-v1 h2,
body.iso-v1 h3,
body.iso-v1 h4,
body.iso-v1 h5,
body.iso-v1 h6,
body.iso-v1 p,
body.iso-v1 a,
body.iso-v1 button,
body.iso-v1 input,
body.iso-v1 select,
body.iso-v1 textarea,
body.iso-v1 table,
body.iso-v1 label {
font-family: var(--iso-font) !important;
}
body.iso-v1 h1,
body.iso-v1 .iso-hero-title,
body.iso-v1 .iso-page-title {
font-weight: 800 !important;
letter-spacing: -.045em !important;
}
body.iso-v1 h2,
body.iso-v1 .iso-section-title {
font-weight: 800 !important;
letter-spacing: -.035em !important;
}
body.iso-v1 h3,
body.iso-v1 h4,
body.iso-v1 .product-title,
body.iso-v1 .woocommerce-loop-product__title {
font-weight: 700 !important;
letter-spacing: -.018em !important;
}
body.iso-v1 .iso-kicker,
body.iso-v1 .iso-card-badge,
body.iso-v1 .iso-product-pill,
body.iso-v1 .button,
body.iso-v1 button,
body.iso-v1 .nav > li > a {
font-weight: 700 !important;
}
body.iso-v1 .iso-coa-verifykey,
body.iso-v1 .iso-coa-metric strong,
body.iso-v1 .iso-coa-trow,
body.iso-v1 .iso-page-meta {
font-family: var(--iso-font) !important;
font-variant-numeric: tabular-nums lining-nums;
}
/* Keine Rasterlinien und kein Blend-Modus mehr. */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image,
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media,
body.iso-v1.single-product .woocommerce-product-gallery__image,
body.iso-v1.single-product .product-gallery-slider .slide {
background:
radial-gradient(ellipse at 50% 88%, rgba(78,159,205,.18), transparent 34%),
linear-gradient(150deg, #fbfdff 0%, #f1f7fb 54%, #e7f1f7 100%) !important;
}
body.iso-v1.woocommerce .product-small .box-image::after,
body.iso-v1.woocommerce-page .product-small .box-image::after,
body.iso-v1 .shop-container .product-small .box-image::after,
body.iso-v1 .iso-product-tile-media::after,
body.iso-v1 .iso-all-products-media::after,
body.iso-v1 .iso-feature-media::after,
body.iso-v1.single-product .woocommerce-product-gallery__image::after {
display: none !important;
content: none !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img,
body.iso-v1 .iso-product-tile-media img,
body.iso-v1 .iso-all-products-fan img,
body.iso-v1 .iso-feature-media img,
body.iso-v1.single-product .woocommerce-product-gallery__image img,
body.iso-v1.single-product .product-gallery-slider img {
background: transparent !important;
mix-blend-mode: normal !important;
}
/* Featured-Vial schwebt frei auf Navy statt in einem hellen Rechteck. */
body.iso-v1 .iso-feature-media {
background: transparent !important;
border-radius: 0 !important;
overflow: visible !important;
}
body.iso-v1 .iso-feature-media img,
body.iso-v1 .iso-feature-card img {
width: min(460px, 78%) !important;
height: 100% !important;
max-width: 78% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center 54% !important;
filter: drop-shadow(0 28px 30px rgba(0,0,0,.30)) !important;
transform: none !important;
}
/* Kleine Karten. Das Vial steht mittig und nutzt die Bildflaeche. */
body.iso-v1 .iso-product-tile-media img {
width: 92% !important;
height: 94% !important;
max-width: 92% !important;
max-height: 94% !important;
object-fit: contain !important;
transform: translateY(5px) !important;
filter: drop-shadow(0 15px 16px rgba(10,26,43,.14)) !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
padding: 10px 14px 2px !important;
transform: translateY(5px) !important;
filter: drop-shadow(0 13px 14px rgba(10,26,43,.11)) !important;
}
@media (min-width: 1024px) and (hover: hover) {
body.iso-v1.woocommerce .product-small:hover .box-image img,
body.iso-v1.woocommerce-page .product-small:hover .box-image img {
transform: translateY(5px) scale(1.025) !important;
}
}
/* Drei transparente Vials fuellen die Sammelkachel ohne weisse Quadrate. */
body.iso-v1 .iso-all-products-fan img {
width: 49% !important;
margin: 0 -10% -7% !important;
filter: drop-shadow(0 12px 12px rgba(10,26,43,.12)) !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(1) {
transform: rotate(-8deg) translate(7%, 2%) !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(2) {
z-index: 4;
transform: scale(1.12) translateY(-3%) !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(3) {
transform: rotate(8deg) translate(-7%, 2%) !important;
}
@media (max-width: 767px) {
body.iso-v1 .iso-feature-media img,
body.iso-v1 .iso-feature-card img {
width: min(390px, 86%) !important;
max-width: 86% !important;
}
body.iso-v1 .iso-product-tile-media img {
width: 88% !important;
max-width: 88% !important;
}
}
/* ==========================================================================
39 RUHE-DURCHGANG
Drei gemeldete Fehler und ein Durchgang auf Zurueckhaltung.
„Hochwertiger" heisst hier: weniger gleichzeitig sichtbare
Effekte, nicht mehr Gestaltung. Jede Flaeche, die um
Aufmerksamkeit bittet, nimmt sie einer anderen weg.
========================================================================== */
/* --------------------------------------------------------------------------
1 MELDELEISTE — TEXT WAR ABGESCHNITTEN
BEFUND: die Microbar zeigte „Versand aus Deutschlan…". Der Text
stand in einer Zeile mit fester Hoehe und white-space nowrap,
die zweite Spalte war mobil ausgeblendet - der verbleibende Text
passte trotzdem nicht.
Jetzt darf er umbrechen, und die Leiste waechst mit.
-------------------------------------------------------------------------- */
body.iso-v1 .iso-header-micro-v53,
body.iso-v1 .iso-header-micro-row-v53 {
min-height: 0 !important;
height: auto !important;
}
body.iso-v1 .iso-header-micro-text {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.45;
padding: 7px 0;
}
@media (max-width: 767px) {
body.iso-v1 .iso-header-micro-text {
font-size: 11px;
letter-spacing: .06em;
text-align: center;
}
body.iso-v1 .iso-header-micro-row-v53 > .col:first-child {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* --------------------------------------------------------------------------
2 MOBIL: LOCH ZWISCHEN HERO UND KATALOG
BEFUND: unter dem Knopf „Chargen pruefen" stand ein sehr grosser
Leerraum. Er kam aus drei Quellen gleichzeitig: dem unteren
Innenabstand der Textspalte, dem Abstand der Katalogsektion und
dem Abstand des Trustbands dazwischen. Einzeln jeweils
vertretbar, zusammen ein Loch.
-------------------------------------------------------------------------- */
@media (max-width: 1023px) {
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5,
body.iso-v1 .iso-hero-v5 .iso-hero-copy-v5 > .col-inner {
padding-bottom: 26px !important;
}
body.iso-v1 .iso-trust-section {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
body.iso-v1 .iso-catalog-section {
padding-top: 34px !important;
}
body.iso-v1 .iso-catalog-section .iso-section-intro-row {
margin-bottom: 18px !important;
}
}
/* --------------------------------------------------------------------------
3 ZURUECKHALTUNG
Ein Schatten, ein Radius, eine Bewegung. Vorher waren es je
drei bis vier nebeneinander - das liest sich unruhig, ohne dass
man sagen koennte, woran es liegt.
-------------------------------------------------------------------------- */
:root {
--iso-shadow: 0 1px 2px rgba(10,26,43,.04), 0 8px 24px rgba(10,26,43,.06);
--iso-shadow-lift: 0 1px 2px rgba(10,26,43,.05), 0 14px 34px rgba(10,26,43,.09);
}
body.iso-v1 .iso-product-tile,
body.iso-v1 .iso-all-products-card,
body.iso-v1 .iso-coa-card,
body.iso-v1 .iso-coa-stat,
body.iso-v1.woocommerce .product-small .col-inner,
body.iso-v1 .shop-container .product-small .col-inner {
border-radius: 10px !important;
box-shadow: var(--iso-shadow) !important;
border: 1px solid color-mix(in srgb, var(--iso-navy) 7%, transparent) !important;
}
@media (min-width: 1024px) and (hover: hover) {
body.iso-v1 .iso-product-tile:hover,
body.iso-v1 .iso-all-products-card:hover,
body.iso-v1 .iso-coa-card:hover,
body.iso-v1.woocommerce .product-small:hover .col-inner {
transform: translateY(-2px) !important;
box-shadow: var(--iso-shadow-lift) !important;
border-color: color-mix(in srgb, var(--iso-navy) 12%, transparent) !important;
}
/* Das Bild bewegt sich nicht mehr mit. Zwei Bewegungen zugleich
sind eine zu viel. */
body.iso-v1 .iso-product-tile:hover .iso-product-tile-media img,
body.iso-v1.woocommerce .product-small:hover .box-image img,
body.iso-v1 .iso-coa-card:hover .iso-coa-card-sheet img {
transform: none !important;
}
}
/* Die Dosis-Plaketten waren gefuellt und blau - drei bis vier
davon in einer Reihe ziehen den Blick auf die Menge statt auf
das Produkt. Jetzt nur noch Kontur. */
body.iso-v1 .iso-card-badge,
body.iso-v1 .iso-tile-badge {
background: transparent !important;
border: 1px solid color-mix(in srgb, var(--iso-navy) 16%, transparent) !important;
color: var(--iso-muted) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
body.iso-v1 .iso-feature-card .iso-card-badge {
border-color: rgba(255,255,255,.24) !important;
color: rgba(255,255,255,.80) !important;
}
/* Der Rundknopf auf den Kacheln war ein zweiter Aufruf neben der
Kachel selbst, die ohnehin ganz verlinkt ist. Er bleibt, wird
aber leiser. */
body.iso-v1 .iso-round-link {
border-color: color-mix(in srgb, var(--iso-navy) 14%, transparent) !important;
color: var(--iso-muted) !important;
}
body.iso-v1 .iso-product-tile:hover .iso-round-link,
body.iso-v1 .iso-all-products-card:hover .iso-round-link {
border-color: var(--iso-navy) !important;
color: var(--iso-navy) !important;
}
/* Produktbilder brauchen keinen eigenen Schlagschatten mehr - die
Kachel traegt ihn. Zwei Schatten uebereinander sind der
haeufigste Grund, warum eine Seite billig wirkt. */
body.iso-v1 .iso-product-tile-media img,
body.iso-v1 .iso-all-products-fan img,
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1 .iso-figure-frame img { filter: none !important; }
/* Bildflaechen: eine Spur kuehler als Weiss, damit der Freisteller
eine Kante bekommt - aber ohne Verlauf, ohne Schein. */
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media,
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
background: #f4f7fa !important;
background-image: none !important;
}
/* Ueberschriften etwas enger und ruhiger setzen. */
body.iso-v1 .iso-section-title {
letter-spacing: -.035em;
text-wrap: balance;
}
body.iso-v1 .iso-section-text,
body.iso-v1 .iso-hero-lead { color: var(--iso-muted); }
/* --------------------------------------------------------------------------
4 FEATURED-KACHEL
Der Freisteller steht jetzt frei auf Navy. Damit er nicht wie
ausgeschnitten wirkt, bekommt er einen weichen Bodenschatten -
das ist der einzige Schatten auf der ganzen Kachel.
-------------------------------------------------------------------------- */
body.iso-v1 .iso-feature-media {
position: relative !important;
background: transparent !important;
}
body.iso-v1 .iso-feature-media::after {
content: '';
position: absolute;
left: 22%; right: 22%; bottom: 6%;
height: 26px;
border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.42) 0%, transparent 72%);
filter: blur(12px);
z-index: 0;
}
body.iso-v1 .iso-feature-media {
display: grid;
place-items: center;
/* Ohne Deckel waechst die Flaeche auf die Hoehe der vier Kacheln
daneben - gemessen 887px. Das Vial wurde dadurch riesig und
unten beschnitten. */
max-height: 470px;
}
body.iso-v1 .iso-feature-media img {
position: relative;
z-index: 1;
width: auto !important;
height: auto !important;
max-width: 66% !important;
max-height: 100% !important;
object-fit: contain !important;
margin: 0 auto !important;
border-radius: 0 !important;
}
/* BEFUND (gemessen): das Bild war 817px hoch in einer 470px hohen
Flaeche. max-height:100% loest sich in einem Rasterfeld nicht
verlaesslich auf - dieselbe Falle wie beim mobilen Hero.
Verlaesslich ist nur eine Box, die exakt der Flaeche entspricht:
Flaeche relativ, Bild absolut auf inset 0. Dann kann die Hoehe
gar nicht abweichen. */
body.iso-v1 .iso-feature-media {
position: relative !important;
display: block !important;
height: clamp(300px, 34vw, 470px) !important;
max-height: none !important;
flex: 0 0 auto !important;
}
body.iso-v1 .iso-feature-media img,
body.iso-v1 .iso-feature-card img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
padding: 8px 12px 22px !important;
margin: 0 !important;
}
/* BEFUND: die Featured-Kachel wird vom Raster auf die Hoehe der
vier Kacheln daneben gestreckt. Dadurch blieb ueber dem Vial
eine grosse leere Navy-Flaeche.
Die Kachel richtet sich jetzt nach ihrem Inhalt, nicht nach der
Nachbarspalte. */
body.iso-v1 .iso-catalog-grid,
body.iso-v1 .iso-research-catalog { align-items: start !important; }
body.iso-v1 .iso-feature-card { align-self: start !important; }
body.iso-v1 .iso-feature-media {
height: clamp(340px, 30vw, 430px) !important;
margin-top: 20px !important;
}
/* ==========================================================================
40 NACHZUG AUS DEM DURCHGANG
========================================================================== */
/* ---------- Pruefschluessel als Knopf ----------
Er ist jetzt bedienbar, also sieht er auch so aus. */
body.iso-v1 button.iso-coa-verifykey {
cursor: pointer;
font-family: var(--iso-font-mono);
line-height: 1.3;
transition: border-color var(--iso-dur) var(--iso-ease),
background-color var(--iso-dur) var(--iso-ease),
color var(--iso-dur) var(--iso-ease);
}
body.iso-v1 button.iso-coa-verifykey:hover {
border-color: var(--iso-blue);
background: #fff;
}
body.iso-v1 button.iso-coa-verifykey:active { transform: scale(.97); }
body.iso-v1 .iso-coa-verifykey.is-copied {
border-color: var(--iso-success);
background: color-mix(in srgb, var(--iso-success) 10%, #fff);
color: var(--iso-success);
}
/* ---------- Reste aus dem Flatsome-Demo ----------
Platzhalter-Sociallinks und die Standard-Fusszeile stehen im
Markup, nicht in den Einstellungen. Bis sie im Customizer
entfernt sind, blendet das hier sie aus. */
body.iso-v1 a[href="http://url"],
body.iso-v1 a[href="https://url"],
body.iso-v1 a[href="mailto:your@email"],
body.iso-v1 .social-icons a[href="http://url"],
body.iso-v1 .social-icons a[href="mailto:your@email"] { display: none !important; }
body.iso-v1 .absolute-footer .copyright-footer { display: none !important; }
body.iso-v1 #footer .widget_archive,
body.iso-v1 #footer .widget_categories,
body.iso-v1 .footer-widgets .widget_archive,
body.iso-v1 .footer-widgets .widget_categories { display: none !important; }
/* ==========================================================================
41 PRODUKTBILDER — ANSCHNITT ABSTELLEN
BEFUND aus den Screenshots: in Shop und Kacheln war jeweils nur
der obere Teil des Vials zu sehen, teils seitlich verschoben.
URSACHE: die Freisteller waren eng auf das Vial beschnitten und
damit hochformatig (Verhaeltnis 0,49). Wo Flatsome oder eine
aeltere Regel object-fit: cover verwendet, zeigt ein solches
Bild in einer breiten Kachel nur den Mittelstreifen - also die
Kappe und den Etikettkopf.
ZWEI MASSNAHMEN, damit es nicht wieder auftritt:
1. Die Bilder sind wieder quadratisch, das Vial mittig auf 86 %
der Hoehe. Damit liefert auch cover ein brauchbares Bild.
2. Hier wird contain fuer alle Produktbilder festgeschrieben,
damit nicht die naechste geerbte Regel wieder cover setzt.
========================================================================== */
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img,
body.iso-v1 .iso-product-tile-media img,
body.iso-v1 .iso-all-products-fan img,
body.iso-v1 .iso-feature-media img,
body.iso-v1.single-product .woocommerce-product-gallery__image img,
body.iso-v1.single-product .product-gallery-slider img {
object-fit: contain !important;
object-position: center center !important;
}
/* Die Kacheln geben dem quadratischen Bild wieder Raum in beide
Richtungen - vorher war nur die Hoehe begrenzt. */
body.iso-v1 .iso-product-tile-media img {
max-height: 100% !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
margin: 0 auto !important;
}
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media {
display: grid;
place-items: center;
padding: 8px !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
padding: 10px !important;
}
/* ==========================================================================
42 FEATURED-KACHEL WIRD HELL — DAS PROBLEM AN DER WURZEL
BEFUND: am Boden des Vials bleibt ein heller Saum stehen. Auf
hellem Grund ist er unsichtbar, auf Navy sieht er nach schlecht
ausgeschnitten aus.
Ich habe drei Runden lang am Freisteller gefeilt. Das war der
falsche Hebel: ein Freisteller ist nie perfekt, und auf einer
dunklen Flaeche faellt jeder Restpixel auf. Solange ein helles
Produktfoto auf Navy steht, kommt der Fehler wieder.
Also andersherum: die Kachel wird hell. Dann ist jeder
Freistellrest unsichtbar - nicht kaschiert, sondern gegenstands-
los, weil Bildkante und Flaeche dieselbe Helligkeit haben.
Nebeneffekt, den ich ohnehin vorgeschlagen hatte: die Startseite
hat damit nur noch EINE dunkle Zone (Research Index) statt
dreier. Kopfzeile und Footer rahmen, der Inhalt bleibt ruhig.
========================================================================== */
body.iso-v1 .iso-feature-card {
background: #fff !important;
background-image: none !important;
border: 1px solid color-mix(in srgb, var(--iso-navy) 8%, transparent) !important;
box-shadow: var(--iso-shadow) !important;
}
body.iso-v1 .iso-feature-card::after,
body.iso-v1 .iso-feature-card::before { display: none !important; }
body.iso-v1 .iso-feature-media {
background: #f4f7fa !important;
border-radius: 8px !important;
}
/* Der Bodenschatten war fuer Navy gedacht. Auf hell braucht das
Vial ihn nicht - es steht ohnehin auf einer eigenen Flaeche. */
body.iso-v1 .iso-feature-media::after { display: none !important; }
body.iso-v1 .iso-feature-card .iso-card-badge {
background: var(--iso-navy) !important;
border-color: var(--iso-navy) !important;
color: #fff !important;
}
body.iso-v1 .iso-feature-card h3,
body.iso-v1 .iso-feature-card .iso-card-price { color: var(--iso-navy) !important; }
body.iso-v1 .iso-feature-card small,
body.iso-v1 .iso-feature-card .iso-feature-footer small { color: var(--iso-muted) !important; }
body.iso-v1 .iso-feature-card .iso-round-link {
border-color: color-mix(in srgb, var(--iso-navy) 16%, transparent) !important;
color: var(--iso-navy) !important;
}
/* ==========================================================================
43 KACHELN GLEICH HOCH
BEFUND (mobil): „BPC-157 10mg" bricht auf zwei Zeilen um,
„Mots-C 10mg" nicht. Dadurch war eine Kachel hoeher als ihre
Nachbarin und das Raster wirkte schief.
Die Textzeilen bekommen deshalb festen Platz, und der Preis
sitzt unten - unabhaengig davon, wie lang der Name ist.
========================================================================== */
body.iso-v1 .iso-catalog-grid,
body.iso-v1 .iso-research-catalog { align-items: stretch !important; }
body.iso-v1 .iso-product-tile,
body.iso-v1 .iso-all-products-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media { flex: 0 0 auto !important; }
/* Die Fusszeile behaelt ihren Aufbau. Ich hatte sie auf Spalte
umgestellt und damit die Textausrichtung zerlegt - der Umbau war
unnoetig, es geht allein um reservierten Platz. */
body.iso-v1 .iso-product-tile-footer,
body.iso-v1 .iso-all-products-card .iso-product-tile-footer {
margin-top: auto !important;
}
/* Zwei Zeilen Platz fuer den Produktnamen - so viel braucht der
laengste. Damit sind die Kacheln gleich hoch, egal ob der Name
umbricht. */
body.iso-v1 .iso-product-tile-footer h3,
body.iso-v1 .iso-all-products-card h3 {
min-height: 2.6em;
}
body.iso-v1 .iso-product-tile-footer small,
body.iso-v1 .iso-all-products-card small {
display: block;
min-height: 2.2em;
}
/* Die Kachel „Alle Produkte" hat keinen Preis. Ohne Ausgleich
waere sie kuerzer als die Nachbarn - gemessen 79px auf dem
Handy. Der Platzhalter gleicht genau die fehlende Preiszeile
aus. */
body.iso-v1 .iso-all-products-card .iso-product-tile-footer > div::after {
content: '';
display: block;
height: 1.45em;
}
/* Mobil bricht der Produktname eher um, dadurch fehlt der
Sammelkachel mehr Hoehe. Gemessen: 56px Rest. */
@media (max-width: 549px) {
body.iso-v1 .iso-all-products-card .iso-product-tile-footer > div::after {
height: 4.6em;
}
}
@media (max-width: 549px) {
/* Mobil bricht mehr um - dort etwas mehr Reserve. */
body.iso-v1 .iso-product-tile-footer h3,
body.iso-v1 .iso-all-products-card h3 { min-height: 2.9em; }
}
/* ==========================================================================
44 BILDFLAECHEN SKALIEREN MIT
BEFUND: die Produktbilder waren mobil zu gross. Ursache ist, dass
ich die Bildflaeche in festen Pixeln gesetzt hatte - 300px am
Desktop, 210px unter 550px. Eine feste Hoehe passt aber nie zu
allen Spaltenbreiten: bei zwei Spalten auf 390px ist die Kachel
150px breit, das Bildfeld war fast 190px hoch. Also hochformatig,
und das Vial wirkt darin ueberdimensioniert.
Statt fester Werte jetzt ein Seitenverhaeltnis. Die Bildflaeche
ist immer quadratisch und waechst mit der Spalte - auf jedem
Geraet, bei jeder Spaltenzahl, ohne weitere Bruchpunkte.
========================================================================== */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: grid;
place-items: center;
overflow: hidden;
}
body.iso-v1.woocommerce .product-small .box-image .image-fade_in_back,
body.iso-v1.woocommerce .product-small .box-image .image-none,
body.iso-v1.woocommerce .product-small .box-image .image-zoom,
body.iso-v1.woocommerce .product-small .box-image > a {
width: 100% !important;
height: 100% !important;
display: block;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
width: 100% !important;
height: 100% !important;
padding: 6% !important;
object-fit: contain !important;
}
/* Dieselbe Logik fuer die Startseitenkacheln. */
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media {
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
padding: 6% !important;
}
body.iso-v1 .iso-product-tile-media img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
}
/* Auch die Featured-Kachel folgt dem Verhaeltnis statt einer
clamp-Hoehe - dann sitzt sie in jeder Spaltenbreite richtig. */
body.iso-v1 .iso-feature-media {
aspect-ratio: 4 / 3 !important;
height: auto !important;
max-height: none !important;
}
/* ==========================================================================
45 SHOPVORSCHAU — ANSCHNITT UNTEN
BEFUND aus dem Screenshot: oben Luft, unten fehlt der Vialboden.
Das ist kein cover-Zuschnitt - der wuerde oben und unten gleich
viel wegnehmen. Es ist ein Bild, das oben im Rahmen sitzt und
unten herauslaeuft, waehrend der Rahmen es abschneidet.
Das passiert, wenn width:100% greift und height:100% nicht: das
Bild behaelt seine eigene Hoehe und ist hoeher als sein Feld.
Meine Regeln haben das nicht durchgesetzt, weil Flatsome die
Bilder in Zwischenebenen legt (.image-cover, .image-zoom, ein
), von denen jede ihre eigene Groesse mitbringt.
VERLAESSLICHE LOESUNG - dieselbe wie bei der Featured-Kachel:
der Rahmen ist relativ, das Bild liegt absolut auf inset 0.
Dann ist die Bildbox exakt der Rahmen, und keine Zwischenebene
kann das mehr verschieben.
========================================================================== */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
position: relative !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
overflow: hidden !important;
display: block !important;
}
/* Alle Zwischenebenen auf die volle Flaeche zwingen. */
body.iso-v1.woocommerce .product-small .box-image > a,
body.iso-v1.woocommerce .product-small .box-image > div,
body.iso-v1.woocommerce .product-small .box-image .image-cover,
body.iso-v1.woocommerce .product-small .box-image .image-zoom,
body.iso-v1.woocommerce .product-small .box-image .image-none,
body.iso-v1.woocommerce .product-small .box-image .image-fade_in_back,
body.iso-v1 .shop-container .product-small .box-image > a,
body.iso-v1 .shop-container .product-small .box-image > div {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-height: 0 !important;
padding: 6% !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
/* Flatsome legt bei einigen Einstellungen ein zweites Bild fuer den
Hover darueber. Es bekommt dieselbe Behandlung, sonst springt es
beim Ueberfahren. */
body.iso-v1.woocommerce .product-small .box-image .show-on-hover,
body.iso-v1.woocommerce .product-small .box-image .hover-img {
position: absolute !important;
inset: 0 !important;
}
/* ==========================================================================
46 DREI SACHEN AUS DER MOBILEN DURCHSICHT
========================================================================== */
/* --------------------------------------------------------------------------
1 FEATURED-KACHEL: LUFT ÜBER DEM BILD
BEFUND (gemessen, 390px): die Karte hat min-height 470px und
justify-content: space-between. Der Inhalt misst aber nur 291px
(Plakette 30 + Bild 195 + Fusszeile 66). Die uebrigen 179px
verteilt space-between als Luecke - und zwar genau zwischen
Plakette und Bild.
Beides stammt aus der Zeit, als die Kachel sich auf die Hoehe
der vier Nachbarkacheln strecken musste. Seit sie sich nach
ihrem Inhalt richtet, ist es nur noch ein Loch.
-------------------------------------------------------------------------- */
body.iso-v1 .iso-feature-card {
min-height: 0 !important;
justify-content: flex-start !important;
}
body.iso-v1 .iso-feature-media { margin-top: 14px !important; }
body.iso-v1 .iso-feature-footer { margin-top: 16px !important; }
@media (min-width: 1024px) {
/* Am Desktop steht sie neben vier Kacheln. Dort darf sie
mitwachsen, aber das Bild bekommt den Zuwachs, nicht die
Luecke darueber. */
body.iso-v1 .iso-feature-card { justify-content: flex-start !important; }
body.iso-v1 .iso-feature-media { flex: 1 1 auto !important; aspect-ratio: auto !important; min-height: 300px; }
}
/* --------------------------------------------------------------------------
2 MENUEKNOPF: DER RUNDE RING
Ein Kreis um drei Striche ist eine Flatsome-Vorgabe. Er
konkurriert mit dem runden Warenkorb-Zaehler daneben, und zwei
Kreise nebeneinander in der Kopfzeile wirken wie ein Doppel.
Der Knopf braucht keine Umrandung - er braucht eine Flaeche, die
gross genug zum Treffen ist. Die ist jetzt da, nur unsichtbar.
-------------------------------------------------------------------------- */
body.iso-v1 .header-button .button.icon,
body.iso-v1 .off-canvas-toggle,
body.iso-v1 .mobile-nav .button.icon,
body.iso-v1 .header-button a.button.icon.circle {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
transition: background-color 160ms var(--iso-ease);
}
body.iso-v1 .header-button .button.icon:active,
body.iso-v1 .off-canvas-toggle:active {
background: rgba(255,255,255,.10) !important;
}
body.iso-v1 .header-button .button.icon .icon-menu,
body.iso-v1 .off-canvas-toggle .icon-menu {
font-size: 24px !important;
color: #fff !important;
}
/* Der Warenkorb-Zaehler bekommt dieselbe Sprache: keine Kontur,
sondern eine gefuellte Flaeche - dann ist klar, welcher der
beiden eine Zahl traegt. */
body.iso-v1 .header-cart-link .cart-icon strong,
body.iso-v1 .cart-icon strong {
border: 0 !important;
background: var(--iso-blue) !important;
color: #fff !important;
font-weight: 700 !important;
}
/* --------------------------------------------------------------------------
3 „ALLE PRODUKTE": DIE DREI VIALS WAREN KLEINER
BEFUND: die Einzelkacheln zeigen ein Vial ueber die volle Hoehe
des Bildfelds, der Faecher dagegen drei kleine. Dadurch wirkt
die Kachel leer, obwohl sie gleich gross ist.
Die drei stehen jetzt ueberlappend und deutlich groesser - die
Gruppe hat damit ungefaehr dasselbe optische Gewicht wie ein
einzelnes Vial.
-------------------------------------------------------------------------- */
body.iso-v1 .iso-all-products-fan {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0 !important;
width: 100%;
height: 100%;
padding: 0 !important;
}
body.iso-v1 .iso-all-products-fan img {
width: auto !important;
height: 82% !important;
max-height: none !important;
max-width: 46% !important;
object-fit: contain !important;
}
/* Ueberlappung: die Gruppe wirkt als ein Objekt statt als drei
Einzelteile mit Luecken. */
body.iso-v1 .iso-all-products-fan img:nth-child(1) {
transform: rotate(-7deg) !important;
margin-right: -13% !important;
z-index: 1;
}
body.iso-v1 .iso-all-products-fan img:nth-child(2) {
height: 94% !important;
transform: none !important;
z-index: 3;
}
body.iso-v1 .iso-all-products-fan img:nth-child(3) {
transform: rotate(7deg) !important;
margin-left: -13% !important;
z-index: 2;
}
body.iso-v1 .iso-all-products-fan img:nth-child(n+4) { display: none !important; }
/* BEFUND: die Fusszeile begann 34px BEVOR die Bildflaeche endete,
obwohl beide im normalen Fluss stehen und keine negativen
Raender haben.
Ursache ist aspect-ratio in einer Flex-Spalte: die Flexrechnung
nimmt eine andere Hoehe an als die, mit der das Element
anschliessend gezeichnet wird. Gemessen: Layout rechnete mit
161px, gezeichnet wurden 195px.
Der padding-bottom-Trick kennt dieses Problem nicht - er
erzeugt die Hoehe als echten Innenabstand, den die Flexrechnung
sieht. Ausserdem ist die Flaeche jetzt quadratisch wie bei den
Kacheln daneben, statt 4:3. */
body.iso-v1 .iso-feature-media {
position: relative !important;
aspect-ratio: auto !important;
height: 0 !important;
min-height: 0 !important;
padding-bottom: 100% !important;
overflow: hidden;
}
@media (min-width: 1024px) {
/* Am Desktop steht die Kachel neben vier Kacheln und darf
hochformatiger sein. */
body.iso-v1 .iso-feature-media {
flex: 0 0 auto !important;
padding-bottom: 92% !important;
}
}
/* Die Ueberlappung blieb auch mit dem padding-Trick bestehen - es
liegt also nicht am Seitenverhaeltnis, sondern an der
Flex-Spalte selbst: sie rechnet fuer dieses Element mit einer
anderen Hoehe, als am Ende gezeichnet wird.
Normaler Blockfluss kennt diese Abweichung nicht. Die Kachel
braucht kein Flexbox - sie hat drei Elemente untereinander. */
body.iso-v1 .iso-feature-card {
display: block !important;
position: relative;
}
body.iso-v1 .iso-feature-card .iso-card-badge {
position: absolute !important;
top: 18px;
left: 18px;
z-index: 3;
}
body.iso-v1 .iso-feature-media {
display: block !important;
margin: 44px 0 0 !important;
}
body.iso-v1 .iso-feature-footer {
display: flex !important;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin: 18px 0 0 !important;
padding: 0 !important;
}
/* BEFUND: das Bildfeld meldet 260px Hoehe, der Fluss rechnet aber
mit 210px - deshalb blieb die Ueberlappung mit jedem Trick
bestehen, ob aspect-ratio oder padding-bottom.
Die einfachste Loesung braucht gar keinen Trick: die
Produktbilder SIND quadratisch. Steht das Bild im normalen
Fluss, bestimmt es die Hoehe seines Feldes selbst - und
zwischen gemeldeter und gerechneter Hoehe kann keine Differenz
entstehen, weil es nur eine gibt. */
body.iso-v1 .iso-feature-media {
position: relative !important;
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
aspect-ratio: auto !important;
overflow: hidden;
}
body.iso-v1 .iso-feature-media img,
body.iso-v1 .iso-feature-card img {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
padding: 7% !important;
margin: 0 !important;
object-fit: contain !important;
}
/* Dieselbe Vereinfachung fuer die Kacheln - auch dort braucht es
kein Seitenverhaeltnis mehr. */
body.iso-v1 .iso-product-tile-media {
position: relative !important;
display: block !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
padding: 0 !important;
}
body.iso-v1 .iso-product-tile-media img {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
padding: 8% !important;
object-fit: contain !important;
}
/* Die Sammelkachel hat drei Bilder nebeneinander und braucht
deshalb weiterhin eine Flaeche. Sie bekommt die Hoehe der
Nachbarkachel ueber dasselbe Verhaeltnis wie deren Bild. */
body.iso-v1 .iso-all-products-media {
position: relative !important;
display: block !important;
height: 0 !important;
padding-bottom: 100% !important;
aspect-ratio: auto !important;
overflow: hidden;
}
body.iso-v1 .iso-all-products-fan {
position: absolute !important;
inset: 8% !important;
display: flex !important;
align-items: center;
justify-content: center;
height: auto !important;
}
body.iso-v1 .iso-all-products-fan img {
position: static !important;
width: auto !important;
height: 78% !important;
max-width: 46% !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(2) { height: 92% !important; }
/* Weder Flex noch Blockfluss haben die gezeichnete Hoehe der
Bildflaeche korrekt uebernommen - der Abstand blieb 32px zu
klein. Ein Raster rechnet seine Zeilen dagegen immer aus den
tatsaechlichen Elementhoehen. */
body.iso-v1 .iso-feature-card {
display: grid !important;
grid-template-rows: auto auto !important;
align-content: start !important;
row-gap: 18px;
}
body.iso-v1 .iso-feature-media { margin: 44px 0 0 !important; }
body.iso-v1 .iso-feature-footer { margin: 0 !important; }
/* Der Rest der Erklaerung: der Innenabstand sass am BILD und war
in Prozent angegeben. Prozentwerte fuer Innenabstaende beziehen
sich auf die BREITE des Elternteils, auch oben und unten - der
Fluss hat das anders gerechnet als die Darstellung.
Der Abstand gehoert ohnehin an die Flaeche, nicht ans Bild. */
body.iso-v1 .iso-feature-media {
padding: 7% !important;
box-sizing: border-box !important;
}
body.iso-v1 .iso-feature-media img,
body.iso-v1 .iso-feature-card img { padding: 0 !important; }
body.iso-v1 .iso-product-tile-media {
padding: 8% !important;
box-sizing: border-box !important;
}
body.iso-v1 .iso-product-tile-media img { padding: 0 !important; }
/* HIER WAR ER.
Die Bildflaeche hatte top: 50px - ein Rest aus der Fassung, in
der sie absolut positioniert war (inset: 46px 22px 78px). Ich
hatte position auf relative umgestellt, aber die Versatzwerte
stehen lassen. Bei relative bleibt der Platz im Layout dort, wo
das Element hingehoert, waehrend GEZEICHNET wird es 50px tiefer.
Daher beides zugleich: Luft ueber dem Bild und Ueberlappung
darunter. Kein Flex-, Raster- oder aspect-ratio-Problem - ich
habe drei Ansaetze durchprobiert, wo ein vergessener
Versatzwert die Ursache war.
Merkposten: nach jedem Wechsel von absolute auf relative
gehoeren top/right/bottom/left mit zurueckgesetzt. */
body.iso-v1 .iso-feature-media,
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media {
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
}
/* ==========================================================================
47 KOPFZEILE UND SHOP-KACHELN — NACHZUG
Meine Regeln zum Menueknopf haben nicht gegriffen, weil ich die
falschen Klassen angesprochen habe. Flatsome baut den Knopf als
mit data-open="#main-menu".
Die Umrandung kommt von .is-outline und von .circle - beide hatte
ich nicht in der Liste.
========================================================================== */
/* ---------- Menueknopf: Ring weg ---------- */
body.iso-v1 .header-button a.button,
body.iso-v1 .header-button a.button.circle,
body.iso-v1 .header-button a.button.is-outline,
body.iso-v1 a[data-open="#main-menu"],
body.iso-v1 a.off-canvas-toggle,
body.iso-v1 .nav-icon > a,
body.iso-v1 li.nav-icon a.button {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-width: 0 !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
line-height: 44px !important;
}
body.iso-v1 .header-button a.button::before,
body.iso-v1 a[data-open="#main-menu"]::before { display: none !important; }
body.iso-v1 .header-button a.button:active,
body.iso-v1 a[data-open="#main-menu"]:active { background: rgba(255,255,255,.12) !important; }
body.iso-v1 .header-button .icon-menu,
body.iso-v1 a[data-open="#main-menu"] .icon-menu {
font-size: 25px !important;
color: #fff !important;
}
/* ---------- „Korb" ausschreiben entfaellt ----------
Ein Einkaufswagen mit einer Zahl daneben braucht keine
Beschriftung. Das Wort kostet auf dem Handy Platz, den die
Kopfzeile nicht hat. */
body.iso-v1 .header-cart-title,
body.iso-v1 .cart-item .header-cart-title,
body.iso-v1 .nav-dropdown-has-arrow .header-cart-title {
display: none !important;
}
body.iso-v1 .header-cart-link,
body.iso-v1 li.cart-item > a {
display: inline-flex !important;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 6px !important;
}
/* ---------- Schnellansicht schob die Kachel ----------
BEFUND: beim Ueberfahren erschien Flatsomes Schnellansicht-Knopf
IM Fluss der Kachel. Dadurch rutschte alles darueber nach oben,
bis unter die Angebots-Plakette. Ein Element, das beim
Ueberfahren Platz einnimmt, verschiebt zwangslaeufig den Rest.
Er sitzt jetzt ueber dem Bild statt darin - die Kachel bleibt
ruhig. */
body.iso-v1.woocommerce .product-small .quick-view,
body.iso-v1.woocommerce .product-small .quick-view-added,
body.iso-v1 .shop-container .product-small .quick-view {
position: absolute !important;
left: 50% !important;
bottom: 12px !important;
transform: translateX(-50%) !important;
margin: 0 !important;
z-index: 4;
width: auto !important;
white-space: nowrap;
}
body.iso-v1.woocommerce .product-small .image-tools,
body.iso-v1.woocommerce .product-small .box-image .image-tools {
position: absolute !important;
inset: auto 0 10px 0 !important;
margin: 0 !important;
z-index: 4;
}
/* Die Angebots-Plakette bleibt in jedem Fall obenauf. */
body.iso-v1.woocommerce .product-small .badge-container,
body.iso-v1 .shop-container .product-small .badge-container {
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 5 !important;
margin: 0 !important;
}
/* Sicherheitsnetz: nichts in der Bildflaeche darf ihre Hoehe
veraendern. */
body.iso-v1.woocommerce .product-small .box-image { position: relative !important; }
/* ==========================================================================
48 „ALLE PRODUKTE" — DREI VIALS IN DERSELBEN GROESSE
BEFUND: die drei Vials im Faecher waren deutlich kleiner als das
einzelne Vial in der Nachbarkachel. Ursache war, dass ich sie
ueber die BREITE begrenzt hatte - drei nebeneinander in einer
Kachel heisst dann automatisch je ein Drittel.
Damit sie gleich gross sind, muss die Hoehe vorgeben und die
Breite folgen. Drei Vials zu je 86 Prozent Feldhoehe sind
zusammen breiter als das Feld - sie ueberlappen deshalb leicht.
Das ist kein Notbehelf, sondern die einzige Anordnung, in der
drei Objekte dieselbe Groesse haben wie eines daneben.
========================================================================== */
body.iso-v1 .iso-all-products-media {
position: relative !important;
display: block !important;
height: 0 !important;
padding-bottom: 100% !important;
overflow: hidden !important;
}
body.iso-v1 .iso-all-products-fan {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
}
/* Dieselbe Hoehe wie das einzelne Vial in der Nachbarkachel:
dort fuellt es 86 Prozent des Bildfelds. */
body.iso-v1 .iso-all-products-fan img {
position: static !important;
width: auto !important;
height: 86% !important;
max-width: none !important;
max-height: none !important;
padding: 0 !important;
object-fit: contain !important;
flex: 0 0 auto !important;
}
/* Die Ueberlappung: drei Vials zu je rund 40 Prozent der
Feldbreite passen sonst nicht nebeneinander. Das mittlere liegt
vorn. */
body.iso-v1 .iso-all-products-fan img:nth-child(1) {
margin-right: -9% !important;
transform: none !important;
z-index: 1;
}
body.iso-v1 .iso-all-products-fan img:nth-child(2) {
transform: none !important;
z-index: 3;
}
body.iso-v1 .iso-all-products-fan img:nth-child(3) {
margin-left: -9% !important;
transform: none !important;
z-index: 2;
}
body.iso-v1 .iso-all-products-fan img:nth-child(n+4) { display: none !important; }
/* Nachgemessen: die Faechervials waren mit 86 Prozent sogar etwas
groesser als das einzelne Vial daneben (244 gegen 225), und das
mittlere trug noch eine alte Sonderregel mit 92 Prozent.
Das einzelne Vial fuellt 84 Prozent seines Feldes - genau diesen
Wert bekommen jetzt alle drei. Gleich gross heisst gleich gross,
auch das mittlere. */
body.iso-v1 .iso-all-products-fan img,
body.iso-v1 .iso-all-products-fan img:nth-child(2) {
height: 84% !important;
}
body.iso-v1 .iso-all-products-fan img:nth-child(1) { margin-right: -11% !important; }
body.iso-v1 .iso-all-products-fan img:nth-child(3) { margin-left: -11% !important; }
/* BEFUND: drei Bilder nebeneinander ergaben 603px in einem 268px
breiten Feld. Ursache: die Produktbilder sind QUADRATISCH, das
Vial darin nimmt nur rund 40 Prozent der Breite ein - der Rest
ist durchsichtig. Legt man drei solche Quadrate nebeneinander,
liegen zwischen den Vials zwei leere Quadrathaelften.
Ueberlappen half nicht: entweder blieb es zu breit oder die
Vials lagen uebereinander.
Die Loesung ist ein schmaler Ausschnitt statt eines skalierten
Bildes: jedes Feld ist ein Drittel breit und so hoch wie das
einzelne Vial nebenan. Mit object-fit: cover fuellt das Bild
diese Hoehe und wird seitlich beschnitten - weg faellt genau
die leere Flaeche, stehen bleibt das Vial.
Ergebnis: drei Vials in derselben Groesse wie das einzelne
daneben, nebeneinander, ohne Ueberlappung. */
body.iso-v1 .iso-all-products-fan {
gap: 1.5% !important;
}
body.iso-v1 .iso-all-products-fan img,
body.iso-v1 .iso-all-products-fan img:nth-child(1),
body.iso-v1 .iso-all-products-fan img:nth-child(2),
body.iso-v1 .iso-all-products-fan img:nth-child(3) {
width: 32% !important;
height: 80% !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
flex: 0 0 31% !important;
}
/* ==========================================================================
49 V1.28 — PRODUKTBILDER OHNE EINGEBAUTEN HINTERGRUND
Die Produktdateien sind echte Freisteller. Deshalb gibt es hier weder
Verlauf, Raster, Korn, Leuchteffekt noch Mischmodus. Eine spaetere
Inszenierung kann ausschliesslich per CSS auf diesen Flaechen erfolgen,
ohne dass die Bilddateien erneut gebaut werden muessen.
========================================================================== */
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image,
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-all-products-media,
body.iso-v1 .iso-feature-media,
body.iso-v1.single-product .woocommerce-product-gallery__image,
body.iso-v1.single-product .product-gallery-slider .slide {
background: transparent !important;
background-image: none !important;
isolation: auto !important;
}
body.iso-v1.woocommerce .product-small .box-image::before,
body.iso-v1.woocommerce .product-small .box-image::after,
body.iso-v1.woocommerce-page .product-small .box-image::before,
body.iso-v1.woocommerce-page .product-small .box-image::after,
body.iso-v1 .shop-container .product-small .box-image::before,
body.iso-v1 .shop-container .product-small .box-image::after,
body.iso-v1 .iso-product-tile-media::before,
body.iso-v1 .iso-product-tile-media::after,
body.iso-v1 .iso-all-products-media::before,
body.iso-v1 .iso-all-products-media::after,
body.iso-v1 .iso-feature-media::before,
body.iso-v1 .iso-feature-media::after,
body.iso-v1.single-product .woocommerce-product-gallery__image::before,
body.iso-v1.single-product .woocommerce-product-gallery__image::after {
content: none !important;
display: none !important;
background: none !important;
}
body.iso-v1.woocommerce .product-small .box-image,
body.iso-v1.woocommerce-page .product-small .box-image,
body.iso-v1 .shop-container .product-small .box-image {
position: relative !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.iso-v1.woocommerce .product-small .box-image .image-fade_in_back,
body.iso-v1.woocommerce .product-small .box-image .image-none,
body.iso-v1.woocommerce .product-small .box-image .image-zoom,
body.iso-v1.woocommerce-page .product-small .box-image .image-fade_in_back,
body.iso-v1.woocommerce-page .product-small .box-image .image-none,
body.iso-v1.woocommerce-page .product-small .box-image .image-zoom {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img,
body.iso-v1 .iso-product-tile-media img,
body.iso-v1 .iso-feature-media img,
body.iso-v1.single-product .woocommerce-product-gallery__image img,
body.iso-v1.single-product .product-gallery-slider img {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
filter: none !important;
mix-blend-mode: normal !important;
background: transparent !important;
}
body.iso-v1 .iso-product-tile-media,
body.iso-v1 .iso-feature-media {
position: relative !important;
display: block !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Drei gleich grosse Freisteller. Die schmalen Bildfenster schneiden nur
den transparenten Seitenraum des quadratischen Quellbilds ab. */
body.iso-v1 .iso-all-products-media {
position: relative !important;
display: block !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.iso-v1 .iso-all-products-fan {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 1% !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
}
body.iso-v1 .iso-all-products-fan img,
body.iso-v1 .iso-all-products-fan img:nth-child(1),
body.iso-v1 .iso-all-products-fan img:nth-child(2),
body.iso-v1 .iso-all-products-fan img:nth-child(3) {
position: static !important;
width: 32% !important;
height: 82% !important;
max-width: none !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
filter: none !important;
mix-blend-mode: normal !important;
background: transparent !important;
flex: 0 0 32% !important;
}
@media (min-width: 1024px) and (hover: hover) {
body.iso-v1.woocommerce .product-small:hover .box-image img,
body.iso-v1.woocommerce-page .product-small:hover .box-image img {
transform: scale(1.025) !important;
}
}
/* ==========================================================================
50 V1.29 — DESKTOP-BILDRAHMEN UND PRODUKT-ZOOM
Mobil sitzt das Bild bereits korrekt. Der Desktop braucht zusaetzlich eine
feste Hoehenkette vom Flatsome-Bildwrapper bis zum img. Ohne diese Kette
berechnet der innere Link seine Hoehe aus dem 1200px-Original und wird vom
aeusseren Quadrat abgeschnitten.
========================================================================== */
@media (min-width: 768px) {
body.iso-v1.woocommerce .product-small .box-image > div,
body.iso-v1.woocommerce-page .product-small .box-image > div,
body.iso-v1 .shop-container .product-small .box-image > div,
body.iso-v1.woocommerce .product-small .box-image > a,
body.iso-v1.woocommerce-page .product-small .box-image > a,
body.iso-v1 .shop-container .product-small .box-image > a,
body.iso-v1.woocommerce .product-small .box-image > div > a,
body.iso-v1.woocommerce-page .product-small .box-image > div > a,
body.iso-v1 .shop-container .product-small .box-image > div > a {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
}
/* V1.30.0: abschliessender Kaskadenanker. Dieser Block muss nach den alten
Shop-Korrekturen stehen, damit deren absolute Position am Knopf nicht mehr
gewinnt. */
body.iso-v1.woocommerce .product-small .box-image .image-tools,
body.iso-v1.woocommerce-page .product-small .box-image .image-tools,
body.iso-v1 .shop-container .product-small .box-image .image-tools {
position: absolute !important;
inset: auto 12px 12px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
}
body.iso-v1.woocommerce .product-small .box-image .image-tools .quick-view,
body.iso-v1.woocommerce-page .product-small .box-image .image-tools .quick-view,
body.iso-v1 .shop-container .product-small .box-image .image-tools .quick-view,
body.iso-v1.woocommerce .product-small .box-image .image-tools .quick-view-added,
body.iso-v1.woocommerce-page .product-small .box-image .image-tools .quick-view-added {
position: static !important;
inset: auto !important;
width: auto !important;
height: 34px !important;
margin: 0 !important;
transform: none !important;
}
body.iso-v1 .iso-coa-keys li {
display: grid !important;
grid-template-columns: minmax(92px, 1fr) 132px !important;
align-items: center !important;
column-gap: 16px !important;
width: 100% !important;
}
body.iso-v1 .iso-coa-keys li .iso-coa-verifykey {
box-sizing: border-box !important;
width: 132px !important;
max-width: 132px !important;
justify-self: end !important;
text-align: center !important;
}
@media (max-width: 767px) {
body.iso-v1 .iso-coa-keys li {
grid-template-columns: minmax(84px, 1fr) minmax(126px, 46%) !important;
column-gap: 10px !important;
}
body.iso-v1 .iso-coa-keys li .iso-coa-verifykey {
width: 100% !important;
max-width: 132px !important;
}
}
/* Auf dunklem Grau ist der helle Matte-Rand eines Glasobjekts immer sichtbar.
Die Vollbildansicht nutzt deshalb denselben neutralen Hintergrund wie die
Produktflaechen. Das Bild selbst bleibt transparent und unveraendert. */
body.iso-v1 .pswp,
body.iso-v1 .pswp__bg {
background: var(--iso-surface, #f7f7f9) !important;
}
body.iso-v1 .pswp__bg { opacity: 1 !important; }
body.iso-v1 .pswp__top-bar {
background: rgba(10, 26, 43, .96) !important;
}
body.iso-v1 .pswp__counter { color: #fff !important; }
body.iso-v1 .pswp__img {
background: transparent !important;
mix-blend-mode: normal !important;
}
/* ==========================================================================
51 V1.29.1 — NUR MOBIL: SHOP-VIAL VOLLSTAENDIG ANZEIGEN
Auf dem Handy hatte der Flatsome-Link innerhalb der Bildflaeche keine
definierte Hoehe. Das 1:1-Feld schnitt deshalb unten einen Teil des Vials
ab. Die Regel gilt nur fuer WooCommerce-Kacheln bis 767px.
========================================================================== */
@media (max-width: 767px) {
body.iso-v1.woocommerce .product-small .box-image > div,
body.iso-v1.woocommerce-page .product-small .box-image > div,
body.iso-v1 .shop-container .product-small .box-image > div,
body.iso-v1.woocommerce .product-small .box-image > a,
body.iso-v1.woocommerce-page .product-small .box-image > a,
body.iso-v1 .shop-container .product-small .box-image > a,
body.iso-v1.woocommerce .product-small .box-image > div > a,
body.iso-v1.woocommerce-page .product-small .box-image > div > a,
body.iso-v1 .shop-container .product-small .box-image > div > a {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body.iso-v1.woocommerce .product-small .box-image img,
body.iso-v1.woocommerce-page .product-small .box-image img,
body.iso-v1 .shop-container .product-small .box-image img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
box-sizing: border-box !important;
padding: 4% 5% 6% !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
}
/* ==========================================================================
53 V1.30.1 — SCHNELLANSICHT NUR AUF DESKTOP-HOVER
Touchgeraete besitzen keinen verlaesslichen Hover-Zustand. Dort stoert der
dauerhaft eingeblendete Knopf und nimmt dem Produktbild Platz. Mobil wird
die Schnellansicht deshalb entfernt. Auf Desktop erscheint sie beim Hover
und beim Tastaturfokus.
========================================================================== */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
body.iso-v1.woocommerce .product-small .quick-view,
body.iso-v1.woocommerce-page .product-small .quick-view,
body.iso-v1 .shop-container .product-small .quick-view,
body.iso-v1.woocommerce .product-small .quick-view-added,
body.iso-v1.woocommerce-page .product-small .quick-view-added {
display: none !important;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
body.iso-v1.woocommerce .product-small .box-image .image-tools,
body.iso-v1.woocommerce-page .product-small .box-image .image-tools,
body.iso-v1 .shop-container .product-small .box-image .image-tools {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 160ms var(--iso-ease), visibility 160ms var(--iso-ease) !important;
}
body.iso-v1.woocommerce .product-small:hover .box-image .image-tools,
body.iso-v1.woocommerce-page .product-small:hover .box-image .image-tools,
body.iso-v1 .shop-container .product-small:hover .box-image .image-tools,
body.iso-v1.woocommerce .product-small:focus-within .box-image .image-tools,
body.iso-v1.woocommerce-page .product-small:focus-within .box-image .image-tools,
body.iso-v1 .shop-container .product-small:focus-within .box-image .image-tools {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
/* ==========================================================================
54 V1.31.0 — PRODUKTBESCHREIBUNGEN UND SEO-INHALTE
Die WooCommerce-CSV liefert semantisches HTML ohne Inline-Styles. Dieser
Block setzt Kurzbeschreibung, Spezifikationen, Dokumentation, FAQ und
Research-Use-Hinweis im Isolite-Design. Dadurch bleiben Inhalte und
Gestaltung getrennt und das Markup kann später zentral angepasst werden.
========================================================================== */
body.iso-v1.single-product .iso-product-summary-copy,
body.iso-v1.single-product .iso-product-description {
font-family: var(--iso-font) !important;
color: var(--iso-text);
}
body.iso-v1.single-product .iso-product-summary-copy {
display: grid;
gap: 14px;
margin: 22px 0 4px;
}
body.iso-v1.single-product .iso-product-summary-copy p,
body.iso-v1.single-product .iso-product-description p {
margin: 0;
line-height: 1.72;
}
body.iso-v1.single-product .iso-product-summary-kicker,
body.iso-v1.single-product .iso-product-kicker {
color: var(--iso-blue-text) !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .18em;
line-height: 1.4 !important;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-summary-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.iso-v1.single-product .iso-product-summary-facts span {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 6px 11px;
border: 1px solid var(--iso-blue-line);
border-radius: 999px;
background: var(--iso-blue-soft);
color: var(--iso-navy);
font-size: 11px;
font-weight: 700;
line-height: 1.25;
}
body.iso-v1.single-product .iso-product-summary-note {
padding: 13px 15px;
border-left: 3px solid var(--iso-blue);
border-radius: 0 var(--iso-radius-sm) var(--iso-radius-sm) 0;
background: var(--iso-surface);
color: var(--iso-muted);
font-size: 12px;
line-height: 1.65 !important;
}
body.iso-v1.single-product .iso-product-summary-note strong {
color: var(--iso-navy);
}
body.iso-v1.single-product .iso-product-description {
width: min(100%, 1120px);
margin: 0 auto;
padding: clamp(28px, 4vw, 54px) 0 clamp(12px, 2vw, 28px);
font-size: 15px;
}
body.iso-v1.single-product .iso-product-description__intro {
max-width: 850px;
margin-bottom: clamp(24px, 3vw, 38px);
}
body.iso-v1.single-product .iso-product-description__intro h2 {
max-width: 820px;
margin: 10px 0 15px !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font-display) !important;
font-size: clamp(27px, 3vw, 42px) !important;
font-weight: 800 !important;
letter-spacing: -.035em !important;
line-height: 1.06 !important;
text-transform: none !important;
}
body.iso-v1.single-product .iso-product-description__intro > p:last-child {
max-width: 780px;
color: var(--iso-muted);
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.72;
}
body.iso-v1.single-product .iso-product-description__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 0 0 clamp(34px, 5vw, 58px);
}
body.iso-v1.single-product .iso-product-description__card {
min-height: 152px;
padding: 21px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: linear-gradient(145deg, #fff 0%, var(--iso-surface) 100%);
}
body.iso-v1.single-product .iso-product-description__card > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 24px;
margin-bottom: 18px;
border-radius: 999px;
background: var(--iso-blue-soft);
color: var(--iso-blue-text);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
}
body.iso-v1.single-product .iso-product-description__card h3 {
margin: 0 0 7px !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
line-height: 1.25 !important;
text-transform: none !important;
}
body.iso-v1.single-product .iso-product-description__card p {
color: var(--iso-muted);
font-size: 13px;
line-height: 1.6;
}
body.iso-v1.single-product .iso-product-description > h3 {
margin: clamp(34px, 5vw, 58px) 0 16px !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font-display) !important;
font-size: clamp(22px, 2.4vw, 30px) !important;
font-weight: 800 !important;
letter-spacing: -.025em !important;
line-height: 1.15 !important;
text-transform: none !important;
}
body.iso-v1.single-product .iso-product-table-wrap {
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
}
body.iso-v1.single-product table.iso-product-specs {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse;
font-size: 13px;
}
body.iso-v1.single-product table.iso-product-specs th,
body.iso-v1.single-product table.iso-product-specs td {
padding: 14px 17px !important;
border: 0 !important;
border-bottom: 1px solid var(--iso-line) !important;
color: var(--iso-text) !important;
line-height: 1.55;
text-align: left;
vertical-align: top;
}
body.iso-v1.single-product table.iso-product-specs th {
width: 31%;
background: var(--iso-surface);
color: var(--iso-navy) !important;
font-size: 11px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
body.iso-v1.single-product table.iso-product-specs tr:last-child th,
body.iso-v1.single-product table.iso-product-specs tr:last-child td {
border-bottom: 0 !important;
}
body.iso-v1.single-product .iso-product-description > ul {
display: grid;
gap: 9px;
margin: 17px 0 0;
padding: 0;
list-style: none;
}
body.iso-v1.single-product .iso-product-description > ul li {
position: relative;
margin: 0;
padding: 0 0 0 23px;
color: var(--iso-text);
line-height: 1.62;
}
body.iso-v1.single-product .iso-product-description > ul li::before {
content: '';
position: absolute;
top: .72em;
left: 2px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--iso-blue);
box-shadow: 0 0 0 4px var(--iso-blue-soft);
}
body.iso-v1.single-product .iso-product-links {
margin-top: 18px !important;
padding-top: 16px;
border-top: 1px solid var(--iso-line);
color: var(--iso-muted);
font-size: 13px;
}
body.iso-v1.single-product .iso-product-links a {
color: var(--iso-blue-text);
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--iso-blue-line);
text-underline-offset: 3px;
}
body.iso-v1.single-product .iso-product-faq {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
body.iso-v1.single-product .iso-product-faq__item {
padding: 19px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
background: #fff;
}
body.iso-v1.single-product .iso-product-faq__item h4 {
margin: 0 0 8px !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font) !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
line-height: 1.35 !important;
text-transform: none !important;
}
body.iso-v1.single-product .iso-product-faq__item p {
color: var(--iso-muted);
font-size: 13px;
line-height: 1.62;
}
body.iso-v1.single-product .iso-product-ruo {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: 18px;
margin-top: clamp(34px, 5vw, 58px);
padding: 20px 22px;
border: 1px solid var(--iso-blue-line);
border-left: 4px solid var(--iso-blue);
border-radius: var(--iso-radius);
background: var(--iso-blue-soft);
}
body.iso-v1.single-product .iso-product-ruo > strong {
color: var(--iso-navy);
font-size: 11px;
font-weight: 800;
letter-spacing: .07em;
line-height: 1.55;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-ruo p {
color: var(--iso-muted);
font-size: 12px;
line-height: 1.65;
}
@media (max-width: 767px) {
body.iso-v1.single-product .iso-product-summary-copy {
gap: 12px;
margin-top: 18px;
}
body.iso-v1.single-product .iso-product-summary-facts {
display: grid;
grid-template-columns: 1fr;
}
body.iso-v1.single-product .iso-product-summary-facts span {
justify-content: flex-start;
width: 100%;
}
body.iso-v1.single-product .iso-product-description {
padding-top: 22px;
font-size: 14px;
}
body.iso-v1.single-product .iso-product-description__cards,
body.iso-v1.single-product .iso-product-faq {
grid-template-columns: 1fr;
}
body.iso-v1.single-product .iso-product-description__card {
min-height: 0;
padding: 17px;
}
body.iso-v1.single-product table.iso-product-specs,
body.iso-v1.single-product table.iso-product-specs tbody,
body.iso-v1.single-product table.iso-product-specs tr,
body.iso-v1.single-product table.iso-product-specs th,
body.iso-v1.single-product table.iso-product-specs td {
display: block;
width: 100% !important;
}
body.iso-v1.single-product table.iso-product-specs th {
padding: 12px 14px 5px !important;
border-bottom: 0 !important;
}
body.iso-v1.single-product table.iso-product-specs td {
padding: 5px 14px 13px !important;
}
body.iso-v1.single-product .iso-product-ruo {
grid-template-columns: 1fr;
gap: 8px;
padding: 17px;
}
}
/* ==========================================================================
55 V1.31.1 — KOMPAKTES PRODUKTDOSSIER
Neue Gewichtung statt einer langen Folge gleichfarbiger Textboxen:
Himmelblau = Nennmenge, Navy = Charge/Dokumentation, Weiss = technische
Daten, Hellgrau = kurze Erklaerungen. Die Selektoren stehen bewusst am
Dateiende und schlagen die alten WooCommerce-Tabellenregeln.
========================================================================== */
body.iso-v1.single-product .woocommerce-Tabs-panel,
body.iso-v1.single-product .panel.entry-content {
max-width: 1160px !important;
}
body.iso-v1.single-product .iso-product-summary-copy {
display: grid !important;
gap: 13px !important;
margin: 18px 0 6px !important;
}
body.iso-v1.single-product .iso-product-summary-intro {
color: var(--iso-text) !important;
font-size: 14px !important;
line-height: 1.65 !important;
}
body.iso-v1.single-product .iso-product-summary-facts {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1px !important;
margin: 1px 0 0 !important;
padding: 1px !important;
overflow: hidden;
border: 1px solid var(--iso-line) !important;
border-radius: 10px;
background: var(--iso-line) !important;
list-style: none !important;
}
body.iso-v1.single-product .iso-product-summary-facts li {
display: grid !important;
align-content: center;
gap: 4px;
min-width: 0;
min-height: 62px;
margin: 0 !important;
padding: 10px 11px !important;
background: #fff;
}
body.iso-v1.single-product .iso-product-summary-facts li::before {
content: none !important;
}
body.iso-v1.single-product .iso-product-summary-facts li:first-child {
background: var(--iso-blue-soft);
}
body.iso-v1.single-product .iso-product-summary-facts li span {
color: var(--iso-muted-2);
font-size: 9px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-summary-facts li strong {
overflow-wrap: anywhere;
color: var(--iso-navy);
font-size: 11px;
font-weight: 700;
line-height: 1.35;
}
body.iso-v1.single-product .iso-product-summary-note {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 10px 0 0 !important;
border: 0 !important;
border-top: 1px solid var(--iso-line) !important;
border-radius: 0 !important;
background: transparent !important;
}
body.iso-v1.single-product .iso-product-summary-note > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 24px;
border-radius: 999px;
background: var(--iso-navy);
color: #fff;
font-size: 9px;
font-weight: 800;
letter-spacing: .08em;
}
body.iso-v1.single-product .iso-product-summary-note p {
color: var(--iso-muted) !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
body.iso-v1.single-product .iso-product-description {
display: grid !important;
gap: 30px !important;
width: 100% !important;
max-width: 1160px !important;
margin: 0 auto !important;
padding: clamp(30px, 4vw, 54px) 0 18px !important;
}
body.iso-v1.single-product .iso-product-description__hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 14px 28px;
margin: 0 !important;
padding: 0 0 25px !important;
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1.single-product .iso-product-description__hero h2 {
margin: 8px 0 0 !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font-display) !important;
font-size: clamp(30px, 3.7vw, 48px) !important;
font-weight: 800 !important;
letter-spacing: -.045em !important;
line-height: 1.02 !important;
text-transform: none !important;
}
body.iso-v1.single-product .iso-product-description__lead {
grid-column: 1 / -1;
max-width: 820px;
color: var(--iso-muted) !important;
font-size: clamp(14px, 1.35vw, 17px) !important;
line-height: 1.7 !important;
}
body.iso-v1.single-product .iso-product-ruo-badge {
display: inline-flex;
align-items: center;
min-height: 31px;
margin-top: 3px;
padding: 7px 12px;
border: 1px solid var(--iso-blue-line);
border-radius: 999px;
background: var(--iso-blue-soft);
color: var(--iso-blue-text);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
line-height: 1;
white-space: nowrap;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-metrics {
display: grid !important;
grid-template-columns: .78fr 1.22fr 1fr;
gap: 12px;
margin: 0 !important;
}
body.iso-v1.single-product .iso-product-metric {
display: grid !important;
align-content: start;
gap: 8px;
min-width: 0;
min-height: 150px;
margin: 0 !important;
padding: 20px !important;
border: 1px solid var(--iso-line);
border-radius: 12px;
background: #fff;
}
body.iso-v1.single-product .iso-product-metric > span {
color: var(--iso-muted-2);
font-size: 10px;
font-weight: 800;
letter-spacing: .13em;
line-height: 1.2;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-metric > strong {
overflow-wrap: anywhere;
color: var(--iso-navy);
font-family: var(--iso-font-display);
font-size: clamp(20px, 2.15vw, 29px);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.08;
}
body.iso-v1.single-product .iso-product-metric > small {
align-self: end;
color: var(--iso-muted);
font-size: 11px;
line-height: 1.48;
}
body.iso-v1.single-product .iso-product-metric.is-blue {
border-color: var(--iso-blue-line);
background: linear-gradient(145deg, #f5fbff 0%, var(--iso-blue-soft) 100%);
}
body.iso-v1.single-product .iso-product-metric.is-blue > strong {
color: var(--iso-blue-text);
font-size: clamp(28px, 3.1vw, 42px);
}
body.iso-v1.single-product .iso-product-metric.is-navy {
border-color: var(--iso-navy);
background: linear-gradient(145deg, var(--iso-dark-2) 0%, var(--iso-navy-deep) 100%);
}
body.iso-v1.single-product .iso-product-metric.is-navy > span,
body.iso-v1.single-product .iso-product-metric.is-navy > small {
color: rgba(255, 255, 255, .68);
}
body.iso-v1.single-product .iso-product-metric.is-navy > strong {
color: #fff;
}
body.iso-v1.single-product .iso-product-dossier-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr);
align-items: stretch;
gap: 16px;
margin: 0 !important;
}
body.iso-v1.single-product .iso-product-spec-card {
overflow: hidden;
margin: 0 !important;
border: 1px solid var(--iso-line);
border-radius: 13px;
background: #fff;
}
body.iso-v1.single-product .iso-product-block-heading {
margin: 0 !important;
padding: 19px 21px 16px;
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1.single-product .iso-product-block-heading > p {
margin: 0 0 5px !important;
color: var(--iso-blue-text) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .15em;
line-height: 1.2 !important;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-block-heading > h3 {
margin: 0 !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font-display) !important;
font-size: 23px !important;
font-weight: 800 !important;
letter-spacing: -.025em !important;
line-height: 1.12 !important;
text-transform: none !important;
}
body.iso-v1.single-product .iso-product-spec-list {
margin: 0 !important;
padding: 0 !important;
}
body.iso-v1.single-product .iso-product-spec-list > div {
display: grid !important;
grid-template-columns: minmax(130px, 31%) minmax(0, 1fr);
gap: 16px;
margin: 0 !important;
padding: 13px 20px;
border-bottom: 1px solid var(--iso-line);
}
body.iso-v1.single-product .iso-product-spec-list > div:last-child {
border-bottom: 0;
}
body.iso-v1.single-product .iso-product-spec-list dt,
body.iso-v1.single-product .iso-product-spec-list dd {
margin: 0 !important;
overflow-wrap: anywhere;
line-height: 1.5;
}
body.iso-v1.single-product .iso-product-spec-list dt {
color: var(--iso-muted-2);
font-size: 9px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-spec-list dd {
color: var(--iso-text);
font-size: 12px;
font-weight: 600;
}
body.iso-v1.single-product .iso-product-batch-card {
display: flex !important;
flex-direction: column;
min-width: 0;
margin: 0 !important;
padding: 22px !important;
overflow: hidden;
border: 1px solid var(--iso-navy);
border-radius: 13px;
background: linear-gradient(150deg, var(--iso-dark-2) 0%, var(--iso-navy-deep) 100%);
color: #fff;
}
body.iso-v1.single-product .iso-product-batch-card__top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 28px;
color: rgba(255, 255, 255, .68);
font-size: 9px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--iso-blue-cap);
box-shadow: 0 0 0 4px rgba(131, 182, 215, .15);
}
body.iso-v1.single-product .iso-product-batch-card__eyebrow {
color: rgba(255, 255, 255, .72) !important;
font-size: 11px !important;
font-weight: 600;
line-height: 1.4 !important;
}
body.iso-v1.single-product .iso-product-batch-card__value {
display: block;
margin-top: 6px;
overflow-wrap: anywhere;
color: #fff;
font-family: var(--iso-font-display);
font-size: clamp(25px, 2.65vw, 36px);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.05;
}
body.iso-v1.single-product .iso-product-batch-card__caption {
margin-top: 9px !important;
color: rgba(255, 255, 255, .66) !important;
font-size: 11px !important;
line-height: 1.55 !important;
}
body.iso-v1.single-product .iso-product-batch-card__facts {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 12px;
margin-top: auto;
padding: 20px 0 16px;
color: rgba(255, 255, 255, .64);
font-size: 9px;
line-height: 1.35;
}
body.iso-v1.single-product .iso-product-batch-card__facts strong {
color: #fff;
font-size: 9px;
font-weight: 700;
text-align: right;
}
body.iso-v1.single-product .iso-product-batch-card__link {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 38px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 7px;
color: #fff !important;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
line-height: 1.2;
text-decoration: none !important;
}
body.iso-v1.single-product .iso-product-batch-card__link::after {
content: '→';
color: var(--iso-blue-cap);
font-size: 16px;
line-height: 1;
}
body.iso-v1.single-product .iso-product-batch-card__link:hover {
border-color: var(--iso-blue-cap);
background: rgba(255, 255, 255, .06);
}
body.iso-v1.single-product .iso-product-resources {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0 !important;
}
body.iso-v1.single-product .iso-product-resources > a {
position: relative;
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr);
gap: 2px 11px;
min-width: 0;
min-height: 86px;
padding: 16px 43px 16px 15px;
border: 1px solid var(--iso-line);
border-radius: 10px;
background: var(--iso-surface);
color: var(--iso-navy) !important;
text-decoration: none !important;
}
body.iso-v1.single-product .iso-product-resources > a::after {
content: '→';
position: absolute;
top: 50%;
right: 15px;
color: var(--iso-blue-text);
font-size: 18px;
transform: translateY(-50%);
}
body.iso-v1.single-product .iso-product-resources > a > span {
grid-row: 1 / 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--iso-blue-soft);
color: var(--iso-blue-text);
font-size: 9px;
font-weight: 800;
}
body.iso-v1.single-product .iso-product-resources > a > strong {
align-self: end;
overflow-wrap: anywhere;
color: var(--iso-navy);
font-size: 11px;
font-weight: 800;
line-height: 1.3;
}
body.iso-v1.single-product .iso-product-resources > a > small {
color: var(--iso-muted);
font-size: 9px;
line-height: 1.35;
}
body.iso-v1.single-product .iso-product-resources > a:hover {
border-color: var(--iso-blue-line);
background: #fff;
}
body.iso-v1.single-product .iso-product-questions-section {
margin: 0 !important;
padding: 0 0 20px !important;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: 13px;
background: var(--iso-surface);
}
body.iso-v1.single-product .iso-product-questions-section > .iso-product-block-heading {
border-bottom: 0;
padding-bottom: 14px;
}
body.iso-v1.single-product .iso-product-questions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0 !important;
padding: 0 20px !important;
}
body.iso-v1.single-product .iso-product-questions > section {
min-width: 0;
margin: 0 !important;
padding: 16px !important;
border: 1px solid var(--iso-line);
border-radius: 9px;
background: #fff;
}
body.iso-v1.single-product .iso-product-questions h4 {
margin: 0 0 7px !important;
overflow-wrap: anywhere;
color: var(--iso-navy) !important;
font-family: var(--iso-font) !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
line-height: 1.35 !important;
text-transform: none !important;
}
body.iso-v1.single-product .iso-product-questions p {
color: var(--iso-muted) !important;
font-size: 10px !important;
line-height: 1.55 !important;
}
body.iso-v1.single-product .iso-product-ruo {
display: grid !important;
grid-template-columns: 150px minmax(0, 1fr) !important;
align-items: center;
gap: 18px !important;
margin: 0 !important;
padding: 16px 18px !important;
border: 1px solid var(--iso-blue-line) !important;
border-left: 4px solid var(--iso-blue) !important;
border-radius: 10px !important;
background: #f5fbff !important;
}
body.iso-v1.single-product .iso-product-ruo > div {
display: flex;
align-items: center;
gap: 9px;
}
body.iso-v1.single-product .iso-product-ruo > div > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 24px;
border-radius: 999px;
background: var(--iso-navy);
color: #fff;
font-size: 9px;
font-weight: 800;
}
body.iso-v1.single-product .iso-product-ruo > div > strong {
color: var(--iso-navy);
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
line-height: 1.3;
text-transform: uppercase;
}
body.iso-v1.single-product .iso-product-ruo > p {
color: var(--iso-muted) !important;
font-size: 10px !important;
line-height: 1.55 !important;
}
@media (max-width: 900px) {
body.iso-v1.single-product .iso-product-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.iso-v1.single-product .iso-product-metric.is-navy {
grid-column: 1 / -1;
}
body.iso-v1.single-product .iso-product-dossier-grid {
grid-template-columns: 1fr;
}
body.iso-v1.single-product .iso-product-batch-card {
min-height: 360px;
}
}
@media (max-width: 767px) {
body.iso-v1.single-product .iso-product-description {
gap: 18px !important;
padding-top: 24px !important;
}
body.iso-v1.single-product .iso-product-description__hero {
grid-template-columns: 1fr;
gap: 10px;
padding-bottom: 19px !important;
}
body.iso-v1.single-product .iso-product-description__hero h2 {
font-size: clamp(27px, 8.5vw, 38px) !important;
}
body.iso-v1.single-product .iso-product-description__lead {
grid-column: 1;
}
body.iso-v1.single-product .iso-product-ruo-badge {
justify-self: start;
grid-row: 2;
margin: 0;
}
body.iso-v1.single-product .iso-product-metrics,
body.iso-v1.single-product .iso-product-resources,
body.iso-v1.single-product .iso-product-questions {
grid-template-columns: 1fr !important;
}
body.iso-v1.single-product .iso-product-metric,
body.iso-v1.single-product .iso-product-metric.is-navy {
grid-column: auto;
min-height: 116px;
padding: 17px !important;
}
body.iso-v1.single-product .iso-product-metric.is-blue > strong {
font-size: 31px;
}
body.iso-v1.single-product .iso-product-batch-card {
min-height: 330px;
padding: 19px !important;
}
body.iso-v1.single-product .iso-product-spec-list > div {
grid-template-columns: 1fr;
gap: 4px;
padding: 12px 16px;
}
body.iso-v1.single-product .iso-product-resources > a {
min-height: 76px;
}
body.iso-v1.single-product .iso-product-questions-section {
padding-bottom: 16px !important;
}
body.iso-v1.single-product .iso-product-questions {
padding: 0 16px !important;
}
body.iso-v1.single-product .iso-product-ruo {
grid-template-columns: 1fr !important;
gap: 9px !important;
padding: 15px !important;
}
}
@media (max-width: 430px) {
body.iso-v1.single-product .iso-product-summary-facts {
grid-template-columns: 1fr !important;
}
body.iso-v1.single-product .iso-product-summary-facts li {
min-height: 50px;
}
}
/* ========================================================================
V1.34 KASSE, WARENKORB UND DANKE-SEITE
Warum dieser Abschnitt noetig war: der Checkout selbst war gestaltet,
die Danke-Seite dagegen mit null Regeln. Genau dort stehen bei
Vorkasse die Kontodaten. Das ist bei diesem Shop nicht die letzte
Seite, sondern die wichtigste - ohne sie ueberweist niemand.
======================================================================== */
/* -- Mengenwaehler auf schmalen Geraeten ---------------------------------
Ab hier wird es eng: 132px Waehler plus Button passen unter 380px
nicht mehr nebeneinander. Der Waehler gibt nach, nicht der Button. */
@media (max-width: 400px) {
body.iso-v1 .quantity .minus,
body.iso-v1 .quantity .plus,
body.iso-v1 .quantity input.minus,
body.iso-v1 .quantity input.plus {
width: 36px !important;
min-width: 36px !important;
}
body.iso-v1 .quantity .qty,
body.iso-v1 .quantity input[type="number"],
body.iso-v1.single-product form.cart .quantity .qty {
width: 44px !important;
min-width: 44px !important;
}
body.iso-v1.single-product form.cart .button,
body.iso-v1.single-product .single_add_to_cart_button {
padding: 0 14px !important;
letter-spacing: .04em !important;
}
}
/* Auf dem Desktop schrumpft der Waehler nie, der Button schon. */
body.iso-v1.single-product form.cart .quantity {
flex: 0 0 auto;
}
body.iso-v1.single-product form.cart .single_add_to_cart_button {
flex: 1 1 auto;
min-width: 0;
}
/* -- Warenkorbtabelle: Mengenspalte breit genug fuer das Bauteil -------- */
body.iso-v1.woocommerce-cart .shop_table td.product-quantity {
min-width: 140px;
}
body.iso-v1 .woocommerce-cart .quantity {
height: var(--iso-btn-h);
}
/* -- Versandarten im Bestellueberblick ---------------------------------- */
body.iso-v1.woocommerce-checkout #shipping_method {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
body.iso-v1.woocommerce-checkout #shipping_method li {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
padding: 11px 13px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
background: #fff;
list-style: none;
}
body.iso-v1.woocommerce-checkout #shipping_method li::before {
content: none;
}
body.iso-v1.woocommerce-checkout #shipping_method label {
margin: 0;
color: var(--iso-text);
font-size: var(--iso-fs-label);
font-weight: 600;
line-height: 1.4;
}
body.iso-v1.woocommerce-checkout .woocommerce-shipping-destination {
margin: 9px 0 0;
color: var(--iso-muted);
font-size: 11px;
line-height: 1.55;
}
/* -- Gutschein- und Anmeldeformular ------------------------------------- */
body.iso-v1 form.checkout_coupon,
body.iso-v1 form.woocommerce-form-login {
margin: 0 0 20px;
padding: 20px 22px 22px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
}
body.iso-v1 form.checkout_coupon .button,
body.iso-v1 form.woocommerce-form-login .button {
min-height: var(--iso-btn-h) !important;
padding: 0 22px !important;
border: 1px solid var(--iso-ink) !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-ink) !important;
color: #fff !important;
font-size: var(--iso-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em;
text-transform: uppercase;
}
/* -- Hinweise, Fehler, Bestaetigungen ----------------------------------- */
body.iso-v1 .woocommerce-NoticeGroup,
body.iso-v1 .woocommerce-notices-wrapper {
display: block;
}
body.iso-v1 .woocommerce-error,
body.iso-v1 .woocommerce-message,
body.iso-v1 .woocommerce-info {
margin: 0 0 18px !important;
padding: 14px 17px !important;
border: 1px solid var(--iso-line) !important;
border-left: 3px solid var(--iso-blue) !important;
border-radius: var(--iso-radius-sm) !important;
background: #fff !important;
color: var(--iso-text) !important;
font-size: var(--iso-fs-label) !important;
line-height: 1.6 !important;
list-style: none !important;
}
body.iso-v1 .woocommerce-error {
border-left-color: var(--iso-danger) !important;
background: var(--iso-danger-soft) !important;
}
body.iso-v1 .woocommerce-error li,
body.iso-v1 .woocommerce-message li {
margin: 0;
padding: 0;
list-style: none;
}
body.iso-v1 .woocommerce-error li::before,
body.iso-v1 .woocommerce-message li::before {
content: none;
}
/* -- Danke-Seite: Bestellueberblick ------------------------------------- */
body.iso-v1 .woocommerce-order {
max-width: 860px;
margin: 0 auto;
padding: 8px 0 var(--iso-section);
}
body.iso-v1 .woocommerce-thankyou-order-received,
body.iso-v1 .woocommerce-notice--success {
margin: 0 0 22px !important;
padding: 20px 22px !important;
border: 1px solid var(--iso-blue-line) !important;
border-left: 4px solid var(--iso-blue) !important;
border-radius: var(--iso-radius) !important;
background: var(--iso-blue-soft) !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font-display);
font-size: 17px !important;
font-weight: 750 !important;
letter-spacing: -.015em;
line-height: 1.35 !important;
}
/* WooCommerce haengt an die Bankdatenliste zusaetzlich die Klasse
order_details. Ohne das :not() wuerden die !important-Regeln von
hier die Bankdaten weiss faerben - weiss auf dunklem Grund. */
body.iso-v1 ul.woocommerce-order-overview,
body.iso-v1 ul.order_details:not(.wc-bacs-bank-details) {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 1px !important;
margin: 0 0 26px !important;
padding: 1px !important;
overflow: hidden;
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-radius) !important;
background: var(--iso-line) !important;
list-style: none !important;
}
body.iso-v1 ul.woocommerce-order-overview li,
body.iso-v1 ul.order_details:not(.wc-bacs-bank-details) li {
display: grid !important;
align-content: center;
gap: 5px;
margin: 0 !important;
padding: 15px 16px !important;
border: 0 !important;
background: #fff !important;
color: var(--iso-muted-2) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
list-style: none !important;
}
body.iso-v1 ul.woocommerce-order-overview li::before,
body.iso-v1 ul.order_details:not(.wc-bacs-bank-details) li::before {
content: none !important;
}
body.iso-v1 ul.woocommerce-order-overview li strong,
body.iso-v1 ul.order_details:not(.wc-bacs-bank-details) li strong {
color: var(--iso-navy) !important;
font-size: 14px !important;
font-weight: 750 !important;
letter-spacing: -.01em !important;
text-transform: none !important;
}
body.iso-v1 .woocommerce-order-details,
body.iso-v1 .woocommerce-customer-details {
margin: 0 0 26px;
}
body.iso-v1 .woocommerce-order-details h2,
body.iso-v1 .woocommerce-customer-details h2,
body.iso-v1 .woocommerce-column__title {
margin: 0 0 13px !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font-display);
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
}
body.iso-v1 .woocommerce-table--order-details,
body.iso-v1 .woocommerce-table--order-downloads {
width: 100%;
margin: 0;
overflow: hidden;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
border-collapse: separate;
border-spacing: 0;
background: #fff;
}
body.iso-v1 .woocommerce-table--order-details th,
body.iso-v1 .woocommerce-table--order-details td {
padding: 13px 16px !important;
border: 0 !important;
border-bottom: 1px solid var(--iso-line) !important;
font-size: var(--iso-fs-label) !important;
line-height: 1.5 !important;
}
body.iso-v1 .woocommerce-table--order-details thead th {
color: var(--iso-muted-2) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
}
body.iso-v1 .woocommerce-table--order-details tfoot th,
body.iso-v1 .woocommerce-table--order-details tfoot td {
color: var(--iso-navy) !important;
font-weight: 700 !important;
}
body.iso-v1 .woocommerce-table--order-details tfoot tr:last-child th,
body.iso-v1 .woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: 0 !important;
font-size: 14px !important;
}
body.iso-v1 .woocommerce-customer-details address {
margin: 0;
padding: 16px 18px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
color: var(--iso-text);
font-size: var(--iso-fs-label);
font-style: normal;
line-height: 1.7;
}
/* -- Bankdaten bei Vorkasse ---------------------------------------------
Die eine Stelle, an der die Bestellung wirklich haengt. Deshalb
dunkle Flaeche statt weisser Karte, und die Werte als auswaehlbarer
Text mit ausreichend Zeichenabstand - IBAN wird abgetippt. */
body.iso-v1 .woocommerce-bacs-bank-details {
margin: 0 0 26px;
padding: 22px 24px 24px;
border: 1px solid var(--iso-navy);
border-radius: var(--iso-radius);
background: linear-gradient(145deg, #142a40, #071421);
color: #fff;
}
body.iso-v1 .woocommerce-bacs-bank-details h2,
body.iso-v1 .woocommerce-bacs-bank-details .wc-bacs-bank-details-heading {
margin: 0 0 14px !important;
color: #fff !important;
font-family: var(--iso-font-display);
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
body.iso-v1 .woocommerce-bacs-bank-details ul.wc-bacs-bank-details {
display: grid;
gap: 1px;
margin: 0;
padding: 1px;
overflow: hidden;
border-radius: var(--iso-radius-sm);
background: rgba(255, 255, 255, .14);
list-style: none;
}
body.iso-v1 .woocommerce-bacs-bank-details ul.wc-bacs-bank-details li {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
align-items: baseline;
justify-content: space-between;
margin: 0;
padding: 12px 15px;
background: #0b1c2c;
color: rgba(255, 255, 255, .66);
font-size: 9px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.3;
text-transform: uppercase;
list-style: none;
}
body.iso-v1 .woocommerce-bacs-bank-details ul.wc-bacs-bank-details li::before {
content: none;
}
body.iso-v1 .woocommerce-bacs-bank-details ul.wc-bacs-bank-details li strong {
color: #fff;
font-family: var(--iso-font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: .05em;
text-transform: none;
overflow-wrap: anywhere;
-webkit-user-select: all;
user-select: all;
}
/* Unser eigener Hinweis, gesetzt aus PHP. Bewusst ein eigenstaendiger
Kasten statt eines Einschubs in die Bankdaten: WooCommerce gibt die
Bankdaten geschlossen aus, ein Fremdkoerper darin waere auf jedes
Gateway-Update angewiesen. */
body.iso-v1 .iso-zahlhinweis {
display: grid;
gap: 7px;
margin: 0 0 26px;
padding: 17px 19px 18px;
border: 1px solid var(--iso-blue-line);
border-left: 4px solid var(--iso-blue);
border-radius: var(--iso-radius);
background: var(--iso-blue-soft);
}
body.iso-v1 .iso-zahlhinweis strong {
color: var(--iso-navy);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
}
body.iso-v1 .iso-zahlhinweis p {
margin: 0;
color: var(--iso-text);
font-size: var(--iso-fs-label);
line-height: 1.65;
}
body.iso-v1 .iso-zahlhinweis a {
color: var(--iso-blue-text);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 600px) {
body.iso-v1 .woocommerce-bacs-bank-details {
padding: 18px 17px 20px;
}
body.iso-v1 .woocommerce-bacs-bank-details ul.wc-bacs-bank-details li {
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
body.iso-v1 .woocommerce-thankyou-order-received,
body.iso-v1 .woocommerce-notice--success {
font-size: 15px !important;
}
}
/* V1.36: Sprachhinweis ueber den deutschen Rechtstexten. Sie bleiben
deutsch, weil der deutsche Wortlaut der verbindliche ist - bei der
Widerrufsbelehrung traegt nur er den Schutz des amtlichen Musters. */
body.iso-v1 .iso-legal-lang {
display: grid;
gap: 7px;
max-width: 780px;
margin: 0 0 8px;
padding: 17px 19px 18px;
border: 1px solid var(--iso-blue-line);
border-left: 4px solid var(--iso-blue);
border-radius: var(--iso-radius);
background: var(--iso-blue-soft);
}
body.iso-v1 .iso-legal-lang strong {
color: var(--iso-navy);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
}
body.iso-v1 .iso-legal-lang p {
margin: 0;
color: var(--iso-text);
font-size: var(--iso-fs-label);
line-height: 1.65;
}
/* ========================================================================
V1.40 WARENKORB
Bis hierher hatte der Warenkorb nur Notregeln: Rahmenfarbe, Radius,
sonst Flatsome-Standard. Sichtbar war das an drei Stellen - der
Produktlink stand in Flatsomes Primaerblau #446084, die beiden
Knoepfe unter der Tabelle waren blaue Vollflaechen, und der
Gutscheinbereich hatte gar keine Fassung.
======================================================================== */
/* -- Tabellenkopf: Beschriftung, keine graue Flaeche ------------------- */
body.iso-v1.woocommerce-cart table.shop_table thead th {
padding: 13px 16px !important;
border: 0 !important;
border-bottom: 1px solid var(--iso-line) !important;
background: transparent !important;
color: var(--iso-muted-2) !important;
font-family: var(--iso-font) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
body.iso-v1.woocommerce-cart table.shop_table td {
padding: 18px 16px !important;
border: 0 !important;
border-bottom: 1px solid var(--iso-line) !important;
vertical-align: middle !important;
}
body.iso-v1.woocommerce-cart table.shop_table tbody tr:last-child td {
border-bottom: 1px solid var(--iso-line) !important;
}
/* -- Produktzeile ------------------------------------------------------ */
body.iso-v1.woocommerce-cart td.product-thumbnail img {
width: 56px !important;
height: auto !important;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius-sm);
background: #fff;
}
/* Der Produktname stand in Flatsomes Primaerblau. Auf einer Seite, deren
einzige Akzentfarbe das Blau der Marke ist, liest sich das wie ein
zweiter, fremder Akzent. */
body.iso-v1.woocommerce-cart td.product-name a {
color: var(--iso-navy) !important;
font-size: var(--iso-fs-label) !important;
font-weight: 700 !important;
letter-spacing: -.01em;
text-decoration: none !important;
}
body.iso-v1.woocommerce-cart td.product-name a:hover {
color: var(--iso-blue-text) !important;
}
body.iso-v1.woocommerce-cart td.product-price,
body.iso-v1.woocommerce-cart td.product-subtotal {
color: var(--iso-navy) !important;
font-weight: 750 !important;
font-variant-numeric: tabular-nums lining-nums;
}
/* Die Steuerzeile von German Market gehoert leise unter den Betrag. */
body.iso-v1.woocommerce-cart .wgm-info,
body.iso-v1 .cart_totals .wgm-info,
body.iso-v1.woocommerce-cart .woocommerce-de_price_taxrate {
display: block;
margin-top: 3px;
color: var(--iso-muted-2) !important;
font-size: 10px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
}
/* -- Knoepfe unter der Tabelle ----------------------------------------- */
body.iso-v1.woocommerce-cart td.actions {
padding: 16px !important;
border-bottom: 0 !important;
}
body.iso-v1.woocommerce-cart td.actions .button,
body.iso-v1.woocommerce-cart td.actions button[name="update_cart"],
body.iso-v1.woocommerce-cart td.actions input[name="update_cart"] {
min-height: var(--iso-btn-h) !important;
margin: 0 8px 0 0 !important;
padding: 0 20px !important;
border: 1px solid var(--iso-line-2) !important;
border-radius: var(--iso-btn-radius) !important;
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font) !important;
font-size: var(--iso-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em !important;
text-transform: uppercase !important;
transition: border-color 150ms var(--iso-ease), background-color 150ms var(--iso-ease);
}
body.iso-v1.woocommerce-cart td.actions .button:hover,
body.iso-v1.woocommerce-cart td.actions button[name="update_cart"]:hover:not(:disabled) {
border-color: var(--iso-navy) !important;
background: var(--iso-surface-2) !important;
color: var(--iso-navy) !important;
transform: none !important;
}
/* Nichts geaendert, nichts zu aktualisieren: der Knopf sagt das selbst,
statt aktiv auszusehen und beim Klick nichts zu tun. */
body.iso-v1.woocommerce-cart td.actions button[name="update_cart"]:disabled,
body.iso-v1.woocommerce-cart td.actions input[name="update_cart"]:disabled {
border-color: var(--iso-line) !important;
background: var(--iso-surface) !important;
color: var(--iso-muted-2) !important;
cursor: not-allowed;
opacity: 1 !important;
}
/* -- Summenblock ------------------------------------------------------- */
body.iso-v1 .cart_totals {
padding: 0 !important;
overflow: hidden;
border: 1px solid var(--iso-line) !important;
border-radius: var(--iso-radius) !important;
background: #fff !important;
}
body.iso-v1 .cart_totals > h2 {
margin: 0 !important;
padding: 16px 20px 14px !important;
border-bottom: 1px solid var(--iso-line);
color: var(--iso-muted-2) !important;
font-family: var(--iso-font) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
body.iso-v1 .cart_totals table {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse !important;
}
body.iso-v1 .cart_totals table th,
body.iso-v1 .cart_totals table td {
padding: 14px 20px !important;
border: 0 !important;
border-bottom: 1px solid var(--iso-line) !important;
background: transparent !important;
vertical-align: top !important;
}
body.iso-v1 .cart_totals table th {
width: 40% !important;
color: var(--iso-muted-2) !important;
font-family: var(--iso-font) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
line-height: 1.9 !important;
text-align: left !important;
text-transform: uppercase !important;
}
body.iso-v1 .cart_totals table td {
color: var(--iso-navy) !important;
font-size: var(--iso-fs-label) !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums lining-nums;
text-align: right !important;
}
/* Versandzeile: Tarif, Steuer und Adresse untereinander statt
nebeneinander. Alles rechtsbuendig wie die uebrigen Betraege - eine
einzelne linksbuendige Zeile im Block faellt mehr auf als der
Zeilenumbruch, den sie verhindern soll. */
body.iso-v1 .cart_totals tr.shipping td,
body.iso-v1 .cart_totals tr.woocommerce-shipping-totals td {
font-weight: 600 !important;
}
body.iso-v1 .cart_totals ul#shipping_method {
display: grid;
gap: 6px;
margin: 0 0 8px !important;
padding: 0 !important;
list-style: none !important;
}
body.iso-v1 .cart_totals ul#shipping_method li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.iso-v1 .cart_totals ul#shipping_method li::before { content: none !important; }
body.iso-v1 .cart_totals .woocommerce-shipping-destination {
margin: 0 !important;
color: var(--iso-muted) !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
}
body.iso-v1 .cart_totals .shipping-calculator-button {
display: inline-block;
margin-top: 4px;
color: var(--iso-blue-text) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-decoration: underline;
text-underline-offset: 2px;
}
body.iso-v1 .cart_totals tr.order-total th,
body.iso-v1 .cart_totals tr.order-total td {
border-bottom: 0 !important;
background: var(--iso-blue-soft) !important;
}
body.iso-v1 .cart_totals tr.order-total td {
color: var(--iso-navy) !important;
font-family: var(--iso-font-display) !important;
font-size: 21px !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
}
body.iso-v1 .cart_totals tr.order-total th {
background: var(--iso-blue-soft) !important;
color: var(--iso-navy) !important;
}
/* Der Kaufknopf gehoert an den Block, nicht daneben. */
body.iso-v1 .cart_totals .wc-proceed-to-checkout {
margin: 0 !important;
padding: 16px 20px 20px !important;
}
body.iso-v1 .cart_totals .wc-proceed-to-checkout .checkout-button {
display: block !important;
width: 100% !important;
margin: 0 !important;
text-align: center !important;
}
/* -- Gutschein --------------------------------------------------------- */
body.iso-v1.woocommerce-cart .coupon,
body.iso-v1 .cart-collaterals .wc-block-components-totals-coupon,
body.iso-v1.woocommerce-cart .wc-block-components-panel {
margin-top: 18px;
padding: 18px 20px 20px;
border: 1px solid var(--iso-line);
border-radius: var(--iso-radius);
background: #fff;
}
body.iso-v1.woocommerce-cart .coupon > label,
body.iso-v1.woocommerce-cart .wc-block-components-panel__button {
display: block;
margin: 0 0 10px;
color: var(--iso-muted-2) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
body.iso-v1.woocommerce-cart .coupon input.input-text,
body.iso-v1.woocommerce-cart input#coupon_code {
width: 100% !important;
min-width: 0 !important;
min-height: var(--iso-btn-h) !important;
margin: 0 0 10px !important;
padding: 0 14px !important;
border: 1px solid var(--iso-line-2) !important;
border-radius: var(--iso-btn-radius) !important;
background: #fff !important;
color: var(--iso-navy) !important;
font-size: var(--iso-fs-label) !important;
}
body.iso-v1.woocommerce-cart .coupon button,
body.iso-v1.woocommerce-cart .coupon .button {
width: 100% !important;
min-height: var(--iso-btn-h) !important;
margin: 0 !important;
border: 1px solid var(--iso-line-2) !important;
border-radius: var(--iso-btn-radius) !important;
background: #fff !important;
color: var(--iso-navy) !important;
font-size: var(--iso-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em !important;
text-transform: uppercase !important;
}
body.iso-v1.woocommerce-cart .coupon button:hover {
border-color: var(--iso-navy) !important;
background: var(--iso-surface-2) !important;
}
/* -- Loeschkreuz ------------------------------------------------------- */
body.iso-v1.woocommerce-cart td.product-remove a.remove {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 26px !important;
height: 26px !important;
border: 1px solid var(--iso-line-2) !important;
border-radius: 999px !important;
background: #fff !important;
color: var(--iso-muted-2) !important;
font-size: 15px !important;
line-height: 1 !important;
}
body.iso-v1.woocommerce-cart td.product-remove a.remove:hover {
border-color: var(--iso-danger) !important;
background: var(--iso-danger-soft) !important;
color: var(--iso-danger) !important;
}
/* -- Leerer Warenkorb -------------------------------------------------- */
body.iso-v1 .cart-empty {
padding: 22px 0 6px;
color: var(--iso-navy) !important;
font-family: var(--iso-font-display);
font-size: 19px !important;
font-weight: 750 !important;
}
body.iso-v1 .return-to-shop .button {
min-height: var(--iso-btn-h) !important;
border: 1px solid var(--iso-ink) !important;
border-radius: var(--iso-btn-radius) !important;
background: var(--iso-ink) !important;
color: #fff !important;
font-size: var(--iso-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em;
text-transform: uppercase;
}
@media (max-width: 767px) {
body.iso-v1.woocommerce-cart table.shop_table thead {
display: none !important;
}
body.iso-v1.woocommerce-cart table.shop_table td {
padding: 12px 14px !important;
text-align: right !important;
}
body.iso-v1.woocommerce-cart table.shop_table td::before {
float: left;
color: var(--iso-muted-2) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
}
body.iso-v1.woocommerce-cart td.actions .button,
body.iso-v1.woocommerce-cart td.actions button[name="update_cart"] {
display: block !important;
width: 100% !important;
margin: 0 0 8px !important;
}
body.iso-v1 .cart_totals table th {
width: 42% !important;
}
}
/* ========================================================================
V1.41 BEFUNDE AUS DEM BROWSER-PRUEFSTAND
Erstmals wurden Warenkorb, Kasse, Danke-Seite und Produktseite in
einem echten Chromium bei 1440, 768, 390 und 320 Pixeln gerendert
und gemessen. Was hier steht, sind die Befunde daraus - keine
Vermutungen.
======================================================================== */
/* -- 1. Bankdaten ohne Rueckfallfarbe ------------------------------------
Der Kasten setzte nur einen Verlauf. background-color blieb damit
transparent. Wo ein Verlauf nicht gemalt wird - Druckansicht, erzwungene
Farben, sehr alte Browser - stand weisse Schrift auf weissem Grund.
Gemessen: 1,00:1. Genau auf der Seite, auf der die IBAN steht. */
body.iso-v1 .woocommerce-bacs-bank-details {
background-color: #0b1c2c;
}
/* -- 2. Kleine Versalbeschriftungen auf getoenten Flaechen ---------------
--iso-muted-2 traegt 4,91:1 auf Weiss und besteht damit. Auf den
getoenten Flaechen darunter faellt es auf 4,30:1 und 4,37:1 und
verfehlt die 4,5:1. Betroffen sind genau die Stellen, an denen Beträge
erklaert werden. */
body.iso-v1 .woocommerce-table--order-details thead th,
body.iso-v1 .cart_totals tr.order-total .wgm-info,
body.iso-v1 .cart_totals tr.order-total td .woocommerce-de_price_taxrate {
color: #55616e !important;
}
/* -- 3. Tippziele im Warenkorb ------------------------------------------
Das Loeschkreuz mass 26 x 26 Pixel. Auf dem Handy ist das die kleinste
Flaeche der Seite - und die einzige, deren Fehlgriff eine Position
entfernt. */
@media (max-width: 849px) {
body.iso-v1.woocommerce-cart td.product-remove a.remove {
width: 34px !important;
height: 34px !important;
font-size: 18px !important;
}
body.iso-v1 .cart_totals .shipping-calculator-button {
display: inline-block;
padding: 6px 0;
}
}
/* -- 4. Verweiszeile unter der Produktbeschreibung ----------------------
Drei Links nebeneinander, je 14 Pixel hoch. Nebeneinander liegende
kleine Ziele treffen sich schlecht; senkrechte Luft hilft mehr als
Breite. */
@media (max-width: 849px) {
body.iso-v1.single-product .iso-compact-links {
gap: 4px 20px !important;
}
body.iso-v1.single-product .iso-compact-links a {
display: inline-block;
padding: 7px 0 !important;
}
}
/* -- 5. Warenkorbtabelle stapelt sich selbst ----------------------------
Das Theme gestaltete bisher die gestapelten Zeilen, erzeugte den Umbruch
aber nie selbst - es verliess sich darauf, dass WooCommerce ihn liefert.
Faellt dessen Stylesheet aus oder aendert das Shop-Plugin die Klasse,
steht die vierspaltige Tabelle auf einem 390-Pixel-Display.
Die Regeln sind mit denen von WooCommerce deckungsgleich; doppelt
gesetzt schadet nicht, einmal zu wenig schon. */
@media (max-width: 767px) {
body.iso-v1.woocommerce-cart table.shop_table_responsive thead,
body.iso-v1.woocommerce-cart table.shop_table_responsive tbody th {
display: none !important;
}
body.iso-v1.woocommerce-cart table.shop_table_responsive tr {
display: block !important;
}
body.iso-v1.woocommerce-cart table.shop_table_responsive tr td {
display: block !important;
width: auto !important;
}
body.iso-v1.woocommerce-cart table.shop_table_responsive tr td::before {
content: attr(data-title) ": ";
}
body.iso-v1.woocommerce-cart table.shop_table_responsive tr td.product-remove::before,
body.iso-v1.woocommerce-cart table.shop_table_responsive tr td.actions::before,
body.iso-v1.woocommerce-cart table.shop_table_responsive tr td.product-thumbnail::before {
content: none !important;
}
body.iso-v1.woocommerce-cart td.product-thumbnail img {
margin-left: auto;
}
}
/* -- 6. Aufzaehlungspunkt vor der Zahlart -------------------------------
Die Liste der Zahlarten setzte padding: 0, aber nie list-style: none.
Der Punkt verschwindet dadurch nicht, er rutscht nur aus dem Kasten
heraus und steht links daneben. Sichtbar wurde das erst im Rendering. */
body.iso-v1 #payment ul.payment_methods,
body.iso-v1 #payment ul.payment_methods li {
list-style: none !important;
}
body.iso-v1 #payment ul.payment_methods li::before,
body.iso-v1 #payment ul.payment_methods li::marker {
content: none !important;
}
/* -- 7. Unterstrichene Knopftexte ---------------------------------------
"Continue shopping" und "Proceed to checkout" sind Verweise, die wie
Knoepfe aussehen. Ohne eigene Angabe erben sie die Unterstreichung des
Browsers - ein Knopf mit unterstrichener Beschriftung wirkt wie ein
halb geladener Stil. */
body.iso-v1.woocommerce-cart td.actions .button,
body.iso-v1 .cart_totals .checkout-button,
body.iso-v1 .return-to-shop .button,
body.iso-v1.woocommerce-cart .coupon .button {
text-decoration: none !important;
}
/* ========================================================================
V1.42 COA-KACHEL UND MINI-WARENKORB
======================================================================== */
/* -- 1. "Report" stand auf unterschiedlichen Hoehen ----------------------
Aufbau der Zelle:
Purity
WertReport
Der Verweis folgte direkt auf den Wert. Ein einzeiliger Wert wie
"99,124 %" setzt ihn hoeher als ein zweizeiliger wie "not detected" -
drei Verweise, drei Hoehen. Die Zellen sind ohnehin gleich hoch
(align-items: stretch), es fehlte nur die Anweisung, den Verweis nach
unten zu schieben statt ihn dem Text folgen zu lassen. */
body.iso-v1 .iso-coa-metric {
display: flex;
flex-direction: column;
}
body.iso-v1 .iso-coa-metric .iso-coa-metric-value {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
margin-bottom: 0;
}
body.iso-v1 .iso-coa-metric .iso-coa-metric-value a {
margin-top: auto;
align-self: flex-start;
color: var(--iso-blue-text);
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 2px;
}
body.iso-v1 .iso-coa-metric .iso-coa-metric-value a:hover {
color: var(--iso-navy);
}
/* Der Wert darf umbrechen, ohne die Zeile darunter zu verschieben. */
body.iso-v1 .iso-coa-metric strong {
line-height: 1.35;
}
/* -- 2. Mini-Warenkorb ---------------------------------------------------
"View cart" und "Checkout" im Aufklappmenue und im seitlichen
Warenkorb hatten keine einzige eigene Regel und standen deshalb in
Flatsomes Primaerblau. Es sind dieselben zwei Handlungen wie auf der
Warenkorbseite und sie gehoeren in dieselbe Rangfolge: die
weiterfuehrende dunkel, die zurueckfuehrende umrandet. */
body.iso-v1 .widget_shopping_cart .buttons,
body.iso-v1 .woocommerce-mini-cart__buttons {
display: grid !important;
gap: 8px;
margin: 0 !important;
}
body.iso-v1 .widget_shopping_cart .buttons .button,
body.iso-v1 .woocommerce-mini-cart__buttons .button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-height: var(--iso-btn-h) !important;
margin: 0 !important;
padding: 0 18px !important;
border: 1px solid var(--iso-line-2) !important;
border-radius: var(--iso-btn-radius) !important;
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
color: var(--iso-navy) !important;
font-family: var(--iso-font) !important;
font-size: var(--iso-fs-micro) !important;
font-weight: 700 !important;
letter-spacing: .075em !important;
text-decoration: none !important;
text-transform: uppercase !important;
transition: border-color 150ms var(--iso-ease), background-color 150ms var(--iso-ease);
}
body.iso-v1 .widget_shopping_cart .buttons .button:hover,
body.iso-v1 .woocommerce-mini-cart__buttons .button:hover {
border-color: var(--iso-navy) !important;
background: var(--iso-surface-2) !important;
}
/* Der Bestellweg ist die Haupthandlung und sieht auch so aus. */
body.iso-v1 .widget_shopping_cart .buttons .button.checkout,
body.iso-v1 .woocommerce-mini-cart__buttons .button.checkout,
body.iso-v1 .widget_shopping_cart .buttons .checkout {
border-color: var(--iso-ink) !important;
background: var(--iso-ink) !important;
color: #fff !important;
}
body.iso-v1 .widget_shopping_cart .buttons .button.checkout:hover,
body.iso-v1 .woocommerce-mini-cart__buttons .button.checkout:hover {
border-color: var(--iso-navy) !important;
background: var(--iso-navy) !important;
color: #fff !important;
}
/* Zwischensumme und Produktzeilen darueber in derselben Sprache. */
body.iso-v1 .widget_shopping_cart .woocommerce-mini-cart__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 12px !important;
padding: 12px 0 !important;
border-top: 1px solid var(--iso-line) !important;
border-bottom: 1px solid var(--iso-line) !important;
color: var(--iso-navy) !important;
font-size: var(--iso-fs-label) !important;
font-weight: 750 !important;
}
body.iso-v1 .widget_shopping_cart .woocommerce-mini-cart__total strong {
color: var(--iso-muted-2) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
body.iso-v1 .widget_shopping_cart .product-title,
body.iso-v1 .woocommerce-mini-cart .product-title,
body.iso-v1 .woocommerce-mini-cart li a:not(.remove) {
color: var(--iso-navy) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
/* -- 3. Die COA-Karte war gekippt ---------------------------------------
transform: rotate(-.3deg) auf .iso-coa-doc. Ueber die Breite der Karte
ergibt das rund 4 Pixel Hoehenunterschied zwischen linkem und rechtem
Rand - genug, dass vier nebeneinanderliegende Messwerte sichtbar
treppen, obwohl sie im Aufbau exakt auf einer Linie sitzen.
Auf einer Karte, deren ganzer Zweck es ist, Messwerte als genau und
nachpruefbar darzustellen, kostet ein dekorativer Schraeglauf mehr
als er bringt. Sie steht jetzt gerade.
Zurueckholen: diese Regel loeschen. Die Drehung steht unveraendert
weiter oben in der Datei. */
body.iso-v1 .iso-coa-doc {
transform: none;
}
/* -- 4. Bericht und Pruefschluessel auf der Produktseite ------------------
Jede Zeile war ein eigener Flex-Container und rechnete ihre Spalten
selbst aus. Gemessen: die drei "Report" begannen bei 100,8 / 93,9 /
104,5 Pixeln - bis zu 11 Pixel auseinander, weil die Schluesseltexte
unterschiedlich breit sind und die Gruppe als Ganzes rechts anliegt.
Fehlte in einer Zeile der Bericht, sprang der Schluessel um 78 Pixel
an dessen Platz.
Jetzt traegt die Liste die Spalten und die Zeilen reichen sie durch
(display: contents). Damit teilen sich alle Zeilen dieselben
Spaltenbreiten - das ist der Unterschied zwischen "sieht meistens
gleich aus" und "ist gleich". Die beiden Faecher stehen im Markup
immer, auch leer, damit eine fehlende Angabe keine Spalte verschiebt.
------------------------------------------------------------------- */
body.iso-v1 .iso-coa-testlist {
display: grid !important;
/* In der schmalen Produktspalte bleiben fuer den Messwert sonst rund
85 Pixel uebrig - "not detected" bricht dann mitten im Wort. Deshalb
hier nur zwei Spalten fuer Bericht und Schluessel; Bezeichnung und
Wert nehmen die volle Breite darueber. */
grid-template-columns: max-content max-content minmax(0, 1fr);
column-gap: 10px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
body.iso-v1 .iso-coa-testrow,
body.iso-v1 .iso-coa-test-actions {
display: contents !important;
}
body.iso-v1 .iso-coa-testlist .iso-coa-test-label {
grid-column: 1 / -1;
flex: none;
margin: 0;
padding: 11px 0 1px;
border-top: 1px solid var(--iso-line);
}
body.iso-v1 .iso-coa-testlist .iso-coa-test-result {
grid-column: 1 / -1;
align-self: center;
padding-bottom: 8px;
}
body.iso-v1 .iso-coa-slot {
display: flex;
align-items: center;
padding-bottom: 11px;
}
body.iso-v1 .iso-coa-slot--doc { grid-column: 2; }
body.iso-v1 .iso-coa-slot--key { grid-column: 3; justify-content: flex-end; }
/* Ist die Box breit genug, stehen Bezeichnung und Wert wieder nebeneinander.
Vier Spalten statt drei - die Faecher behalten ihre Position. */
@container (min-width: 560px) {
body.iso-v1 .iso-coa-testlist {
grid-template-columns: 130px minmax(0, 1fr) max-content max-content;
/* Spaltenabstand auf null: jede Zelle traegt ihre eigene Trennlinie,
und ein Abstand dazwischen wuerde die Linie in vier Stuecke
zerlegen. Der Abstand kommt stattdessen aus dem Innenrand. */
column-gap: 0;
}
body.iso-v1 .iso-coa-testlist .iso-coa-test-label,
body.iso-v1 .iso-coa-testlist .iso-coa-test-result,
body.iso-v1 .iso-coa-slot {
padding: 11px 12px 11px 0;
border-top: 1px solid var(--iso-line);
}
body.iso-v1 .iso-coa-testlist .iso-coa-test-label { grid-column: 1; }
body.iso-v1 .iso-coa-testlist .iso-coa-test-result { grid-column: 2; }
body.iso-v1 .iso-coa-slot--doc { grid-column: 3; }
body.iso-v1 .iso-coa-slot--key { grid-column: 4; padding-right: 0; }
}
/* Ohne Container Queries bleibt die gestapelte Fassung stehen - lesbar,
nur etwas hoeher. Ohne display: contents faellt alles auf die
bisherige Flex-Fassung zurueck. */
@supports not (display: contents) {
body.iso-v1 .iso-coa-testlist { display: block !important; }
body.iso-v1 .iso-coa-testrow { display: flex !important; flex-wrap: wrap; }
body.iso-v1 .iso-coa-test-actions { display: flex !important; gap: 10px; margin-left: auto; }
}