@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(//berkei.de/wp-content/plugins/berkei-script-collection/assets/fonts/inter-latin.woff2) format('woff2');
}
:root { --berkei-cta-bg: #c35517;
--berkei-cta-bg-hover: #a94812;
--berkei-cta-text: #ffffff;
--berkei-cta-radius: 8px;
--berkei-cta-font-weight: 700;
--berkei-cta-shadow: 0 10px 24px rgba(229, 107, 38, 0.28);
--berkei-cta-shadow-hover: 0 14px 30px rgba(229, 107, 38, 0.4);
}    @font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url(https://berkei.de/wp-content/uploads/custom/materials_symbols_outlined.woff2) format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-moz-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .material-symbols-outlined.berkei-icon > .berkei-svg-icon {
display: block;
width: 1em;
height: 1em;
}
@media (max-width: 781px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
@supports (overflow: clip) {
html,
body {
overflow-x: clip;
}
}
.wp-site-blocks {
max-width: 100%;
overflow-x: clip;
}
}
html:has(body.berkei-shop-action-rail-enabled),
body.berkei-shop-action-rail-enabled {
max-width: 100%;
overflow-x: hidden;
}
@supports (overflow: clip) {
html:has(body.berkei-shop-action-rail-enabled),
body.berkei-shop-action-rail-enabled {
overflow-x: clip;
}
} .berkei-icon-link {
display: inline-flex;
text-decoration: none;
color: inherit;
}
.berkei-icon-hover {
display: inline-block;
transition: transform 0.2s ease, filter 0.2s ease, text-shadow 0.2s ease;
} .berkei-icon-hover--zoom:hover,
.berkei-icon-link:hover .berkei-icon-hover--zoom {
transform: scale(1.18);
} .berkei-icon-hover--glow:hover,
.berkei-icon-link:hover .berkei-icon-hover--glow {
filter: brightness(1.3);
text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
} .slide-overlay .material-symbols-outlined {
font-size: 16px;
margin-right: 4px;
margin-bottom: 1px;
}   .berkei-reset-scope,
.berkei-reset-scope *,
.berkei-reset-scope *::before,
.berkei-reset-scope *::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.SEARCH_CUSTOM {
padding: 20px;
}
.footer-flowbox {
overflow-wrap: break-word;
margin-left: 15px;
margin-right: 15px;
} .df_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto;
}
.df_wrapper ._df_thumb {
margin: 0 auto !important;
float: none !important;
display: block !important;
}
.df_wrapper .df-element {
margin-left: auto !important;
margin-right: auto !important;
}  h1.berkei-heading-line,
h2.berkei-heading-line,
h3.berkei-heading-line,
h4.berkei-heading-line,
h5.berkei-heading-line,
h6.berkei-heading-line,
.berkei-heading-line h1,
.berkei-heading-line h2,
.berkei-heading-line h3,
.berkei-heading-line h4,
.berkei-heading-line h5,
.berkei-heading-line h6 {
position: relative;
display: block;
padding-bottom: 10px;
margin-bottom: 20px;
}
h1.berkei-heading-line::after,
h2.berkei-heading-line::after,
h3.berkei-heading-line::after,
h4.berkei-heading-line::after,
h5.berkei-heading-line::after,
h6.berkei-heading-line::after,
.berkei-heading-line h1::after,
.berkei-heading-line h2::after,
.berkei-heading-line h3::after,
.berkei-heading-line h4::after,
.berkei-heading-line h5::after,
.berkei-heading-line h6::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, var(--berkei-line-dark, #333) 50px, var(--berkei-line-light, #ddd) 50px);
}    .berkei-tag-icons-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
gap: 8px;
margin: 10px 0;
}
.berkei-tag-icon {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .15s ease;
}
.berkei-tag-icon--link {
text-decoration: none;
color: inherit;
}
.berkei-tag-icon:hover {
transform: scale(1.15);
}
.berkei-tag-icon img {
display: block;
}  .berkei-attr-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f3f3f3;
color: #333;
font-size: 12px;
line-height: 1.3;
padding: 3px 8px;
border-radius: 4px;
border: 1px solid #ddd;
white-space: nowrap;
}
.berkei-attr-badge-label {
font-weight: 600;
color: #555;
} .berkei-attr-color-dot {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #ccc;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.berkei-attr-icon--color {
padding: 2px;
}    .berkei-filter-shell {
margin-bottom: 24px;
}
.berkei-filter-edge-columns {
position: relative;
}
.berkei-filter-edge-column {
position: absolute !important;
top: 0;
left: 0;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
flex: 0 0 0 !important;
flex-basis: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.berkei-filter-edge-columns > .wp-block-column:not(.berkei-filter-edge-column) {
flex: 1 1 100% !important;
flex-basis: 100% !important;
max-width: 100%;
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar {
position: fixed !important;
top: auto;
right: 22px !important;
bottom: 104px;
left: auto !important;
width: auto;
margin: 0;
z-index: 100020;
} .berkei-cart-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
color: inherit;
text-decoration: none;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease;
} body:has(.berkei-cart-trigger) .xoo-wsc-cart-trigger {
display: none !important;
}
body:has(.berkei-cart-trigger) .xoo-wsc-basket {
display: none !important;
}
.berkei-header-filter-trigger {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
padding: 6px;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
line-height: 1;
transition: color 0.15s ease;
}
.berkei-header-filter-trigger:hover,
.berkei-header-filter-trigger:focus-visible {
color: #177797;
outline: none;
}
.berkei-header-filter-trigger .material-symbols-outlined {
font-size: 23px;
font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
}
.berkei-filter-shell--header-source > .berkei-filter-trigger {
display: none !important;
} body:has(.xoo-wsc-modal) > .wc-block-components-drawer__screen-overlay[data-wp-interactive="woocommerce/mini-cart"] {
display: none !important;
}
.berkei-cart-trigger:hover,
.berkei-cart-trigger:focus-visible {
color: #177797;
text-decoration: none;
outline: none;
}
.berkei-cart-trigger__icon {
width: 24px;
height: 24px;
display: block;
color: currentColor;
}
.berkei-cart-trigger:hover .berkei-cart-trigger__icon,
.berkei-cart-trigger:focus-visible .berkei-cart-trigger__icon {
color: currentColor;
} .wp-block-navigation__responsive-container-open,
.wc-block-customer-account__link {
transition: color 0.15s ease;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible,
.wc-block-customer-account__link:hover,
.wc-block-customer-account__link:focus-visible {
color: #177797 !important;
outline: none;
}
.berkei-cart-trigger__count {
position: absolute;
top: -5px;
right: -7px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #147798;
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 18px;
text-align: center;
pointer-events: none;
}
.berkei-cart-trigger__count.is-empty {
display: none;
}
.berkei-floating-toolbar {
position: fixed;
top: 50%;
right: 14px;
bottom: auto;
z-index: 100020;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 64px;
max-width: none;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
transform: translateY(-50%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.berkei-floating-toolbar-has-cart .berkei-floating-toolbar {
right: 14px;
}
.berkei-floating-toolbar .berkei-filter-shell--sidebar {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: auto;
margin: 0;
z-index: auto;
}
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar .berkei-filter-shell--sidebar {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
flex: 0 0 64px;
width: 64px !important;
min-width: 64px;
max-width: 64px;
height: 64px;
min-height: 64px;
max-height: 64px;
margin: 0;
z-index: auto;
}
.berkei-filter-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 4px;
background: #fff;
color: inherit;
cursor: pointer;
font-family: inherit;
font-weight: 600;
line-height: 1.2;
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger {
position: relative;
flex-direction: row;
width: auto;
min-width: 132px;
min-height: 54px;
justify-content: center;
gap: 9px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: #177797;
color: #fff;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
.berkei-floating-toolbar__button,
.berkei-floating-toolbar .berkei-btt {
position: static;
flex: 0 0 64px;
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
border: 1px solid rgba(29, 35, 39, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: #1d2327;
box-shadow: 0 10px 26px rgba(15, 23, 32, 0.12);
transform: none;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.berkei-floating-toolbar__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.berkei-floating-toolbar__button .material-symbols-outlined {
font-size: 26px;
line-height: 1;
}
.berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger {
width: 64px;
min-width: 64px;
max-width: 64px;
height: 64px;
min-height: 64px;
padding: 0;
border: 1px solid rgba(29, 35, 39, 0.12);
background: rgba(255, 255, 255, 0.96);
color: #1d2327;
box-shadow: 0 10px 26px rgba(15, 23, 32, 0.12);
}
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger {
width: 64px;
min-width: 64px;
max-width: 64px;
height: 64px;
min-height: 64px;
padding: 0;
border: 1px solid rgba(29, 35, 39, 0.12);
background: rgba(255, 255, 255, 0.96);
color: #1d2327;
box-shadow: 0 10px 26px rgba(15, 23, 32, 0.12);
}
.berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger > span:not(.material-symbols-outlined):not(.berkei-filter-trigger__count) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger > span:not(.material-symbols-outlined):not(.berkei-filter-trigger__count) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.berkei-floating-toolbar .berkei-btt:not(.is-visible) {
opacity: 0.22;
visibility: visible;
pointer-events: none;
}
.berkei-floating-toolbar .berkei-btt.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.berkei-floating-toolbar__button:hover,
.berkei-floating-toolbar__button:focus-visible,
.berkei-floating-toolbar .berkei-btt:hover,
.berkei-floating-toolbar .berkei-btt:focus-visible,
.berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger:hover,
.berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger:focus-visible {
border-color: #177797;
background: #fff;
color: #177797;
box-shadow: 0 10px 26px rgba(23, 119, 151, 0.18);
outline: none;
transform: none;
}  body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger > span:not(.material-symbols-outlined):not(.berkei-filter-trigger__count) {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: nowrap;
border: 0;
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger::after {
content: none;
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger .material-symbols-outlined {
font-size: 26px;
line-height: 1;
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger__count {
position: absolute;
top: -7px;
right: -7px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.berkei-filter-trigger:hover,
.berkei-filter-trigger:focus-visible {
border-color: var(--berkei-color-primary, #177797);
color: var(--berkei-color-primary, #177797);
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger:hover,
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger:focus-visible {
background: #115f79;
color: #fff;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
}
.berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger:hover,
.berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger:focus-visible {
background: #f4fbfd;
color: #177797;
box-shadow: none;
}
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger:hover,
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger:focus-visible {
border-color: var(--berkei-color-primary, #177797);
background: #f4fbfd;
color: var(--berkei-color-primary, #177797);
box-shadow: none;
}
body.berkei-filter-drawer-open .berkei-floating-toolbar {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.18s ease, visibility 0.18s ease;
}
@media (max-width: 782px) {
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar {
display: none !important;
}
} body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger:focus-visible {
outline: 3px solid rgba(23, 119, 151, 0.28);
outline-offset: 3px;
}
.berkei-filter-trigger__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--berkei-color-primary, #177797);
color: #fff;
font-size: 0.75rem;
}
.berkei-filter-trigger__count[hidden] {
display: none !important;
} @media (max-width: 781px) {
.berkei-floating-toolbar {
right: 12px;
top: auto;
bottom: 160px;
width: 60px;
gap: 9px;
max-width: none;
padding: 0;
transform: none;
}
body.berkei-floating-toolbar-has-cart .berkei-floating-toolbar {
right: 12px;
max-width: none;
} body.single-product .berkei-floating-toolbar {
display: none !important;
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar {
top: auto;
right: 14px !important;
bottom: 104px;
max-width: calc(100dvw - 28px);
}
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar .berkei-filter-shell--sidebar {
position: static !important;
right: auto !important;
bottom: auto !important;
flex-basis: 60px;
width: 60px !important;
min-width: 60px;
max-width: 60px;
height: 60px;
min-height: 60px;
max-height: 60px;
}
body.berkei-shop-action-rail-enabled .berkei-filter-shell--sidebar .berkei-filter-trigger {
min-width: 118px;
min-height: 50px;
padding: 0 15px;
}
.berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger {
width: 60px;
min-width: 60px;
max-width: 60px;
height: 60px;
min-height: 60px;
padding: 0;
}
body.berkei-shop-action-rail-enabled .berkei-floating-toolbar .berkei-filter-shell--sidebar .berkei-filter-trigger {
width: 60px;
min-width: 60px;
max-width: 60px;
height: 60px;
min-height: 60px;
padding: 0;
}
.berkei-floating-toolbar__button,
.berkei-floating-toolbar .berkei-btt {
flex-basis: 60px;
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
} }    .berkei-swatch-dot {
display: block;
width: 100%;
height: 100%;
border-radius: var(--berkei-sw-radius, 50%);
}
.berkei-swatch-label {
font-size: 0.82rem;
white-space: nowrap;
}   .trust-bar {
width: 100%;
padding: 8px 12px;
margin: 0;
box-sizing: border-box;
} .trust-bar .wp-block-columns {
margin: 0 !important;
gap: 0 !important; align-items: center;
} .trust-bar .wp-block-column {
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
} .trust-payment,
.trust-shipping,
.trust-newsletter,
.trust-contact,
.trust-response,
.trust-germany {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem; margin: 0 !important;
padding: 0 10px; line-height: 1.25;
white-space: nowrap; box-sizing: border-box;
text-align: center;
} .trust-payment p,
.trust-shipping p,
.trust-newsletter p,
.trust-contact p,
.trust-response p,
.trust-germany p {
margin: 0 !important;
} .trust-payment a,
.trust-shipping a,
.trust-newsletter a,
.trust-contact a,
.trust-response a,
.trust-germany a {
color: inherit;
text-decoration: none;
}
.trust-payment a:hover,
.trust-shipping a:hover,
.trust-newsletter a:hover,
.trust-contact a:hover,
.trust-response a:hover,
.trust-germany a:hover {
text-decoration: underline;
text-underline-offset: 2px;
} .trust-payment::before,
.trust-shipping::before,
.trust-newsletter::before,
.trust-contact::before,
.trust-response::before,
.trust-germany::before {
display: inline-block;
line-height: 1;
font-size: 0.95em;
transform: translateY(-0.5px);
} .trust-payment::before {
content: "✓";
}
.trust-shipping::before {
content: "↗"; }
.trust-newsletter::before {
content: "✉";
}
.trust-contact::before {
content: "✉"; }
.trust-response::before {
content: "⏱"; }
.trust-germany::before {
content: "⌂"; } .trust-bar.has-dividers .wp-block-column:not(:last-child) {
position: relative;
}
.trust-bar.has-dividers .wp-block-column:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: rgba(255, 255, 255, 0.2); } @media (max-width: 1000px) {
.trust-bar {
padding: 8px 10px;
}
.trust-payment,
.trust-shipping,
.trust-newsletter,
.trust-contact,
.trust-response,
.trust-germany {
padding: 0 8px;
font-size: 0.92rem;
}
} @media (max-width: 760px) {
.trust-bar .wp-block-columns {
gap: 6px !important;
}
.trust-bar .wp-block-column {
justify-content: flex-start;
}
.trust-payment,
.trust-shipping,
.trust-newsletter,
.trust-contact,
.trust-response,
.trust-germany {
white-space: normal; justify-content: flex-start;
text-align: left;
width: 100%;
padding: 2px 4px;
} .trust-bar.has-dividers .wp-block-column::after {
display: none;
}
} @media (max-width: 420px) {
.trust-payment,
.trust-shipping,
.trust-newsletter,
.trust-contact,
.trust-response,
.trust-germany {
font-size: 0.88rem;
gap: 0.35rem;
}
.trust-payment::before,
.trust-shipping::before,
.trust-newsletter::before,
.trust-contact::before,
.trust-response::before,
.trust-germany::before {
font-size: 0.9em;
}
}
@media (max-width: 760px) {
.trust-bar .wp-block-column {
justify-content: center !important;
}
.trust-payment,
.trust-shipping,
.trust-newsletter,
.trust-contact,
.trust-response,
.trust-germany {
justify-content: center !important;
text-align: center !important;
padding: 4px 10px !important;
}
}   .berkei-inf-hide {
display: none !important;
} .berkei-inf-load-more {
text-align: center;
padding: 16px 0;
clear: both;
}
.berkei-inf-load-more a {
display: inline-block;
padding: 10px 28px;
border: 1px solid rgba(0, 0, 0, 0.2);
background: transparent;
color: inherit;
font-size: 0.95rem;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
}
.berkei-inf-load-more a:hover {
border-color: var(--berkei-color-primary, #177797);
color: var(--berkei-color-primary, #177797);
}
.berkei-inf-load-more.berkei-inf-finished a {
border-color: transparent;
color: #999;
cursor: default;
font-size: 0.85rem;
} .berkei-inf-loader {
text-align: center;
clear: both;
padding: 16px 0;
}
.berkei-inf-loader img {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
max-height: 32px;
}
.berkei-inf-loader span {
display: inline-block;
vertical-align: middle;
color: #666;
font-size: 0.9rem;
} @keyframes berkeiInfFadeIn {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
.berkei-inf-fadein {
animation: berkeiInfFadeIn 0.35s ease forwards;
} .berkei-inf-skeletons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 16px 0;
}
.berkei-inf-skeleton {
display: flex;
flex-direction: column;
}
.berkei-inf-loader-text {
display: block;
text-align: center;
color: #666;
font-size: 0.9rem;
margin-top: 8px;
}     .berkei-footer,
.berkei-footer * {
box-sizing: border-box;
}
.berkei-footer {
--berkei-blue: #147798;
--berkei-orange: #e56b26;
--berkei-bg: #f0ecea;
--berkei-surface: #ffffff;
--berkei-text: #171717;
--berkei-muted: #5e5e5e;
--berkei-line: #ddd9d2;
--berkei-dark: #222222;
--berkei-bottom-bg: #dedada;
--berkei-max: 1320px;
--berkei-radius: 16px;
--berkei-radius-sm: 10px;
--berkei-frame-radius: 10px;
--berkei-social-icon-size: 16px;
--berkei-trust-icon-size: 20px;
--berkei-payment-card-width: 142px;
--berkei-payment-card-height: 64px;
--berkei-payment-logo-width: 122px;
--berkei-payment-logo-height: 40px;
--berkei-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
background: var(--berkei-bg);
color: var(--berkei-text);
margin-top: 80px;
border-top: none;
font-family: var(--berkei-font-family, inherit);
} .berkei-footer__newsletter-bar {
background: var(--berkei-dark);
color: #fff;
}
.berkei-footer__newsletter-bar-inner {
max-width: var(--berkei-max);
margin: 0 auto;
padding: 32px 24px;
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter-title {
color: #fff;
margin: 0 0 8px;
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter p {
color: rgba(255,255,255,.6);
margin: 0 0 16px;
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter-form {
border-color: rgba(255,255,255,.2);
background: rgba(255,255,255,.08);
max-width: 520px;
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter-form input {
color: #fff;
background: rgba(255,255,255,.08);
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter-form input::placeholder {
color: rgba(255,255,255,.4);
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter-form button {
background: var(--berkei-blue);
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter-form button:hover,
.berkei-footer__newsletter-bar .berkei-footer__newsletter-form button:focus-visible {
background: var(--berkei-orange);
} .berkei-is-newsletter-page .berkei-footer__newsletter-bar {
display: none;
} .tnp-subscription {
max-width: 520px;
}
.tnp-subscription .tnp-field {
margin-bottom: 12px;
}
.tnp-subscription .tnp-field label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
color: var(--berkei-text, #222);
}
.tnp-subscription input[type="text"],
.tnp-subscription input[type="email"] {
width: 100%;
border: 1px solid var(--berkei-line, #ddd);
border-radius: var(--berkei-frame-radius, 10px);
background: var(--berkei-surface, #fff);
color: var(--berkei-text, #222);
padding: 12px 14px;
font-size: 16px;
font-family: inherit;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
}
.tnp-subscription input[type="text"]:focus,
.tnp-subscription input[type="email"]:focus {
border-color: var(--berkei-blue, #147798);
box-shadow: 0 0 0 3px rgba(20, 119, 152, 0.16);
}
.tnp-subscription .tnp-privacy-field {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 16px 0 8px;
line-height: 1.45;
font-size: 14px;
}
.tnp-subscription .tnp-privacy-field input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
}
.tnp-subscription input[type="submit"],
.tnp-subscription .tnp-submit {
display: inline-block;
margin-top: 8px;
border: 0;
border-radius: var(--berkei-frame-radius, 10px);
background: var(--berkei-blue, #147798);
color: #fff;
padding: 12px 28px;
font-size: 16px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background 0.2s ease, transform 0.12s ease;
}
.tnp-subscription input[type="submit"]:hover,
.tnp-subscription .tnp-submit:hover {
background: var(--berkei-orange, #e56b26);
transform: translateY(-1px);
}
.berkei-footer__inner {
max-width: var(--berkei-max);
margin: 0 auto;
padding: 56px 24px 24px;
}
.berkei-footer__top {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
align-items: start;
}
.berkei-footer__brand-link {
display: inline-flex;
align-items: center;
gap: var(--berkei-logo-gap, 16px);
text-decoration: none;
color: var(--berkei-text);
}
.berkei-footer__logo {
width: var(--berkei-logo-size, 72px);
height: var(--berkei-logo-size, 72px);
object-fit: contain;
display: block;
}
.berkei-footer__brand-name {
font-size: clamp(30px, 3vw, 52px);
line-height: 0.95;
font-weight: 800;
letter-spacing: 0.04em;
}
.berkei-footer__claim {
margin-top: 8px;
font-size: 18px;
font-weight: 700;
}
.berkei-footer__description {
margin: 24px 0 22px;
max-width: 420px;
font-size: 18px;
line-height: 1.65;
color: var(--berkei-muted);
}
.berkei-footer__socials {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.berkei-footer__social-icon {
width: calc(var(--berkei-social-icon-size) + 2px);
height: calc(var(--berkei-social-icon-size) + 2px);
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 6px;
vertical-align: -0.15em;
}
.berkei-footer__social-icon svg {
width: var(--berkei-social-icon-size);
height: var(--berkei-social-icon-size);
display: block;
}
.berkei-footer .berkei-symbol-filled {
font-size: 20px;
line-height: 1;
font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.berkei-footer__socials a {
color: var(--berkei-text);
text-decoration: none;
font-weight: 600;
font-size: 15px;
padding: 8px 0;
display: inline-flex;
align-items: center;
position: relative;
}
.berkei-footer__socials a::after {
content: "";
position: absolute;
left: 0;
bottom: 2px;
width: 0;
height: 2px;
background: var(--berkei-orange);
transition: width 0.25s ease;
}
.berkei-footer__socials a:hover::after,
.berkei-footer__socials a:focus-visible::after {
width: 100%;
}
.berkei-footer__nav--desktop {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
border-left: 1px solid var(--berkei-line);
padding-left: 24px;
}
.berkei-footer__nav--desktop .berkei-footer__col + .berkei-footer__col {
border-left: 1px solid var(--berkei-line);
padding-left: 24px;
}
.berkei-footer__col h3,
.berkei-footer__newsletter-title {
margin: 0 0 18px;
font-size: 20px;
line-height: 1.25;
font-weight: 800;
color: var(--berkei-blue);
}
.berkei-footer__col ul,
.berkei-footer__accordion ul {
list-style: none;
margin: 0;
padding: 0;
}
.berkei-footer__col li,
.berkei-footer__accordion li {
margin: 0 0 12px;
}
.berkei-footer__col a,
.berkei-footer__accordion a,
.berkei-footer__bottom-links a,
.berkei-footer__consent-button {
color: var(--berkei-text);
text-decoration: none;
font-size: 16px;
line-height: 1.5;
transition: color 0.2s ease;
}
.berkei-footer__col a:hover,
.berkei-footer__accordion a:hover,
.berkei-footer__bottom-links a:hover,
.berkei-footer__consent-button:hover,
.berkei-footer__col a:focus-visible,
.berkei-footer__accordion a:focus-visible,
.berkei-footer__bottom-links a:focus-visible,
.berkei-footer__consent-button:focus-visible {
color: var(--berkei-orange);
}
.berkei-footer__revoke-btn {
display: inline-block;
margin-top: 14px;
padding: 6px 13px;
border: 1.5px solid #b91c1c;
border-radius: 4px;
color: #b91c1c !important;
font-size: 13px;
line-height: 1.4;
text-decoration: none !important;
transition: background 0.18s ease, color 0.18s ease;
}
.berkei-footer__revoke-btn:hover,
.berkei-footer__revoke-btn:focus-visible {
background: #b91c1c;
color: #fff !important;
outline: none;
}
.berkei-footer__newsletter p {
margin: 0 0 18px;
font-size: 17px;
line-height: 1.6;
color: var(--berkei-muted);
}
.berkei-footer__newsletter-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 0;
overflow: hidden;
border-radius: var(--berkei-frame-radius);
border: 1px solid var(--berkei-line);
background: var(--berkei-surface);
box-shadow: var(--berkei-shadow);
}
.berkei-footer__newsletter-form input {
border: 0;
min-width: 0;
padding: 16px 18px;
font-size: 16px;
background: transparent;
color: var(--berkei-text);
outline: none;
}
.berkei-footer__newsletter-form input::placeholder {
color: #8b8b8b;
}
.berkei-footer__newsletter-form button {
border: 0;
padding: 16px 22px;
font-size: 16px;
font-weight: 700;
background: var(--berkei-dark);
color: #fff;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.berkei-footer__newsletter-form button:hover,
.berkei-footer__newsletter-form button:focus-visible {
background: var(--berkei-orange);
}
.berkei-footer__accordion {
display: none;
margin-top: 36px;
border-top: 1px solid var(--berkei-line);
}
.berkei-footer__accordion details {
border-bottom: 1px solid var(--berkei-line);
}
.berkei-footer__accordion summary {
list-style: none;
cursor: pointer;
padding: 18px 0;
font-size: 18px;
font-weight: 800;
position: relative;
}
.berkei-footer__accordion summary::-webkit-details-marker {
display: none;
}
.berkei-footer__accordion summary::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
line-height: 1;
font-weight: 400;
}
.berkei-footer__accordion details[open] summary::after {
content: "-";
}
.berkei-footer__accordion ul {
padding: 0 0 18px;
}
.berkei-footer__trust {
margin-top: 40px;
padding: 22px 0;
border-top: 1px solid var(--berkei-line);
border-bottom: 1px solid var(--berkei-line);
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 16px 24px;
}
.berkei-footer__trust-item {
display: grid;
grid-template-columns: 24px 1fr;
align-items: center;
column-gap: 10px;
width: max-content;
justify-self: auto;
min-height: 28px;
font-size: 14px;
line-height: 1.25;
font-weight: 600;
color: var(--berkei-text);
}
.berkei-footer__trust-item > span:last-child {
white-space: nowrap;
}
.berkei-footer__trust-icon {
width: 24px;
min-width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.berkei-footer__trust-icon .material-symbols-outlined {
font-size: var(--berkei-trust-icon-size);
line-height: 1;
}
.berkei-footer__trust-icon svg {
width: var(--berkei-trust-icon-size);
height: var(--berkei-trust-icon-size);
display: block;
}
.berkei-footer__trust-flag {
width: 20px;
height: 14px;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
display: inline-block;
position: relative;
color: transparent;
font-size: 0;
}
.berkei-footer__trust-flag::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
#111111 0%,
#111111 33.333%,
#d0181f 33.333%,
#d0181f 66.666%,
#f2cd2f 66.666%,
#f2cd2f 100%
);
}
.berkei-footer__payments {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 0;
align-items: stretch;
margin-top: 22px;
margin-bottom: 10px;
}
.berkei-footer__payment {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
min-width: 80px;
min-height: var(--berkei-payment-card-height);
padding: 8px 12px;
border: 1px solid var(--berkei-line);
border-radius: var(--berkei-frame-radius);
background: transparent;
font-size: 14px;
font-weight: 700;
color: var(--berkei-text);
}
.berkei-footer__payment img {
width: var(--berkei-payment-logo-width);
max-width: 100%;
height: var(--berkei-payment-logo-height);
object-fit: contain;
object-position: center;
display: block;
}
.berkei-footer__bottom {
margin: 14px -24px 0;
padding: 20px 24px;
background: var(--berkei-bottom-bg);
border-top: 1px solid var(--berkei-line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.berkei-footer__copyright {
font-size: 16px;
color: var(--berkei-muted);
}
.berkei-footer__bottom-links {
display: flex;
flex-wrap: wrap;
gap: 0 0px;
}
.berkei-footer__bottom-links a,
.berkei-footer__consent-button {
font-size: 14px;
color: var(--berkei-muted);
display: inline-flex;
align-items: center; min-height: 32px;
}
.berkei-footer__consent-button {
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
cursor: pointer;
}
.berkei-footer__bottom-links a + a::before,
.berkei-footer__bottom-links a + .berkei-footer__consent-button::before {
content: "|";
color: var(--berkei-line);
margin: 0 18px;
pointer-events: none;
flex-shrink: 0;
}
@media (max-width: 1100px) {
.berkei-footer__top {
grid-template-columns: 1fr;
}
.berkei-footer__trust {
flex-wrap: wrap;
justify-content: center;
}
.berkei-footer__trust-item {
font-size: 16px;
}
}
@media (max-width: 767px) {
.berkei-footer__inner {
padding: 38px 18px 20px;
}
.berkei-footer__top {
grid-template-columns: 1fr;
gap: 28px;
}
.berkei-footer__brand-name {
font-size: 38px;
}
.berkei-footer__claim {
font-size: 16px;
}
.berkei-footer__description {
font-size: 16px;
margin: 18px 0;
}
.berkei-footer__nav--desktop {
display: none;
}
.berkei-footer__accordion {
display: block;
}
.berkei-footer__newsletter-bar .berkei-footer__newsletter-form {
max-width: 100%;
}
.berkei-footer__newsletter-form {
grid-template-columns: 1fr;
gap: 0;
border-radius: var(--berkei-frame-radius);
overflow: visible;
border: 0;
box-shadow: none;
background: transparent;
}
.berkei-footer__newsletter-form input {
border: 1px solid var(--berkei-line);
border-radius: var(--berkei-frame-radius) var(--berkei-frame-radius) 0 0;
background: var(--berkei-surface);
}
.berkei-footer__newsletter-form button {
border-radius: 0 0 var(--berkei-frame-radius) var(--berkei-frame-radius);
}
.berkei-footer__trust {
grid-template-columns: 1fr;
gap: 14px;
}
.berkei-footer__trust-item > span:last-child {
white-space: normal;
}
.berkei-footer__payments {
gap: 10px;
}
.berkei-footer__payment {
flex: 0 0 auto;
}
.berkei-footer__bottom {
flex-direction: column;
align-items: flex-start;
}
.berkei-footer__bottom-links {
gap: 0 0px;
}
.berkei-footer__bottom-links a + a::before,
.berkei-footer__bottom-links a + .berkei-footer__consent-button::before {
margin: 0 12px;
}
}  .wc-gzd-additional-info.small-business-info {
font-size: 0.9em;
}   .privacy-policy .entry-content h2 {
font-size: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.721), 1.875rem) !important;
margin-block-start: 2em !important;
margin-block-end: 0.6em !important;
}
.privacy-policy .entry-content h3 {
font-size: clamp(1.15rem, 1.15rem + ((1vw - 0.48rem) * 0.481), 1.4rem) !important;
margin-block-start: 1.5em !important;
margin-block-end: 0.4em !important;
}
.privacy-policy .entry-content h4 {
font-size: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.385), 1.2rem) !important;
margin-block-start: 1.2em !important;
margin-block-end: 0.3em !important;
} .privacy-policy .entry-content > h2:first-child {
margin-block-start: 0 !important;
} .entry-content ul,
.entry-content ol {
padding-left: 1.2em;
}
.berkei-desc {
font-family: inherit;
line-height: 1.65;
word-wrap: break-word;
overflow-wrap: break-word;
}
.berkei-desc h5 {
font-size: 1.05rem;
font-weight: 800;
margin: 1.4em 0 0.4em;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #0f1720;
}
.berkei-desc p {
margin: 0 0 0.9em;
}
.berkei-desc ul {
margin: 0.5em 0 1em 1.2em;
padding: 0;
list-style: disc;
}
.berkei-desc ul li {
margin-bottom: 0.25em;
}
.berkei-desc--kurz {
font-size: 0.97em;
}
.berkei-desc--lang h5:first-child {
margin-top: 0;
}
.berkei-desc--background h5:first-child {
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.08em;
opacity: 0.75;
margin-bottom: 0.3em;
} .berkei-desc__intro {
margin-bottom: 1.2em;
}
.berkei-desc__section {
margin-bottom: 1em;
}
.berkei-desc__section:last-child {
margin-bottom: 0;
}  .berkei-contact code,
.berkei-contact pre,
.berkei-header-v2 code,
.berkei-header-v2 pre,
.berkei-footer code,
.berkei-footer pre,
.berkei-catov-scope code,
.berkei-catov-scope pre {
font-family: inherit !important;
font-size: inherit !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
white-space: normal !important;
display: contents;
}   .woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link,
.wc-block-product-template .wc-block-components-product-image {
position: relative;
overflow: hidden;
display: block;
isolation: isolate; } .wc-block-product-template .wc-block-components-product-image > a {
overflow: hidden;
display: block;
} .wc-block-product-template .wc-block-components-product-image,
.wc-block-product-template .wc-block-components-product-image > a {
width: 100%;
} .wc-block-product-template li.wc-block-product {
align-items: stretch !important;
} .wc-block-product-template .wc-block-product > .is-layout-constrained,
.wc-block-product-template .wc-block-product > .is-layout-flex > .alignfull {
width: 100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link > img:first-child,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link > img:first-child,
.wc-block-product-template .wc-block-components-product-image img {
display: block; width: 100%; height: auto;
transform: scale(1);
transform-origin: center center;
transition: opacity 220ms ease, transform var(--berkei-collection-zoom-duration, 320ms) cubic-bezier(0.22, 0.61, 0.36, 1);
backface-visibility: hidden;
will-change: transform; }
.woocommerce ul.products li.product .woocommerce-loop-product__link > img.berkei-loop-hover-image,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link > img.berkei-loop-hover-image,
.wc-block-product-template .wc-block-components-product-image img.berkei-loop-hover-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease, transform var(--berkei-collection-zoom-duration, 320ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link:has(> img.berkei-loop-hover-image) > img:first-child,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__link:has(> img.berkei-loop-hover-image) > img:first-child,
.wc-block-product-template li.wc-block-product:hover .wc-block-components-product-image:has(img.berkei-loop-hover-image) img:first-child,
.wc-block-product-template li.product:hover .wc-block-components-product-image:has(img.berkei-loop-hover-image) img:first-child {
opacity: 0;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link > img.berkei-loop-hover-image,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__link > img.berkei-loop-hover-image,
.wc-block-product-template li.wc-block-product:hover .wc-block-components-product-image img.berkei-loop-hover-image,
.wc-block-product-template li.product:hover .wc-block-components-product-image img.berkei-loop-hover-image {
opacity: 1;
transform: scale(var(--berkei-collection-zoom-scale, 1.04));
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link > img:first-child,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__link > img:first-child,
.wc-block-product-template li.wc-block-product:hover .wc-block-components-product-image img,
.wc-block-product-template li.product:hover .wc-block-components-product-image img {
transform: scale(var(--berkei-collection-zoom-scale, 1.04));
}     @media (max-width: 768px) {
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box + .box {
margin-left: 8px !important;
}
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box span.eb-cd-digit {
font-size: 26px !important;
}
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box span.eb-cd-label {
font-size: 11px !important;
}
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box {
padding-left: 6px !important;
padding-right: 6px !important;
}
}
@media (max-width: 480px) {
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box + .box {
margin-left: 4px !important;
}
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box span.eb-cd-digit {
font-size: 20px !important;
}
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box span.eb-cd-label {
font-size: 9px !important;
}
.eb-countdown-p38qm.eb-cd-wrapper .eb-cd-inner .box {
padding-left: 4px !important;
padding-right: 4px !important;
}
}  .berkei-action-banner {
box-sizing: border-box;
font-family: "Inter", sans-serif;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
align-items: center;
gap: clamp(22px, 3vw, 38px);
margin: 12px 0;
padding: clamp(32px, 4.6vw, 58px);
border: 1px solid #e3e6e8;
border-radius: 8px;
background: #f8f6f0;
color: #111820;
min-height: 470px;
overflow: hidden;
position: relative;
isolation: isolate;
}
.berkei-action-banner--shop {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
align-items: center;
gap: clamp(22px, 3vw, 38px);
padding: clamp(20px, 2.5vw, 30px);
background-image:
linear-gradient(90deg, rgba(248, 244, 238, 0.96) 0%, rgba(248, 244, 238, 0.88) 45%, rgba(248, 244, 238, 0.25) 75%, transparent 100%),
var(--berkei-banner-bg, linear-gradient(120deg, #f8f4ee, #eef3f1 64%, #f7f1e8));
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
min-height: 245px;
}
.berkei-action-banner--shop .berkei-action-banner__content {
max-width: 680px;
}
.berkei-action-banner--shop .berkei-action-banner__headline {
font-size: clamp(34px, 4.5vw, 48px);
font-weight: 900;
line-height: 0.93;
letter-spacing: -0.045em;
color: #111820;
max-width: 12ch;
text-transform: none;
}
.berkei-action-banner--shop .berkei-action-banner__text {
font-size: clamp(13px, 1.2vw, 16px);
color: rgba(29, 35, 39, 0.72);
margin-top: 10px;
max-width: 620px;
line-height: 1.48;
}
.berkei-action-banner--shop .berkei-action-banner__statement {
color: #e4651d; font-size: clamp(32px, 4.5vw, 56px);
text-shadow: 0 4px 20px rgba(255, 255, 255, 0.85);
right: clamp(24px, 5vw, 60px);
bottom: clamp(28px, 5vw, 60px);
}
.berkei-action-banner--shop .berkei-action-banner__proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.berkei-action-banner--shop .berkei-action-banner__proof li {
gap: 9px;
min-width: 0;
min-height: 38px;
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
font-size: 10px;
line-height: 1.25;
}
.berkei-action-banner--shop .berkei-action-banner__proof li::before { content: '';
flex: 0 0 auto;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask: var(--berkei-proof-icon) center / contain no-repeat;
mask: var(--berkei-proof-icon) center / contain no-repeat;
}
.berkei-action-banner--shop .berkei-action-banner__proof li:nth-child(1)::before {
--berkei-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M155-195q-35-35-35-85H40v-440q0-33 23.5-56.5T120-800h560v160h120l120 160v200h-80q0 50-35 85t-85 35q-50 0-85-35t-35-85H360q0 50-35 85t-85 35q-50 0-85-35Zm113.5-56.5Q280-263 280-280t-11.5-28.5Q257-320 240-320t-28.5 11.5Q200-297 200-280t11.5 28.5Q223-240 240-240t28.5-11.5ZM120-360h32q17-18 39-29t49-11q27 0 49 11t39 29h272v-360H120v360Zm628.5 108.5Q760-263 760-280t-11.5-28.5Q737-320 720-320t-28.5 11.5Q680-297 680-280t11.5 28.5Q703-240 720-240t28.5-11.5ZM680-440h170l-90-120h-80v120ZM360-540Z'/%3E%3C/svg%3E");
}
.berkei-action-banner--shop .berkei-action-banner__proof li:nth-child(2)::before {
--berkei-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m40-240 240-320 180 240h300L560-586 460-454l-50-66 150-200 360 480H40Zm521-80Zm-361 0h160l-80-107-80 107Zm0 0h160-160Z'/%3E%3C/svg%3E");
}
.berkei-action-banner--shop .berkei-action-banner__proof li:nth-child(3)::before {
--berkei-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M216-176q-45-45-70.5-104T120-402q0-63 24-124.5T222-642q35-35 86.5-60t122-39.5Q501-756 591.5-759t202.5 7q8 106 5 195t-16.5 160.5q-13.5 71.5-38 125T684-182q-53 53-112.5 77.5T450-80q-65 0-127-25.5T216-176Zm112-16q29 17 59.5 24.5T450-160q46 0 91-18.5t86-59.5q18-18 36.5-50.5t32-85Q709-426 716-500.5t2-177.5q-49-2-110.5-1.5T485-670q-61 9-116 29t-90 55q-45 45-62 89t-17 85q0 59 22.5 103.5T262-246q42-80 111-153.5T534-520q-72 63-125.5 142.5T328-192Zm0 0Zm0 0Z'/%3E%3C/svg%3E");
}
.berkei-action-banner--shop + .berkei-bestsellers-section {
margin-top: 12px;
}
.berkei-action-banner--shop .berkei-action-banner__actions {
flex-wrap: nowrap;
gap: 10px;
margin-top: 14px;
}
.berkei-action-banner--shop .berkei-action-banner__button {
box-sizing: border-box !important;
width: auto;
height: 42px !important;
min-height: 42px !important;
padding: 0 14px;
font-size: 12px;
white-space: nowrap;
}
.berkei-action-banner--essentials {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.12fr) minmax(0, 0.9fr);
grid-template-areas: "visual content proof";
gap: clamp(22px, 3vw, 40px);
align-items: center;
background: #f8f5f0;
border: 1px solid #e3e6e8;
padding: clamp(10px, 1.5vw, 18px);
min-height: 130px;
}
.berkei-action-banner--essentials .berkei-action-banner__content {
grid-area: content;
}
.berkei-action-banner--essentials .berkei-action-banner__eyebrow {
color: #5f6b70 !important;
font-family: "Inter", sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
margin: 0 0 5px;
}
.berkei-action-banner--essentials .berkei-action-banner__headline {
font-family: "Inter", sans-serif;
font-size: clamp(26px, 2.8vw, 34px);
font-weight: 900;
color: #111820;
line-height: 0.94;
letter-spacing: -0.04em;
text-transform: none;
white-space: nowrap;
margin: 0;
}
.berkei-action-banner--essentials .berkei-action-banner__text {
font-size: 11px;
color: rgba(29, 35, 39, 0.72);
margin-top: 5px;
font-weight: 600;
}
.berkei-action-banner--essentials .berkei-action-banner__visual {
grid-area: visual;
min-height: 102px;
height: 100%;
max-height: 150px;
border-radius: 6px;
overflow: hidden;
background: #ffffff;
border: 0;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}
.berkei-action-banner--essentials .berkei-action-banner__image {
width: 100%;
height: 100%;
object-fit: contain;
background: #ffffff;
mix-blend-mode: multiply;
}
.berkei-action-banner--essentials .berkei-action-banner__proof {
grid-area: proof;
display: grid;
grid-template-columns: 1fr;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;
}
.berkei-action-banner--essentials .berkei-action-banner__proof li {
display: flex;
align-items: flex-start;
gap: 8px;
border: none;
background: transparent;
padding: 0;
font-size: 9px;
font-weight: 600;
color: rgba(29, 35, 39, 0.82);
line-height: 1.35;
min-height: auto;
}
.berkei-action-banner__check {
color: #111820;
font-size: 10px;
font-weight: 900;
line-height: 1.2;
flex-shrink: 0;
}
.berkei-action-banner--outfit {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
align-items: center;
gap: clamp(22px, 3vw, 38px);
padding: clamp(30px, 4.2vw, 58px);
border: 0;
border-radius: 14px;
background-image:
linear-gradient(90deg, rgba(4, 16, 28, 0.82) 0%, rgba(4, 16, 28, 0.58) 42%, rgba(4, 16, 28, 0.12) 76%, rgba(4, 16, 28, 0.02) 100%),
var(--berkei-banner-bg, linear-gradient(135deg, #111820, #1f2937));
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
min-height: clamp(360px, 28vw, 420px);
cursor: pointer;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.berkei-action-banner--outfit.berkei-action-banner--product-photo {
background-color: #071a2c;
background-size: 100% 100%, auto 110%;
background-position: 0 0, right center;
}
.berkei-action-banner--outfit > p:empty {
display: none !important;
}
.berkei-action-banner__link {
position: absolute;
inset: 0;
z-index: 4;
border-radius: inherit;
}
.berkei-action-banner__link:focus-visible {
outline: 3px solid #ffffff;
outline-offset: -5px;
}
.berkei-action-banner--outfit:hover,
.berkei-action-banner--outfit:has(.berkei-action-banner__link:focus-visible) {
transform: translateY(-2px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}
.berkei-action-banner--outfit .berkei-action-banner__eyebrow {
color: #b8d6e8 !important;
font-family: "Inter", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 14px;
text-transform: uppercase;
}
.berkei-action-banner--outfit .berkei-action-banner__headline {
color: #ffffff;
font-family: "Inter", sans-serif;
font-size: clamp(36px, 5vw, 64px);
font-weight: 700;
line-height: 0.96;
letter-spacing: 0;
margin: 0 0 16px;
max-width: 11ch;
text-transform: none;
}
.berkei-action-banner--outfit .berkei-action-banner__text {
color: rgba(255, 255, 255, 0.88);
font-size: clamp(16px, 1.35vw, 20px);
line-height: 1.46;
margin: 0 0 26px;
max-width: 520px;
}
.berkei-action-banner--outfit .berkei-action-banner__proof {
display: none !important;
}
.berkei-action-banner--outfit .berkei-action-banner__visual {
min-height: 0;
height: 100%;
align-self: stretch;
overflow: visible;
}
.berkei-action-banner--essentials .berkei-action-banner__price-wrap {
margin-top: 5px;
}
.berkei-action-banner--essentials .berkei-action-banner__price {
font-size: clamp(18px, 1.9vw, 24px);
}
.berkei-action-banner--essentials .berkei-action-banner__actions,
.berkei-action-banner--outfit .berkei-action-banner__actions {
margin-top: 8px;
}
.berkei-action-banner--essentials .berkei-action-banner__button,
.berkei-action-banner--outfit .berkei-action-banner__button {
box-sizing: border-box !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 14px;
font-size: 11px;
}
.berkei-action-banner--outfit .berkei-action-banner__actions {
margin-top: 0;
}
.berkei-action-banner--outfit .berkei-action-banner__button {
height: auto !important;
min-height: 0 !important;
padding: 15px 24px;
font-size: 16px;
line-height: 1.46;
}
.berkei-action-banner--outfit:hover .berkei-action-banner__button--primary,
.berkei-action-banner--outfit:has(.berkei-action-banner__link:focus-visible) .berkei-action-banner__button--primary {
background: var(--berkei-cta-bg-hover);
transform: translateY(-2px) scale(1.03);
box-shadow: var(--berkei-cta-shadow-hover);
}
.berkei-action-banner--outfit .berkei-action-banner__proof li {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.berkei-action-banner--outfit .berkei-action-banner__statement {
font-family: "Caveat", "Brush Script MT", "Segoe Print", cursive;
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 700;
color: #ffffff;
transform: rotate(-6deg);
position: absolute;
right: clamp(24px, 5vw, 60px);
bottom: clamp(24px, 5vw, 50px);
text-shadow: 0 4px 22px rgba(0, 0, 0, 0.7);
pointer-events: none;
}
.berkei-action-banner__content,
.berkei-action-banner__visual {
position: relative;
z-index: 1;
}
.berkei-action-banner__content {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 760px;
}
.berkei-action-banner__eyebrow {
margin: 0 0 12px;
color: #177797;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
.berkei-action-banner__headline {
max-width: 12ch;
margin: 0;
color: #111820;
font-size: clamp(38px, 5.4vw, 76px);
font-family: "Inter", sans-serif;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 0.98;
text-wrap: balance;
}
.berkei-action-banner__text {
max-width: 620px;
margin: 18px 0 0;
color: rgba(29, 35, 39, 0.78);
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.5;
}
.berkei-action-banner__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.berkei-action-banner__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 20px;
border-radius: var(--berkei-cta-radius);
font-size: 14px;
font-weight: var(--berkei-cta-font-weight);
letter-spacing: 0;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.berkei-action-banner__cart-icon,
.berkei-bestseller-card__cart-icon {
display: block;
flex: 0 0 auto;
}
.berkei-action-banner__button:hover,
.berkei-action-banner__button:focus-visible {
transform: translateY(-2px) scale(1.03);
outline: none;
}
.berkei-action-banner__button--primary {
background: var(--berkei-cta-bg);
color: var(--berkei-cta-text);
box-shadow: var(--berkei-cta-shadow);
}
.berkei-action-banner__button--primary:hover,
.berkei-action-banner__button--primary:focus-visible {
background: var(--berkei-cta-bg-hover);
color: var(--berkei-cta-text);
box-shadow: var(--berkei-cta-shadow-hover);
}
.berkei-action-banner__button--secondary {
border: 1px solid #8b9398;
background: rgba(255, 255, 255, 0.72);
color: #111820;
}
.berkei-action-banner__button--secondary:hover,
.berkei-action-banner__button--secondary:focus-visible {
border-color: rgba(17, 24, 32, 0.38);
background: #ffffff;
color: #111820;
}
.berkei-action-banner__price-wrap {
margin-top: 14px;
display: flex;
align-items: baseline;
gap: 10px;
}
.berkei-action-banner__price {
color: #e56b26;
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 900;
line-height: 1;
}
.berkei-action-banner__regular-price {
color: rgba(29, 35, 39, 0.52);
font-size: 15px;
font-weight: 600;
text-decoration: line-through;
}
.berkei-action-banner__proof {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.berkei-action-banner__proof li {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 7px 10px;
border: 1px solid rgba(29, 35, 39, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.52);
color: rgba(29, 35, 39, 0.76);
font-size: 12px;
font-weight: 750;
line-height: 1.1;
}
.berkei-action-banner__visual {
position: relative;
min-height: clamp(220px, 28vw, 380px);
border-radius: 12px;
background: transparent;
overflow: hidden;
}
.berkei-action-banner__cards {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
width: 100%;
height: 100%;
min-height: inherit;
padding: 10px;
}
.berkei-action-banner__card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 132px;
padding: 16px;
border-radius: 10px;
background: #111820;
color: #fff;
text-decoration: none;
overflow: hidden;
isolation: isolate;
transition: transform 0.2s ease, filter 0.2s ease;
}
.berkei-action-banner__card:first-child {
grid-row: 1 / 3;
}
.berkei-action-banner__card--image {
background-image:
linear-gradient(180deg, rgba(10, 16, 22, 0.05) 8%, rgba(10, 16, 22, 0.68) 100%),
var(--berkei-banner-card-image);
background-position: center;
background-size: cover;
}
.berkei-action-banner__card:hover,
.berkei-action-banner__card:focus-visible {
color: #fff;
filter: saturate(1.06) contrast(1.03);
outline: none;
transform: translateY(-2px);
}
.berkei-action-banner__card-label {
max-width: 9ch;
font-size: clamp(22px, 2.7vw, 38px);
font-weight: 900;
letter-spacing: 0;
line-height: 0.95;
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.32);
}
.berkei-action-banner__card-note {
margin-top: 8px;
font-size: 12px;
font-weight: 800;
line-height: 1.15;
opacity: 0.9;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.34);
}
.berkei-action-banner--configurators .berkei-action-banner__visual,
.berkei-action-banner--outfit .berkei-action-banner__visual,
.berkei-action-banner--drops .berkei-action-banner__visual {
background: transparent;
box-shadow: none;
}
.berkei-action-banner--essentials .berkei-action-banner__visual {
background: #ffffff;
border: 1px solid rgba(29, 35, 39, 0.08);
}
.berkei-action-banner--essentials .berkei-action-banner__mark {
color: rgba(17, 24, 32, 0.12);
font-size: clamp(60px, 10vw, 130px);
}
.berkei-action-banner--essentials .berkei-action-banner__tag {
border: 1px solid rgba(29, 35, 39, 0.18);
background: rgba(255, 255, 255, 0.82);
color: #111820;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.berkei-action-banner__image {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
}
.berkei-action-banner__mark {
position: absolute;
left: 50%;
top: 50%;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(42px, 7vw, 106px);
font-weight: 950;
letter-spacing: 0;
line-height: 0.9;
transform: translate(-50%, -50%) rotate(-7deg);
text-align: center;
}
.berkei-action-banner__tag {
position: absolute;
padding: 9px 13px;
border: 1px solid rgba(255, 255, 255, 0.46);
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 12px;
font-weight: 900;
line-height: 1;
backdrop-filter: blur(12px);
}
.berkei-action-banner__tag--one {
left: 10%;
top: 12%;
}
.berkei-action-banner__tag--two {
right: 10%;
bottom: 12%;
}
.berkei-action-banner__statement {
position: absolute;
right: clamp(16px, 4vw, 36px);
bottom: clamp(16px, 4vw, 36px);
color: rgba(255, 255, 255, 0.94);
font-family: "Caveat", "Brush Script MT", "Segoe Print", cursive;
font-size: clamp(28px, 3.8vw, 50px);
font-weight: 700;
line-height: 1.1;
transform: rotate(-6deg);
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
pointer-events: none;
user-select: none;
} .berkei-category-tiles-section {
margin: 10px 0;
font-family: "Inter", sans-serif;
}
.berkei-category-tiles-title {
margin: 0 0 10px;
color: #111820;
font-size: clamp(24px, 2.8vw, 34px);
font-family: "Inter", sans-serif !important;
font-weight: 800;
letter-spacing: -0.035em;
text-transform: none !important;
}
.berkei-category-tiles-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 2vw, 20px);
}
.berkei-category-tiles-grid > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
.berkei-category-tiles-grid p:empty {
display: none !important;
}
.berkei-category-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 250px;
aspect-ratio: 4 / 3;
padding: 20px;
border: 1px solid #e3e6e8;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
isolation: isolate;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.berkei-category-tile:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.berkei-category-tile__img {
position: absolute;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
z-index: -2;
transition: transform 0.35s ease;
}
.berkei-category-tile:hover .berkei-category-tile__img {
transform: scale(1.05);
}
.berkei-category-tile__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 16, 22, 0.05) 0%, rgba(10, 16, 22, 0.8) 100%);
z-index: -1;
}
.berkei-category-tile__content {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #ffffff;
}
.berkei-category-tile__title {
margin: 0 0 4px;
color: #ffffff;
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 900;
line-height: 1.1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.berkei-category-tile__subtitle {
margin: 0 0 14px;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.berkei-category-tile__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.32);
background: rgba(17, 24, 32, 0.65);
backdrop-filter: blur(8px);
color: #ffffff;
font-size: 13px;
font-weight: 800;
line-height: 1;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.berkei-category-tile:hover .berkei-category-tile__btn {
background: var(--berkei-cta-bg);
border-color: var(--berkei-cta-bg);
color: #ffffff;
} .berkei-bestsellers-section {
font-family: "Inter", sans-serif;
margin: 12px 0 10px;
}
.berkei-bestsellers-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.berkei-bestsellers-title {
margin: 0;
color: #111820;
font-size: clamp(24px, 2.8vw, 34px);
font-family: "Inter", sans-serif !important;
font-weight: 800;
letter-spacing: -0.035em;
text-transform: none !important;
}
.berkei-bestsellers-link {
color: #111820;
font-size: 14px;
font-weight: 800;
text-decoration: none;
transition: color 0.15s ease;
}
.berkei-bestsellers-link:hover {
color: #e56b26;
}
.berkei-bestsellers-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 2vw, 22px);
}
.berkei-bestseller-card p,
.berkei-bestseller-card br {
display: none !important;
}
.berkei-bestseller-card {
display: flex;
flex-direction: column;
padding: 14px;
border: 1px solid #e6e8e9;
border-radius: 6px;
background: #f3f3f1;
box-shadow: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
font-family: "Inter", sans-serif;
}
.berkei-bestseller-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.berkei-bestseller-card__thumb-link {
display: block;
overflow: hidden;
border-radius: 4px;
width: 100%;
}
.berkei-bestseller-card__thumb {
aspect-ratio: 1.18 / 1;
background: #f3f3f1;
border-radius: 4px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.berkei-bestseller-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #f3f3f1;
mix-blend-mode: multiply;
border-radius: 8px;
transition: transform 0.3s ease;
}
.berkei-bestseller-card:hover .berkei-bestseller-card__img {
transform: scale(1.04);
}
.berkei-bestseller-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #eef3f4, #f7f1e8);
color: rgba(17, 24, 32, 0.4);
font-size: 20px;
font-weight: 900;
letter-spacing: 0.05em;
}
.berkei-bestseller-card__details {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-top: 12px;
align-items: center;
text-align: center;
}
.berkei-bestseller-card__rating {
display: flex;
align-items: center;
gap: 6px;
min-height: 13px;
font-size: 13px;
margin-bottom: 6px;
line-height: 1;
text-decoration: none;
justify-content: center;
}
.berkei-bestseller-card__rating--empty {
visibility: hidden;
}
.berkei-bestseller-card__stars {
color: #e56b26;
letter-spacing: 1px;
line-height: 1;
}
.berkei-bestseller-card__count {
color: rgba(29, 35, 39, 0.55);
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.berkei-bestseller-card__title {
margin: 0 0 6px;
font-family: "Inter", sans-serif !important;
font-size: 13px;
font-weight: 800;
line-height: 1.35;
text-transform: none;
letter-spacing: 0;
min-height: 2.7em;
width: 100%;
}
.berkei-bestseller-card__title a {
color: #111820;
text-decoration: none;
}
.berkei-bestseller-card__price {
margin-bottom: 12px;
color: #111820;
font-size: 15px;
font-weight: 900;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
line-height: 1.2;
justify-content: center;
}
.berkei-bestseller-card__price del {
text-decoration: line-through;
opacity: 0.5;
font-size: 13px;
font-weight: 600;
color: rgba(29, 35, 39, 0.6);
}
.berkei-bestseller-card__price ins {
text-decoration: none;
color: #e56b26;
}
.berkei-bestseller-card__price .amount {
color: inherit;
}
.berkei-bestseller-card__price .screen-reader-text {
display: none !important;
}
.berkei-bestseller-card__btn {
box-sizing: border-box !important;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 42px !important;
min-height: 42px !important;
padding: 0 16px;
margin-top: 0;
border: none;
border-radius: var(--berkei-cta-radius);
background: var(--berkei-cta-bg);
color: var(--berkei-cta-text);
font-size: 13px;
font-weight: var(--berkei-cta-font-weight);
text-decoration: none;
line-height: 1;
box-shadow: var(--berkei-cta-shadow);
transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.berkei-bestseller-card__action {
display: flex;
justify-content: center;
width: 100%;
margin-top: auto;
}
.berkei-action-banner__button,
.berkei-bestseller-card__btn {
gap: 7px;
}
.berkei-bestseller-card:hover .berkei-bestseller-card__btn,
.berkei-bestseller-card__btn:focus-visible {
background: var(--berkei-cta-bg-hover);
color: var(--berkei-cta-text);
transform: translateY(-2px) scale(1.03);
box-shadow: var(--berkei-cta-shadow-hover);
outline: none;
}
@media (max-width: 980px) {
.berkei-bestsellers-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.berkei-bestseller-card {
padding: 6px;
}
.berkei-bestseller-card__details {
margin-top: 6px;
}
.berkei-bestseller-card__title {
min-height: 2.4em;
margin-bottom: 3px;
font-size: 10px;
}
.berkei-bestseller-card__rating,
.berkei-bestseller-card__count,
.berkei-bestseller-card__price {
font-size: 10px;
}
.berkei-bestseller-card__rating {
min-height: 10px;
margin-bottom: 3px;
}
.berkei-bestseller-card__price {
margin-bottom: 5px;
}
.berkei-bestseller-card__btn {
height: 42px !important;
min-height: 42px !important;
width: 100%;
font-size: 13px;
}
.berkei-bestseller-card__thumb {
aspect-ratio: 1.35 / 1;
}
}
@media (max-width: 520px) {
.berkei-bestsellers-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.berkei-bestseller-card {
padding: 8px;
}
.berkei-bestseller-card__title {
min-height: 3.9em;
font-size: 11px;
}
.berkei-bestseller-card__price {
font-size: 12px;
}
} .berkei-trust-bar {
margin: clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 40px);
padding: 16px 20px;
border: 1px solid rgba(29, 35, 39, 0.08);
border-radius: 14px;
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.berkei-trust-bar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
}
.berkei-trust-bar__item {
display: inline-flex;
align-items: center;
gap: 10px;
color: #111820;
font-size: 13px;
font-weight: 800;
}
.berkei-trust-bar__icon {
font-size: 18px;
line-height: 1;
}
.berkei-trust-bar__item--brand {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
padding-left: 16px;
border-left: 2px solid rgba(29, 35, 39, 0.1);
}
.berkei-trust-bar__logo {
color: #111820;
font-size: 16px;
font-weight: 950;
letter-spacing: 0.05em;
line-height: 1;
}
.berkei-trust-bar__slogan {
color: #e56b26;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
@media (max-width: 980px) {
.berkei-category-tiles-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.berkei-category-tile {
min-height: 128px;
padding: 12px;
}
.berkei-category-tile__title {
font-size: 16px;
}
.berkei-category-tile__subtitle,
.berkei-category-tile__btn {
font-size: 10px;
}
}
body.home {
--berkei-home-section-gap: 16px;
--berkei-home-inner-gap: 10px;
}
body.home .wp-block-group:not(:has(> .berkei-action-banner--hero)):has(> .berkei-bestsellers-section),
body.home .wp-block-group:not(:has(> .berkei-action-banner--hero)):has(> .berkei-category-tiles-section),
body.home .wp-block-group:not(:has(> .berkei-action-banner--hero)):has(> .berkei-config-banner--collection),
body.home .wp-block-group:not(:has(> .berkei-action-banner--hero)):has(> .berkei-action-banner--outfit) {
margin-block-start: var(--berkei-home-section-gap) !important;
margin-block-end: 0 !important;
padding-block: 0 !important;
}
body.home :not(:has(> .berkei-action-banner--hero)) > .berkei-bestsellers-section,
body.home :not(:has(> .berkei-action-banner--hero)) > .berkei-category-tiles-section,
body.home :not(:has(> .berkei-action-banner--hero)) > .berkei-config-banner--collection,
body.home :not(:has(> .berkei-action-banner--hero)) > .berkei-action-banner--outfit {
margin-block: 0 !important;
}
body.home .berkei-bestsellers-header,
body.home .berkei-category-tiles-title {
margin-bottom: var(--berkei-home-inner-gap) !important;
}
body.home .wp-block-group:has(> .berkei-action-banner--outfit) + .wp-block-spacer {
display: none !important;
}
body.home .wp-block-group:has(> .berkei-action-banner--outfit) + .wp-block-spacer + .wp-block-columns {
margin-block-start: var(--berkei-home-section-gap) !important;
}
@media (max-width: 520px) {
.berkei-category-tiles-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.berkei-category-tile {
min-height: 150px;
padding: 14px;
}
.berkei-category-tile__title {
font-size: 18px;
}
.berkei-category-tile__subtitle {
margin-bottom: 10px;
font-size: 11px;
}
.berkei-category-tile__btn {
padding: 7px 10px;
font-size: 11px;
}
}
@media (max-width: 900px) {
.berkei-trust-bar__inner {
justify-content: flex-start;
}
.berkei-trust-bar__item--brand {
align-items: flex-start;
border-left: none;
border-top: 1px solid rgba(29, 35, 39, 0.1);
padding-left: 0;
padding-top: 12px;
width: 100%;
}
}
@media (max-width: 680px) {
.berkei-action-banner,
.berkei-action-banner--shop,
.berkei-action-banner--outfit {
grid-template-columns: 1fr;
}
.berkei-action-banner--outfit {
min-height: 360px;
}
.berkei-action-banner--outfit.berkei-action-banner--product-photo {
background-image:
linear-gradient(90deg, rgba(4, 16, 28, 0.96) 0%, rgba(4, 16, 28, 0.84) 68%, rgba(4, 16, 28, 0.35) 100%),
var(--berkei-banner-bg);
background-size: 100% 100%, auto 100%;
background-position: 0 0, right center;
}
.berkei-action-banner--essentials {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
grid-template-areas:
"visual content"
"proof proof";
gap: 14px;
padding: 16px;
}
.berkei-action-banner--essentials .berkei-action-banner__visual {
grid-area: visual;
order: initial;
min-height: 150px;
}
.berkei-action-banner--essentials .berkei-action-banner__content {
grid-area: content;
}
.berkei-action-banner--essentials .berkei-action-banner__proof {
grid-area: proof;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 12px;
}
.berkei-action-banner--essentials .berkei-action-banner__headline {
font-size: clamp(28px, 8vw, 34px);
}
.berkei-action-banner--essentials .berkei-action-banner__text {
font-size: 12px;
}
.berkei-action-banner__headline {
max-width: 100%;
}
.berkei-action-banner__statement {
position: relative;
right: auto;
bottom: auto;
margin-top: 16px;
}
.berkei-action-banner--outfit .berkei-action-banner__visual {
display: flex;
align-items: center;
justify-content: flex-start;
height: auto;
min-height: 48px;
}
.berkei-action-banner--outfit .berkei-action-banner__eyebrow {
margin-bottom: 10px;
font-size: 10px;
letter-spacing: 0.12em;
}
.berkei-action-banner--outfit .berkei-action-banner__headline {
margin-bottom: 12px;
font-size: clamp(32px, 10vw, 40px);
}
.berkei-action-banner--outfit .berkei-action-banner__text {
margin-bottom: 18px;
font-size: 14px;
}
.berkei-action-banner--outfit .berkei-action-banner__button {
min-height: 44px !important;
padding: 10px 18px;
font-size: 14px;
}
.berkei-action-banner--outfit .berkei-action-banner__statement {
position: relative;
right: auto;
bottom: auto;
margin: 0 0 0 8px;
font-size: clamp(24px, 7vw, 30px);
text-align: left;
}
.berkei-action-banner__visual {
min-height: 180px;
}
}
@media (max-width: 600px) {
.berkei-action-banner {
margin-top: 12px;
padding: 20px;
border-radius: 12px;
}
.berkei-action-banner__headline {
font-size: 38px;
line-height: 0.98;
}
.berkei-action-banner__actions {
flex-direction: column;
}
.berkei-action-banner__button {
width: 100%;
}
.berkei-action-banner__visual {
min-height: 210px;
}
.berkei-action-banner__cards {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.berkei-action-banner__card:first-child {
grid-row: auto;
}
.berkei-action-banner__card {
min-height: 118px;
}
} .berkei-config-banner {
margin: 32px 0 42px;
isolation: isolate;
overflow: visible;
}
.berkei-config-banner-slot {
clear: both;
margin: 26px 0 34px;
}
.berkei-config-banner--editorial {
margin: 0;
}
.berkei-config-banner--before-grid {
margin-top: 18px;
}
.berkei-config-banner__inner {
display: block;
position: relative;
min-height: var(--banner-min-height, clamp(300px, 28vw, 420px));
border-radius: 16px;
overflow: hidden;
text-decoration: none;
background-color: #071a2c;
color: #fff;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
transform: translateZ(0);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.berkei-config-banner--editorial .berkei-config-banner__inner {
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}
.berkei-config-banner__link {
position: absolute;
inset: 0;
z-index: 4;
border-radius: inherit;
} .berkei-config-banner__inner:not(.berkei-config-banner__inner--no-gradient) {
background-image: var(--banner-gradient), var(--banner-img);
background-size: 100% 100%, var(--banner-bg-fit, cover);
background-position: 0 0, var(--banner-bg-pos, center right);
background-repeat: no-repeat, no-repeat;
}
.berkei-config-banner__inner.berkei-config-banner__inner--no-gradient {
background-image: var(--banner-img);
background-size: var(--banner-bg-fit, cover);
background-position: var(--banner-bg-pos, center right);
background-repeat: no-repeat;
}
.berkei-config-banner__inner:hover {
transform: translateY(-2px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}
.berkei-config-banner__inner::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(90deg, rgba(4, 16, 28, 0.82) 0%, rgba(4, 16, 28, 0.58) 42%, rgba(4, 16, 28, 0.12) 76%, rgba(4, 16, 28, 0.02) 100%),
linear-gradient(0deg, rgba(4, 16, 28, 0.18) 0%, transparent 45%);
pointer-events: none;
z-index: 1;
}
.berkei-config-banner__content {
width: min(58%, 640px);
min-height: var(--banner-min-height, clamp(300px, 28vw, 420px));
padding: clamp(30px, 4.2vw, 58px);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 3;
border-radius: inherit;
}
.berkei-config-banner__content::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 16px 16px;
opacity: 0.18;
pointer-events: none;
}
.berkei-config-banner__eyebrow {
position: relative;
z-index: 1;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b8d6e8;
margin-bottom: 14px;
}
.berkei-config-banner h2 {
position: relative;
z-index: 1;
margin: 0 0 16px;
max-width: 11ch;
font-size: clamp(36px, 5vw, 64px);
line-height: 0.96;
color: #fff;
text-wrap: balance;
}
.berkei-config-banner p {
position: relative;
z-index: 1;
margin: 0 0 26px;
max-width: 520px;
font-size: clamp(16px, 1.35vw, 20px);
line-height: 1.46;
color: rgba(255, 255, 255, 0.92);
}
.berkei-config-banner__button {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 15px 24px;
box-sizing: border-box;
border-radius: var(--berkei-cta-radius);
background: var(--berkei-cta-bg);
color: var(--berkei-cta-text);
font-weight: var(--berkei-cta-font-weight);
font-size: 16px;
box-shadow: var(--berkei-cta-shadow);
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.berkei-config-banner__inner:hover .berkei-config-banner__button {
transform: translateY(-2px) scale(1.03);
box-shadow: var(--berkei-cta-shadow-hover);
background: var(--berkei-cta-bg-hover);
}
.berkei-config-banner__link:focus-visible ~ .berkei-config-banner__content .berkei-config-banner__button {
transform: translateY(-2px) scale(1.03);
box-shadow: var(--berkei-cta-shadow-hover);
background: var(--berkei-cta-bg-hover);
}
@media (max-width: 680px) {
.berkei-config-banner__button,
.berkei-action-banner--outfit .berkei-action-banner__button {
box-sizing: border-box !important;
width: fit-content;
min-height: 44px !important;
padding: 10px 18px;
font-size: 14px;
line-height: 1.4;
white-space: nowrap;
}
}
.berkei-config-banner__image {
position: absolute;
inset: 0;
min-height: 0;
height: 100%;
width: 100%;
background-color: transparent;
overflow: visible;
border-radius: inherit;
z-index: 2;
pointer-events: none;
} .berkei-config-banner__image--overflow {
overflow: visible;
} .berkei-config-banner__inner:has(.berkei-config-banner__image--overflow) {
overflow: visible;
} .berkei-config-banner__model-wrap {
position: absolute; height: max(var(--banner-overlay-scale, 100%), 112%);
max-height: max(var(--banner-overlay-scale, 100%), 112%);
max-width: min(44%, 420px);
width: auto;
pointer-events: none;
z-index: 2; } .berkei-config-banner__model-wrap .berkei-config-banner__callout-svg,
.berkei-config-banner__model-wrap .berkei-config-banner__callout {
overflow: visible;
} .berkei-config-banner__overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
filter: var(--banner-overlay-shadow, none) saturate(1.03) contrast(1.02);
} .berkei-config-banner__callout-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
}
.berkei-config-banner__callout-svg polyline {
fill: none;
stroke: rgba(255, 255, 255, 0.85);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.berkei-config-banner__callout-svg circle {
fill: #fff;
} .berkei-config-banner__callout {
position: absolute;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.92);
color: #1d2327;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
z-index: 4;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(4px);
} .berkei-config-banner__model-wrap--v-bottom {
bottom: 0;
}
.berkei-config-banner__model-wrap--v-top {
top: 0;
}
.berkei-config-banner__model-wrap--v-center {
top: 50%;
transform: translateY(-50%);
} .berkei-config-banner__model-wrap--right {
right: var(--banner-overlay-offset, 4%);
}
.berkei-config-banner__model-wrap--left {
left: var(--banner-overlay-offset, 4%);
}
.berkei-config-banner__model-wrap--center {
left: 50%;
transform: translateX(-50%);
} .berkei-config-banner__model-wrap--center.berkei-config-banner__model-wrap--v-center {
transform: translate(-50%, -50%);
}
@media (max-width: 900px) {
.berkei-config-banner__inner {
display: block;
min-height: min(var(--banner-min-height, 360px), 360px);
} .berkei-config-banner__inner:not(.berkei-config-banner__inner--no-gradient) {
background-image: var(--banner-gradient-mobile, var(--banner-gradient)), var(--banner-img-mobile, var(--banner-img));
background-size: 100% 100%, var(--banner-bg-fit, cover);
background-position: 0 0, var(--banner-bg-pos, center);
}
.berkei-config-banner__inner.berkei-config-banner__inner--no-gradient {
background-image: var(--banner-img-mobile, var(--banner-img));
background-size: var(--banner-bg-fit, cover);
background-position: var(--banner-bg-pos, center);
}
.berkei-config-banner__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
border-radius: inherit;
opacity: 1;
filter: none;
z-index: 2;
pointer-events: none;
}
.berkei-config-banner__model-wrap {
height: max(var(--banner-overlay-scale, 100%), 116%);
max-height: max(var(--banner-overlay-scale, 100%), 116%);
max-width: 72%;
}
.berkei-config-banner__model-wrap--v-bottom {
bottom: -8%;
}
.berkei-config-banner__model-wrap--v-top {
top: -8%;
} .berkei-config-banner__model-wrap--center {
max-width: 78%;
}
.berkei-config-banner__inner:has(.berkei-config-banner__image--overflow) {
overflow: visible;
}
.berkei-config-banner__callout-svg,
.berkei-config-banner__callout {
display: none;
}
.berkei-config-banner__content {
width: 100%;
max-width: 640px;
min-height: min(var(--banner-min-height, 360px), 360px);
padding: 30px 24px;
justify-content: center;
border-radius: inherit;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.berkei-config-banner h2 {
font-size: 36px;
line-height: 1.05;
}
.berkei-config-banner p {
font-size: 16px;
}
} @media (max-width: 760px) {
.berkei-config-banner__inner,
.berkei-config-banner__content {
min-height: min(var(--banner-min-height, 340px), 340px);
}
.berkei-config-banner__model-wrap {
max-width: 76%;
}
.berkei-config-banner__model-wrap--center {
max-width: 84%;
}
} @media (max-width: 600px) {
.berkei-config-banner__inner,
.berkei-config-banner__content {
min-height: min(var(--banner-min-height, 320px), 320px);
}
.berkei-config-banner__model-wrap {
height: max(var(--banner-overlay-scale, 100%), 118%);
max-height: max(var(--banner-overlay-scale, 100%), 118%);
max-width: 78%;
}
.berkei-config-banner__model-wrap--v-bottom {
bottom: -10%;
}
.berkei-config-banner__model-wrap--v-top {
top: -10%;
}
.berkei-config-banner__model-wrap--center {
max-width: 88%;
}
} @media (max-width: 420px) {
.berkei-config-banner__inner,
.berkei-config-banner__content {
min-height: min(var(--banner-min-height, 300px), 300px);
}
.berkei-config-banner__model-wrap {
height: max(var(--banner-overlay-scale, 100%), 116%);
max-height: max(var(--banner-overlay-scale, 100%), 116%);
}
.berkei-config-banner__model-wrap--v-bottom {
bottom: -9%;
}
.berkei-config-banner__model-wrap--v-top {
top: -9%;
}
.berkei-config-banner h2 {
font-size: 31px;
}
}         @view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
animation-timing-function: ease-in-out;
} html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0ms;
}
.berkei-reveal {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}  @keyframes berkeiShimmer {
0%   { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.berkei-skeleton {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 37%,
#f0f0f0 63%
);
background-size: 200% 100%;
animation: berkeiShimmer 1.4s ease infinite;
border-radius: var(--berkei-frame-radius, 10px);
min-height: 20px;
}
.berkei-skeleton--card {
aspect-ratio: 3/4;
border-radius: var(--berkei-frame-radius, 10px);
}
.berkei-skeleton--text {
height: 14px;
border-radius: 4px;
margin-bottom: 8px;
max-width: 80%;
}
.berkei-skeleton--text:last-child {
max-width: 60%;
}
.berkei-skeleton--circle {
border-radius: 50%;
aspect-ratio: 1;
}   @keyframes berkeiFadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.berkei-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
will-change: opacity, transform;
}
.berkei-reveal.berkei-visible {
opacity: 1;
transform: translateY(0);
} .berkei-reveal-stagger > .berkei-reveal:nth-child(1) { transition-delay: 0ms; }
.berkei-reveal-stagger > .berkei-reveal:nth-child(2) { transition-delay: 60ms; }
.berkei-reveal-stagger > .berkei-reveal:nth-child(3) { transition-delay: 120ms; }
.berkei-reveal-stagger > .berkei-reveal:nth-child(4) { transition-delay: 180ms; }
.berkei-reveal-stagger > .berkei-reveal:nth-child(5) { transition-delay: 240ms; }
.berkei-reveal-stagger > .berkei-reveal:nth-child(6) { transition-delay: 300ms; }
.berkei-reveal-stagger > .berkei-reveal:nth-child(7) { transition-delay: 360ms; }
.berkei-reveal-stagger > .berkei-reveal:nth-child(8) { transition-delay: 420ms; } .berkei-reveal--left {
opacity: 0;
transform: translateX(-20px);
}
.berkei-reveal--left.berkei-visible {
opacity: 1;
transform: translateX(0);
}
.berkei-reveal--right {
opacity: 0;
transform: translateX(20px);
}
.berkei-reveal--right.berkei-visible {
opacity: 1;
transform: translateX(0);
}
.berkei-reveal--scale {
opacity: 0;
transform: scale(0.95);
}
.berkei-reveal--scale.berkei-visible {
opacity: 1;
transform: scale(1);
}  :focus-visible {
outline: 2px solid var(--berkei-blue, #147798);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}  .berkei-hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.berkei-hover-lift:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}  .berkei-container {
container-type: inline-size;
}
@container (max-width: 480px) {
.berkei-cq-grid {
grid-template-columns: 1fr !important;
}
}
@container (min-width: 481px) and (max-width: 768px) {
.berkei-cq-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@container (min-width: 769px) {
.berkei-cq-grid {
grid-template-columns: repeat(var(--berkei-cq-cols, 3), 1fr) !important;
}
}     .berkei-nl-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.berkei-nl-overlay.is-open {
display: flex !important;
} .berkei-nl-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
} .berkei-nl-overlay__panel {
position: relative;
width: 90vw;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
background: #fff;
border-radius: var(--berkei-frame-radius, 10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
padding: 36px 32px 32px;
transform: scale(0.95);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.berkei-nl-overlay.is-open .berkei-nl-overlay__panel {
transform: scale(1);
opacity: 1;
} .berkei-nl-overlay__close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border: none;
background: transparent;
font-size: 24px;
line-height: 36px;
text-align: center;
color: #666;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s ease, color 0.15s ease;
z-index: 1;
}
.berkei-nl-overlay__close:hover {
background: #f0f0f0;
color: #222;
} .berkei-nl-overlay__hero {
text-align: center;
margin-bottom: 24px;
}
.berkei-nl-overlay__headline {
font-size: 1.35em;
line-height: 1.35;
font-weight: 700;
margin: 0 0 8px;
color: var(--berkei-text, #222);
}
.berkei-nl-overlay__subline {
font-size: 1.02em;
color: #555;
margin: 0 0 16px;
line-height: 1.5;
}
.berkei-nl-overlay__benefits {
font-size: 0.92em;
color: #666;
line-height: 1.8;
margin: 0;
text-align: left;
max-width: 400px;
margin-left: auto;
margin-right: auto;
} .berkei-nl-overlay__field {
margin-bottom: 14px;
}
.berkei-nl-overlay__field label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
color: var(--berkei-text, #222);
}
.berkei-nl-overlay__field input {
width: 100%;
border: 1px solid var(--berkei-line, #ddd);
border-radius: var(--berkei-frame-radius, 10px);
background: var(--berkei-surface, #fff);
color: var(--berkei-text, #222);
padding: 12px 14px;
font-size: 16px;
font-family: inherit;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
}
.berkei-nl-overlay__field input:focus {
border-color: var(--berkei-blue, #147798);
box-shadow: 0 0 0 3px rgba(20, 119, 152, 0.16);
}
.berkei-nl-overlay__privacy {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 16px 0 6px;
line-height: 1.45;
font-size: 14px;
}
.berkei-nl-overlay__privacy input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.berkei-nl-overlay__privacy a {
color: var(--berkei-blue, #147798);
text-decoration: underline;
}
.berkei-nl-overlay__cookie-hint {
font-size: 12px;
color: #999;
margin-bottom: 16px;
}
.berkei-nl-overlay__cookie-hint a {
color: #999;
text-decoration: underline;
}
.berkei-nl-overlay__cookie-hint a:hover {
color: #666;
}
.berkei-nl-overlay__submit {
display: block;
width: 100%;
border: 0;
border-radius: var(--berkei-frame-radius, 10px);
background: var(--berkei-blue, #147798);
color: #fff;
padding: 14px 28px;
font-size: 16px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background 0.2s ease, transform 0.12s ease;
}
.berkei-nl-overlay__submit:hover {
background: var(--berkei-orange, #e56b26);
transform: translateY(-1px);
}
.berkei-nl-overlay__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
} .berkei-nl-overlay__error {
color: #d63638;
font-size: 14px;
margin: 10px 0 0;
min-height: 0;
}
.berkei-nl-overlay__error:empty {
display: none;
} .berkei-nl-overlay__success {
text-align: center;
padding: 20px 0 10px;
}
.berkei-nl-overlay__check {
width: 64px;
height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--berkei-blue, #147798);
color: #fff;
font-size: 32px;
line-height: 64px;
animation: berkeiNlCheckPop 0.4s ease;
}
@keyframes berkeiNlCheckPop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
.berkei-nl-overlay__thanks-title {
font-size: 1.3em;
font-weight: 700;
margin: 0 0 8px;
color: var(--berkei-text, #222);
}
.berkei-nl-overlay__thanks-text {
font-size: 0.95em;
color: #666;
line-height: 1.6;
margin: 0;
} @media (max-width: 480px) {
.berkei-nl-overlay {
align-items: flex-end;
padding: 0;
}
.berkei-nl-overlay__panel {
width: 100%;
max-width: none;
max-height: 92vh;
border-radius: var(--berkei-frame-radius, 10px) var(--berkei-frame-radius, 10px) 0 0;
padding: 28px 20px 24px;
transform: translateY(20px);
opacity: 0;
}
.berkei-nl-overlay.is-open .berkei-nl-overlay__panel {
transform: translateY(0);
opacity: 1;
}
.berkei-nl-overlay__headline {
font-size: 1.15em;
}
}     .berkei-btt-sentinel {
position: absolute;
top: 400px;
width: 1px;
height: 1px;
pointer-events: none;
}
.berkei-btt {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 900;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--berkei-color-primary, #177797);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}
.berkei-btt.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.berkei-btt:hover {
background: var(--berkei-color-accent-dark, #0f5a6f);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.berkei-btt:active {
transform: translateY(0);
}
.berkei-btt svg {
display: block;
}
@media (max-width: 768px) {
.berkei-btt {
bottom: 18px;
right: 18px;
width: 40px;
height: 40px;
}
}     .berkei-toast-wrap {
position: fixed;
bottom: 80px;
right: 28px;
z-index: 9000;
display: flex;
flex-direction: column-reverse;
gap: 10px;
pointer-events: none;
}
.berkei-toast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border-radius: 10px;
background: #1d2327;
color: #fff;
font-size: 14px;
font-weight: 500;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
pointer-events: auto;
cursor: pointer;
opacity: 0;
transform: translateX(40px);
transition: opacity 0.3s ease, transform 0.3s ease;
max-width: 340px;
}
.berkei-toast.is-visible {
opacity: 1;
transform: translateX(0);
}
.berkei-toast.is-leaving {
opacity: 0;
transform: translateX(40px);
}
.berkei-toast--success {
background: #00a32a;
}
.berkei-toast--error {
background: #d63638;
}
.berkei-toast--info {
background: #2271b1;
}
.berkei-toast__icon {
font-size: 18px;
flex-shrink: 0;
}
.berkei-toast__text {
flex: 1;
line-height: 1.35;
}
@media (max-width: 480px) {
.berkei-toast-wrap {
left: 12px;
right: 12px;
bottom: 68px;
}
.berkei-toast {
max-width: none;
}
}     .berkei-atc-loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.berkei-atc-done {
background: #00a32a !important;
border-color: #00a32a !important;
color: #fff !important;
transition: background-color 0.3s ease;
} @keyframes berkeiBadgePop {
0%   { transform: scale(1); }
40%  { transform: scale(1.35); }
100% { transform: scale(1); }
}
.berkei-badge-pop {
animation: berkeiBadgePop 0.4s ease;
}     .berkei-blur-up {
filter: blur(8px);
transition: filter 0.4s ease;
}
.berkei-blur-up--loaded {
filter: blur(0);
}     .berkei-recently-viewed {
width: min(100%, 1600px);
max-width: 1600px;
margin: 36px auto 24px;
padding: 0;
}
.single-product .berkei-recently-viewed {
width: 100%;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.berkei-recently-viewed h2,
.berkei-related-products-override h2 {
margin: 0 0 18px;
color: #111827;
font-family: Montserrat, sans-serif;
font-size: clamp(1.25rem, 1.9vw, 1.7rem);
font-weight: 800;
line-height: 1.16;
letter-spacing: 0;
}
.berkei-rv-grid {
display: flex;
flex-wrap: nowrap;
gap: 16px;
padding: 4px 4px 18px;
margin: 0 -4px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(15, 23, 32, 0.32) transparent;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
cursor: grab;
user-select: none;
}
.berkei-rv-grid.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
}
.berkei-rv-grid.is-dragging a {
pointer-events: none;
}
.berkei-rv-grid::-webkit-scrollbar {
height: 8px;
}
.berkei-rv-grid::-webkit-scrollbar-thumb {
background: rgba(15, 23, 32, 0.28);
border-radius: 999px;
}
.berkei-rv-grid::-webkit-scrollbar-track {
background: transparent;
}
.berkei-rv-card {
flex: 0 0 auto;
width: clamp(220px, 28vw, 260px);
scroll-snap-align: start;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: #1d2327;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.berkei-rv-card:hover {
border-color: #ccc;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.berkei-rv-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
background: #f6f7f7;
}
.berkei-rv-name {
padding: 12px 14px 4px;
font-size: 14px;
font-weight: 600;
line-height: 1.32;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.berkei-rv-price {
padding: 4px 14px 14px;
font-size: 14px;
color: #646970;
}
.berkei-rv-price del {
opacity: 0.6;
font-size: 12px;
}
.berkei-rv-price ins {
text-decoration: none;
font-weight: 600;
color: #d63638;
}
@media (max-width: 480px) {
.berkei-rv-grid {
gap: 12px;
padding-bottom: 14px;
}
.berkei-rv-card {
width: clamp(160px, 64vw, 200px);
}
.berkei-rv-name {
font-size: 13px;
padding: 10px 10px 2px;
}
.berkei-rv-price {
font-size: 13px;
padding: 2px 10px 10px;
}
}     .berkei-sticky-atc {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 950;
background: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(100%);
opacity: 0;
visibility: hidden;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.berkei-sticky-atc.is-visible {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.berkei-sticky-atc__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
gap: 16px;
}
.berkei-sticky-atc__info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1;
}
.berkei-sticky-atc__thumb {
width: 44px;
height: 44px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.berkei-sticky-atc__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.berkei-sticky-atc__name {
font-size: 14px;
font-weight: 600;
color: #1d2327;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.berkei-sticky-atc__price {
font-size: 13px;
color: #646970;
}
.berkei-sticky-atc__price del {
opacity: 0.6;
}
.berkei-sticky-atc__price ins {
text-decoration: none;
font-weight: 600;
color: #d63638;
}
.berkei-sticky-atc__btn {
flex-shrink: 0;
padding: 10px 24px;
border: none;
border-radius: 8px;
background: var(--berkei-color-accent, #E56B26);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
white-space: nowrap;
}
.berkei-sticky-atc__btn:hover {
background: var(--berkei-color-accent-dark, #c75a1f);
transform: translateY(-1px);
}
.berkei-sticky-atc__btn:active {
transform: translateY(0);
} .berkei-sticky-atc.is-visible ~ .berkei-btt.is-visible,
body:has(.berkei-sticky-atc.is-visible) .berkei-btt.is-visible {
bottom: 80px;
}
@media (max-width: 600px) {
.berkei-sticky-atc__inner {
padding: 8px 14px;
gap: 10px;
}
.berkei-sticky-atc__thumb {
width: 36px;
height: 36px;
}
.berkei-sticky-atc__name {
font-size: 13px;
}
.berkei-sticky-atc__btn {
padding: 9px 16px;
font-size: 13px;
}
}  .berkei-keeps-h1 { font-size: var(--wp--preset--font-size--xx-large); }
.berkei-keeps-h2 { font-size: var(--wp--preset--font-size--x-large); }
.berkei-keeps-h3 { font-size: var(--wp--preset--font-size--large); }
.berkei-site-brand {
margin-top: 0;
margin-bottom: 0;
font-family: var(--wp--preset--font-family--montserrat, inherit);
font-weight: 700;
line-height: var(--wp--custom--typography--line-height--tiny, 1.15);
text-transform: uppercase;
} .berkei-action-banner--has-bg {
background-image: none;
background-color: #f8f4ee;
}
.berkei-action-banner--has-bg picture {
display: contents;
}
.berkei-action-banner__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 45%;
}
.berkei-action-banner--has-bg::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(248, 244, 238, 0.96) 0%, rgba(248, 244, 238, 0.88) 42%, rgba(248, 244, 238, 0.2) 74%, transparent 100%);
pointer-events: none;
}
.berkei-action-banner--hero.berkei-action-banner--shop {
grid-template-columns: minmax(0, 1fr);
min-height: clamp(340px, 38vw, 500px);
padding: clamp(28px, 5vw, 64px);
}
.berkei-action-banner--hero .berkei-action-banner__headline {
max-width: 14ch;
font-size: clamp(36px, 5.2vw, 68px);
}
.berkei-action-banner--hero .berkei-action-banner__text {
max-width: 520px;
font-size: clamp(15px, 1.4vw, 19px);
}
.berkei-action-banner--hero.berkei-action-banner--shop .berkei-action-banner__button {
height: 46px !important;
min-height: 46px !important;
padding: 0 20px;
font-size: 14px;
}
@media (max-width: 680px) {
.berkei-action-banner--hero.berkei-action-banner--shop {
min-height: 0;
padding: 28px 20px 32px;
}
.berkei-action-banner--has-bg::before {
background: linear-gradient(180deg, rgba(248, 244, 238, 0.95) 0%, rgba(248, 244, 238, 0.86) 62%, rgba(248, 244, 238, 0.6) 100%);
}
.berkei-action-banner--hero.berkei-action-banner--shop .berkei-action-banner__actions {
flex-wrap: wrap;
}
} .berkei-trust-bar--shop {
margin: 10px 0 14px;
padding: 10px 16px;
border-radius: 10px;
box-shadow: none;
}
.berkei-trust-bar__list {
display: flex;
justify-content: space-around;
gap: 8px 28px;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.berkei-trust-bar__list::-webkit-scrollbar {
display: none;
}
.berkei-trust-bar--shop .berkei-trust-bar__item {
flex: 0 0 auto;
gap: 8px;
color: #1d2327;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
scroll-snap-align: start;
}
.berkei-trust-bar--shop .berkei-trust-bar__icon {
display: inline-flex;
align-items: center;
color: #147798;
}
.berkei-trust-bar--shop .berkei-trust-bar__icon svg {
width: 20px;
height: 20px;
fill: currentColor;
}
@media (max-width: 680px) {
.berkei-trust-bar__list {
justify-content: flex-start;
}
.berkei-trust-bar--shop .berkei-trust-bar__item {
font-size: 12px;
}
} .berkei-action-banner--chalk {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
min-height: 0;
background: #eef4f6;
border-color: #d8e6eb;
}
.berkei-action-banner--chalk .berkei-action-banner__headline {
font-size: clamp(30px, 4vw, 52px);
}
.berkei-action-banner--chalk .berkei-action-banner__visual {
min-height: clamp(220px, 26vw, 340px);
background: #ffffff;
}
.berkei-action-banner--chalk .berkei-action-banner__image {
object-fit: contain;
} .berkei-action-banner--story {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
min-height: 0;
background: #10202a;
border-color: #10202a;
color: #ffffff;
}
.berkei-action-banner--story .berkei-action-banner__eyebrow {
color: #b64f16; }
.berkei-action-banner--story .berkei-action-banner__headline {
color: #ffffff;
font-size: clamp(30px, 4vw, 52px);
}
.berkei-action-banner--story .berkei-action-banner__text {
color: rgba(255, 255, 255, 0.82);
}
.berkei-action-banner--story .berkei-action-banner__visual {
min-height: 140px;
}
.berkei-action-banner--story .berkei-action-banner__statement {
color: #e4651d; text-shadow: none;
}
@media (max-width: 680px) {
.berkei-action-banner--chalk,
.berkei-action-banner--story {
grid-template-columns: 1fr;
}
.berkei-action-banner--story .berkei-action-banner__visual {
min-height: 70px;
}
} .berkei-nl-inline {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 16px 32px;
margin: 12px 0;
padding: clamp(20px, 3vw, 36px);
border: 1px solid #e3e6e8;
border-radius: 8px;
background: #f8f6f0;
font-family: "Inter", sans-serif;
}
.berkei-nl-inline__title {
margin: 0 0 6px;
color: #111820;
font-size: clamp(22px, 2.4vw, 30px);
text-transform: none;
}
.berkei-nl-inline p {
margin: 0;
color: rgba(29, 35, 39, 0.78);
}
.berkei-nl-inline__form {
display: flex;
gap: 10px;
}
.berkei-nl-inline__form input[type="email"] {
flex: 1 1 auto;
min-width: 0;
min-height: 46px;
padding: 0 14px;
border: 1px solid #c9cfd3;
border-radius: var(--berkei-cta-radius);
font-size: 15px;
}
@media (max-width: 680px) {
.berkei-nl-inline {
grid-template-columns: 1fr;
}
.berkei-nl-inline__form {
flex-direction: column;
}
} .berkei-action-banner__button,
.berkei-config-banner__content {
box-sizing: border-box;
} .berkei-nl-inline .berkei-nl-inline__form button {
border: 0;
background: var(--berkei-cta-bg);
color: var(--berkei-cta-text);
cursor: pointer;
}
.berkei-nl-inline .berkei-nl-inline__form button:hover,
.berkei-nl-inline .berkei-nl-inline__form button:focus-visible {
background: var(--berkei-cta-bg-hover);
} .berkei-action-banner--story .berkei-action-banner__visual {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.berkei-action-banner--story .berkei-action-banner__statement {
position: static;
} :root {
--berkei-home-gap: clamp(28px, 3.4vw, 48px); --berkei-page-top-gap: clamp(0.75rem, 2vw, 1.25rem);
--berkei-radius-lg: 14px;
--berkei-radius-md: 10px;
--berkei-surface-light: #f4f1ec;
--berkei-surface-dark: #071a2c;
--berkei-line-soft: #e6e1da;
--berkei-ink: #111820;
} :has(> .berkei-action-banner--hero) > :is(.berkei-action-banner, .berkei-trust-bar, .berkei-bestsellers-section, .berkei-category-tiles-section, .berkei-config-banner, .berkei-nl-inline, .berkei-home-cta, .berkei-reviews) {
margin-top: var(--berkei-home-gap);
margin-bottom: 0;
} body :has(> .berkei-action-banner--hero) > .berkei-action-banner--hero {
margin-top: var(--berkei-page-top-gap);
}
:has(> .berkei-action-banner--hero) > .berkei-action-banner--hero + .berkei-trust-bar {
margin-top: 12px;
}
:has(> .berkei-action-banner--hero) > p:empty {
display: none;
} .berkei-action-banner,
.berkei-config-banner__inner,
.berkei-nl-inline {
border-radius: var(--berkei-radius-lg);
box-shadow: none;
}
.berkei-config-banner__inner:hover {
box-shadow: none;
}
.berkei-trust-bar,
.berkei-bestseller-card,
.berkei-category-tile {
border-radius: var(--berkei-radius-md);
}
.berkei-action-banner--hero,
.berkei-action-banner--chalk,
.berkei-action-banner--story,
.berkei-nl-inline {
background-color: var(--berkei-surface-light);
border: 1px solid var(--berkei-line-soft);
}
.berkei-trust-bar {
border-color: var(--berkei-line-soft);
}
.berkei-action-banner--outfit,
.berkei-config-banner__inner {
background-color: var(--berkei-surface-dark);
border: 0;
}
.berkei-action-banner--has-bg::before {
background: linear-gradient(90deg, rgba(244, 241, 236, 0.97) 0%, rgba(244, 241, 236, 0.9) 40%, rgba(244, 241, 236, 0.2) 74%, rgba(244, 241, 236, 0) 100%);
} .berkei-action-banner__headline,
.berkei-config-banner h2 {
font-family: "Inter", sans-serif;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1;
text-transform: none;
}
.berkei-action-banner:not(.berkei-action-banner--hero) .berkei-action-banner__headline,
.berkei-config-banner h2 {
font-size: clamp(32px, 4vw, 54px);
}
.berkei-bestsellers-title,
.berkei-category-tiles-title,
.berkei-nl-inline__title {
font-family: "Inter", sans-serif !important;
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.1;
text-transform: none !important;
}
.berkei-action-banner__eyebrow,
.berkei-config-banner__eyebrow {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}
.berkei-action-banner__eyebrow {
color: #147798;
} .berkei-action-banner--story {
color: var(--berkei-ink);
}
.berkei-action-banner--story .berkei-action-banner__eyebrow {
color: #b64f16; }
.berkei-action-banner--story .berkei-action-banner__headline {
color: var(--berkei-ink);
}
.berkei-action-banner--story .berkei-action-banner__text {
color: rgba(29, 35, 39, 0.78);
} .berkei-action-banner--chalk {
border-color: var(--berkei-line-soft);
}
.berkei-action-banner--chalk .berkei-action-banner__visual {
min-height: 0;
height: clamp(240px, 26vw, 360px);
background: transparent;
}
.berkei-action-banner--chalk .berkei-action-banner__image {
height: 100%;
min-height: 0;
object-fit: contain;
mix-blend-mode: multiply;
} .berkei-bestseller-card {
background: #ffffff;
border-color: var(--berkei-line-soft);
}
.berkei-bestseller-card__thumb,
.berkei-bestseller-card__img {
background: #ffffff;
}
.berkei-bestseller-card__thumb {
aspect-ratio: 1 / 1;
border-radius: 6px;
}
.berkei-bestseller-card__img {
object-fit: cover;
mix-blend-mode: normal;
border-radius: 0;
}
.berkei-bestseller-card__btn {
white-space: nowrap;
} .berkei-category-tile {
border: 0;
box-shadow: none;
background: var(--berkei-surface-dark);
}
.berkei-category-tile__overlay {
background: linear-gradient(180deg, rgba(7, 26, 44, 0) 30%, rgba(7, 26, 44, 0.82) 100%);
}
@media (max-width: 680px) { .berkei-config-banner__content {
background: linear-gradient(180deg, rgba(7, 26, 44, 0.94) 0%, rgba(7, 26, 44, 0.78) 62%, rgba(7, 26, 44, 0) 100%);
text-shadow: none;
}
.berkei-bestseller-card__btn {
padding: 0 8px;
font-size: 12px;
}
.berkei-bestseller-card__btn .berkei-bestseller-card__cart-icon {
display: none;
}
.berkei-action-banner--chalk .berkei-action-banner__visual {
height: 220px;
order: -1;
}
} .berkei-action-banner--chalk .berkei-action-banner__visual {
background-color: var(--berkei-surface-light);
} .berkei-category-tile__overlay {
background: linear-gradient(180deg, rgba(7, 26, 44, 0.32) 0%, rgba(7, 26, 44, 0.48) 45%, rgba(7, 26, 44, 0.88) 100%);
}
.berkei-bestsellers-header {
gap: 12px;
}
.berkei-bestsellers-link {
white-space: nowrap;
}
@media (max-width: 680px) {
.berkei-bestsellers-link {
font-size: 13px;
} .berkei-trust-bar__list {
-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
mask-image: linear-gradient(90deg, #000 82%, transparent);
padding-right: 24px;
}
}
@media (max-width: 420px) {
.berkei-bestsellers-title,
.berkei-category-tiles-title {
font-size: 22px;
}
} .berkei-shop-title {
margin: 0 0 8px;
color: var(--berkei-ink, #111820);
font-family: "Inter", sans-serif;
font-size: clamp(20px, 2vw, 26px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
text-transform: none;
}
.berkei-shop-controls__lead {
display: flex;
flex: 0 0 auto;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.berkei-shop-controls__lead .berkei-shop-title {
margin: 0;
white-space: nowrap;
}
@media only screen and (max-width: 600px) {
.berkei-shop-controls__lead {
order: 1;
}
} .berkei-home-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px clamp(24px, 4vw, 56px);
box-sizing: border-box;
padding: clamp(24px, 3vw, 36px) 0 0;
border-top: 1px solid rgba(17, 24, 32, 0.12);
background: none;
color: #111820;
font-family: "Inter", sans-serif;
}
.berkei-home-cta__title {
margin: 0;
color: #111820;
font-family: "Inter", sans-serif !important;
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.1;
text-transform: none !important;
}
.berkei-home-cta__lead {
max-width: 620px;
margin: 8px 0 0;
color: #5b6570;
font-size: 15px;
line-height: 1.5;
}
.berkei-home-cta__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.berkei-home-cta__chips a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 14px;
border: 1px solid rgba(17, 24, 32, 0.16);
border-radius: 999px;
background: #ffffff;
color: #111820;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.18s ease, color 0.18s ease;
}
.berkei-home-cta__chips a:hover,
.berkei-home-cta__chips a:focus-visible {
border-color: #147798;
color: #147798;
}
.berkei-home-cta .berkei-home-cta__button {
white-space: nowrap;
}
@media (max-width: 680px) {
.berkei-home-cta {
grid-template-columns: 1fr;
}
.berkei-home-cta .berkei-home-cta__button {
width: 100%;
justify-content: center;
}
} .berkei-home-cta .berkei-home-cta__chips {
padding: 0;
margin-left: 0;
}
.berkei-home-cta .berkei-home-cta__chips li {
margin: 0;
padding: 0;
} :has(> .berkei-action-banner--hero) > .berkei-focus {
margin-top: var(--berkei-home-gap);
margin-bottom: 0;
} .berkei-action-banner--hero.berkei-action-banner--hero-product {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
} .berkei-action-banner--hero-product .berkei-action-banner__content {
grid-column: 1;
grid-row: 1;
align-self: center;
}
.berkei-hero-product {
grid-column: 2;
grid-row: 1;
align-self: end;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
width: clamp(170px, 16vw, 210px);
padding: 10px 10px 12px;
box-sizing: border-box;
border-radius: var(--berkei-radius-md, 10px);
background: #ffffff;
color: #111820;
font-family: "Inter", sans-serif;
text-decoration: none;
box-shadow: 0 12px 32px rgba(7, 26, 44, 0.16);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.berkei-hero-product:hover,
.berkei-hero-product:focus-visible {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(7, 26, 44, 0.22);
color: #111820;
}
.berkei-hero-product__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
border-radius: 6px;
}
.berkei-hero-product__body {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 2px;
}
.berkei-hero-product__name {
font-size: 13px;
font-weight: 700;
line-height: 1.25;
}
.berkei-hero-product__price {
font-size: 14px;
font-weight: 700;
}
.berkei-hero-product__price del {
color: #70777f; font-weight: 400;
}
.berkei-hero-product__more {
margin-top: 2px;
color: #147798;
font-size: 12px;
font-weight: 700;
} @media (max-width: 960px) {
.berkei-action-banner--hero.berkei-action-banner--hero-product {
grid-template-columns: minmax(0, 1fr);
}
.berkei-hero-product {
grid-column: 1;
grid-row: 2;
justify-self: start;
flex-direction: row;
align-items: center;
width: min(100%, 380px);
padding: 8px 12px 8px 8px;
}
.berkei-hero-product__media {
flex: 0 0 72px;
}
}
@media (max-width: 680px) {
.berkei-action-banner--hero.berkei-action-banner--hero-product {
grid-template-columns: minmax(0, 1fr);
}
.berkei-hero-product {
grid-column: 1;
grid-row: 2;
flex-direction: row;
align-items: center;
width: 100%;
padding: 8px 12px 8px 8px;
}
.berkei-hero-product__media {
flex: 0 0 72px;
}
} .berkei-focus {
display: grid;
gap: clamp(20px, 2.6vw, 32px);
color: #111820;
font-family: "Inter", sans-serif;
}
.berkei-focus__main {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 4vw, 64px);
}
.berkei-focus__media {
display: block;
overflow: hidden;
aspect-ratio: 1 / 1;
border: 1px solid var(--berkei-line-soft, #e6e1da);
border-radius: var(--berkei-radius-lg, 14px);
background: #ffffff;
}
.berkei-focus__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.berkei-focus__media:hover .berkei-focus__img {
transform: scale(1.02);
}
.berkei-focus__eyebrow {
margin: 0 0 10px;
color: #147798;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.berkei-focus .berkei-focus__headline {
margin: 0 0 14px;
color: #111820;
font-family: "Inter", sans-serif !important;
font-size: clamp(30px, 3.6vw, 48px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.02;
text-transform: none !important;
text-wrap: balance;
}
.berkei-focus__lead {
max-width: 540px;
margin: 0 0 22px;
color: #4a545e;
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.5;
}
.berkei-focus .berkei-focus__benefits {
display: grid;
gap: 14px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.berkei-focus__benefits li {
position: relative;
margin: 0;
padding: 0 0 0 32px;
}
.berkei-focus__benefits li::before {
content: "";
position: absolute;
top: 1px;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: #147798 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.berkei-focus__benefits strong {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.berkei-focus__benefits span {
display: block;
margin-top: 2px;
color: #4a545e;
font-size: 15px;
line-height: 1.45;
}
.berkei-focus__specs {
margin: 0 0 20px;
padding-top: 14px;
border-top: 1px solid var(--berkei-line-soft, #e6e1da);
color: #5b6570;
font-size: 13px;
letter-spacing: 0.01em;
}
.berkei-focus__price {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
}
.berkei-focus__price del {
margin-right: 6px;
color: #70777f; font-size: 17px;
font-weight: 400;
}
.berkei-focus__price ins {
text-decoration: none;
}
.berkei-focus__legal,
.berkei-focus__stock {
margin: 4px 0 0;
color: #5b6570;
font-size: 12px;
line-height: 1.4;
}
.berkei-focus__legal a {
color: inherit;
}
.berkei-focus__stock {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.berkei-focus__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #1f9d55;
}
.berkei-focus__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.berkei-focus__actions .added_to_cart {
align-self: center;
font-size: 14px;
font-weight: 600;
}
.berkei-focus .berkei-focus__details {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 1.6vw, 20px);
margin: 0;
padding: 0;
list-style: none;
}
.berkei-focus__detail {
margin: 0;
}
.berkei-focus__detail figure {
margin: 0;
}
.berkei-focus__detail picture {
display: block;
}
.berkei-focus__detail-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--berkei-radius-md, 10px);
background: #ffffff;
}
.berkei-focus__detail figcaption {
padding-top: 10px;
}
.berkei-focus__detail figcaption strong {
display: block;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.berkei-focus__detail figcaption span {
display: block;
margin-top: 2px;
color: #5b6570;
font-size: 13px;
line-height: 1.4;
}
@media (max-width: 780px) {
.berkei-focus__main {
grid-template-columns: minmax(0, 1fr);
}
.berkei-focus .berkei-focus__details {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.berkei-focus__actions .berkei-action-banner__button {
flex: 1 1 100%;
}
} .berkei-config-banner .berkei-config-banner__tiers {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: -12px 0 18px;
padding: 0;
list-style: none;
}
.berkei-config-banner__tiers li {
margin: 0;
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}
.berkei-config-banner__price {
position: relative;
z-index: 1;
margin: 0 0 18px;
color: #ffffff;
font-size: 18px;
font-weight: 700;
}
.berkei-config-banner__price del {
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
}