.km-home > * {
margin-block-start: 0;
} .km-home > :not(.km-hero) {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
.km-home :is(.km-hero, .km-section, .km-bento, .km-wholesale__box, .km-machines, .km-quality__grid, .km-b2b) > * {
margin-block-start: 0;
} .km-hero {
padding-top: 56px;
}
.km-hero__pill {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 8px 16px 8px 10px;
border: 1px solid #d6c7b4;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--paper);
color: #4a3b30;
font-size: 14px;
line-height: 1.3;
}
.km-hero__pill::before {
content: "";
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: radial-gradient(circle, var(--wp--preset--color--paper) 0 4px, var(--wp--preset--color--mechta) 4.5px);
}
.km-hero .km-hero__title {
margin-top: 28px;
font-size: var(--wp--preset--font-size--heading-1);
letter-spacing: -0.04em;
line-height: 0.98;
}
.km-hero__title em {
font-size: 1.32em;
letter-spacing: -0.02em;
}
.km-hero__row {
gap: 24px 40px;
margin-top: 32px !important;
}
.km-hero__lead {
max-width: 600px;
margin: 0;
color: #4a3b30;
font-size: 19px;
line-height: 1.55;
}
.km-hero__buttons {
gap: 12px;
}
.km-hero__buttons .is-style-outline .wp-block-button__link {
padding: 0 26px;
}
.km-bento {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 44px !important;
}
.km-bento__main {
flex: 2 1 560px;
}
.km-photo-card {
position: relative;
display: flex;
flex: 1 1 280px;
flex-direction: column;
justify-content: flex-end;
min-height: 540px;
padding: 28px;
overflow: hidden;
border-radius: 32px;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-photo-card .km-photo-card__img {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
}
.km-photo-card .km-photo-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.km-photo-card:hover .km-photo-card .km-photo-card__img img {
transform: scale(1.03);
}
.km-photo-card::before {
content: "";
position: absolute;
inset: 40% 0 0;
z-index: 1;
background: linear-gradient(to top, rgba(20, 11, 6, 0.92), rgba(20, 11, 6, 0));
}
.km-photo-card::after {
content: "";
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
width: 46px;
height: 46px;
border: 1px solid rgba(251, 248, 243, 0.35);
border-radius: 50%;
background: rgba(251, 248, 243, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EEE6' 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;
}
.km-photo-card > p {
position: relative;
z-index: 2;
margin: 0;
}
.km-photo-card .km-photo-card__title {
margin-top: 10px;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 19px;
font-weight: 600;
line-height: 1.25;
}
.km-bento__stats {
display: flex;
flex: 1 1 280px;
flex-direction: column;
gap: 16px;
}
.km-stat {
position: relative;
display: flex;
flex: 1 1 260px;
flex-direction: column;
margin: 0 !important;
padding: 30px;
border-radius: 32px;
}
.km-stat > p {
margin: 0;
}
.km-stat .km-stat__num {
margin-top: auto;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 34px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
}
.km-stat .km-stat__text {
margin-top: 10px;
font-size: 16px;
line-height: 1.45;
}
.km-stat--dark {
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-stat--dark .km-stat__text {
color: #cdbfae;
}
.km-stat--cup::before {
content: "";
width: 36px;
height: 36px;
margin-bottom: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2A06A' 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") center / contain no-repeat;
}
.km-stat--orange {
background: var(--wp--preset--color--mechta);
color: #fff;
transition: background-color 0.15s ease;
}
.km-stat--orange:hover {
background: #b34d28;
}
.km-stat--orange::after {
content: "";
position: absolute;
top: 30px;
right: 30px;
width: 26px;
height: 26px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' 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-stat--orange .km-stat__eyebrow {
margin-bottom: 18px;
color: #fff;
letter-spacing: 0.12em;
}
.km-stat--orange .km-stat__num {
font-size: 52px;
letter-spacing: -0.04em;
}
.km-stat--orange .km-stat__text {
color: #fff;
}
.km-stat--latte {
background: var(--wp--preset--color--latte);
}
.km-stat--latte .km-stat__num {
color: var(--wp--preset--color--roast);
}
.km-stat--paper {
border: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--paper);
}
:is(.km-stat--latte, .km-stat--paper) .km-stat__text {
color: #4a3b30;
}
.km-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1px;
margin-top: 16px !important;
overflow: hidden;
border: 1px solid #ddd0bf;
border-radius: 24px;
background: #e6dbcd;
}
.km-trust__item {
position: relative;
margin: 0 !important;
padding: 20px 24px 20px 82px;
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--muted);
font-size: 14px;
line-height: 1.4;
}
.km-trust__item strong {
display: block;
color: var(--wp--preset--color--espresso);
font-size: 17px;
font-weight: 600;
}
.km-trust__item br {
display: none;
}
.km-trust__item::before,
.km-trust__item::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.km-trust__item::before {
left: 24px;
width: 44px;
height: 44px;
border-radius: 14px;
background: #f1e7da;
}
.km-trust__item::after {
left: 35px;
width: 22px;
height: 22px;
background: var(--wp--preset--color--roast);
-webkit-mask: var(--km-i) center / contain no-repeat;
mask: var(--km-i) center / contain no-repeat;
} .km-cats {
padding: 56px 0 40px;
}
.km-wholesale {
padding: 40px 0;
}
.km-products {
padding: 56px 0;
}
.km-quality {
padding: 96px 0 56px;
}
.km-b2b-wrap {
padding: 40px 0 96px;
}
.km-head {
gap: 16px 24px;
}
.km-head__titles > * {
margin: 0;
}
.km-head .km-head__title,
.km-quality__head .km-head__title {
margin-top: 12px;
}
.km-head__actions .wp-block-button__link {
min-height: 50px;
padding: 0 22px;
}
.km-cats > .km-tiles {
margin-top: 36px;
} .km-wholesale__box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 48px;
padding: clamp(28px, 4vw, 64px);
border-radius: var(--wp--custom--radius--xl);
background: var(--wp--preset--color--latte);
}
.km-wholesale__text {
flex: 1 1 420px;
}
.km-wholesale__text > * {
margin: 0;
}
.km-wholesale .km-wholesale__title {
margin-top: 14px;
font-size: clamp(30px, 3.2vw, 46px);
line-height: 1.08;
}
.km-wholesale .km-wholesale__lead {
max-width: 520px;
margin-top: 20px;
color: #4a3b30;
font-size: 18px;
line-height: 1.6;
}
.km-wholesale__text > .km-tiers {
margin-top: 28px;
}
.km-wholesale .km-chart {
flex: 1 1 520px;
} .km-machines-wrap {
padding: 0 16px;
}
.km-machines {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 48px;
max-width: 1408px;
margin: 0 auto;
padding: clamp(28px, 4.5vw, 72px);
border-radius: 48px;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-machines__text {
flex: 1 1 400px;
}
.km-machines__text > * {
margin: 0;
}
.km-machines .km-machines__title {
margin-top: 14px;
color: var(--wp--preset--color--crema);
font-size: clamp(30px, 3.4vw, 50px);
line-height: 1.06;
}
.km-machines__title em {
color: var(--wp--preset--color--caramel);
}
.km-machines .km-machines__lead {
max-width: 500px;
margin-top: 20px;
color: #cdbfae;
font-size: 18px;
line-height: 1.6;
}
.km-machines .km-machines__list {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 520px;
margin-top: 28px;
padding: 0;
list-style: none;
}
.km-machines__list li {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 0 16px 32px;
border-bottom: 1px solid #3a2a1f;
}
.km-machines__list li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2A06A' 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") center / contain no-repeat;
transform: translateY(-50%);
}
.km-rating {
background: none;
color: var(--wp--preset--color--caramel);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.km-machines .km-machines__buttons {
margin-top: 32px;
}
.km-machines__map {
position: relative;
container-type: inline-size;
flex: 1.2 1 480px;
align-self: stretch;
min-height: 460px;
overflow: hidden;
border-radius: 32px;
background: #2a1b12;
}
.km-machines__map .km-machines__img {
position: absolute;
inset: 0;
margin: 0;
}
.km-machines .km-machines__img img {
width: 100%;
height: 100%;
object-fit: cover; object-position: 23.4% 31.25%;
}
.km-machines__card {
position: absolute;
top: 31.25%;
left: calc(23.4% + 26px);
z-index: 1;
min-width: 220px;
max-width: calc(76.6% - 42px);
padding: 14px 16px;
border-radius: 18px;
background: var(--wp--preset--color--paper);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
color: var(--wp--preset--color--espresso);
transform: translateY(-50%);
} @container (max-width: 460px) {
.km-machines__card {
top: auto;
right: 14px;
bottom: 14px;
left: 14px;
min-width: 0;
max-width: none;
transform: none;
}
.km-machines__chips {
display: none;
}
}
.km-machines__card p {
margin: 0;
} .km-near {
width: max-content;
max-width: min(320px, calc(76.6% - 42px));
}
.km-near__body {
outline: none;
}
.km-near__btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 9px 16px;
border: 0;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--mechta);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.km-near__btn:hover,
.km-near__btn:focus-visible {
background: var(--wp--preset--color--mechta-cta);
color: #fff;
}
.km-near__btn[disabled] {
opacity: 0.75;
cursor: progress;
}
.km-near__btn[hidden] {
display: none;
}
.km-near__btn .km-icon {
width: 16px;
height: 16px;
}
.km-near__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
margin-top: 8px !important;
font-size: 13px;
}
.km-near__rating {
font-weight: 600;
}
.km-near__route {
color: var(--wp--preset--color--mechta-cta);
font-weight: 600;
text-decoration: none;
}
.km-near__route:hover {
text-decoration: underline;
}
.km-machines__card-eyebrow {
color: var(--wp--preset--color--mechta-cta);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.km-machines__card .km-machines__card-title {
margin-top: 4px;
font-weight: 600;
}
.km-machines__card .km-machines__card-text {
margin-top: 2px;
color: var(--wp--preset--color--muted);
font-size: 13px;
}
.km-machines__chips {
position: absolute;
right: 18px;
bottom: 18px;
gap: 8px;
}
.km-machines__chip {
margin: 0;
padding: 8px 14px;
border: 1px solid rgba(251, 248, 243, 0.25);
border-radius: var(--wp--custom--radius--pill);
background: rgba(251, 248, 243, 0.12);
color: var(--wp--preset--color--crema);
font-size: 13px;
}
.km-machines__chip.is-accent {
border-color: var(--wp--preset--color--mechta);
background: var(--wp--preset--color--mechta);
color: #fff;
font-weight: 600;
} .km-quality__head {
max-width: 820px;
}
.km-quality__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 40px !important;
}
.km-q {
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
padding: 32px;
border-radius: 32px;
}
.km-q > *,
.km-q__text > * {
margin: 0;
}
.km-q .km-q__title {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.km-q .km-q__body {
margin-top: 10px;
color: #4a3b30;
font-size: 16px;
line-height: 1.55;
}
.km-q__num {
margin-bottom: 20px !important;
font-family: var(--wp--preset--font-family--unbounded);
font-size: 64px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
}
.km-q__num + .km-q__title {
margin-top: auto;
}
.km-q__text {
position: relative;
display: flex;
flex: 1 1 260px;
flex-direction: column;
justify-content: flex-end;
padding-top: 72px;
}
.km-q__text::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--wp--preset--color--espresso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2A06A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.km-q__text--leaf::before {
background: #dce8d5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' 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") center / 26px no-repeat;
}
.km-q--telemetry,
.km-q--eco {
grid-column: span 2;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--paper);
}
.km-q--telemetry {
gap: 28px;
min-height: 320px;
}
.km-q--telemetry .km-q__title {
font-size: 24px;
}
.km-telemetry {
display: flex;
flex: 1 1 260px;
flex-direction: column;
gap: 14px;
padding: 22px;
border-radius: 22px;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-telemetry p {
margin: 0;
color: #cdbfae;
font-size: 13px;
}
.km-telemetry__head {
display: flex;
justify-content: space-between;
gap: 12px;
}
.km-telemetry__online {
color: #8fd19e;
}
.km-telemetry__bars {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.km-telemetry__bars li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 14px;
}
.km-telemetry__bars li::after {
content: "";
flex-basis: 100%;
height: 8px;
margin-top: 6px;
border-radius: var(--wp--custom--radius--pill);
background: linear-gradient(var(--wp--preset--color--caramel), var(--wp--preset--color--caramel)) 0 0 / var(--v) 100% no-repeat, #3a2a1f;
}
.km-telemetry__bars li.is-low::after {
background: linear-gradient(var(--wp--preset--color--mechta), var(--wp--preset--color--mechta)) 0 0 / var(--v) 100% no-repeat, #3a2a1f;
}
.km-q--blend {
min-height: 320px;
background: var(--wp--preset--color--roast);
color: var(--wp--preset--color--crema);
}
.km-q--blend .km-q__title {
color: var(--wp--preset--color--crema);
}
.km-q--blend .km-q__body {
color: #ebdccb;
}
.km-q--milk {
background: var(--wp--preset--color--latte);
}
.km-q--milk .km-q__num {
color: var(--wp--preset--color--roast);
}
.km-q--eco {
padding: 0;
overflow: hidden;
}
.km-q--eco .km-q__text {
padding: 104px 32px 32px;
}
.km-q--eco .km-q__text::before {
top: 32px;
left: 32px;
}
.km-q--eco .km-q__title {
font-size: 22px;
}
.km-q--eco .km-q__img {
position: relative;
flex: 1 1 280px;
min-height: 260px;
margin: 0;
}
.km-q .km-q__img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
} .km-b2b {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: clamp(32px, 5vw, 80px);
overflow: hidden;
border-radius: 48px;
background: var(--wp--preset--color--mechta);
color: #fff;
}
.km-b2b::after {
content: "мечта";
position: absolute;
right: -40px;
bottom: -90px;
color: #cf6a42;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 340px;
font-style: italic;
font-weight: 600;
line-height: 1;
pointer-events: none;
}
.km-b2b > * {
position: relative;
z-index: 1;
}
.km-b2b__text {
flex: 1 1 520px;
}
.km-b2b__text > * {
margin: 0;
}
.km-b2b .km-b2b__title {
color: #fff;
font-size: clamp(30px, 3.4vw, 50px);
line-height: 1.08;
}
.km-b2b .km-b2b__lead {
max-width: 560px;
margin-top: 18px;
color: #fff;
font-size: 19px;
line-height: 1.55;
}
.km-b2b__buttons {
gap: 12px;
}
.km-b2b__buttons .wp-block-button__link {
min-height: 60px;
} @media (max-width: 1079.98px) {
.km-quality__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} @media (max-width: 781.98px) {
.km-home h2 {
font-size: 22px;
line-height: 1.12;
}
.km-home h2 br {
display: none;
}
.km-hero {
padding-top: 24px;
}
.km-hero__pill {
gap: 8px;
padding: 6px 12px 6px 6px;
font-size: 12px;
}
.km-hero__pill::before {
width: 18px;
height: 18px;
background: radial-gradient(circle, var(--wp--preset--color--paper) 0 3px, var(--wp--preset--color--mechta) 3.5px);
}
.km-hero .km-hero__title {
margin-top: 18px;
font-size: 34px;
line-height: 1.02;
}
.km-hero__title em {
font-size: 1.34em;
}
.km-hero__title br {
display: none;
}
.km-hero__row {
flex-direction: column;
align-items: stretch !important;
gap: 20px;
margin-top: 16px !important;
}
.km-hero__lead {
font-size: 16px;
}
.km-hero__buttons {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.km-hero__buttons .wp-block-button,
.km-hero__buttons .wp-block-button__link,
.km-b2b__buttons .wp-block-button,
.km-b2b__buttons .wp-block-button__link,
.km-machines__buttons .wp-block-button,
.km-machines__buttons .wp-block-button__link {
width: 100%;
}
.wp-block-button.km-btn-lg > .wp-block-button__link {
min-height: 54px;
font-size: 16px;
}
.km-bento {
gap: 16px;
margin-top: 20px !important;
}
.km-bento__main {
flex-basis: 100%;
}
.km-photo-card,
.km-trust,
.km-stat--cup::before,
.km-stat--orange::after,
.km-stat--orange .km-stat__eyebrow {
display: none;
}
.km-bento__stats {
display: grid;
flex-basis: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.km-stat {
padding: 16px;
border-radius: 20px;
}
.km-stat .km-stat__num,
.km-stat--orange .km-stat__num {
margin: 0;
font-size: 22px;
letter-spacing: -0.04em;
}
.km-stat--cup .km-stat__num {
font-size: 18px;
}
.km-stat .km-stat__text {
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
}
.km-cats {
padding: 36px 0 0;
}
.km-cats .km-eyebrow,
.km-cats .km-head__actions,
.km-wholesale__lead {
display: none;
}
.km-head .km-head__title {
margin-top: 0;
}
.km-cats > .km-tiles {
margin-top: 16px;
}
.km-wholesale__text > .km-tiers {
margin-top: 16px;
}
.km-wholesale {
padding: 28px 0 0;
}
.km-wholesale__box {
padding: 22px;
border-radius: var(--wp--custom--radius--lg);
}
.km-wholesale .km-eyebrow {
font-size: 12px;
letter-spacing: 0.12em;
}
.km-wholesale .km-wholesale__title {
margin-top: 10px;
font-size: 22px;
}
.km-products {
padding: 36px 0 0;
}
.km-machines-wrap {
padding: 36px 16px 0;
}
.km-machines {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
border-radius: var(--wp--custom--radius--lg);
}
.km-machines__map {
flex: none;
order: -1;
min-height: 0;
border-radius: 0;
} .km-machines__map .km-machines__img {
position: relative;
height: 200px;
}
.km-machines__map .km-machines__card {
position: static;
width: auto;
max-width: none;
margin: 0;
padding: 16px 20px;
border-radius: 0;
box-shadow: none;
transform: none;
}
.km-machines__chips,
.km-machines .km-machines__list,
.km-machines .km-eyebrow {
display: none;
}
.km-machines__text {
flex: none;
padding: 20px;
}
.km-machines .km-machines__title {
margin-top: 0;
font-size: 21px;
line-height: 1.15;
}
.km-machines .km-machines__lead {
margin-top: 10px;
font-size: 14px;
line-height: 1.55;
}
.km-machines .km-machines__buttons {
margin-top: 16px;
}
.km-machines__buttons .wp-block-button__link {
min-height: 50px;
font-size: 15px;
}
.km-quality {
padding: 36px 0 0;
}
.km-quality__head .km-head__title {
margin-top: 0;
}
.km-quality__grid {
display: flex;
gap: 10px;
margin: 16px calc(-1 * var(--wp--style--root--padding-left, 16px)) 0 !important;
padding: 0 var(--wp--style--root--padding-left, 16px) 6px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.km-quality__grid::-webkit-scrollbar {
display: none;
}
.km-q,
.km-q--telemetry,
.km-q--eco {
flex: 0 0 280px;
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
min-height: 220px;
padding: 20px;
border-radius: 24px;
}
.km-q--blend {
order: 1;
}
.km-q--milk {
order: 2;
}
.km-q--telemetry {
order: 3;
border: 0;
background: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--crema);
}
.km-q--eco {
order: 4;
}
.km-telemetry,
.km-q--eco .km-q__img {
display: none;
}
.km-q__text,
.km-q--eco .km-q__text {
flex: 1;
justify-content: space-between;
padding: 0;
}
.km-q__text::before,
.km-q--eco .km-q__text::before {
position: static;
width: 30px;
height: 30px;
border-radius: 0;
background-color: transparent;
background-size: 30px;
}
.km-q__num {
margin-bottom: 12px !important;
font-size: 44px;
}
.km-q .km-q__title,
.km-q--telemetry .km-q__title,
.km-q--eco .km-q__title {
font-family: inherit;
font-size: 16px;
font-weight: 700;
}
.km-q--telemetry .km-q__title {
color: var(--wp--preset--color--crema);
}
.km-q .km-q__body {
margin-top: 6px;
font-size: 13px;
line-height: 1.5;
}
.km-q--telemetry .km-q__body {
color: #cdbfae;
}
.km-b2b-wrap {
padding: 36px 0 0;
}
.km-b2b {
gap: 18px;
padding: 24px;
border-radius: var(--wp--custom--radius--lg);
}
.km-b2b::after {
display: none;
}
.km-b2b .km-b2b__lead {
margin-top: 10px;
font-size: 15px;
line-height: 1.5;
}
.km-b2b__buttons {
width: 100%;
}
.km-b2b__buttons .wp-block-button__link {
min-height: 52px;
}
}html body :is(.cky-consent-container, .cky-modal) {
--km-ck-ink: var(--wp--preset--color--espresso, #1e120b);
--km-ck-text: #4a3b30;
--km-ck-muted: var(--wp--preset--color--muted, #6e5f52);
--km-ck-faint: #8a7a6c;
--km-ck-paper: var(--wp--preset--color--paper, #fbf8f3);
--km-ck-line: var(--wp--preset--color--line, #e3d8ca);
--km-ck-accent: var(--wp--preset--color--mechta, #c1552e);
--km-ck-link: var(--wp--preset--color--mechta-cta, #b84a1a);
font-family: var(--wp--preset--font-family--onest, Onest, system-ui, sans-serif);
color: var(--km-ck-ink);
-webkit-font-smoothing: antialiased;
} html body :is(.cky-consent-container, .cky-modal) .km-ck-accent {
font-family: var(--wp--preset--font-family--cormorant-garamond, "Cormorant Garamond", Georgia, serif);
font-size: 1.2em;
font-style: italic;
font-weight: 600;
letter-spacing: 0;
color: #ba522d; } html body :is(.cky-consent-container .cky-notice-btn-wrapper, .cky-modal .cky-prefrence-btn-wrapper) .cky-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100% !important;
max-width: none !important;
min-height: 48px;
margin: 0 !important;
padding: 10px 14px !important;
border: 1.5px solid var(--km-ck-ink) !important;
border-radius: 999px !important;
background: var(--km-ck-ink) !important;
font-family: inherit;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: var(--wp--preset--color--crema, #f4eee6) !important;
white-space: nowrap;
text-transform: none;
opacity: 1 !important;
box-shadow: none !important;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
html body :is(.cky-consent-container .cky-notice-btn-wrapper, .cky-modal .cky-prefrence-btn-wrapper) .cky-btn:hover {
background: #3a2d24 !important;
}
html body :is(.cky-consent-container, .cky-modal) :is(.cky-btn, .cky-btn-close, a, input):focus-visible {
outline: 2px solid var(--km-ck-link) !important;
outline-offset: 3px;
} html body .cky-consent-container:focus-visible {
outline: none !important;
}
html body .cky-consent-container:focus-visible .cky-consent-bar {
outline: 2px solid var(--km-ck-link);
outline-offset: 3px;
} html body .cky-consent-container {
top: auto !important;
right: auto !important;
bottom: calc(32px + var(--km-dock, 0px)) !important;
left: 32px !important;
width: 420px !important;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 48px - var(--km-dock, 0px));
overflow-y: auto;
border-radius: 26px;
transform: none;
}
html body .cky-consent-container .cky-consent-bar {
padding: 24px !important;
border: 1px solid var(--km-ck-line) !important;
border-radius: 26px;
background: var(--km-ck-paper) !important;
box-shadow: 0 24px 60px rgba(30, 18, 11, 0.22) !important;
}
html body .cky-consent-container .cky-banner-btn-close {
display: none !important; }
html body .cky-consent-container :is(.cky-notice .cky-title, .cky-notice-des, .cky-notice-btn-wrapper) {
padding: 0 !important;
}
html body .cky-consent-container .cky-notice .cky-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 !important;
font-family: var(--wp--preset--font-family--unbounded, Unbounded, sans-serif);
font-size: 18px !important;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--km-ck-ink) !important;
} html body .cky-consent-container .cky-notice .cky-title::before {
content: "";
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--km-ck-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F4EEE6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.6A8.5 8.5 0 1 1 11.4 3.5a3 3 0 0 0 4 4 3 3 0 0 0 5.1 5.1z'/%3E%3Ccircle cx='9' cy='10' r='0.9'/%3E%3Ccircle cx='14' cy='15' r='0.9'/%3E%3Ccircle cx='8.5' cy='15.5' r='0.9'/%3E%3C/svg%3E") center / 20px no-repeat;
}
html body .cky-consent-container .cky-notice-group {
display: block !important;
}
html body .cky-consent-container .cky-notice-des,
html body .cky-consent-container .cky-notice-des :is(p, span) {
margin: 0;
font-size: 14.5px !important;
line-height: 1.55 !important;
color: var(--km-ck-text) !important;
}
html body .cky-consent-container .cky-notice-des {
margin-top: 14px;
max-height: none;
} html body .cky-consent-container .km-ck-short {
display: none;
}
html body .cky-consent-container .cky-notice-des a.cky-policy {
padding: 0 !important;
border: 0 !important;
background: none !important;
font-size: inherit !important;
font-weight: 600;
color: var(--km-ck-link) !important;
text-decoration: underline;
text-underline-offset: 3px;
}
html body .cky-consent-container .cky-notice-btn-wrapper {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 18px 0 0 !important;
}
html body .cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject {
order: 1 !important;
}
html body .cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
order: 2 !important;
} html body .cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
order: 3 !important;
grid-column: 1 / -1;
min-height: 44px;
margin-top: 2px !important;
border-color: transparent !important;
background: transparent !important;
font-size: 14.5px !important;
color: var(--km-ck-ink) !important;
}
html body .cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize:hover {
background: transparent !important;
text-decoration: underline;
text-underline-offset: 3px;
} @media (max-width: 600px) {
html body .cky-consent-container {
right: 10px !important;
bottom: calc(10px + var(--km-dock, 0px)) !important;
left: 10px !important;
width: auto !important;
max-width: none;
max-height: calc(100vh - 20px - var(--km-dock, 0px));
border-radius: 24px;
}
html body .cky-consent-container .cky-consent-bar {
padding: 16px 18px 6px !important;
border-radius: 24px;
box-shadow: 0 -10px 40px rgba(30, 18, 11, 0.2) !important;
}
html body .cky-consent-container .cky-notice .cky-title {
font-size: 16px !important;
}
html body .cky-consent-container .cky-notice .cky-title::before {
display: none;
}
html body .cky-consent-container .cky-notice-des {
margin-top: 6px;
}
html body .cky-consent-container .cky-notice-des,
html body .cky-consent-container .cky-notice-des :is(p, span) {
font-size: 13.5px !important;
line-height: 1.5 !important;
}
html body .cky-consent-container .km-ck-short {
display: inline;
}
html body .cky-consent-container .km-ck-long {
display: none;
}
html body .cky-consent-container .cky-notice-btn-wrapper {
gap: 4px 8px;
margin-top: 12px !important;
}
html body .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
min-height: 44px;
}
html body .cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
min-height: 44px;
margin-top: 0 !important;
font-size: 14px !important;
}
} @media (max-height: 500px) and (min-width: 601px) {
html body .cky-consent-container {
bottom: calc(12px + var(--km-dock, 0px)) !important;
left: 12px !important;
max-height: calc(100vh - 24px - var(--km-dock, 0px));
}
html body .cky-consent-container .cky-consent-bar {
padding: 16px 18px 8px !important;
}
html body .cky-consent-container .cky-notice .cky-title::before {
width: 32px;
height: 32px;
background-size: 16px;
}
html body .cky-consent-container .cky-notice-des {
margin-top: 8px;
}
html body .cky-consent-container .cky-notice-btn-wrapper {
margin-top: 12px !important;
}
html body .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
min-height: 44px;
}
} html body .cky-btn-revisit-wrapper {
display: none !important;
} html body .cky-overlay {
background: rgba(30, 18, 11, 0.55) !important;
opacity: 1 !important;
}
html body .cky-modal {
width: 560px;
max-width: calc(100vw - 20px) !important;
border-radius: 28px !important;
background: var(--km-ck-paper) !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important;
}
html body .cky-modal .cky-preference-center {
box-sizing: border-box;
width: 100% !important;
max-height: calc(100vh - 40px) !important;
padding: 30px;
border: 0 !important;
border-radius: 28px;
background: var(--km-ck-paper) !important;
color: var(--km-ck-ink) !important;
}
html body .cky-modal .cky-preference-header {
align-items: flex-start;
gap: 16px;
padding: 0 !important;
border: 0 !important;
}
html body .cky-modal .cky-preference-header .cky-preference-title {
font-family: var(--wp--preset--font-family--unbounded, Unbounded, sans-serif);
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.03em;
color: var(--km-ck-ink) !important;
} html body .cky-modal .cky-preference-header .cky-btn-close {
flex-shrink: 0;
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
background: #ede4d8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231E120B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px no-repeat !important;
}
html body .cky-modal .cky-preference-header .cky-btn-close img {
display: none !important;
}
html body .cky-modal .cky-preference-body-wrapper {
padding: 0 !important;
border: 0 !important;
}
html body .cky-modal .cky-preference-content-wrapper {
padding: 12px 0 0 !important;
border: 0 !important;
}
html body .cky-modal .cky-preference-content-wrapper,
html body .cky-modal .cky-preference-content-wrapper p {
margin: 0;
font-size: 15px !important;
line-height: 1.55 !important;
color: var(--km-ck-text) !important;
}
html body .cky-modal .cky-preference-content-wrapper .cky-show-desc-btn {
font-size: 15px !important;
font-weight: 600;
color: var(--km-ck-link) !important;
} html body .cky-modal .cky-accordion-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
margin: 22px 0 0 !important;
}
html body .cky-modal .cky-accordion {
padding: 18px 20px;
border: 1px solid var(--km-ck-line) !important;
border-radius: 20px;
background: #fff;
} html body .cky-modal .cky-accordion:has(.cky-empty-cookies-text),
html body .cky-modal .cky-accordion.km-ck-empty {
display: none;
}
html body .cky-modal .cky-accordion .cky-accordion-item {
margin: 0 !important;
}
html body .cky-modal .cky-accordion-header-wrapper {
cursor: default;
}
html body .cky-modal .cky-accordion-header {
gap: 16px;
}
html body .cky-modal .cky-accordion-header .cky-accordion-btn {
font-family: inherit !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--km-ck-ink) !important;
text-align: left;
}
html body .cky-modal .cky-accordion-header .cky-always-active {
flex-shrink: 0;
padding: 5px 12px;
border-radius: 999px;
background: #e4f0e6 !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--wp--custom--state--success, #2e6b3f) !important;
}
html body .cky-modal .cky-accordion-header-des,
html body .cky-modal .cky-accordion-header-des p {
margin: 0;
font-size: 14px !important;
line-height: 1.5 !important;
color: var(--km-ck-muted) !important;
}
html body .cky-modal .cky-accordion-header-des {
margin-top: 6px !important;
} html body .cky-modal .cky-switch input[type="checkbox"] {
flex-shrink: 0;
width: 56px !important;
height: 32px !important;
border-radius: 999px;
background: #cdbfae !important;
}
html body .cky-modal .cky-switch input[type="checkbox"]:checked {
background: var(--km-ck-accent) !important;
}
html body .cky-modal .cky-switch input[type="checkbox"]::before {
bottom: 3px !important;
left: 3px !important;
width: 26px !important;
height: 26px !important;
background: #fff !important;
}
html body .cky-modal .cky-switch input[type="checkbox"]:checked::before {
transform: translateX(24px) !important;
} html body .cky-modal.km-ck-ready .cky-accordion-chevron,
html body .cky-modal.km-ck-ready .cky-accordion .cky-accordion-body {
display: none !important;
}
html body .cky-modal .km-ck-list {
margin: 8px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--km-ck-faint);
overflow-wrap: anywhere;
}
html body .cky-modal .cky-audit-table {
background: var(--km-ck-paper) !important;
color: var(--km-ck-muted) !important;
} html body .cky-modal .cky-footer-shadow {
display: none !important;
}
html body .cky-modal .cky-footer-wrapper {
padding-top: 22px;
border: 0 !important;
}
html body .cky-modal .cky-prefrence-btn-wrapper {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 0 !important;
border: 0 !important;
}
html body .cky-modal .cky-prefrence-btn-wrapper .cky-btn {
font-size: 14.5px !important;
}
html body .cky-modal .cky-prefrence-btn-wrapper .cky-btn-reject {
order: 1 !important;
}
html body .cky-modal .cky-prefrence-btn-wrapper .cky-btn-preferences {
order: 2 !important;
background: var(--km-ck-paper) !important;
color: var(--km-ck-ink) !important;
}
html body .cky-modal .cky-prefrence-btn-wrapper .cky-btn-preferences:hover {
background: var(--km-ck-ink) !important;
color: var(--wp--preset--color--crema, #f4eee6) !important;
}
html body .cky-modal .cky-prefrence-btn-wrapper .cky-btn-accept {
order: 3 !important;
}
html body .cky-modal .km-ck-policy {
margin: 14px 0 0;
font-size: 13px;
line-height: 1.4;
text-align: center;
color: var(--km-ck-muted);
}
html body .cky-modal .km-ck-policy a {
display: inline-block;
padding: 6px 4px;
color: var(--km-ck-link);
text-decoration: underline;
text-underline-offset: 3px;
}
html body .cky-modal :is(.cky-footer-wrapper .cky-powered-by, .cky-preference-center .cky-powered-by) {
display: none !important;
} @media (max-width: 600px) {
html body .cky-modal {
max-width: calc(100vw - 16px) !important;
border-radius: 24px !important;
}
html body .cky-modal .cky-preference-center {
max-height: calc(100vh - 16px) !important;
padding: 20px 18px;
border-radius: 24px;
}
html body .cky-modal .cky-preference-header .cky-preference-title {
font-size: 20px !important;
}
html body .cky-modal .cky-preference-content-wrapper,
html body .cky-modal .cky-preference-content-wrapper p {
font-size: 14px !important;
}
html body .cky-modal .cky-accordion-wrapper {
margin-top: 16px !important;
}
html body .cky-modal .cky-accordion {
padding: 16px;
}
html body .cky-modal .cky-prefrence-btn-wrapper {
grid-template-columns: 1fr;
gap: 8px;
}
html body .cky-modal .cky-prefrence-btn-wrapper .cky-btn {
min-height: 46px;
}
} @media (max-height: 500px) {
html body .cky-modal .cky-preference-center {
max-height: calc(100vh - 16px) !important;
padding: 18px 20px;
overflow-y: auto;
}
html body .cky-modal .cky-preference-body-wrapper {
overflow: visible !important;
}
}