:root {
--km-topbar-h: 38px;
--km-admin-bar: 0px; scroll-padding-top: calc(100px + var(--km-admin-bar));
}  @font-face {
font-family: "Unbounded Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Arial");
font-weight: 600 700;
size-adjust: 130.5%;
ascent-override: 76%;
descent-override: 19%;
line-gap-override: 0%;
}
@font-face {
font-family: "Cormorant Garamond Fallback";
src: local("Times New Roman Bold Italic"), local("TimesNewRomanPS-BoldItalicMT"), local("Liberation Serif Bold Italic"), local("Tinos Bold Italic"), local("Noto Serif Bold Italic"), local("Georgia Bold Italic");
font-style: italic;
font-weight: 600;
size-adjust: 85.8%;
ascent-override: 107.6%;
descent-override: 33.4%;
line-gap-override: 0%;
}
@font-face {
font-family: "Onest Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Roboto"), local("Roboto-Regular");
font-weight: 400;
size-adjust: 102.9%;
ascent-override: 94%;
descent-override: 30%;
line-gap-override: 0%;
}
@font-face {
font-family: "Onest Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Roboto Bold"), local("Roboto-Bold");
font-weight: 500 700;
size-adjust: 99.3%;
ascent-override: 97.7%;
descent-override: 30.7%;
line-gap-override: 0%;
} body {
font-feature-settings: "locl" 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button,
input,
select,
textarea {
font-feature-settings: inherit;
} :where(h1, h2, h3) em {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.25em;
font-style: italic;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 0; color: var(--wp--preset--color--mechta);
} .price,
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-mini-cart__amount {
font-family: var(--wp--preset--font-family--unbounded);
font-weight: 600;
}  .wp-element-button,
.wp-block-button__link,
.wp-block-button > .wp-block-button__link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--wp--custom--button--height);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
} .woocommerce :is(a, button).button.wp-element-button,
.woocommerce ul.products li.product a.button.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
background-color: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
:where(a, button, input, .wp-element-button):focus-visible {
outline: 2px solid var(--wp--preset--color--mechta-cta);
outline-offset: 3px;
} body.admin-bar {
--km-admin-bar: 32px;
}
@media (max-width: 782px) {
body.admin-bar {
--km-admin-bar: 46px;
}
}
@media (max-width: 600px) {
body.admin-bar {
--km-admin-bar: 0px; }
}
.wp-site-blocks > header.wp-block-template-part:has(> .km-bar) {
position: sticky;
top: calc(var(--km-admin-bar) - var(--km-topbar-h));
z-index: 50;
} .km-topbar {
font-size: 13px;
line-height: 1.2;
}
.km-topbar .km-topbar__inner {
height: var(--km-topbar-h);
gap: 24px;
}
.km-topbar p {
margin: 0;
white-space: nowrap;
}
.km-topbar .km-topbar__offers {
gap: 28px;
min-width: 0;
overflow: hidden;
}
.km-topbar__offers p::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 10px;
border-radius: 50%;
background: var(--wp--preset--color--caramel);
vertical-align: 0.15em;
}
.km-topbar .km-topbar__contacts {
flex-shrink: 0;
gap: 22px;
}
.km-topbar a {
color: inherit;
text-decoration: none;
}
.km-topbar a:hover {
color: var(--wp--preset--color--caramel);
} .km-bar {
position: relative;
isolation: isolate;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.km-bar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--wp--custom--header--bar-background);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
}
.km-bar .km-bar__inner {
min-height: 84px;
gap: 24px;
} .km-bar .km-brand {
flex-shrink: 0;
gap: 12px;
}
.km-brand__logo {
margin: 0;
}
.km-brand__logo img {
display: block;
border-radius: 50%;
}
.km-brand__name {
margin: 0;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
}
.km-brand__name a {
color: var(--wp--preset--color--espresso);
text-decoration: none;
}
.km-brand__tagline {
margin: 0;
font-size: 13px;
line-height: 1.2;
color: var(--wp--preset--color--muted);
} .wp-block-navigation.km-nav--desktop {
padding: 5px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--custom--header--nav-pill);
}
.wp-block-navigation.km-nav--desktop .wp-block-navigation__container {
gap: 2px;
}
.wp-block-navigation.km-nav .wp-block-navigation-item__content {
display: block;
padding: 10px 18px;
border-radius: var(--wp--custom--radius--pill);
color: var(--wp--preset--color--espresso);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-navigation.km-nav--desktop .wp-block-navigation-item__content:hover {
background: rgba(30, 18, 11, 0.07);
}
.wp-block-navigation.km-nav .current-menu-item > .wp-block-navigation-item__content {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
} .km-bar .km-actions {
flex-shrink: 0;
gap: 10px;
}
.wc-block-mini-cart.km-cart {
display: flex; }
.km-cart .wc-block-mini-cart__button {
display: inline-flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 7px 0 16px;
border: 0;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
cursor: pointer;
}
.km-cart .wc-block-mini-cart__button:hover {
background: var(--wp--preset--color--roast);
}
.km-cart .wc-block-mini-cart__quantity-badge {
display: contents;
}
.km-cart .wc-block-mini-cart__icon {
order: -1;
width: 22px;
height: 22px;
margin: 0;
}
.km-cart .wc-block-mini-cart__amount {
display: inline;
color: var(--wp--preset--color--crema);
font-size: 14px;
}
.km-cart .wc-block-mini-cart__badge {
order: 1; position: static;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
margin: 0;
padding: 0 6px;
border: 0;
border-radius: 999px; background-color: var(--wp--preset--color--mechta-cta) !important;
color: #fff !important;
font-size: 13px;
font-weight: 700;
transform: none;
} a.wc-block-mini-cart__button {
text-decoration: none;
}
a.wc-block-mini-cart__button:hover {
color: var(--wp--preset--color--crema);
}
.km-cart :is(.wc-block-mini-cart__badge, .wc-block-mini-cart__amount):empty {
display: none;
} .km-bump {
animation: km-bump 0.3s ease-out;
}
@keyframes km-bump {
40% {
transform: scale(1.35);
}
}
@media (prefers-reduced-motion: reduce) {
.km-bump {
animation: none;
}
}
.km-cart .wc-block-mini-cart__button:disabled:hover {
background: var(--wp--preset--color--espresso);
} .wc-block-components-product-metadata__description {
display: none;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
overflow-x: hidden;
}
.wc-block-mini-cart__drawer .wc-block-cart-items {
width: 100%;
table-layout: fixed;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__product,
.wc-block-mini-cart__drawer .wc-block-cart-item__wrap {
min-width: 0;
}
.wc-block-mini-cart__drawer .wc-block-components-product-name {
overflow-wrap: anywhere;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
white-space: nowrap;
}
.wc-block-mini-cart__drawer img {
max-width: 100%;
height: auto;
} .wp-block-navigation.km-nav--mobile .wp-block-navigation__responsive-container-open {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.wp-block-navigation.km-nav--mobile .wp-block-navigation__responsive-container.is-menu-open {
padding: clamp(16px, 3vw, 40px);
}
.wp-block-navigation.km-nav--mobile .is-menu-open .wp-block-navigation__container {
gap: 6px;
}
.wp-block-navigation.km-nav--mobile .is-menu-open .wp-block-navigation-item__content {
padding: 10px 18px;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
} @media (max-width: 1079.98px) {
.wp-block-navigation.km-nav--desktop {
display: none;
}
.km-cart .wc-block-mini-cart__button {
position: relative;
justify-content: center;
width: 48px;
padding: 0;
border-radius: 50%;
}
.km-cart .wc-block-mini-cart__amount {
display: none;
}
.km-cart .wc-block-mini-cart__badge {
position: absolute;
top: -4px;
right: -6px;
min-width: 22px;
height: 22px;
padding: 0 5px;
box-shadow: 0 0 0 2px var(--wp--preset--color--crema);
font-size: 11px;
}
.km-topbar .km-topbar__item--wholesale,
.km-topbar .km-topbar__item--email {
display: none;
}
.km-bar .km-bar__inner {
min-height: 72px;
}
}
@media (min-width: 1080px) {
.wp-block-navigation.km-nav--mobile {
display: none;
}
}
.km-topbar .km-topbar__item--short {
display: none;
} @media (max-width: 781.98px) {
:root {
--km-topbar-h: 32px;
}
.km-topbar {
font-size: 12px;
}
.km-topbar .km-topbar__inner {
justify-content: center;
}
.km-topbar .km-topbar__item--short {
display: block;
}
.km-topbar .km-topbar__item--delivery,
.km-topbar .km-topbar__contacts {
display: none;
}
.km-topbar__offers p::before {
display: none;
}
.km-bar .km-bar__inner {
min-height: 64px;
}
.km-bar .km-brand__tagline {
display: none;
} body.single-product .wp-site-blocks > header.wp-block-template-part:has(> .km-bar) {
display: none;
}
} @media (max-width: 480px) {
.km-bar .km-bar__inner {
gap: 12px;
}
.km-bar .km-brand {
gap: 10px;
}
.km-bar .km-actions {
gap: 6px;
}
.km-brand__logo img {
width: 44px !important; height: 44px !important;
}
.km-brand__name {
font-size: 16px;
}
.km-brand__tagline {
font-size: 12px;
}
.km-cart .wc-block-mini-cart__button,
.wp-block-navigation.km-nav--mobile .wp-block-navigation__responsive-container-open {
width: 44px;
height: 44px;
min-height: 44px;
}
}
@media (max-width: 374.98px) {
.km-brand__logo img {
width: 40px !important;
height: 40px !important;
}
.km-brand__tagline {
display: none;
}
.km-brand__name {
font-size: 15px;
}
.km-cart .wc-block-mini-cart__button,
.wp-block-navigation.km-nav--mobile .wp-block-navigation__responsive-container-open {
width: 44px; height: 44px;
min-height: 44px;
}
}
@media (max-width: 339.98px) {
.km-bar .km-brand__text {
display: none; }
} .km-main {
padding-top: clamp(32px, 5vw, 64px);
padding-bottom: clamp(56px, 8vw, 112px);
} .km-footer {
padding-top: clamp(56px, 7vw, 96px);
padding-bottom: 28px;
overflow: hidden;
color: var(--wp--custom--footer--text);
font-size: 15px;
}
.km-footer a {
color: inherit;
text-decoration: none;
}
.km-footer a:hover {
color: var(--wp--preset--color--crema);
text-decoration: underline;
text-underline-offset: 3px;
}
.km-footer .km-footer__title {
margin: 0 0 18px;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.3;
color: var(--wp--preset--color--caramel);
}
.km-footer .km-footer__links,
.km-footer .km-footer__links ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.km-footer .km-footer__account {
margin-top: 10px;
} .km-footer .km-footer__categories ul ul {
display: none;
}
.km-footer .km-footer__contact {
white-space: nowrap;
}
.km-footer .km-footer__links li {
margin: 0;
}
.km-footer p {
margin: 0 0 12px;
} .km-footer .km-footer__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 48px;
}
.km-footer .km-footer__brand {
flex: 1 1 320px;
max-width: 420px;
}
.km-footer .km-footer__logo {
gap: 14px;
}
.km-footer .km-footer__icon {
margin: 0;
}
.km-footer .km-footer__icon img {
display: block;
border-radius: 50%;
}
.km-footer .km-footer__name {
margin: 0;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--wp--preset--color--crema);
}
.km-footer .km-footer__about {
margin: 20px 0 0;
line-height: 1.6;
}
.km-footer .km-footer__columns {
flex: 0 1 auto;
gap: 48px 72px;
margin: 0;
}
.km-footer .km-footer__columns > .wp-block-column {
flex: 0 1 auto;
}
.km-footer .km-footer__payments span {
display: inline-block;
padding: 3px 10px;
border: 1px solid #4a3527;
border-radius: 6px;
color: var(--wp--preset--color--crema);
font-weight: 600;
} .km-footer .km-footer__wordmark {
margin-top: clamp(40px, 6vw, 80px);
margin-bottom: 20px;
font-family: var(--wp--preset--font-family--unbounded);
font-size: min(172px, calc((100vw - 2 * var(--wp--style--root--padding-left, 16px)) / 7.9));
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.85;
white-space: nowrap;
color: var(--wp--custom--footer--wordmark);
user-select: none;
}
.km-footer .km-footer__bottom {
gap: 8px 32px;
padding-top: 22px;
border-top: 1px solid rgba(205, 191, 174, 0.18);
font-size: 14px;
}
.km-footer .km-footer__bottom p {
margin: 0;
} .km-footer .km-footer__credit a,
.km-footer .km-footer__credit a:hover {
color: inherit;
}
@media (max-width: 781.98px) {
.km-footer {
padding-top: 40px;
}
.km-footer .km-footer__top {
gap: 28px;
}
.km-footer .km-footer__icon img {
width: 44px !important;
height: 44px !important;
}
.km-footer .km-footer__name {
font-size: 18px;
}
.km-footer .km-footer__about,
.km-footer .km-footer__wordmark {
display: none;
}
.km-footer .km-footer__columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 16px;
}
.km-footer .km-footer__columns > .wp-block-column:last-child {
grid-column: 1 / -1;
} html.km-js body.single-product .km-footer {
padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}
body.woocommerce-cart:has(.km-sum__bar) .km-footer {
padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.km-footer .km-footer__bottom {
margin-top: 28px;
flex-direction: column;
align-items: flex-start;
font-size: 12px;
}
}  .km-icon {
display: inline-block;
flex-shrink: 0;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask: var(--km-i) center / contain no-repeat;
mask: var(--km-i) center / contain no-repeat;
vertical-align: middle;
}
.km-icon--plus { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.km-icon--minus { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.km-icon--arrow { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.km-icon--arrow-left { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.km-icon--arrow-up-right { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.km-icon--chevron-left { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.km-icon--chevron-down { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.km-icon--check { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E"); }
.km-icon--info { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); }
.km-icon--truck { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.km-icon--tag { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9h9v9l-9 9-9-9z'/%3E%3Ccircle cx='16' cy='8' r='1.5'/%3E%3C/svg%3E"); }
.km-icon--shield { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.km-icon--warehouse { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v11H3V8z'/%3E%3Cpath d='M8 19v-6h8v6'/%3E%3C/svg%3E"); }
.km-icon--clock { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.km-icon--cash { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E"); }
.km-icon--phone { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.km-icon--pin { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.km-icon--compass { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-8-8 18-2-8-8-2z'/%3E%3C/svg%3E"); }
.km-icon--cup { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9z'/%3E%3Cpath d='M17 11h1.5a2.5 2.5 0 0 1 0 5H17'/%3E%3Cpath d='M8 3v3M12 3v3'/%3E%3C/svg%3E"); }
.km-icon--bag { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.km-icon--home { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9h-5v-6H9v6H4v-9z'/%3E%3C/svg%3E"); }
.km-icon--store { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1.5-5h13L20 9M4 9v11h16V9M4 9h16'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.km-icon--pulse { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E"); }
.km-icon--leaf { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 15-14 0 10-6 15-14 15'/%3E%3Cpath d='M5 19l7-7'/%3E%3C/svg%3E"); }
.km-icon--search { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
.km-icon--mail { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.km-icon--drop { --km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/%3E%3C/svg%3E"); }
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.km-eyebrow {
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1.3;
text-transform: uppercase;
color: var(--wp--preset--color--mechta-cta);
}
.km-eyebrow--light {
color: var(--wp--preset--color--caramel);
} .km-stretch a {
color: inherit;
text-decoration: none;
}
.km-stretch a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
} .wp-block-button.km-btn-lg > .wp-block-button__link {
min-height: 58px;
font-size: 17px;
}
.wp-block-button:is(.km-btn-arrow, .km-btn-pin, .km-btn-phone, .km-btn-compass) > .wp-block-button__link::before,
.wp-block-button.km-btn-arrow > .wp-block-button__link::after {
content: "";
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask: var(--km-i) center / contain no-repeat;
mask: var(--km-i) center / contain no-repeat;
}
.wp-block-button.km-btn-arrow > .wp-block-button__link {
gap: 12px;
}
.wp-block-button.km-btn-arrow > .wp-block-button__link::before {
display: none;
}
.wp-block-button.km-btn-arrow {
--km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.wp-block-button.km-btn-pin {
--km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}
.wp-block-button.km-btn-phone {
--km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.wp-block-button.km-btn-compass {
--km-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-8-8 18-2-8-8-2z'/%3E%3C/svg%3E");
}
.wp-block-button.km-btn-dark > .wp-block-button__link {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.wp-block-button.km-btn-paper > .wp-block-button__link {
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--espresso);
}
.wp-block-button.km-btn-light > .wp-block-button__link {
background: var(--wp--preset--color--crema);
color: var(--wp--preset--color--espresso);
}
.wp-block-button:is(.km-btn-dark, .km-btn-paper, .km-btn-light) > .wp-block-button__link:hover {
background: var(--wp--preset--color--roast);
color: var(--wp--preset--color--crema);
} @media (min-width: 782px) {
.km-only-mobile {
display: none !important;
}
}
@media (max-width: 781.98px) {
.km-hide-mobile {
display: none !important;
}
} body:not(.woocommerce-account) .km-page > .wp-block-post-title {
max-width: 760px;
margin-inline: auto !important;
font-size: clamp(34px, 3.6vw, 52px);
line-height: 1.1;
letter-spacing: -0.02em;
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content {
--wp--style--global--content-size: 760px;
font-family: var(--wp--preset--font-family--onest);
font-size: 17px;
line-height: 1.65;
color: var(--wp--preset--color--espresso);
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content :is(h2, h3, h4) {
margin: 1.6em 0 0.5em;
font-family: var(--wp--preset--font-family--unbounded);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--wp--preset--color--espresso);
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content > :first-child {
margin-top: 0;
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content h2 {
font-size: clamp(20px, 2vw, 22px);
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content :is(h3, h4) {
font-size: 18px;
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content :is(p, ul, ol) {
margin-block: 0 1em;
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content :is(ul, ol) {
padding-left: 1.3em;
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content li {
margin: 0.3em 0;
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content li > :is(ul, ol) {
margin: 0.3em 0 0;
}
body:not(.woocommerce-account) .km-page > .wp-block-post-content a {
color: var(--wp--preset--color--mechta-cta);
}
@media (max-width: 781.98px) {
body:not(.woocommerce-account) .km-page > .wp-block-post-content {
font-size: 16px;
}
}  .km-footer .km-footer__hours {
color: var(--wp--preset--color--caramel);
}
.km-footer .km-footer__cookies {
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.km-footer .km-footer__cookies:hover {
color: var(--wp--preset--color--crema);
text-decoration: underline;
text-underline-offset: 3px;
} html.km-docked {
scroll-padding-bottom: calc(var(--km-dock, 0px) + 16px);
} .wc-block-components-drawer__screen-overlay--is-hidden {
visibility: hidden;
transition: opacity 0.3s, visibility 0s 0.3s;
} :where(select, textarea, summary):focus-visible,
.woocommerce form .form-row input[type="checkbox"]:focus-visible,
.km-cform .wpforms-container .wpforms-form :is(a, button, input[type="checkbox"]):focus-visible {
outline: 2px solid var(--wp--preset--color--mechta-cta);
outline-offset: 3px;
} .wp-block-navigation.km-nav--mobile .wp-block-navigation__responsive-container-close {
display: grid;
place-items: center;
width: 44px;
height: 44px;
} :where(h1, h2, h3) {
overflow-wrap: break-word;
} @media (pointer: coarse) and (min-width: 782px) {
:root {
--km-topbar-h: 44px; }
}
@media (pointer: coarse) {
.km-topbar .km-topbar__item a,
.km-footer .km-footer__links :is(a, button),
.km-footer .wc-block-product-categories-list-item > a,
.km-footer .km-footer__contact a,
.km-checkout-header__phone a,
.km-nav--desktop .wp-block-navigation-item__content,
.km-near__btn,
.km-vend__route,
.km-vend__sort select,
.km-co-terms label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.km-co .form-row.km-co-switch label,
.woocommerce-form-login .woocommerce-form__label-for-checkbox,
.km-cform .wpforms-container .wpforms-form :is(.wpforms-field-gdpr-checkbox, .wpforms-field-checkbox) li label {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.km-footer .km-footer__links :is(a, button),
.km-footer .wc-block-product-categories-list-item > a,
.woocommerce-breadcrumb a {
min-width: 44px;
}
.km-footer .km-footer__links,
.km-footer .km-footer__links ul {
gap: 0;
} .wp-block-post-content :is(li, td) > a,
.woocommerce-form-coupon-toggle a.showcoupon,
.km-cform .wpforms-container .wpforms-form .wpforms-field-label-inline a {
padding-block: 13px;
}
.km-cartp__coupon > summary,
.km-cartp__continue {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.km-brand__name a,
.km-footer__credit a {
display: inline-block;
padding-block: 14px;
margin-block: -14px;
}
.leaflet-control-attribution a {
display: inline-block;
min-width: 44px;
padding: 16px 4px;
margin: -16px -4px;
text-align: center;
}
.woocommerce-breadcrumb a,
.km-row__all,
.km-co-back,
.km-delivery a,
.km-company__value a,
.km-icon--phone > a,
.km-line__name a,
.woocommerce-LostPassword a,
.km-steps__step a,
.km-co-sum__edit,
.wc-block-mini-cart__drawer .wc-block-components-product-name {
display: inline-block;
padding-block: 12px;
margin-block: -12px;
}
.km-brand__logo a {
display: grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.km-acc__summary {
min-height: 44px;
}
.km-stepper .km-stepper__btn,
.km-stepper .km-stepper__input {
min-width: 44px;
}
.km-line__remove a.remove,
.woocommerce form .show-password-input {
min-width: 44px;
min-height: 44px;
} .km-round-add,
a.km-pill {
position: relative;
}
.km-round-add::after,
a.km-pill::after,
.leaflet-touch .km-pin::after {
content: "";
position: absolute;
inset: -7px;
border-radius: 999px;
} .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
min-width: 44px;
min-height: 44px;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
display: inline-grid !important;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__image a {
display: block;
} input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="hidden"], .km-stepper__input),
select,
textarea {
font-size: 16px !important;
}
} @media (max-width: 380px) {
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input {
width: 34px;
min-width: 34px;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity {
flex-wrap: wrap;
}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row {
grid-template-columns: 64px minmax(0, 1fr) auto !important;
}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image {
padding-right: 10px !important;
}
} @media (max-width: 781.98px) {
html:has(.cky-btn-revisit-wrapper:not(.cky-revisit-hide)) .km-footer__bottom {
padding-bottom: 60px;
}
} @media (max-height: 500px) and (orientation: landscape) {
.wp-site-blocks > header.wp-block-template-part:has(> .km-bar) {
position: relative;
top: auto;
}
.wp-block-navigation.km-nav--mobile .is-menu-open .wp-block-navigation-item__content {
min-height: 44px;
padding: 8px 18px;
font-size: 20px;
line-height: 1.4;
} .wp-block-navigation.km-nav--mobile .is-menu-open .wp-block-navigation__container {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 2px 24px;
}
.wp-block-navigation.km-nav--mobile .wp-block-navigation__responsive-container.is-menu-open {
overflow-y: auto;
} .wc-block-mini-cart__drawer .wc-block-mini-cart__title {
margin-block: 8px;
font-size: 22px;
}
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents,
.wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block {
height: 100%;
min-height: 0;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
flex: 1 1 auto;
min-height: 0;
padding-top: 0;
overflow-y: auto;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
padding-block: 10px;
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}:root {
--km-sand: #f1e7da;
--km-border: #d6c7b4;
--km-border-strong: #cdbda9;
--km-ink: #4a3b30;
--km-dim: #cdbfae;
--km-green-bg: #dce8d5;
--km-green: #23472c;
--km-pad: var(--wp--style--root--padding-left, 16px);
}
.km-placeholder {
padding: 24px;
border: 1px dashed var(--km-border);
border-radius: var(--wp--custom--radius--md);
color: var(--wp--preset--color--muted);
font-size: 14px;
text-align: center;
} .km-stepper {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 46px;
border: 1px solid var(--km-border);
border-radius: var(--wp--custom--radius--pill);
}
.km-stepper__btn {
display: grid;
place-items: center;
width: 40px;
height: 100%;
padding: 0;
border: 0;
border-radius: var(--wp--custom--radius--pill);
background: transparent;
color: var(--wp--preset--color--espresso);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.km-stepper__btn:hover {
background: rgba(30, 18, 11, 0.06);
}
.km-stepper__input {
width: 4.2ch;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font-size: 16px;
font-weight: 600;
text-align: center;
} .km-js .km-stepper__input {
-moz-appearance: textfield;
appearance: textfield;
}
.km-js .km-stepper__input::-webkit-outer-spin-button,
.km-js .km-stepper__input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
html:not(.km-js) .km-stepper__btn {
display: none;
}
html:not(.km-js) .km-stepper__input {
width: 7ch;
padding: 0 6px 0 14px;
}
.km-stepper--lg,
.km-stepper--sticky {
border: 1.5px solid var(--km-border-strong);
background: #fff;
}
.km-stepper--lg {
height: 58px;
}
.km-stepper--lg .km-stepper__btn {
width: 52px;
}
.km-stepper--lg .km-stepper__input {
font-size: 18px;
font-weight: 700;
}
.km-stepper--sticky {
height: 54px;
}
.km-stepper--sticky .km-stepper__btn {
width: 44px;
}
.km-round-add {
display: grid;
flex-shrink: 0;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--wp--preset--color--mechta-cta);
color: #fff;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease;
}
.km-round-add:hover {
background: var(--wp--preset--color--espresso);
color: #fff;
}
.km-round-add--lg {
width: 52px;
height: 52px;
}
.km-round-add--sm {
width: 40px;
height: 40px;
} :is(.km-round-add, .km-card__add, .km-buy__add, .km-sticky__add).is-loading {
opacity: 0.85;
cursor: progress;
}
:is(.km-round-add, .km-card__add, .km-buy__add, .km-sticky__add):is(.is-loading, .is-added) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
body :is(.km-round-add, .km-card__add, .km-buy__add, .km-sticky__add).is-added,
body :is(.km-round-add, .km-card__add, .km-buy__add, .km-sticky__add).is-added:hover {
background: var(--wp--custom--state--success);
color: #fff;
}
.km-spin {
display: inline-block;
flex-shrink: 0;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: km-spin 0.7s linear infinite;
}
@keyframes km-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.km-spin {
border-right-color: currentColor;
opacity: 0.6;
animation: none;
}
} .km-toast {
position: fixed;
top: var(--km-toast-top, 112px);
right: 24px;
z-index: 100000;
display: flex;
align-items: flex-start;
gap: 14px;
width: min(380px, calc(100vw - 32px));
padding: 14px 44px 14px 14px;
border: 1px solid var(--km-border, #e6dbcd);
border-radius: 18px;
background: var(--wp--preset--color--paper);
box-shadow: 0 18px 44px rgba(30, 18, 11, 0.22);
color: var(--wp--preset--color--espresso);
font-size: 14px;
line-height: 1.4;
animation: km-toast-in 0.2s ease-out;
}
@keyframes km-toast-in {
from {
opacity: 0;
transform: translateY(-8px);
}
} .km-toast__media {
flex: 0 0 56px;
width: 56px;
height: 56px;
overflow: hidden;
border-radius: 12px;
background: var(--km-sand, #efe6da);
}
.km-toast__img {
display: block;
width: 56px;
max-width: none;
height: 72px;
object-fit: cover;
object-position: top;
}
.km-toast__body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.km-toast__body p {
margin: 0;
}
.km-toast__title {
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
}
.km-toast__title .km-icon {
width: 18px;
height: 18px;
color: var(--wp--custom--state--success);
}
.km-toast__item {
overflow-wrap: anywhere;
}
.km-toast__tier {
color: var(--wp--preset--color--mechta);
font-weight: 700;
}
.km-toast__total {
color: var(--wp--preset--color--muted);
font-size: 13px;
}
.km-toast__cta {
align-self: flex-start;
margin-top: 6px;
color: var(--wp--preset--color--mechta-cta);
font-weight: 700;
text-decoration: none;
}
.km-toast__cta:hover {
text-decoration: underline;
}
.km-toast__close {
position: absolute;
top: 6px;
right: 6px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--wp--preset--color--muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.km-toast__close:hover {
background: var(--km-sand, #efe6da);
color: var(--wp--preset--color--espresso);
}
.km-toast--error {
border-color: var(--wp--custom--state--error);
background: #fbeceb;
}
.km-toast--error .km-toast__title,
.km-toast--error .km-toast__title .km-icon {
color: var(--wp--custom--state--error);
}
@media (max-width: 781.98px) {
.km-toast {
top: auto;
right: 12px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px + var(--km-toast-lift, 0px));
left: 12px;
width: auto;
animation-name: km-toast-up;
}
@keyframes km-toast-up {
from {
opacity: 0;
transform: translateY(8px);
}
}
}
@media (prefers-reduced-motion: reduce) {
.km-toast {
animation: none;
}
} .km-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
border-radius: var(--wp--custom--radius--lg);
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--espresso);
}
.km-card__media {
position: relative;
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: 20px;
background: var(--wp--preset--color--latte);
} .km-card .km-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: transform 0.35s ease;
} :is(.km-card__media, .km-gallery__thumb) img.km-img--wide.km-img--wide {
height: 137%;
}
.km-card:hover .km-card__media img {
transform: scale(1.03);
}
.km-card__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 12px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.km-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
padding: 16px 12px 10px;
}
.km-card__meta {
margin: 0;
color: var(--wp--preset--color--muted);
font-size: 13px;
line-height: 1.35;
}
.km-card .km-card__title {
margin: 0;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
}
.km-card__title a {
color: inherit;
text-decoration: none;
}
.km-card__title a:hover {
color: var(--wp--preset--color--mechta-cta);
}
.km-card__amount {
font-family: var(--wp--preset--font-family--unbounded);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
} .km-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 14px;
}
.km-card__prices {
display: flex;
flex-direction: column;
min-width: 0;
}
.km-card__from {
display: block;
color: var(--wp--preset--color--mechta-cta);
font-size: 13px;
font-weight: 600;
}
.km-card__cart--round {
margin: 0;
} .km-card--shop .km-card__body {
gap: 0;
padding: 16px 12px 8px;
}
.km-card--shop .km-card__title {
margin-top: 6px;
}
.km-card__price {
display: flex;
align-items: baseline;
gap: 8px;
margin: 12px 0 0;
}
.km-card--shop .km-card__amount {
font-size: 22px;
}
.km-card__unit {
color: var(--wp--preset--color--muted);
font-size: 13px;
}
.km-mini-tiers {
display: grid;
grid-template-columns: repeat(var(--km-n, 3), minmax(0, 1fr));
gap: 6px;
margin: 12px 0 0;
padding: 0;
list-style: none;
font-size: 12px;
text-align: center;
}
.km-mini-tier {
display: flex;
flex-direction: column;
padding: 7px 4px;
border-radius: 10px;
background: var(--km-sand);
}
.km-mini-tier:nth-child(2) {
background: var(--wp--preset--color--latte);
}
.km-mini-tier.is-best {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-mini-tier__qty {
color: var(--wp--preset--color--muted);
}
.km-mini-tier.is-best .km-mini-tier__qty {
color: var(--wp--preset--color--caramel);
}
.km-mini-tier__price {
font-size: 13px;
font-weight: 700;
}
.km-card__cart {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: auto 0 0;
padding-top: 14px;
}
.km-card .km-card__add {
flex: 1;
min-height: 46px;
padding: 0 16px;
font-size: 15px;
}
.km-card__soldout {
margin: auto 0 0;
padding-top: 14px;
color: var(--wp--preset--color--muted);
font-weight: 600;
} .km-card--home .km-card__soldout {
flex-shrink: 0;
margin: 0;
padding: 8px 14px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--pill);
font-size: 13px;
white-space: nowrap;
} .km-choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
width: 100%;
}
.km-choice {
position: relative;
display: flex;
flex-direction: column;
padding: 8px 8px;
border: 1px solid var(--km-border);
border-radius: 10px;
background: var(--km-sand);
font-size: 12px;
line-height: 1.3;
cursor: pointer;
}
.km-choice input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
} .km-choice {
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--espresso);
}
.km-choice:has(input:checked) {
border-color: var(--wp--preset--color--espresso);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-choice:has(input:checked) .km-choice__price {
color: var(--wp--preset--color--latte);
}
.km-choice:has(input:focus-visible) {
outline: 2px solid var(--wp--preset--color--mechta-cta);
outline-offset: 2px;
}
.km-choice__label {
font-size: 13px;
font-weight: 700;
}
.km-choice__price {
color: var(--wp--preset--color--muted);
} .km-minis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 16px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.km-card--mini {
flex-direction: row;
align-items: center;
gap: 14px;
border-radius: 24px;
text-decoration: none;
} .km-card--mini .km-card__link {
color: inherit;
text-decoration: none;
}
.km-card--mini .km-card__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.km-card--mini:hover .km-card__link {
color: var(--wp--preset--color--mechta-cta);
}
.km-card--mini .km-card__link:focus-visible {
outline: none;
}
.km-card--mini:has(.km-card__link:focus-visible) {
outline: 2px solid var(--wp--preset--color--mechta-cta);
outline-offset: 2px;
}
.km-card__cart--mini {
position: relative;
z-index: 1;
margin: 0 6px 0 auto;
}
.km-card--mini .km-card__media {
flex: 0 0 92px;
width: 92px;
height: 92px;
border-radius: 16px;
}
.km-card--mini .km-card__body {
gap: 4px;
padding: 0;
}
.km-card--mini .km-card__title {
font-family: inherit;
font-size: 16px;
letter-spacing: 0;
}
.km-card--mini .km-card__amount {
font-size: 16px;
} .km-tiers {
margin: 0;
padding: 0;
list-style: none;
}
.km-tiers--strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1px;
margin-top: 36px;
overflow: hidden;
border: 1px solid #ddd0bf;
border-radius: 22px;
background: #e6dbcd;
}
.km-tiers--strip .km-tier {
display: flex;
flex-direction: column;
gap: 4px;
padding: 18px 22px;
background: var(--wp--preset--color--paper);
}
.km-tiers--strip .km-tier:nth-child(2) {
background: var(--km-sand);
}
.km-tiers--strip .km-tier:nth-child(3) {
background: var(--wp--preset--color--latte);
}
.km-tiers--strip .km-tier.is-best {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-tiers--strip .km-tier__qty {
color: var(--wp--preset--color--muted);
font-size: 13px;
}
.km-tiers--strip .is-best .km-tier__qty {
color: var(--km-dim);
}
.km-tiers--strip .km-tier__off {
font-family: var(--wp--preset--font-family--unbounded);
font-size: 18px;
font-weight: 600;
}
.km-tiers--strip .is-best .km-tier__off {
color: var(--wp--preset--color--caramel);
}
.km-tiers--chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.km-tiers--chips .km-tier {
padding: 10px 16px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--paper);
font-size: 15px;
font-weight: 600;
}
.km-tiers--chips .km-tier.is-retail,
.km-tiers--chips .km-tier__range {
display: none;
}
.km-tiers--chips .km-tier__off {
color: var(--wp--preset--color--mechta-cta);
}
.km-tiers--chips .km-tier.is-best {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-tiers--chips .is-best .km-tier__off {
color: var(--wp--preset--color--caramel);
}
.km-chart {
padding: 32px;
border-radius: var(--wp--custom--radius--lg);
background: var(--wp--preset--color--paper);
}
.km-chart__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.km-chart__head p {
margin: 0;
}
.km-chart__title {
font-weight: 600;
}
.km-chart__note {
color: var(--wp--preset--color--muted);
font-size: 14px;
}
.km-chart__cols,
.km-chart__labels {
display: grid;
grid-template-columns: repeat(var(--km-cols, 4), minmax(0, 1fr));
gap: 14px;
}
.km-chart__cols {
align-items: end;
height: 260px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.km-chart__col {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
height: 100%;
}
.km-chart__price {
font-family: var(--wp--preset--font-family--unbounded);
font-size: clamp(12px, 1.3vw, 18px);
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.km-chart__col.is-best .km-chart__price {
color: var(--wp--preset--color--mechta-cta);
font-weight: 700;
}
.km-chart__bar {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12px;
border-radius: 16px 16px 6px 6px;
background: #d9cbb9;
}
.km-chart__col:nth-child(2) .km-chart__bar {
background: #c9a27f;
}
.km-chart__col:nth-child(3) .km-chart__bar {
background: #a86a43;
}
.km-chart__col.is-best .km-chart__bar {
background: var(--wp--preset--color--espresso);
}
.km-chart__off {
padding: 4px 10px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--mechta);
color: #fff;
font-size: 13px;
font-weight: 700;
}
.km-chart__labels {
margin-top: 12px;
color: var(--wp--preset--color--muted);
font-size: 14px;
font-weight: 500;
text-align: center;
} .km-hero-product {
position: relative;
min-height: 540px;
overflow: hidden;
border-radius: 32px;
background: #8a735b;
}
.km-hero-product .km-hero-product__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
}
.km-hero-product__ring {
position: absolute;
top: 24px;
right: 24px;
width: 132px;
height: 132px;
}
.km-hero-product__ring text {
font-family: var(--wp--preset--font-family--unbounded);
}
.km-hero-product__bar {
position: absolute;
right: 20px;
bottom: 20px;
left: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 18px 18px 18px 22px;
border-radius: 22px;
background: rgba(251, 248, 243, 0.9);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.km-hero-product__bar p {
margin: 0;
}
.km-hero-product__eyebrow {
color: var(--wp--preset--color--muted);
font-size: 13px;
font-weight: 500;
}
.km-hero-product__name {
margin-top: 6px !important;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 20px;
font-weight: 600;
line-height: 1.25;
}
.km-hero-product__buy {
display: flex;
align-items: center;
gap: 16px;
}
.km-hero-product__price {
display: flex;
flex-direction: column;
text-align: right;
}
.km-hero-product__amount {
font-family: var(--wp--preset--font-family--unbounded);
font-size: 24px;
font-weight: 700;
}
.km-hero-product__from {
color: var(--wp--preset--color--mechta-cta);
font-size: 13px;
font-weight: 600;
}
.km-marquee {
margin-top: 56px;
padding: 30px 0;
overflow: hidden;
}
.km-marquee__band {
width: 112%;
margin-left: -6%;
padding: 22px 0;
overflow: hidden;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
transform: rotate(-2deg);
}
.km-marquee__track {
display: flex;
width: max-content;
animation: km-marquee 48s linear infinite;
}
.km-marquee:hover .km-marquee__track {
animation-play-state: paused;
}
.km-marquee__list {
display: flex;
align-items: center;
gap: 34px;
margin: 0;
padding: 0 34px 0 0;
list-style: none;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
}
.km-marquee__list li {
display: flex;
align-items: center;
gap: 34px;
}
.km-marquee__list li::after {
content: "✦";
color: var(--wp--preset--color--caramel);
}
.km-marquee__list a {
color: inherit;
text-decoration: none;
}
.km-marquee__list a:hover {
color: var(--wp--preset--color--caramel);
}
@keyframes km-marquee {
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.km-marquee__track {
animation: none;
}
}
.km-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max(160px, calc((100% - 64px) / 5)), 1fr));
grid-auto-flow: dense;
grid-auto-rows: 250px;
gap: 16px;
margin-top: 36px;
}
.km-tile {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--wp--custom--radius--lg);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
text-decoration: none;
}
.km-tile:hover {
color: var(--wp--preset--color--crema);
}
.km-tile--lg {
grid-row: span 2;
grid-column: span 2;
}
.km-tile--wide {
grid-column: span 2;
}
.km-tile .km-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.km-tile:hover .km-tile__img {
transform: scale(1.04);
} .km-tile .km-tile__img.is-product {
object-position: top;
}
.km-tile__text {
position: absolute;
inset: auto 0 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 20px;
background: linear-gradient(to top, rgba(20, 11, 6, 0.9), rgba(20, 11, 6, 0));
}
.km-tile__title {
font-family: var(--wp--preset--font-family--unbounded);
font-size: clamp(15px, 1.25vw, 18px); font-weight: 600;
line-height: 1.2;
overflow-wrap: normal;
word-break: normal;
}
.km-tile__sub {
color: #e2c9ae;
font-size: 14px;
}
.km-tile--lg .km-tile__text {
padding: 28px;
}
.km-tile--lg .km-tile__title {
font-size: 30px;
}
.km-tile--lg .km-tile__sub {
margin-top: 4px;
font-size: 15px;
}
.km-tile--wide .km-tile__text {
padding: 22px;
}
.km-tile--wide .km-tile__title {
font-size: 22px;
}
.km-tile__arrow {
position: absolute;
top: 20px;
right: 20px;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--wp--preset--color--crema);
color: var(--wp--preset--color--espresso);
}
.km-tile__arrow::before {
content: "";
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.km-tile--promo {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 22px;
background: var(--wp--preset--color--caramel);
color: var(--wp--preset--color--espresso);
}
.km-tile--promo:hover {
color: var(--wp--preset--color--espresso);
background: #e8ad7d;
}
.km-tile--promo .km-icon {
width: 30px;
height: 30px;
}
.km-tile--promo .km-tile__text {
position: static;
padding: 0;
background: none;
}
.km-tile--promo .km-tile__title {
font-size: 20px;
font-weight: 700;
line-height: 1.15;
}
.km-tile--promo .km-tile__sub {
margin-top: 4px;
color: inherit;
line-height: 1.4;
} .km-tiles > .km-tile,
.km-tiles .km-tile > *,
.km-tile .km-tile__text > * {
margin: 0;
} .km-tiles .km-tile > .km-tile__media,
.km-tiles .km-tile > .km-tile__media > a,
.km-tiles .km-tile > .km-tile__media > div {
position: absolute;
inset: 0;
display: block;
width: auto !important;
height: auto !important;
margin: 0;
}
.km-tiles .km-tile > .km-tile__text {
position: absolute;
inset: auto 0 0;
}
.km-tiles .km-tile--promo > .km-tile__text {
position: static;
}
.km-tile .km-tile__media a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.editor-styles-wrapper .km-tile .km-tile__media a::after {
display: none;
}
.km-tiles .km-tile .km-tile__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.km-tile:hover .km-tile__media img {
transform: scale(1.04);
}
.km-tile--wide .km-tile__media img {
object-position: 50% 40%;
}
.km-tile--lg::after {
content: "";
position: absolute;
top: 20px;
right: 20px;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--wp--preset--color--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E120B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / 20px no-repeat;
pointer-events: none;
}
.km-tile .km-tile__text p {
margin: 0;
} .km-tiles .km-tile:not(.km-tile--promo) > .km-tile__media::after {
content: "";
position: absolute;
inset: 40% 0 0;
z-index: 1;
background: linear-gradient(to top, rgba(30, 18, 11, 0.88) 0%, rgba(30, 18, 11, 0.88) 50%, rgba(30, 18, 11, 0.55) 75%, rgba(30, 18, 11, 0) 100%);
pointer-events: none;
transition: opacity 0.25s ease;
}
.km-tiles .km-tile:not(.km-tile--promo):hover > .km-tile__media::after {
opacity: 0.88;
}
.km-tiles .km-tile:not(.km-tile--promo) > .km-tile__text {
z-index: 2;
max-height: 50%;
background: none;
pointer-events: none; }
.editor-styles-wrapper .km-tiles .km-tile > .km-tile__text {
pointer-events: auto;
}
.km-tiles .km-tile:not(.km-tile--promo) :is(.km-tile__title, .km-tile__sub) {
text-shadow: 0 1px 12px rgba(30, 18, 11, 0.5);
}
.km-tile--promo .km-tile__icon {
margin: 0;
line-height: 0;
}
.km-tile--promo .km-tile__title a {
color: inherit;
text-decoration: none;
}
.km-row {
position: relative;
}
.km-row__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px 24px;
}
.km-row .km-row__heading {
margin: 12px 0 0;
}
.km-row__nav {
display: flex;
gap: 10px;
}
.km-row__arrow {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1.5px solid var(--km-border-strong);
border-radius: 50%;
background: transparent;
color: var(--wp--preset--color--espresso);
cursor: pointer;
}
.km-row__arrow--next {
border: 0;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-row__arrow:disabled {
opacity: 0.35;
cursor: default;
}
.km-row:not(.has-more) .km-row__nav,
html:not(.km-js) .km-row__nav,
.km-row__all {
display: none;
}
.km-row__track {
display: grid;
grid-auto-columns: calc((100% - 3 * 20px) / 4);
grid-auto-flow: column;
gap: 20px; margin: 28px -8px -12px;
padding: 8px 8px 20px;
overflow-x: auto;
overflow-y: hidden;
scroll-padding-inline: 8px;
list-style: none;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.km-row__track::-webkit-scrollbar {
display: none;
}
.km-row__item {
scroll-snap-align: start;
}
@media (max-width: 1079.98px) {
.km-row__track {
grid-auto-columns: calc((100% - 2 * 20px) / 3);
}
} .km-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.km-filters__cats {
min-width: 0;
}
.km-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.km-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 44px;
padding: 0 18px;
border: 1px solid var(--km-border);
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--espresso);
font-size: 15px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.km-chip:hover {
border-color: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--espresso);
}
.km-chip__count {
color: var(--wp--preset--color--muted);
}
.km-chip.is-active {
border-color: var(--wp--preset--color--espresso);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
font-weight: 600;
}
.km-chip.is-active .km-chip__count {
color: inherit;
font-weight: 500;
opacity: 0.7;
}
.km-filters__order {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 100%; margin: 0;
color: var(--km-ink);
font-size: 15px;
}
.km-filters__order select {
min-width: 0;
max-width: 100%;
height: 44px;
padding: 0 40px 0 16px;
border: 1px solid var(--km-border);
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E120B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
color: var(--wp--preset--color--espresso);
font-family: inherit;
font-size: 15px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.km-filters__submit {
height: 44px;
padding: 0 18px;
border: 1px solid var(--wp--preset--color--espresso);
border-radius: var(--wp--custom--radius--pill);
background: transparent;
color: var(--wp--preset--color--espresso);
font: inherit;
cursor: pointer;
}
.km-js .km-filters__submit {
display: none;
}
.km-catalog {
margin-top: 28px;
}
.km-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.km-grid > li {
display: flex;
}
.km-grid > li > * {
flex: 1;
}
.km-promo {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 420px;
padding: 32px;
overflow: hidden;
border-radius: var(--wp--custom--radius--lg);
text-decoration: none;
}
.km-promo--b2b {
background: var(--wp--preset--color--mechta);
color: #fff;
}
.km-promo--b2b:hover {
color: #fff;
}
.km-promo__deco {
position: absolute;
right: -20px;
bottom: -40px;
color: #cf6a42;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 180px;
font-style: italic;
font-weight: 600;
line-height: 1;
pointer-events: none;
}
.km-promo .km-promo__eyebrow {
position: relative;
color: #ffe9dc;
letter-spacing: 0.12em;
}
.km-promo__body {
position: relative;
display: flex;
flex-direction: column;
}
.km-promo__title {
font-family: var(--wp--preset--font-family--unbounded);
font-size: 26px;
font-weight: 700;
line-height: 1.15;
}
.km-promo__text {
margin-top: 14px;
color: #fff0e8;
font-size: 16px;
line-height: 1.5;
}
.km-promo__button {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 10px;
height: 48px;
margin-top: 22px;
padding: 0 22px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
font-weight: 600;
transition: background-color 0.15s ease;
}
.km-promo__button .km-icon {
width: 18px;
height: 18px;
}
.km-promo:hover .km-promo__button {
background: var(--wp--preset--color--roast);
}
.km-promo--taste {
padding: 0;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-promo--taste:hover {
color: var(--wp--preset--color--crema);
}
.km-promo .km-promo__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
}
.km-promo--taste .km-promo__eyebrow {
padding: 32px 32px 0;
color: var(--wp--preset--color--caramel);
}
.km-promo--taste .km-promo__body {
padding: 0 32px 32px;
}
.km-promo--taste .km-promo__title {
font-size: 24px;
line-height: 1.2;
}
.km-promo--taste .km-promo__button {
margin-top: 20px;
background: var(--wp--preset--color--crema);
color: var(--wp--preset--color--espresso);
}
.km-promo--taste:hover .km-promo__button {
color: var(--wp--preset--color--crema);
}
.km-pagination {
display: flex;
justify-content: center;
margin-top: 40px;
}
.km-pagination ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.km-pagination .page-numbers {
display: grid;
place-items: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border: 1px solid var(--km-border);
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--espresso);
font-weight: 600;
text-decoration: none;
}
.km-pagination .page-numbers.current {
border-color: var(--wp--preset--color--espresso);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-empty {
padding: 64px 0;
text-align: center;
}
.km-empty__title {
font-family: var(--wp--preset--font-family--unbounded);
font-size: 22px;
font-weight: 600;
} .km-gallery {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
} .km-gallery__stage {
position: relative;
aspect-ratio: var(--km-ratio, 0.98);
overflow: hidden;
border-radius: 36px;
background: var(--wp--preset--color--latte);
}
.km-gallery__track {
display: flex;
height: 100%;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
list-style: none;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.km-gallery__track::-webkit-scrollbar {
display: none;
}
.km-gallery__slide {
flex: 0 0 100%;
height: 100%;
overflow: hidden;
scroll-snap-align: start;
}
.km-gallery .km-gallery__slide img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: contain; } .km-gallery .km-gallery__slide img.is-band {
height: calc(100% / 0.78);
object-fit: cover;
object-position: top;
}
.km-gallery__badge {
position: absolute;
top: 20px;
left: 20px;
padding: 8px 14px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
font-size: 13px;
font-weight: 600;
pointer-events: none;
}
.km-gallery__ring {
position: absolute;
top: 22px;
right: 22px;
width: 112px;
height: 112px;
pointer-events: none;
}
.km-gallery__ring circle {
fill: var(--wp--preset--color--mechta);
}
.km-gallery__ring-text {
fill: #fff;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 15px;
font-weight: 600;
letter-spacing: 3.4px;
}
.km-gallery__ring-center {
fill: #fff;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 34px;
font-weight: 700;
}
.km-gallery__dots {
position: absolute;
right: 0;
bottom: 14px;
left: 0;
display: none;
justify-content: center;
gap: 6px;
pointer-events: none;
}
.km-gallery__dot {
width: 6px;
height: 6px;
border-radius: var(--wp--custom--radius--pill);
background: rgba(251, 248, 243, 0.5);
transition: width 0.2s ease;
}
.km-gallery__dot.is-active {
width: 22px;
background: var(--wp--preset--color--paper);
}
.km-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.km-gallery__thumb {
display: block;
aspect-ratio: 1;
overflow: hidden;
border: 3px solid transparent;
border-radius: 20px;
background: var(--wp--preset--color--latte);
opacity: 0.78;
transition: opacity 0.15s ease;
}
.km-gallery__thumb:hover,
.km-gallery__thumb[aria-current="true"] {
opacity: 1;
}
.km-gallery__thumb[aria-current="true"] {
border-color: var(--wp--preset--color--espresso);
}
.km-gallery .km-gallery__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
} .km-buy {
display: flex;
flex-direction: column;
gap: 22px;
}
.km-buy [hidden] {
display: none !important;
}
.km-buy__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.km-pill {
display: inline-block;
padding: 7px 14px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--latte);
color: var(--wp--preset--color--espresso);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
}
a.km-pill:hover {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-pill--stock.is-in {
background: var(--km-green-bg);
color: #2f5d3a;
}
.km-pill--stock.is-out {
background: #f3ddd6;
color: var(--wp--custom--state--error);
}
.km-pill--stock::before {
content: "● ";
}
.km-buy__titles > * {
margin: 0;
}
.km-buy .km-buy__name {
font-size: clamp(32px, 3.4vw, 50px);
letter-spacing: -0.035em;
line-height: 1.02;
}
.km-buy__subtitle {
margin-top: 10px !important;
color: var(--km-ink);
font-size: 17px;
}
.km-buy__lead {
margin-top: 14px !important;
color: var(--wp--preset--color--roast);
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 26px;
font-style: italic;
font-weight: 600;
line-height: 1.25;
}
.km-buy__lead p {
margin: 0;
}
.km-specs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.km-spec {
display: flex;
flex-direction: column;
padding: 14px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 18px;
background: var(--wp--preset--color--paper);
}
.km-spec__label {
color: var(--wp--preset--color--muted);
font-size: 12px;
}
.km-spec__value {
margin-top: 6px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
.km-spec__dots {
display: flex;
gap: 4px;
margin-top: 8px;
}
.km-spec__dot {
width: 14px;
height: 14px;
border: 2px solid var(--km-border-strong);
border-radius: 50%;
}
.km-spec__dot.is-on {
border-color: var(--wp--preset--color--roast);
background: var(--wp--preset--color--roast);
}
.km-spec__big {
margin-top: 6px;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.km-spec__small {
margin-top: 2px;
color: var(--km-ink);
font-size: 13px;
}
.km-buy__box {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0;
padding: 24px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--lg);
background: var(--wp--preset--color--paper);
}
.km-buy__price p {
margin: 0;
}
.km-buy__per {
color: var(--wp--preset--color--muted);
font-size: 13px;
}
.km-buy__amounts {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 12px;
margin-top: 4px !important;
}
.km-buy__unit {
font-family: var(--wp--preset--font-family--unbounded);
font-size: 40px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
}
.km-buy__retail {
color: var(--wp--preset--color--muted);
font-size: 18px;
}
.km-buy__off {
align-self: center;
padding: 5px 10px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--mechta);
color: #fff;
font-size: 13px;
font-weight: 700;
}
.km-buy__per-unit {
color: var(--wp--preset--color--muted);
font-size: 14px;
}
.km-buy__choices {
margin: 0;
padding: 0;
border: 0;
}
.km-buy__choices legend,
.km-buy__tiers-title {
margin: 0;
padding: 0;
font-size: 14px;
font-weight: 600;
}
.km-buy__choices .km-choices {
margin-top: 10px;
}
.km-tierbtns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
gap: 8px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.km-tierbtn {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 12px 8px;
border: 1px solid var(--km-border);
border-radius: 16px;
background: var(--wp--preset--color--crema);
color: var(--wp--preset--color--espresso);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease;
}
.km-tierbtn:hover {
border-color: var(--wp--preset--color--espresso);
}
.km-tierbtn__label {
color: var(--wp--preset--color--muted);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
}
.km-tierbtn__price {
margin-top: 4px;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
.km-tierbtn__off {
margin-top: 2px;
color: var(--wp--preset--color--mechta-cta);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
}
.km-tierbtn[aria-pressed="true"] {
padding: 11px 7px;
border: 2px solid var(--wp--preset--color--espresso);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-tierbtn[aria-pressed="true"] .km-tierbtn__label {
color: var(--wp--preset--color--caramel);
}
.km-tierbtn[aria-pressed="true"] .km-tierbtn__off {
color: var(--km-dim);
font-weight: 400;
} html:not(.km-js) .km-tierbtn {
pointer-events: none;
}
.km-buy__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.km-buy .km-buy__add {
flex: 1 1 220px;
gap: 12px;
min-height: 58px;
font-size: 17px;
}
.km-buy__notes {
display: flex;
flex-direction: column;
gap: 8px;
}
.km-buy__notes:not(:has(.km-note:not([hidden]))) {
display: none;
}
.km-note {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 12px 14px;
border-radius: 14px;
font-size: 15px;
line-height: 1.4;
}
.km-note .km-icon {
width: 18px;
height: 18px;
}
.km-note--save {
background: var(--km-green-bg);
color: var(--km-green);
font-weight: 600;
}
.km-note--next {
background: var(--km-sand);
color: var(--km-ink);
}
.km-note--next .km-icon {
color: var(--wp--preset--color--mechta-cta);
}
.km-buy__soldout {
margin: 0;
padding: 20px 24px;
border-radius: var(--wp--custom--radius--md);
background: var(--km-sand);
color: var(--km-ink);
}
.km-sticky {
display: none;
} .km-tabs ul {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: fit-content;
max-width: 100%;
margin: 0;
padding: 6px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--custom--header--nav-pill);
list-style: none;
}
.km-tabs__link {
display: inline-flex;
align-items: center;
height: 46px;
padding: 0 22px;
border-radius: var(--wp--custom--radius--pill);
color: var(--wp--preset--color--espresso);
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.km-tabs__link:hover {
background: rgba(30, 18, 11, 0.07);
color: var(--wp--preset--color--espresso);
}
.km-tabs__link.is-active {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
font-weight: 600;
}
.km-details__grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
align-items: start;
gap: 24px 40px;
margin-top: 28px;
}
.km-acc {
scroll-margin-top: 120px;
}
.km-acc--desc {
grid-row: span 2;
}
.km-acc__summary {
display: none;
}
.km-prose > * {
margin: 18px 0 0;
}
.km-prose > :first-child {
margin-top: 0;
}
.km-prose img {
max-width: 100%;
height: auto;
border-radius: 18px;
}
.km-prose h2 {
font-size: clamp(26px, 2.4vw, 34px);
letter-spacing: -0.025em;
line-height: 1.15;
}
.km-prose h3 {
margin-top: 28px;
font-size: 20px;
}
.km-prose p {
color: var(--km-ink);
font-size: 17px;
line-height: 1.7;
} .km-prose ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 12px;
margin-top: 22px;
padding: 0;
list-style: none;
}
.km-prose li {
padding: 18px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 18px;
background: var(--wp--preset--color--paper);
color: var(--km-ink);
font-size: 15px;
line-height: 1.5;
}
.km-prose li strong {
display: block;
margin-bottom: 6px;
color: var(--wp--preset--color--espresso);
font-size: 16px;
font-weight: 600;
}
.km-facts {
padding: 28px;
border-radius: var(--wp--custom--radius--lg);
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-facts__title {
margin: 0;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 18px;
font-weight: 600;
}
.km-facts__list {
display: grid;
grid-template-columns: auto 1fr;
margin: 18px 0 0;
font-size: 15px;
}
.km-facts__list dt,
.km-facts__list dd {
padding: 12px 0;
border-bottom: 1px solid #3a2a1f;
}
.km-facts__list dt {
padding-right: 16px;
color: var(--km-dim);
}
.km-facts__list dd {
margin: 0;
text-align: right;
}
.km-facts__list dt:last-of-type,
.km-facts__list dd:last-of-type {
border-bottom: 0;
}
.km-delivery {
padding: 24px 28px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--lg);
background: var(--wp--preset--color--paper);
color: var(--km-ink);
font-size: 15px;
line-height: 1.6;
}
.km-delivery p {
margin: 0 0 10px;
}
.km-delivery p:last-child {
margin: 0;
}
.km-delivery a {
font-weight: 600;
} .km-ptop {
display: none;
} @media (max-width: 781.98px) { .km-hero-product {
min-height: 400px;
border-radius: var(--wp--custom--radius--lg);
} .km-hero-product .km-hero-product__img {
height: 125%;
object-position: 40% 0;
}
.km-hero-product__ring {
display: none;
}
.km-hero-product__bar {
right: 12px;
bottom: 12px;
left: 12px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2px 10px;
padding: 14px 14px 14px 16px;
border-radius: 20px;
background: rgba(251, 248, 243, 0.92);
}
.km-hero-product__buy {
display: contents;
}
.km-hero-product__eyebrow {
font-size: 12px;
}
.km-hero-product__name {
margin-top: 2px !important;
font-family: inherit;
font-size: 15px;
font-weight: 700;
}
.km-hero-product__price {
flex-direction: row;
flex-wrap: wrap;
grid-column: 1;
text-align: left;
}
.km-hero-product__amount,
.km-hero-product__from {
color: var(--wp--preset--color--mechta-cta);
font-family: inherit;
font-size: 12px;
font-weight: 600;
}
.km-hero-product__from::before {
content: "\00a0·\00a0";
}
.km-hero-product .km-round-add {
grid-row: 1 / span 2;
grid-column: 2;
width: 46px;
height: 46px;
}
.km-marquee {
display: none;
} .km-tiles {
display: flex;
gap: 14px;
margin: 16px calc(-1 * var(--km-pad)) 0;
padding: 0 var(--km-pad) 6px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.km-tiles::-webkit-scrollbar {
display: none;
}
.km-tile {
display: flex;
flex: 0 0 76px;
flex-direction: column;
align-items: center;
gap: 8px;
overflow: visible;
border-radius: 0;
background: none;
color: var(--wp--preset--color--espresso);
text-align: center;
}
.km-tile:hover {
color: var(--wp--preset--color--mechta-cta);
}
.km-tile .km-tile__img {
position: static;
box-sizing: border-box;
width: 72px;
height: 72px;
padding: 3px;
border: 2.5px solid var(--km-border);
border-radius: 50%;
}
.km-tile:nth-child(-n + 2) .km-tile__img {
border-color: var(--wp--preset--color--mechta);
}
.km-tile:hover .km-tile__img {
transform: none;
}
.km-tiles .km-tile > .km-tile__media,
.km-tiles .km-tile > .km-tile__media > a,
.km-tiles .km-tile > .km-tile__media > div,
.km-tiles .km-tile > .km-tile__text {
position: static;
}
.km-tiles .km-tile .km-tile__media img {
box-sizing: border-box;
width: 72px;
height: 72px;
padding: 3px;
border: 2.5px solid var(--km-border);
border-radius: 50%;
}
.km-tile:nth-child(-n + 2) .km-tile__media img {
border-color: var(--wp--preset--color--mechta);
}
.km-tile:hover .km-tile__media img {
transform: none;
}
.km-tile--lg::after,
.km-tiles .km-tile > .km-tile__media::after {
display: none;
}
.km-tiles .km-tile:not(.km-tile--promo) > .km-tile__text {
max-height: none;
pointer-events: auto;
}
.km-tiles .km-tile:not(.km-tile--promo) :is(.km-tile__title, .km-tile__sub) {
text-shadow: none;
}
.km-tile__text,
.km-tile--lg .km-tile__text,
.km-tile--wide .km-tile__text {
position: static;
padding: 0;
background: none;
}
.km-tile__title,
.km-tile--lg .km-tile__title,
.km-tile--wide .km-tile__title {
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1.25;
}
.km-tile__sub,
.km-tile__arrow,
.km-tile--promo {
display: none;
} .km-tiers--chips {
flex-direction: column;
gap: 6px;
margin-top: 16px;
}
.km-tiers--chips .km-tier,
.km-tiers--chips .km-tier.is-retail {
display: flex;
justify-content: space-between;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
font-weight: 400;
}
.km-tiers--chips .km-tier__min {
display: none;
}
.km-tiers--chips .km-tier__range {
display: inline;
}
.km-tiers--chips .km-tier__off {
font-weight: 700;
}
.km-tiers--chips .is-retail .km-tier__off {
color: var(--wp--preset--color--espresso);
}
.km-chart {
display: none;
} .km-row__head {
flex-wrap: nowrap;
align-items: baseline;
}
.km-row .km-row__eyebrow {
color: var(--wp--preset--color--espresso);
font-family: var(--wp--preset--font-family--unbounded);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
text-transform: none;
}
.km-row .km-row__heading {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.km-row__nav {
display: none !important;
}
.km-row__all {
display: inline;
color: var(--wp--preset--color--mechta-cta);
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.km-row__track {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-columns: auto;
grid-auto-flow: row;
gap: 10px;
margin: 14px 0 0;
padding: 0;
overflow: visible;
}
.km-row__item:nth-child(n + 5) {
display: none;
}
.km-card--home {
padding: 6px;
border-radius: 22px;
}
.km-card--home .km-card__media {
border-radius: 16px;
}
.km-card--home .km-card__badge,
.km-card--home .km-card__from {
display: none;
}
.km-card--home .km-card__body {
gap: 3px;
padding: 10px 6px 6px;
}
.km-card--home .km-card__meta {
font-size: 11px;
}
.km-card--home .km-card__title {
font-family: inherit;
font-size: 14px;
font-weight: 700;
}
.km-card--home .km-card__foot {
padding-top: 8px;
}
.km-card--home .km-card__amount {
font-size: clamp(13px, 3.9vw, 15px); white-space: nowrap;
}
.km-card--home .km-round-add {
width: 36px;
height: 36px;
}
.km-card--home .km-round-add .km-icon {
width: 18px;
height: 18px;
} .km-filters {
margin-top: 28px;
}
.km-filters__cats {
width: calc(100% + 2 * var(--km-pad));
margin: 0 calc(-1 * var(--km-pad));
}
.km-chips {
flex-wrap: nowrap;
padding: 0 var(--km-pad) 4px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.km-chips::-webkit-scrollbar {
display: none;
}
.km-grid {
gap: 14px;
}
.km-promo {
min-height: 300px;
} .km-ptop {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--crema);
}
.wp-site-blocks > .km-ptop {
margin-block-start: 0;
}
.km-ptop__back,
.km-ptop__cart {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
text-decoration: none;
}
.km-ptop__back {
border: 1px solid var(--km-border);
color: var(--wp--preset--color--espresso);
}
.km-ptop__cart {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-ptop__label {
overflow: hidden;
color: var(--wp--preset--color--muted);
font-size: 14px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.km-ptop__badge {
position: absolute;
top: -4px;
right: -4px;
display: grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--mechta);
color: #fff;
font-size: 11px;
font-weight: 700;
}
.km-gallery__stage {
border-radius: var(--wp--custom--radius--lg);
}
.km-gallery__thumbs,
.km-gallery__ring {
display: none;
}
.km-gallery__dots {
display: flex;
}
.km-gallery__badge {
top: 14px;
left: 14px;
padding: 6px 12px;
font-size: 12px;
} .km-buy {
gap: 16px;
}
.km-buy__chips li:has(> a.km-pill),
.km-pill__note,
.km-buy__lead {
display: none;
}
.km-pill {
padding: 6px 12px;
font-size: 12px;
}
.km-buy .km-buy__name {
font-size: 28px;
line-height: 1.05;
}
.km-buy__subtitle {
margin-top: 6px !important;
font-size: 15px;
}
.km-specs {
order: 5;
gap: 8px;
margin-top: 6px;
}
.km-spec {
padding: 12px;
border-radius: 16px;
}
.km-spec__label {
font-size: 11px;
}
.km-spec__dots,
.km-spec__small {
display: none;
}
.km-spec__big {
font-family: inherit;
font-size: 14px;
}
.km-spec__value {
font-weight: 700;
}
.km-buy__box {
gap: 16px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.km-buy__price {
display: flex;
flex-direction: column-reverse;
}
.km-buy__amounts {
gap: 4px 10px;
margin: 0 !important;
}
.km-buy__per {
margin-top: 2px !important;
}
.km-buy__unit {
font-size: 32px;
}
.km-buy__retail {
font-size: 16px;
}
.km-buy__off {
padding: 4px 9px;
font-size: 12px;
}
.km-tierbtns {
display: flex;
gap: 8px;
margin: 10px calc(-1 * var(--km-pad)) 0;
padding: 0 var(--km-pad) 4px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.km-tierbtns::-webkit-scrollbar {
display: none;
}
.km-tierbtns li {
flex: 0 0 104px;
}
.km-tierbtn {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
column-gap: 4px;
padding: 12px;
background: var(--wp--preset--color--paper);
}
.km-tierbtn[aria-pressed="true"] {
padding: 11px;
}
.km-tierbtn__label {
grid-area: 1 / 1;
font-weight: 400;
}
.km-tierbtn__off {
grid-area: 1 / 2;
margin: 0;
white-space: nowrap;
}
.km-tierbtn__price {
grid-area: 2 / 1 / 3 / 3;
}
.km-tierbtn:not(.is-retail) .km-tierbtn__unit,
.km-tierbtn.is-retail .km-tierbtn__off {
display: none;
}
.km-tierbtn:not(.is-retail) .km-tierbtn__off::before {
content: "· ";
}
.km-tierbtn[aria-pressed="true"] .km-tierbtn__off {
color: var(--wp--preset--color--caramel);
font-weight: 600;
}
.km-note {
font-size: 14px;
}
.km-note__more {
display: none;
} .km-js .km-buy__row {
display: none;
}
.km-js .km-sticky:not([hidden]) {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--wp--preset--color--line);
background: rgba(251, 248, 243, 0.96);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.km-sticky .km-sticky__add {
flex: 1;
min-height: 54px;
padding: 0 16px;
font-size: 15px;
} .km-tabs {
display: none;
}
.km-details__grid {
display: block;
margin-top: 0;
border-top: 1px solid var(--wp--preset--color--line);
}
.km-acc {
padding: 18px 0;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.km-acc__summary {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
font-weight: 700;
list-style: none;
cursor: pointer;
}
.km-acc__summary::-webkit-details-marker {
display: none;
}
.km-acc__summary .km-icon {
transition: transform 0.2s ease;
}
.km-acc[open] > .km-acc__summary .km-icon {
transform: rotate(180deg);
}
.km-acc__body {
margin-top: 12px;
}
.km-prose h2 {
font-size: 20px;
}
.km-prose p {
font-size: 15px;
line-height: 1.65;
}
.km-facts {
padding: 0;
border-radius: 0;
background: none;
color: var(--wp--preset--color--espresso);
}
.km-facts__title {
display: none;
}
.km-facts__list {
margin: 0;
}
.km-facts__list dt {
color: var(--wp--preset--color--muted);
}
.km-facts__list dt,
.km-facts__list dd {
border-color: var(--wp--preset--color--line);
}
.km-delivery {
padding: 0;
border: 0;
border-radius: 0;
background: none;
} .km-minis {
display: flex;
gap: 10px;
margin: 6px calc(-1 * var(--km-pad)) -8px;
padding: 8px var(--km-pad) 12px;
overflow-x: auto;
overflow-y: hidden; overscroll-behavior-x: contain;
scroll-padding-inline: var(--km-pad);
scrollbar-width: none;
}
.km-minis::-webkit-scrollbar {
display: none;
}
.km-minis > li {
flex: 0 0 150px;
}
.km-card--mini {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 6px;
border-radius: 20px;
}
.km-card--mini .km-card__media {
flex: none;
width: 100%;
height: auto;
border-radius: 14px;
}
.km-card--mini .km-card__body {
padding: 8px 4px 4px;
}
.km-card--mini .km-card__meta {
display: none;
}
.km-card--mini .km-card__title {
font-size: 13px;
}
.km-card--mini .km-card__amount {
font-size: 14px;
}
} :is(.km-shop, .km-product) > * {
margin-block-start: 0;
}
.km-shop.km-main,
.km-product.km-main {
padding-top: clamp(24px, 3vw, 40px);
}
.km-crumbs,
.km-crumbs .woocommerce-breadcrumb {
margin: 0;
color: var(--wp--preset--color--espresso);
font-size: 14px;
font-weight: 500;
}
.km-crumbs a {
color: var(--wp--preset--color--muted);
font-weight: 400;
text-decoration: none;
}
.km-crumbs a:hover {
color: var(--wp--preset--color--mechta-cta);
}
.km-shop__top > * {
margin-block-start: 0;
}
.km-intro {
gap: 24px 48px;
margin-top: 22px !important;
}
.km-intro .km-intro__title {
margin: 0;
font-size: clamp(38px, 5vw, 76px);
letter-spacing: -0.04em;
line-height: 1;
}
.km-intro .km-intro__title em {
letter-spacing: -0.02em;
}
.km-intro__lead,
.km-intro__lead p {
max-width: 440px;
margin: 0;
color: var(--km-ink);
font-size: 18px;
line-height: 1.55;
}
.km-shop .wc-block-store-notices {
margin-top: 20px;
}
.km-assure {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 16px;
margin-top: clamp(48px, 6vw, 72px) !important;
}
.km-assure .km-assure__item {
position: relative;
min-height: 100px;
margin: 0;
padding: 26px 26px 26px 90px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 24px;
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--muted);
font-size: 15px;
line-height: 1.5;
}
.km-assure__item strong {
display: block;
margin-bottom: 6px;
color: var(--wp--preset--color--espresso);
font-size: 17px;
font-weight: 600;
}
.km-assure__item br {
display: none;
}
.km-assure__item::before,
.km-assure__item::after {
content: "";
position: absolute;
}
.km-assure__item::before {
top: 26px;
left: 26px;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--km-sand);
}
.km-assure__item::after {
top: 38px;
left: 38px;
width: 24px;
height: 24px;
background: var(--wp--preset--color--roast);
-webkit-mask: var(--km-i) center / contain no-repeat;
mask: var(--km-i) center / contain no-repeat;
} .km-product__crumbs .wc-block-store-notices {
margin-top: 16px;
}
.km-product__top {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 40px;
margin-top: 24px !important;
}
.km-product__top > * {
margin-block-start: 0;
}
.km-product__top > .km-gallery {
flex: 1.1 1 520px;
}
.km-product__aside {
position: sticky;
top: calc(var(--km-admin-bar) + 104px);
display: flex;
flex: 1 1 440px;
flex-direction: column;
gap: 22px;
min-width: 0;
}
.km-product__aside > * {
margin-block-start: 0;
}
.km-ptrust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px;
margin: 0;
padding: 0;
font-size: 14px;
list-style: none;
}
.km-ptrust li {
display: flex;
align-items: center;
gap: 10px;
}
.km-ptrust li::before {
content: "";
flex-shrink: 0;
width: 20px;
height: 20px;
background: var(--wp--preset--color--roast);
-webkit-mask: var(--km-i) center / contain no-repeat;
mask: var(--km-i) center / contain no-repeat;
}
.km-ptrust a {
margin-left: 4px;
color: inherit;
white-space: nowrap;
}
.km-product .km-details {
margin-top: 64px !important;
}
.km-related {
margin-top: clamp(48px, 6vw, 88px) !important;
}
.km-related .km-related__title {
margin: 0;
font-size: clamp(26px, 2.6vw, 38px);
}
@media (max-width: 781.98px) {
.km-product.km-main {
padding-top: 14px;
}
.km-product .km-crumbs {
display: none;
}
.km-product__top {
gap: 20px;
margin-top: 0 !important;
}
.km-product__top > .km-gallery,
.km-product__aside {
flex-basis: 100%;
}
.km-product__aside {
position: static;
}
.km-ptrust {
display: none;
}
.km-product .km-details {
margin-top: 22px !important;
}
.km-related {
margin-top: 28px !important;
}
.km-related .km-related__title {
font-size: 20px;
}
.km-intro {
margin-top: 16px !important;
}
.km-intro__lead,
.km-intro__lead p {
font-size: 16px;
}
.km-assure__item {
padding: 20px 20px 20px 80px;
}
.km-assure__item::before {
top: 20px;
left: 20px;
}
.km-assure__item::after {
top: 32px;
left: 32px;
}
}@keyframes wc-skeleton-shimmer{to{transform:translateX(100%)}}.wc-block-components-notice-banner{align-content:flex-start;align-items:stretch;background-color:#fff;border:1px solid #2f2f2f;border-radius:4px;box-sizing:border-box;color:#2f2f2f;display:flex;font-size:.875em;font-weight:400;gap:12px;line-height:1.5;margin:16px 0;padding:16px!important}.wc-block-components-notice-banner>.wc-block-components-notice-banner__content{align-self:center;flex-basis:100%;padding-right:16px;white-space:normal}.wc-block-components-notice-banner>.wc-block-components-notice-banner__content:last-child{padding-right:0}.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary{font-weight:600;margin:0 0 8px}.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ol,.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ul{margin:0 0 0 24px;padding:0}.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ol li:after,.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ul li:after{clear:both;content:"";display:block}.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward{appearance:none;background:transparent!important;border:0;color:#2f2f2f!important;float:right;margin:0 0 0 20px;opacity:.7;padding:0!important;text-decoration-line:underline;text-underline-position:under;transition:all .2s ease-in-out}.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward:active,.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward:focus,.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward:hover{opacity:1;text-decoration:none}.wc-block-components-notice-banner>svg{fill:#fff;background-color:#2f2f2f;border-radius:50%;flex-grow:0;flex-shrink:0;height:100%;padding:2px}.wc-block-components-notice-banner>.wc-block-components-button{background:transparent none!important;border:0!important;box-shadow:none!important;color:#2f2f2f!important;flex:0 0 16px;height:16px!important;margin:6px 0 0 auto!important;min-height:auto!important;min-width:0!important;opacity:.6;outline:none!important;padding:0!important;width:16px!important}.wc-block-components-notice-banner>.wc-block-components-button>svg{margin:0!important}.wc-block-components-notice-banner>.wc-block-components-button:active,.wc-block-components-notice-banner>.wc-block-components-button:focus,.wc-block-components-notice-banner>.wc-block-components-button:hover{opacity:1}.wc-block-components-notice-banner>.wc-block-components-button:focus{outline:2px solid currentColor!important;outline-offset:0}.wc-block-components-notice-banner.is-error{background-color:#fff0f0;border-color:#cc1818}.wc-block-components-notice-banner.is-error>svg{background-color:#cc1818;transform:rotate(180deg)}.wc-block-components-notice-banner.is-warning{background-color:#fffbf4;border-color:#f0b849}.wc-block-components-notice-banner.is-warning>svg{background-color:#f0b849;transform:rotate(180deg)}.wc-block-components-notice-banner.is-success{background-color:#f4fff7;border-color:#4ab866}.wc-block-components-notice-banner.is-success>svg{background-color:#4ab866}.wc-block-components-notice-banner.is-info{background-color:#f4f8ff;border-color:#007cba}.wc-block-components-notice-banner.is-info>svg{background-color:#007cba}.wc-block-components-notice-banner:focus{outline-width:0}.wc-block-components-notice-banner:focus-visible{outline-style:solid;outline-width:2px}.woocommerce.wc-block-store-notices.alignwide{max-width:var(--wp--style--global--wide-size)}
@keyframes wc-skeleton-shimmer{to{transform:translateX(100%)}}.wc-block-components-button:not(.is-link){align-items:center;display:inline-flex;height:auto;justify-content:center;position:relative;text-align:center;transition:box-shadow .1s linear}.wc-block-components-button:not(.is-link):focus{box-shadow:0 0 0 2px #0675c4;box-shadow:inset 0 0 0 1px #fff,0 0 0 2px #0675c4;outline:3px solid transparent}.wc-block-components-button:not(.is-link) .wc-block-components-button__text{text-wrap:balance;text-wrap:pretty;display:block}.wc-block-components-button:not(.is-link) .wc-block-components-button__text>svg{fill:currentColor}.wc-block-components-button:not(.is-link).text{color:#1e1e1e}.wc-block-components-button:not(.is-link).text:hover{opacity:.9}.wc-block-components-button:not(.is-link):disabled .wc-block-components-button__text{opacity:.5}.wc-block-components-button:not(.is-link).is-style-outline,.wc-block-components-button:not(.is-link).outlined{background:transparent;color:currentColor}.wc-block-components-button:not(.is-link).is-style-outline:not(:focus),.wc-block-components-button:not(.is-link).outlined:not(:focus){box-shadow:inset 0 0 0 1px currentColor}.wc-block-components-button:not(.is-link).is-style-outline:active,.wc-block-components-button:not(.is-link).is-style-outline:disabled,.wc-block-components-button:not(.is-link).is-style-outline:focus,.wc-block-components-button:not(.is-link).is-style-outline:hover,.wc-block-components-button:not(.is-link).outlined:active,.wc-block-components-button:not(.is-link).outlined:disabled,.wc-block-components-button:not(.is-link).outlined:focus,.wc-block-components-button:not(.is-link).outlined:hover{background-color:#1e1e1e;color:#fff}.wc-block-components-button:not(.is-link).is-style-outline:hover,.wc-block-components-button:not(.is-link).outlined:hover{background-color:#1e1e1e;color:#fff;opacity:1}body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link){min-height:3em}body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus{box-shadow:0 0 0 2px #0675c4;box-shadow:inset 0 0 0 1px #fff,0 0 0 2px #0675c4;outline:3px solid transparent}body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link).text{color:#1e1e1e}body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link).text:hover{opacity:.9}
@keyframes wc-skeleton-shimmer{to{transform:translateX(100%)}}.wc-block-store-notices:has(>.woocommerce-notices-wrapper:only-child:empty){margin-block-end:0;margin-block-start:0}