.mst-card__cta {
position: relative;
z-index: 2;
display: block;
box-sizing: border-box;
width: 100%;
margin-top: auto;
padding: 11px 16px;
border: 0;
border-radius: 999px;
background: linear-gradient(134deg, #FFD64F 0%, var(--mst-amber) 46%, var(--mst-focus) 100%);
color: var(--mst-ink);
font-size: .9rem;
font-weight: 800;
letter-spacing: -.01em;
text-align: center;
text-decoration: none;
box-shadow: 0 10px 20px -14px rgba(226, 116, 0, .95);
transition: background .25s, box-shadow .25s, transform .25s;
}
.mst-card:hover .mst-card__cta,
.mst-card:has(:focus-visible) .mst-card__cta {
background: linear-gradient(134deg, var(--mst-amber) 0%, var(--mst-focus) 55%, #E27400 100%);
box-shadow: 0 16px 28px -14px rgba(226, 116, 0, .95);
}
.mst-card__cta:hover {
transform: translateY(-1px);
}
.mst-card__cta:focus-visible {
outline: 3px solid var(--mst-ink);
outline-offset: 2px;
}
@media (max-width: 560px) {
.mst-card__cta {
padding: 12px 14px;
font-size: .94rem;
}
}
.mst-about::after {
content: "";
display: block;
clear: both;
}
.mst-about__pic {
float: left;
width: min(46%, 470px);
margin: 4px clamp(18px, 2vw, 30px) 12px 0;
border-radius: 20px;
overflow: hidden;
shape-margin: 18px;
box-shadow: 0 24px 44px -30px rgba(0, 0, 0, .6);
}
.mst-about__pic img {
display: block;
width: 100%;
height: auto;
}
.mst-about__text p {
margin: 0 0 14px !important;
}
.mst-about__text p:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 700px) {
.mst-about__pic {
float: none;
width: 100%;
margin: 0 0 16px;
}
}
.mst-proiz {
display: flow-root;
}
.mst-snimok {
float: right;
width: min(44%, 460px);
margin: 4px 0 12px clamp(18px, 2vw, 30px);
border-radius: 20px;
overflow: hidden;
shape-margin: 18px;
box-shadow: 0 24px 44px -30px rgba(0, 0, 0, .6);
}
.mst-snimok img,
.mst-snimok__video {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 700px) {
.mst-snimok {
float: none;
width: 100%;
margin: 0 0 16px;
}
}
.mst-about__text p,
.mst-proiz > p,
.mst-otz__text {
text-align: justify;
text-wrap: wrap;
hyphens: auto;
-webkit-hyphens: auto;
}
.mst-slayder__ramka {
position: relative;
aspect-ratio: 1200 / 800;
border-radius: 28px;
overflow: hidden;
background: rgba(252, 190, 12, .08);
box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .55);
}
@media (min-width: 601px) {
.mst-slayder__ramka {
aspect-ratio: 1880 / 1060;
}
}
@media (min-width: 1040px) {
.mst-slayder__ramka {
aspect-ratio: 2680 / 1120;
}
}
@media (min-width: 701px) {
.mst-slayder {
width: 89.88%;
max-width: calc(var(--mst-polosa) * .8988);
margin-inline: auto;
}
}
@media (max-width: 700px) {
.mst-slayder {
padding-inline: 14px;
}
.mst-slayder__ramka {
border-radius: 18px;
}
}
.mst-slayder__slayd {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .5s ease;
}
.mst-slayder__slayd.is-vidno {
opacity: 1;
}
.mst-slayder__slayd picture,
.mst-slayder__slayd img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mst-slayder__pult {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 1.4vw, 18px);
margin-top: clamp(10px, 1.2vw, 14px);
}
.mst-slayder__strelka {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--mst-ink);
cursor: pointer;
transition: color .2s, transform .2s;
}
.mst-slayder__strelka:hover {
color: var(--mst-focus);
transform: translateY(-1px);
}
.mst-slayder__strelka:focus-visible {
outline: 3px solid var(--mst-ink);
outline-offset: 2px;
}
.mst-slayder__strelka span {
display: block;
width: 10px;
height: 10px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.mst-slayder__strelka--nazad span {
transform: translateX(2px) rotate(-135deg);
}
.mst-slayder__strelka--vpered span {
transform: translateX(-2px) rotate(45deg);
}
.mst-slayder__tochki {
display: flex;
align-items: center;
gap: 0;
}
.mst-slayder__tochka {
position: relative;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
cursor: pointer;
}
.mst-slayder__tochka::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(0, 0, 0, .18);
transform: translate(-50%, -50%);
transition: background .2s, transform .2s;
}
.mst-slayder__tochka.is-vybrana::before {
background: var(--mst-focus);
transform: translate(-50%, -50%) scale(1.35);
}
.mst-slayder__tochka:focus-visible {
outline: 3px solid var(--mst-ink);
outline-offset: 3px;
}
.mst-slayder__pauza {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-left: 4px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .06);
color: var(--mst-ink);
cursor: pointer;
transition: background .2s;
}
.mst-slayder__pauza:hover {
background: rgba(0, 0, 0, .12);
}
.mst-slayder__pauza:focus-visible {
outline: 3px solid var(--mst-ink);
outline-offset: 2px;
}
.mst-slayder__znak--pusk,
.mst-slayder__pauza[aria-pressed="true"] .mst-slayder__znak--pauza {
display: none;
}
.mst-slayder__pauza[aria-pressed="true"] .mst-slayder__znak--pusk {
display: block;
}
.mst-rel__pauza {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 3;
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--mst-ink);
box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .8);
cursor: pointer;
}
.mst-rel__pauza:hover {
background: var(--mst-white);
}
.mst-rel__pauza:focus-visible {
outline: 3px solid var(--mst-ink);
outline-offset: 2px;
}
.mst-rel__znak--pusk,
.mst-rel__pauza[aria-pressed="true"] .mst-rel__znak--pauza {
display: none;
}
.mst-rel__pauza[aria-pressed="true"] .mst-rel__znak--pusk {
display: block;
}
@media (prefers-reduced-motion: reduce) {
.mst-slayder__slayd,
.mst-slayder__strelka,
.mst-slayder__tochka {
transition: none;
}
}
.mst-fakty {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(8px, 1vw, 12px);
margin-top: clamp(20px, 2.6vw, 32px);
}
@media (min-width: 1040px) {
.mst-fakty {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.mst-fakty {
padding-inline: 18px;
}
}
.mst-fakt {
position: relative;
display: grid;
align-content: center;
padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 18px);
border: 1px solid rgba(0, 0, 0, .14);
border-radius: 16px;
background: var(--mst-krem);
box-shadow: 5px 5px 0 var(--mst-ohra);
color: var(--mst-ink);
text-align: center;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease;
}
.mst-fakt__telo {
display: grid;
gap: 3px;
min-width: 0;
}
.mst-fakt__glavnoe {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 0 .28em;
padding-inline: clamp(26px, 2.4vw, 34px);
font-size: clamp(1.3rem, 1.15rem + .4vw, 1.45rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -.02em;
}
.mst-fakt__chislo {
white-space: nowrap;
}
.mst-fakt__glavnoe--citata {
display: block;
text-wrap: balance;
}
.mst-fakt__podpis {
color: rgba(0, 0, 0, .62);
font-size: .9rem;
line-height: 1.3;
text-wrap: pretty;
}
.mst-fakt__strelka {
position: absolute;
top: clamp(10px, 1.1vw, 13px);
right: clamp(10px, 1.1vw, 13px);
display: grid;
place-items: center;
width: 30px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .18);
background: var(--mst-amber);
color: var(--mst-ink);
transition: background-color .2s ease, color .2s ease;
}
.mst-fakt__strelka svg {
transition: transform .25s ease;
}
.mst-fakt:hover,
.mst-fakt:focus-visible {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 var(--mst-ohra);
}
.mst-fakt:hover .mst-fakt__strelka,
.mst-fakt:focus-visible .mst-fakt__strelka {
border-color: var(--mst-ink);
background: var(--mst-ink);
color: var(--mst-amber);
}
.mst-fakt:hover .mst-fakt__strelka svg,
.mst-fakt:focus-visible .mst-fakt__strelka svg {
transform: translate(2px, -2px);
}
.mst-fakt:focus-visible {
outline: 2px solid var(--mst-focus);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.mst-fakt,
.mst-fakt__strelka,
.mst-fakt__strelka svg {
transition: none;
}
.mst-fakt:hover,
.mst-fakt:focus-visible,
.mst-fakt:hover .mst-fakt__strelka svg,
.mst-fakt:focus-visible .mst-fakt__strelka svg {
transform: none;
}
}
.mst-vstuplenie {
margin-top: clamp(22px, 3vw, 40px);
text-align: center;
}
.mst-zagolovok {
display: grid;
justify-items: center;
gap: clamp(6px, .8vw, 12px);
padding-inline: 16px;
text-align: center;
letter-spacing: 0;
}
.mst-zagolovok__glavnoe {
color: #1F1A14;
font-size: clamp(2rem, 1.2rem + 3.2vw, 4.15rem);
font-weight: 900;
line-height: 1.04;
letter-spacing: -.01em;
text-wrap: balance;
transform: skewX(-10deg);
}
.mst-zagolovok__utochnenie {
display: inline-flex;
align-items: center;
gap: .8em;
color: #6B5A45;
font-size: clamp(.8rem, .62rem + 1vw, 1.55rem);
font-weight: 400;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
.mst-zagolovok__utochnenie::before,
.mst-zagolovok__utochnenie::after {
content: "";
flex: 0 0 auto;
width: clamp(16px, 4vw, 56px);
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--mst-focus));
}
.mst-zagolovok__utochnenie::after {
background: linear-gradient(90deg, var(--mst-focus), transparent);
}
.mst-zagolovok + .mst-slayder {
margin-top: clamp(18px, 2.4vw, 32px);
}
.mst-knopki {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: clamp(18px, 2.2vw, 28px) 0 0;
}
.mst-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px 12px 16px;
border-radius: 20px;
background: var(--mst-white);
border: 1px solid rgba(0, 0, 0, .07);
box-shadow: 0 14px 30px -26px rgba(0, 0, 0, .5);
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.mst-card:hover,
.mst-card:has(:focus-visible) {
transform: translateY(-4px);
border-color: rgba(252, 190, 12, .5);
box-shadow: 0 26px 46px -30px rgba(0, 0, 0, .5);
}
.mst-card__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease, opacity .28s ease;
}
.mst-card__kadr {
position: absolute;
inset: 0;
opacity: 0;
}
.mst-card__kadr.is-vidno {
opacity: 1;
}
.mst-card:hover .mst-card__photo img,
.mst-card:has(:focus-visible) .mst-card__photo img {
transform: scale(1.05);
}
@media (hover: none) {
.mst-card:hover,
.mst-card:has(:focus-visible) {
transform: none;
border-color: rgba(0, 0, 0, .07);
box-shadow: 0 14px 30px -26px rgba(0, 0, 0, .5);
}
.mst-card:hover .mst-card__photo img,
.mst-card:has(:focus-visible) .mst-card__photo img {
transform: none;
}
.mst-card:hover .mst-card__cta,
.mst-card:has(:focus-visible) .mst-card__cta {
background: linear-gradient(134deg, #FFD64F 0%, var(--mst-amber) 46%, var(--mst-focus) 100%);
box-shadow: 0 10px 20px -14px rgba(226, 116, 0, .95);
}
.mst-card__minik:hover {
transform: none;
}
}
.mst-card__mini {
position: relative;
z-index: 2;
display: flex;
gap: 6px;
margin-top: 8px;
}
.mst-card__minik {
flex: 1 1 0;
min-width: 0;
padding: 0;
border: 0;
border-radius: 10px;
background: none;
aspect-ratio: 7 / 4;
overflow: hidden;
cursor: pointer;
opacity: .72;
box-shadow: 0 0 0 2px transparent;
transition: opacity .2s, box-shadow .2s, transform .2s;
}
.mst-card__minik img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mst-card__minik:hover,
.mst-card__minik:focus-visible {
opacity: 1;
transform: translateY(-2px);
}
.mst-card__minik.is-vybran {
opacity: 1;
box-shadow: 0 0 0 2px var(--mst-focus);
}
.mst-card__minik:focus-visible {
outline: 3px solid var(--mst-ink);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.mst-card__photo img,
.mst-card__minik {
transition: none;
}
}
.mst-card__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 14px 5px 0;
text-align: center;
}
.mst-card__title {
margin: 0;
min-width: 0;
color: var(--mst-ink);
font-size: clamp(1rem, .92rem + .3vw, 1.2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
overflow-wrap: break-word;
}
.mst-card__size {
margin: 0;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, .05);
color: var(--mst-grey);
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
white-space: nowrap;
}
.mst-card__sostav {
margin: 0;
color: var(--mst-grey);
font-size: .87rem;
line-height: 1.42;
}
.mst-card--reveal .mst-card__sostav {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mst-catalog {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
gap: 20px;
}
.mst-input {
box-sizing: border-box;
padding: 10px 14px;
width: 100%;
max-width: 100%;
color: var(--mst-grey);
border: 2px solid var(--mst-field);
border-radius: 8px;
background: var(--mst-field);
transition: background .3s, border-color .3s;
}
.mst-input::placeholder {
color: var(--mst-muted);
}
.mst-input:hover {
background: var(--mst-white);
}
.mst-input:focus {
border-color: var(--mst-focus);
outline: none;
}
@media (min-width: 601px) and (max-width: 830px) {
.mst-catalog {
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.mst-card--reveal .mst-card__sostav {
-webkit-line-clamp: 5;
}
}
@media (min-width: 831px) {
.mst-catalog--fixed {
grid-template-columns: repeat(
auto-fill,
minmax(
max(280px, calc((100% - (var(--mst-cols, 4) - 1) * 20px) / var(--mst-cols, 4))),
1fr
)
);
}
}
.mst-card__title a {
color: inherit;
text-decoration: none;
}
.mst-card__title a:hover,
.mst-card__title a:focus {
text-decoration: underline;
}
.mst-card__photo {
position: relative;
display: block;
aspect-ratio: 7 / 4;
height: auto;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
}
.mst-card:has(:focus-visible) {
outline: 2px solid var(--mst-focus);
outline-offset: 2px;
}
.mst-card--segment {
border-color: rgba(252, 190, 12, .6);
background:
radial-gradient(120% 70% at 100% 0%, rgba(252, 190, 12, .3), transparent 62%),
linear-gradient(172deg, var(--mst-krem) 0%, #FFF3CC 58%, var(--mst-field) 100%);
box-shadow:
0 0 0 1px rgba(252, 190, 12, .22),
0 18px 38px -24px rgba(217, 154, 0, .75);
}
.mst-card--segment:hover,
.mst-card--segment:has(:focus-visible) {
border-color: var(--mst-amber);
box-shadow:
0 0 0 1px rgba(252, 190, 12, .4),
0 28px 50px -28px rgba(217, 154, 0, .85);
}
.mst-card--segment .mst-card__photo {
background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6));
box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 10px 22px -16px rgba(217, 154, 0, .9);
}
.mst-card--segment .mst-card__size {
background: rgba(252, 190, 12, .26);
color: var(--mst-ink);
}
@media (hover: none) {
.mst-card--segment:hover,
.mst-card--segment:has(:focus-visible) {
border-color: rgba(252, 190, 12, .6);
box-shadow:
0 0 0 1px rgba(252, 190, 12, .22),
0 18px 38px -24px rgba(217, 154, 0, .75);
}
}
.mst-catalog__empty {
padding: 20px;
border-radius: 16px;
background: var(--mst-card);
}
.mst-landing {
--mst-gap: clamp(28px, 4vw, 56px);
display: grid;
gap: var(--mst-gap);
margin-top: var(--mst-gap);
}
.mst-l {
position: relative;
padding: clamp(22px, 3.2vw, 46px);
border-radius: 28px;
background: linear-gradient(168deg, #FFFDF7 0%, #FFF8E8 62%, #FFF1D4 100%);
border: 1px solid rgba(252, 190, 12, .22);
box-shadow: 0 22px 44px -34px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .9) inset;
overflow: hidden;
}
.mst-l::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 46%;
background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
pointer-events: none;
}
.mst-l > * {
position: relative;
}
.mst-h2 {
margin: 0 0 18px;
color: var(--mst-ink);
font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.9rem);
font-weight: 800;
line-height: 1.04;
letter-spacing: -.03em;
text-wrap: balance;
}
.mst-h3 {
margin: 34px 0 14px;
font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
font-weight: 800;
letter-spacing: -.02em;
}
.mst-l p {
margin: 0 0 14px;
font-size: clamp(1rem, .95rem + .2vw, 1.12rem);
line-height: 1.55;
}
.mst-l p:last-child {
margin-bottom: 0;
}
.mst-note {
color: var(--mst-grey);
font-size: .97rem !important;
}
.mst-quote + .mst-note {
margin-top: 16px;
}
.mst-faq {
display: grid;
gap: 0 clamp(32px, 4.6vw, 76px);
margin: clamp(14px, 1.8vw, 22px) 0 0;
}
@media (min-width: 760px) {
.mst-faq {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mst-faq details:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
.mst-faq details {
border-top: 1px solid rgba(0, 0, 0, .08);
}
.mst-faq details:last-child,
.mst-faq details:nth-last-child(2):nth-child(even) {
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mst-faq summary {
position: relative;
display: block;
padding: 11px 38px 11px 0;
font-size: clamp(.96rem, .92rem + .18vw, 1.05rem);
font-weight: 600;
line-height: 1.3;
cursor: pointer;
list-style: none;
transition: color .2s;
}
.mst-faq summary::-webkit-details-marker {
display: none;
}
.mst-faq summary:hover,
.mst-faq details[open] summary {
color: #7A5300;
}
.mst-faq summary::after {
content: "";
position: absolute;
right: 4px;
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
background:
linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
color: rgba(0, 0, 0, .45);
transition: transform .25s ease, color .2s ease;
}
.mst-faq summary:hover::after,
.mst-faq details[open] summary::after {
color: var(--mst-amber);
}
.mst-faq details[open] summary::after {
transform: rotate(45deg);
}
.mst-faq p {
margin: 0 !important;
padding: 0 38px 13px 0;
max-width: 62ch;
color: var(--mst-grey);
font-size: 1rem !important;
line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
.mst-faq summary::after {
transition: none;
}
}
.mst-l--cta {
padding: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.mst-l--cta::before {
display: none;
}
.mst-cta__text,
.mst-cta__form,
.mst-cta__itog {
width: 100%;
max-width: 820px;
margin-inline: auto;
}
.mst-cta__itog {
margin-block: 0;
text-align: center;
text-wrap: pretty;
}
.mst-cta__itog a {
color: var(--mst-amber);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.mst-cta__itog a:hover,
.mst-cta__itog a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
.mst-cta .mst-agree a {
color: rgba(255, 250, 240, .95);
text-decoration: underline;
text-decoration-color: rgba(252, 190, 12, .6);
text-underline-offset: 3px;
}
.mst-agree a:hover,
.mst-agree a:focus-visible {
color: var(--mst-amber);
text-decoration-color: var(--mst-amber);
}
.mst-cta > .mst-h2 {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 1.8vw, 26px);
margin: 0;
color: var(--mst-white);
text-align: center;
text-wrap: balance;
}
.mst-cta > .mst-h2::before,
.mst-cta > .mst-h2::after {
content: "";
display: block;
flex: 0 1 clamp(26px, 8vw, 120px);
width: auto;
height: 3px;
margin: 0;
border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--mst-amber));
}
.mst-cta > .mst-h2::after {
background: linear-gradient(90deg, var(--mst-amber), transparent);
}
.mst-cta p {
color: rgba(255, 250, 242, .9);
}
.mst-cta .mst-field__cap {
color: rgba(255, 248, 236, .72);
}
.mst-cta .mst-agree {
color: rgba(255, 248, 236, .78);
}
.mst-cta .mst-note {
color: rgba(255, 248, 236, .68);
}
.mst-form__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px 15px;
}
.mst-field {
display: block;
min-width: 0;
}
.mst-field--wide {
grid-column: 1 / -1;
}
@media (min-width: 601px) {
.mst-form__grid select.mst-input {
max-width: 100%;
}
}
.mst-field__cap {
display: block;
text-align: center;
margin-bottom: 6px;
color: #B7B7B7;
font-size: .82rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.mst-form .mst-input:focus {
border-color: var(--mst-focus);
}
.mst-form__trap {
position: absolute !important;
left: -9999px;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
pointer-events: none;
user-select: none;
}
.mst-form__niz .mst-agree {
flex: 1 1 300px;
margin: 0;
}
.mst-form__niz .mst-btn {
flex: 0 0 auto;
width: auto;
min-width: 190px;
}
@media (max-width: 600px) {
.mst-form__niz .mst-btn {
flex: 1 1 100%;
width: 100%;
}
}
.mst-agree {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 13px 0 15px;
color: #B7B7B7;
font-size: .88rem;
line-height: 1.4;
}
.mst-agree input {
margin-top: 3px;
width: 18px;
height: 18px;
accent-color: var(--mst-focus);
flex: 0 0 auto;
}
.mst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 34px;
border: none;
border-radius: 14px;
background: var(--mst-amber);
color: var(--mst-ink);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -.01em;
cursor: pointer;
text-decoration: none;
box-shadow: 0 14px 26px -16px rgba(252, 190, 12, .9);
transition: transform .2s, background .2s, box-shadow .2s;
}
.mst-btn:hover {
transform: translateY(-2px);
background: var(--mst-focus);
box-shadow: 0 18px 30px -16px rgba(252, 142, 12, .9);
}
.mst-btn--ghost {
background: transparent;
color: var(--mst-ink);
box-shadow: 0 0 0 2px var(--mst-ink) inset;
}
.mst-btn--ghost:hover {
background: var(--mst-ink);
color: var(--mst-amber);
box-shadow: none;
}
.mst-btn--dark {
width: 100%;
}
.mst-form__note {
margin: 0 0 14px;
padding: 12px 16px;
border-radius: 12px;
font-size: .95rem;
font-weight: 700;
}
.mst-form__note--ok,
.mst-cta .mst-form__note--ok {
background: #1E8A43;
color: #FFFFFF;
text-align: center;
}
.mst-form__note--err {
background: rgba(228, 25, 25, .16);
color: #FF8A8A;
}
@media (max-width: 759px) {
.mst-form__grid {
grid-template-columns: 1fr;
}
}
.mst-pressa {
display: grid;
gap: 0 clamp(24px, 3vw, 56px);
margin-top: clamp(16px, 2vw, 24px);
}
@media (min-width: 1024px) {
.mst-pressa {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.mst-pressa__stroka {
display: grid;
grid-template-columns: clamp(88px, 9vw, 116px) 1fr 12px;
align-items: center;
gap: clamp(12px, 1.6vw, 22px);
padding: clamp(13px, 1.5vw, 18px) clamp(10px, 1.2vw, 14px);
border-bottom: 1px solid rgba(0, 0, 0, .09);
border-radius: 14px;
color: inherit;
text-decoration: none;
transition: background .2s;
}
.mst-pressa__stroka:last-child {
border-bottom: 0;
}
@media (min-width: 1024px) {
.mst-pressa__stroka:nth-last-child(-n+2) {
border-bottom: 0;
}
}
.mst-pressa__stroka:hover {
background: rgba(252, 190, 12, .1);
}
.mst-pressa__stroka:focus-visible {
outline: 3px solid var(--mst-ink);
outline-offset: 2px;
}
.mst-pressa__logo {
display: flex;
align-items: center;
height: 26px;
color: var(--mst-grey);
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.mst-pressa__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
opacity: .48;
transition: opacity .2s;
}
.mst-pressa__stroka:hover .mst-pressa__logo img,
.mst-pressa__stroka:focus-visible .mst-pressa__logo img {
opacity: 1;
}
.mst-pressa__zagolovok {
font-size: clamp(.97rem, .92rem + .2vw, 1.1rem);
font-weight: 700;
line-height: 1.32;
letter-spacing: -.01em;
text-wrap: pretty;
}
.mst-pressa__stroka:hover .mst-pressa__zagolovok {
text-decoration: underline;
text-underline-offset: .16em;
text-decoration-thickness: 1px;
}
.mst-pressa__strelka {
justify-self: end;
width: 8px;
height: 8px;
border-top: 2px solid var(--mst-grey);
border-right: 2px solid var(--mst-grey);
transform: rotate(45deg);
transition: transform .2s, border-color .2s;
}
.mst-pressa__stroka:hover .mst-pressa__strelka {
border-color: var(--mst-focus);
transform: rotate(45deg) translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
.mst-pressa__stroka,
.mst-pressa__logo img,
.mst-pressa__strelka {
transition: none;
}
}
.mst-otz {
display: grid;
grid-template-columns: 1fr;
gap: 13px;
}
@media (min-width: 640px) {
.mst-otz {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1040px) {
.mst-otz {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
}
@media (hover: hover) {
.mst-otz__card:hover {
transform: translateY(-3px);
border-color: rgba(252, 190, 12, .55);
box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .6);
}
}
.mst-otz__ava img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mst-otz__who {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.mst-otz__name {
color: var(--mst-ink);
font-size: 1.02rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
}
@media (max-width: 420px) {
.mst-otz__card {
padding: 17px 15px 15px;
}
.mst-otz__ava {
width: 41px;
height: 41px;
}
}
.mst-otz-wrap:not(.is-po3) .mst-otz > *:nth-child(n+3) {
display: none;
}
@media (min-width: 1040px) {
.mst-otz-wrap:not(.is-po3) .mst-otz > *:nth-child(3) {
display: flex;
}
}
.mst-otz > [hidden],
.mst-otz-dalshe[hidden] {
display: none;
}
.mst-otz > .is-novyy {
animation: mst-otz-poyavlenie .35s ease both;
}
@keyframes mst-otz-poyavlenie {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion: reduce) {
.mst-otz > .is-novyy {
animation: none;
}
}
.mst-foot {
position: relative;
overflow: hidden;
margin-top: clamp(34px, 4.5vw, 70px);
padding: clamp(28px, 3.4vw, 54px) clamp(16px, 4vw, 56px) clamp(20px, 2.4vw, 30px);
background: #131313;
color: var(--mst-white);
font-size: .93rem;
line-height: 1.45;
}
.mst-foot::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, var(--mst-focus), var(--mst-amber) 42%, rgba(252, 190, 12, 0));
}
.mst-foot::after {
content: "";
position: absolute;
top: -180px;
left: -120px;
width: 520px;
height: 420px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(252, 190, 12, .14), rgba(252, 190, 12, 0));
pointer-events: none;
}
.mst-foot__inner {
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.mst-foot__grid {
display: grid;
gap: clamp(20px, 1.9vw, 26px);
padding: 0;
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.mst-foot__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mst-foot__col--brand {
grid-column: 1 / -1;
}
}
@media (min-width: 960px) {
.mst-foot__grid {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.15fr) minmax(0, 1.45fr);
align-items: stretch;
}
.mst-foot__col--brand {
grid-column: auto;
}
.mst-foot__col + .mst-foot__col {
padding-left: clamp(16px, 1.6vw, 22px);
border-left: 1px solid rgba(255, 255, 255, .08);
}
}
.mst-foot__logo {
display: inline-block;
margin-bottom: 12px;
}
.mst-foot__logo img {
display: block;
width: auto;
height: 30px;
}
.mst-btn--sm {
padding: 11px 22px;
font-size: .92rem;
border-radius: 12px;
box-shadow: none;
white-space: nowrap;
}
.mst-foot__soc {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 20px;
}
.mst-foot__soc a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px 7px 11px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
color: #DCDCDC;
font-size: .83rem;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
transition: background .2s, color .2s;
}
.mst-foot__soc a::before {
content: "";
flex: 0 0 auto;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--mst-ico) center / 16px 16px no-repeat;
mask: var(--mst-ico) center / 16px 16px no-repeat;
}
.mst-foot__soc a[href*="vk.com"] {
--mst-ico: 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.4 7.6 3.7 8.8 3.7-8.8'/%3E%3Cpath d='M14.4 7.6v8.8M20.6 7.6l-4.8 4.4 4.8 4.4'/%3E%3C/svg%3E");
}
.mst-foot__soc a[href*="catery.ru"] {
--mst-ico: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.4h18'/%3E%3Cpath d='M5.4 15.4a6.6 6.6 0 0 1 13.2 0'/%3E%3Cpath d='M12 6.4v2.4'/%3E%3C/svg%3E");
}
.mst-foot__soc a:hover {
border-color: var(--mst-amber);
background: var(--mst-amber);
color: var(--mst-ink);
}
.mst-foot__h {
margin: 0 0 14px;
color: #7C7C7C;
font-size: .75rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.mst-foot__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0;
}
.mst-foot__list a,
.mst-foot__contacts a {
color: #DCDCDC;
text-decoration: none;
transition: color .2s;
}
.mst-foot__list a:hover,
.mst-foot__contacts a:hover {
color: var(--mst-amber);
}
.mst-foot__list--docs li {
border-top: 1px solid rgba(255, 255, 255, .09);
}
.mst-foot__list--docs li:first-child {
border-top: 0;
}
.mst-foot__list--docs a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
font-size: .89rem;
line-height: 1.35;
}
@media (min-width: 960px) and (max-width: 1099px) {
.mst-foot__list--docs a {
font-size: .84rem;
}
.mst-foot__list--docs a::after {
display: none;
}
}
.mst-foot__list--docs a::after {
content: "PDF";
flex: 0 0 auto;
color: #8A8A8A;
font-size: .75rem;
font-weight: 700;
letter-spacing: .1em;
}
.mst-foot__list--docs a:hover::after {
color: var(--mst-amber);
}
.mst-foot__contacts {
margin: 0;
display: grid;
gap: 0;
}
.mst-foot__contacts > div {
display: grid;
gap: 2px 14px;
grid-template-columns: 1fr;
padding: 8px 0;
border-top: 1px solid rgba(255, 255, 255, .09);
}
.mst-foot__contacts > div:first-child {
border-top: 0;
padding-top: 0;
}
@media (min-width: 380px) {
.mst-foot__contacts > div {
grid-template-columns: 7.5rem minmax(0, 1fr);
align-items: baseline;
}
}
.mst-foot__contacts dt {
color: #7C7C7C;
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.mst-foot__contacts dd {
margin: 0;
min-width: 0;
display: grid;
gap: 2px;
justify-items: start;
color: #DCDCDC;
font-size: .93rem;
line-height: 1.35;
}
.mst-foot__contacts > .mst-foot__msg-row {
align-items: center;
}
.mst-foot__contacts .mst-foot__msg {
display: flex;
justify-content: center;
width: 7.95em;
gap: 13.5px;
padding-top: 2px;
}
.mst-foot__msg a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: #fff;
transition: transform .2s, box-shadow .2s;
}
.mst-foot__msg a:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 3px rgba(252, 190, 12, .35);
}
.mst-foot__msg a:focus-visible {
outline: 2px solid var(--mst-amber);
outline-offset: 3px;
}
.mst-foot__msg svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.mst-foot__msg-wa {
background: #25D366;
}
.mst-foot__msg-tg {
background: #229ED9;
}
.mst-foot__legal {
margin: 12px 0 0;
color: #8C8C8C;
font-size: .82rem;
line-height: 1.45;
}
.mst-foot__addr {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 0;
color: #C9C9C9;
font-size: .89rem;
line-height: 1.4;
}
.mst-foot__addr::before {
content: "";
flex: 0 0 auto;
width: 16px;
height: 16px;
background: var(--mst-amber);
-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='M12 21.2s6.6-6.3 6.6-10.6a6.6 6.6 0 1 0-13.2 0c0 4.3 6.6 10.6 6.6 10.6Z'/%3E%3Ccircle cx='12' cy='10.4' r='2.5'/%3E%3C/svg%3E") center / 16px 16px 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='M12 21.2s6.6-6.3 6.6-10.6a6.6 6.6 0 1 0-13.2 0c0 4.3 6.6 10.6 6.6 10.6Z'/%3E%3Ccircle cx='12' cy='10.4' r='2.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.mst-foot__addr .mst-karta-ssylka {
font-size: .85rem;
white-space: nowrap;
}
.mst-foot__since {
margin: 4px 0 0;
color: #7E7E7E;
font-size: .8rem;
line-height: 1.45;
}
.mst-head {
position: sticky;
top: 0;
z-index: 50;
padding: 0 clamp(14px, 3vw, 40px);
background: rgba(255, 255, 255, .88);
backdrop-filter: saturate(150%) blur(12px);
-webkit-backdrop-filter: saturate(150%) blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, .08);
box-shadow: 0 10px 30px -26px rgba(0, 0, 0, .8);
}
.mst-head__inner {
display: flex;
align-items: center;
gap: 14px;
max-width: 1280px;
min-height: 62px;
margin: 0 auto;
}
.mst-head__logo {
display: inline-flex;
align-items: center;
margin-right: auto;
color: var(--mst-ink);
text-decoration: none;
}
.mst-head__logo img {
display: block;
width: auto;
height: clamp(20px, 2.1vw, 28px);
}
.mst-head__nav {
display: flex;
align-items: center;
gap: clamp(14px, 1.8vw, 28px);
}
.mst-head__nav a {
position: relative;
color: var(--mst-grey);
font-size: .96rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color .2s;
}
.mst-head__nav a::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -6px;
height: 2px;
border-radius: 2px;
background: var(--mst-focus);
transition: left .22s, right .22s;
}
.mst-head__nav a:hover {
color: var(--mst-ink);
}
.mst-head__nav a:hover::after {
left: 0;
right: 0;
}
.mst-head__tel {
color: var(--mst-ink) !important;
font-variant-numeric: tabular-nums;
}
.mst-head__cta {
flex: 0 0 auto;
}
.mst-head__chk,
.mst-head__toggle {
display: none;
}
.mst-l,
.mst-anchor,
.mst-catalog {
scroll-margin-top: 78px;
}
@media (max-width: 900px) {
.mst-head__chk {
display: block;
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
.mst-head__toggle {
display: grid;
place-items: center;
order: 3;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(0, 0, 0, .06);
cursor: pointer;
}
.mst-head__toggle span,
.mst-head__toggle span::before,
.mst-head__toggle span::after {
display: block;
width: 18px;
height: 2px;
border-radius: 2px;
background: var(--mst-ink);
transition: transform .22s, opacity .22s;
}
.mst-head__toggle span::before,
.mst-head__toggle span::after {
content: "";
position: relative;
}
.mst-head__toggle span::before {
top: -6px;
}
.mst-head__toggle span::after {
top: 4px;
}
.mst-head__chk:focus-visible + .mst-head__toggle {
outline: 3px solid var(--mst-ink);
outline-offset: 2px;
}
.mst-head__chk:checked + .mst-head__toggle span {
background: transparent;
}
.mst-head__chk:checked + .mst-head__toggle span::before {
transform: translateY(6px) rotate(45deg);
}
.mst-head__chk:checked + .mst-head__toggle span::after {
transform: translateY(-6px) rotate(-45deg);
}
.mst-head__nav {
order: 4;
display: none;
flex-direction: column;
align-items: stretch;
gap: 2px;
width: 100%;
padding: 6px 0 14px;
}
.mst-head__chk:checked ~ .mst-head__nav {
display: flex;
}
.mst-head__nav a {
padding: 12px 14px;
border-radius: 12px;
background: rgba(0, 0, 0, .04);
font-size: 1rem;
}
.mst-head__nav a::after {
display: none;
}
.mst-head__inner {
flex-wrap: wrap;
}
.mst-head__cta {
order: 2;
}
.mst-head__inner {
gap: 8px;
}
.mst-head__logo {
min-width: 0;
flex: 0 1 auto;
}
.mst-head__logo img {
max-width: 100%;
}
.mst-head__cta {
flex: 0 0 auto;
padding-inline: 14px;
}
}
@media (min-width: 960px) {
.mst-adv {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.mst-case {
display: grid;
gap: clamp(12px, 1.6vw, 18px);
margin-bottom: clamp(10px, 1.4vw, 18px);
}
.mst-quote {
box-shadow: 0 16px 32px -26px rgba(0, 0, 0, .6);
position: relative;
margin: 0;
padding: clamp(46px, 5vw, 66px) clamp(22px, 3vw, 46px) clamp(24px, 2.6vw, 34px);
border-radius: 24px;
background:
radial-gradient(120% 140% at 50% 0%, rgba(252, 190, 12, .22), rgba(252, 190, 12, 0) 60%),
linear-gradient(160deg, #FFFFFF 0%, #FFF6DE 100%);
text-align: center;
}
.mst-quote::before {
content: "“";
position: absolute;
left: 50%;
top: clamp(6px, 1.4vw, 16px);
transform: translateX(-50%);
color: rgba(252, 142, 12, .45);
font-family: Geometria, sans-serif;
font-weight: 800;
font-size: clamp(3.6rem, 2rem + 4vw, 5.4rem);
line-height: 1;
}
.mst-quote p {
margin: 0 auto !important;
max-width: 64ch;
font-size: clamp(1.06rem, .98rem + .55vw, 1.42rem) !important;
line-height: 1.45;
letter-spacing: -.015em;
text-wrap: pretty;
}
.mst-quote footer {
color: var(--mst-grey);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: clamp(18px, 2vw, 26px);
font-size: .8rem;
letter-spacing: .13em;
text-transform: uppercase;
}
.mst-quote footer::before,
.mst-quote footer::after {
content: "";
width: clamp(18px, 4vw, 44px);
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--mst-focus));
}
.mst-quote footer::after {
background: linear-gradient(90deg, var(--mst-focus), transparent);
}
@media (max-width: 700px) {
.mst-main {
padding-inline: 0;
}
:where(.mst-main) > * {
max-width: none;
}
.mst-l {
border-radius: 0;
padding-inline: 18px;
}
.mst-landing {
--mst-gap: clamp(20px, 4vw, 30px);
}
.mst-catalog {
gap: 14px;
}
}
@media (max-width: 600px) {
.mst-catalog {
grid-template-columns: 1fr;
gap: 18px;
}
.mst-card {
padding: 12px 12px 18px;
border-radius: 22px;
}
.mst-card__photo {
border-radius: 16px;
}
.mst-card__mini {
justify-content: center;
gap: 8px;
margin-top: 10px;
}
.mst-card__minik {
flex: 0 0 clamp(76px, 21%, 112px);
}
.mst-card__body {
align-items: center;
gap: 10px;
padding: 14px 4px 0;
text-align: center;
}
.mst-card__title {
font-size: 1.32rem;
line-height: 1.1;
}
.mst-card__sostav {
align-self: stretch;
text-align: left;
}
.mst-card__size {
font-size: .78rem;
}
.mst-card__sostav {
font-size: .95rem;
line-height: 1.45;
}
.mst-card--reveal .mst-card__sostav {
-webkit-line-clamp: 3;
}
.mst-card__cta {
margin-top: 14px;
padding: 14px 16px;
font-size: 1rem;
}
}
@media (max-width: 600px) {
.mst-quote {
padding-top: 54px;
text-align: left;
}
.mst-quote::before {
left: 20px;
transform: none;
}
}
.mst-l > .mst-h2::after {
content: "";
display: block;
width: 54px;
height: 4px;
margin-top: 14px;
border-radius: 4px;
background: linear-gradient(90deg, var(--mst-focus), var(--mst-amber));
}
.mst-seg {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: clamp(10px, 1.1vw, 14px);
grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
}
@media (min-width: 640px) {
.mst-seg {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1080px) {
.mst-seg {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.mst-seg li {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
grid-template-areas:
"ico title"
"ico text";
align-content: center;
column-gap: 14px;
row-gap: 3px;
padding: clamp(13px, 1.4vw, 18px);
border-radius: 20px;
background: var(--mst-white);
transition: transform .22s, box-shadow .22s;
}
.mst-seg li:hover {
transform: translateY(-3px);
box-shadow: 0 22px 40px -34px rgba(0, 0, 0, .7);
}
.mst-seg__ico {
grid-area: ico;
justify-self: start;
display: grid;
place-items: center;
width: 46px;
height: 46px;
align-self: center;
border-radius: 50%;
background: rgba(252, 190, 12, .18);
}
.mst-seg__ico img {
width: 24px;
height: 24px;
}
.mst-seg b {
grid-area: title;
color: var(--mst-ink);
font-size: 1.02rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
}
.mst-seg li > span:last-child {
grid-area: text;
color: var(--mst-grey);
font-size: .94rem;
line-height: 1.4;
}
.mst-ship {
display: grid;
gap: clamp(12px, 1.4vw, 18px);
margin-bottom: clamp(20px, 2.6vw, 34px);
}
@media (min-width: 760px) {
.mst-ship {
grid-template-columns: 1fr 1fr;
}
}
.mst-ship__card {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"ico"
"title"
"text";
justify-items: center;
align-content: start;
row-gap: 3px;
padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2.2vw, 28px);
text-align: center;
border-radius: 22px;
background: var(--mst-white);
box-shadow:
-4px 6px 12px -10px rgba(0, 0, 0, .28),
-14px 18px 34px -26px rgba(0, 0, 0, .5);
}
.mst-ship__ico {
grid-area: ico;
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-bottom: 5px;
border-radius: 13px;
background: rgba(252, 190, 12, .18);
color: var(--mst-ink);
}
.mst-ship__ico svg {
width: 22px;
height: 22px;
}
.mst-ship__t {
grid-area: title;
margin: 0;
color: var(--mst-ink);
font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
text-wrap: balance;
}
.mst-ship__card p {
grid-area: text;
max-width: 40ch;
margin: 0 !important;
text-wrap: balance;
color: var(--mst-grey);
font-size: .98rem !important;
line-height: 1.4;
}
.mst-terms {
margin: 0;
display: grid;
gap: 0 clamp(22px, 3vw, 50px);
border-bottom: 1px solid rgba(0, 0, 0, .09);
}
@media (min-width: 880px) {
.mst-terms {
grid-template-columns: 1fr 1fr;
}
}
.mst-terms__row {
display: grid;
grid-template-columns: 1fr;
gap: 3px 18px;
padding: 13px 2px;
border-top: 1px solid rgba(0, 0, 0, .09);
}
@media (min-width: 460px) {
.mst-terms__row {
grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
align-items: baseline;
}
}
.mst-terms dt {
color: var(--mst-grey);
font-size: .75rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
line-height: 1.5;
}
.mst-terms dd {
margin: 0;
color: var(--mst-ink);
font-size: 1.01rem;
line-height: 1.4;
}
.mst-yn {
display: grid;
gap: clamp(12px, 1.4vw, 18px);
align-items: start;
}
@media (min-width: 880px) {
.mst-yn {
grid-template-columns: 1fr 1fr;
}
}
.mst-yn__panel {
padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
border-radius: 20px;
background: var(--mst-white);
}
.mst-yn__panel--no {
background: rgba(0, 0, 0, .035);
border-color: rgba(0, 0, 0, .05);
}
.mst-yn__cap {
margin: 0 !important;
padding-bottom: 12px;
color: var(--mst-grey);
font-size: .73rem !important;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
}
.mst-yn ul {
margin: 0;
padding: 0;
list-style: none;
}
.mst-yn li {
position: relative;
padding: 12px 0 12px 28px;
border-top: 1px solid rgba(0, 0, 0, .08);
font-size: .99rem;
line-height: 1.42;
}
.mst-yn__panel--yes li::before {
content: "";
position: absolute;
left: 1px;
top: 18px;
width: 13px;
height: 13px;
background:
linear-gradient(#1E9B57, #1E9B57) center / 13px 2px no-repeat,
linear-gradient(#1E9B57, #1E9B57) center / 2px 13px no-repeat;
}
.mst-yn__panel--no li {
color: #4B4B4B;
}
.mst-yn__panel--no li::before {
content: "";
position: absolute;
left: 1px;
top: 22px;
width: 13px;
height: 2.6px;
background: #D8322B;
}
.mst-adv {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: clamp(8px, 0.9vw, 11px);
}
@media (min-width: 760px) {
.mst-adv {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1040px) {
.mst-adv {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.mst-adv__card {
position: relative;
display: flex;
flex-direction: column;
background: var(--mst-white);
transition: transform .25s, box-shadow .25s;
align-items: center;
gap: 6px;
overflow: hidden;
padding: clamp(13px, 1.4vw, 17px);
border-radius: 22px;
box-shadow: none;
text-align: center;
}
.mst-adv__card p {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5;
align-self: stretch;
}
.mst-adv__card::before {
content: "";
display: block;
width: 30px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--mst-focus), var(--mst-amber));
}
.mst-adv__card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 42px -34px rgba(0, 0, 0, .75);
}
.mst-adv__card .mst-adv__ttl {
display: block;
margin: 0;
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
text-wrap: balance;
padding-right: 0;
font-size: 1.18rem;
}
.mst-adv__card--hero {
border-color: rgba(0, 0, 0, .05);
background: linear-gradient(150deg, #FFD758 0%, var(--mst-amber) 58%, #FFC526 100%);
}
.mst-adv__card--hero::before {
background: rgba(0, 0, 0, .35);
}
.mst-adv__card--hero:hover {
border-color: rgba(0, 0, 0, .12);
}
.mst-adv__flag {
align-self: center;
padding: 5px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .5);
color: var(--mst-ink);
font-size: .72rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
}
.mst-adv__card--hero .mst-adv__ttl {
padding-right: 0;
font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
}
.mst-adv__card--hero p {
max-width: none;
color: rgba(0, 0, 0, .78);
font-size: 1.02rem !important;
}
.mst-mode {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0 clamp(24px, 3.4vw, 56px);
}
.mst-fold--raz[open] > .mst-fold__sum {
display: none;
}
.mst-fold__body > .mst-h3--deco:first-child {
margin-top: 0;
}
@media (min-width: 860px) {
.mst-mode {
grid-template-columns: 1fr 1fr;
}
.mst-mode li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
.mst-mode li {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 18px 0;
border-top: 1px solid rgba(0, 0, 0, .09);
font-size: 1rem;
line-height: 1.45;
}
.mst-mode li::before {
content: "";
width: 30px;
height: 30px;
background: var(--mst-focus);
-webkit-mask: var(--mst-ico) center / 30px 30px no-repeat;
mask: var(--mst-ico) center / 30px 30px no-repeat;
}
.mst-mode li:nth-child(1) {
--mst-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 3.4H19a1.6 1.6 0 0 1 1.6 1.6v6.4L11.4 20.6a1.6 1.6 0 0 1-2.3 0l-5.7-5.7a1.6 1.6 0 0 1 0-2.3z'/%3E%3Ccircle cx='16.4' cy='7.6' r='1.3'/%3E%3C/svg%3E");
}
.mst-mode li:nth-child(2) {
--mst-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6v18.8M4 7.2l16 9.6M20 7.2 4 16.8'/%3E%3Cpath d='M9.4 4.6 12 6.8l2.6-2.2M9.4 19.4 12 17.2l2.6 2.2'/%3E%3C/svg%3E");
}
.mst-mode li:nth-child(3) {
--mst-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.6' r='7.8'/%3E%3Cpath d='M12 8.4v4.4l3 1.8'/%3E%3Cpath d='M9.6 2.6h4.8'/%3E%3C/svg%3E");
}
.mst-mode li:nth-child(4) {
--mst-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='4.2' width='17.2' height='15.6' rx='2.2'/%3E%3Cpath d='M3.4 9.4h17.2'/%3E%3Cpath d='M7 6.8h1.6M11 6.8h6'/%3E%3Cpath d='M7.4 13.2h9.2'/%3E%3C/svg%3E");
}
.mst-mode li:nth-child(5) {
--mst-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 7.6 12 3.4l8.6 4.2v8.8L12 20.6l-8.6-4.2z'/%3E%3Cpath d='M3.4 7.6 12 11.8l8.6-4.2M12 11.8v8.8'/%3E%3C/svg%3E");
}
.mst-fold {
margin-top: clamp(18px, 2.2vw, 28px);
}
.mst-fold__sum {
display: grid;
grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
align-items: center;
gap: clamp(10px, 1.4vw, 20px);
cursor: pointer;
list-style: none;
}
.mst-fold__sum::-webkit-details-marker {
display: none;
}
.mst-fold__sum::before,
.mst-fold__sum::after {
content: "";
height: 1px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .14));
}
.mst-fold__sum::after {
background: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0));
}
.mst-fold__cap {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 6px 6px 14px;
border: 1px solid rgba(0, 0, 0, .16);
border-radius: 999px;
background: rgba(255, 255, 255, .5);
color: var(--mst-grey);
font-size: clamp(.8rem, .77rem + .15vw, .86rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
transition: border-color .2s, background .2s, color .2s;
}
.mst-fold__sum:hover .mst-fold__cap {
border-color: rgba(252, 190, 12, .8);
background: var(--mst-white);
color: var(--mst-ink);
}
.mst-fold__sum:focus-visible .mst-fold__cap {
outline: 2px solid var(--mst-ink);
outline-offset: 3px;
}
.mst-fold__t--on {
display: none;
}
.mst-fold[open] .mst-fold__t--off {
display: none;
}
.mst-fold[open] .mst-fold__t--on {
display: inline;
}
.mst-fold__cap::after {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 1px solid rgba(0, 0, 0, .18);
border-radius: 50%;
background:
linear-gradient(var(--mst-grey), var(--mst-grey)) center / 8px 1.5px no-repeat,
linear-gradient(var(--mst-grey), var(--mst-grey)) center / 1.5px 8px no-repeat;
transition: transform .25s ease, border-color .2s;
}
.mst-fold__sum:hover .mst-fold__cap::after {
border-color: rgba(252, 190, 12, .9);
}
.mst-fold[open] .mst-fold__cap::after {
transform: rotate(45deg);
}
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
.mst-fold::details-content {
block-size: 0;
overflow: hidden;
transition: block-size .4s ease, content-visibility .4s allow-discrete;
}
.mst-fold[open]::details-content {
block-size: auto;
}
}
.mst-dalshe__sum {
display: flex;
justify-content: center;
cursor: pointer;
list-style: none;
}
.mst-dalshe__sum::-webkit-details-marker {
display: none;
}
.mst-dalshe__btn {
gap: 14px;
border-radius: 999px;
}
.mst-dalshe__btn::after {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transition: transform .25s ease, margin-top .25s ease;
transform: rotate(45deg);
}
.mst-dalshe[open] .mst-dalshe__btn::after {
margin-top: 4px;
transform: rotate(-135deg);
}
.mst-dalshe__sum:focus-visible .mst-dalshe__btn {
outline: 2px solid var(--mst-ink);
outline-offset: 3px;
}
.mst-dalshe[open] {
display: flex;
flex-direction: column;
}
.mst-dalshe[open] > .mst-dalshe__sum {
order: 2;
margin-top: clamp(18px, 2.2vw, 28px);
}
.mst-fold__body > .mst-terms,
.mst-fold__body > .mst-case {
margin-top: clamp(22px, 1.8vw, 26px);
}
.mst-fold__body > .mst-yn + .mst-case {
margin-top: clamp(30px, 3.4vw, 44px);
}
.mst-h3--deco {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.6vw, 20px);
margin-top: clamp(30px, 3.4vw, 44px);
text-align: center;
text-wrap: balance;
}
.mst-h3--deco::before,
.mst-h3--deco::after {
content: "";
flex: 0 1 clamp(24px, 8vw, 96px);
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--mst-focus));
}
.mst-h3--deco::after {
background: linear-gradient(90deg, var(--mst-focus), transparent);
}
.mst-foot__contacts a {
overflow-wrap: anywhere;
}
.mst-l > .mst-h2,
.mst-catalog__h2 {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 1.8vw, 26px);
text-align: center;
text-wrap: balance;
}
.mst-l > .mst-h2::before,
.mst-l > .mst-h2::after,
.mst-catalog__h2::before,
.mst-catalog__h2::after {
content: "";
display: block;
flex: 0 1 clamp(26px, 8vw, 120px);
width: auto;
height: 3px;
margin: 0;
border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--mst-focus));
}
.mst-l > .mst-h2::after,
.mst-catalog__h2::after {
background: linear-gradient(90deg, var(--mst-focus), transparent);
}
.mst-catalog__h2 {
margin-bottom: clamp(20px, 2.6vw, 34px);
}
.mst-catalog__h2:has(+ .mst-catalog__lede) {
margin-bottom: 14px;
}
.mst-catalog__lede {
margin-top: 0;
margin-bottom: clamp(20px, 2.6vw, 34px);
}
.mst-l > .mst-h2 + .mst-catalog__lede {
max-width: none;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.mst-l > .mst-h2 + p {
max-width: 78ch;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.mst-l:has(.mst-seg) > .mst-h2 + p {
max-width: none;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.mst-l--item {
padding-top: clamp(18px, 2.2vw, 30px);
}
.mst-item__crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 clamp(14px, 1.8vw, 22px);
color: var(--mst-grey);
font-size: .88rem;
}
.mst-item__crumbs a {
position: relative;
color: var(--mst-grey);
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.mst-item__crumbs a::after {
content: "";
position: absolute;
inset: -12px -8px;
}
.mst-item__crumbs a:hover {
color: var(--mst-ink);
border-bottom-color: var(--mst-focus);
}
.mst-item__crumbs span {
color: var(--mst-focus);
}
.mst-item__crumbs b {
color: var(--mst-ink);
font-weight: 700;
}
.mst-item__grid {
display: grid;
gap: clamp(20px, 3vw, 44px);
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 880px) {
.mst-item__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
}
.mst-item__pic {
margin: 0;
border-radius: 22px;
overflow: hidden;
}
.mst-item__pic img,
.mst-card__photo img,
.mst-card__minik img {
mix-blend-mode: multiply;
}
.mst-item__pic img {
display: block;
width: 100%;
height: 100%;
max-height: 420px;
object-fit: cover;
}
.mst-item__eyebrow {
margin: 0 0 8px !important;
color: var(--mst-grey);
font-size: .78rem !important;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.mst-item__title {
margin: 0 0 12px;
font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -.035em;
text-wrap: balance;
}
.mst-item__sostav {
margin: 0 0 clamp(16px, 2vw, 24px) !important;
max-width: 46ch;
color: var(--mst-grey);
font-size: clamp(1rem, .95rem + .3vw, 1.14rem) !important;
line-height: 1.5;
}
.mst-item__btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.mst-rel {
position: relative;
}
.mst-rel__track {
display: flex;
gap: 16px;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 2px 2px 4px;
list-style: none;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18px, #000 54px, #000 calc(100% - 54px), rgba(0,0,0,.35) calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18px, #000 54px, #000 calc(100% - 54px), rgba(0,0,0,.35) calc(100% - 18px), transparent 100%);
}
@media (max-width: 700px) {
.mst-rel__track {
-webkit-mask-image: none;
mask-image: none;
}
}
.mst-rel__track::-webkit-scrollbar {
display: none;
}
.mst-rel__track > .mst-card {
box-sizing: border-box;
flex: 0 0 calc((100% - 3 * 16px) / 4);
}
@media (max-width: 1180px) {
.mst-rel__track > .mst-card {
flex-basis: calc((100% - 2 * 16px) / 3);
}
}
@media (max-width: 860px) {
.mst-rel__track > .mst-card {
flex-basis: calc((100% - 16px) / 2);
}
}
@media (max-width: 560px) {
.mst-rel__track {
gap: 12px;
}
.mst-rel__track > .mst-card {
flex-basis: 78%;
}
}
.mst-rel__track .mst-card__photo {
height: auto;
aspect-ratio: 7 / 4;
}
.mst-rel__track .mst-card {
padding: 12px 12px 18px;
}
.mst-rel__track .mst-card__body {
gap: 8px;
padding: 13px 4px 0;
}
.mst-rel__nav {
position: absolute;
top: 32%;
z-index: 3;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 50%;
background: rgba(255, 255, 255, .92);
box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45);
backdrop-filter: blur(6px);
cursor: pointer;
transform: translateY(-50%);
transition: background .2s, box-shadow .2s, transform .2s;
}
.mst-rel__nav--prev {
left: 2px;
}
.mst-rel__nav--next {
right: 2px;
}
.mst-rel__nav span {
display: block;
width: 10px;
height: 10px;
border-top: 2px solid var(--mst-ink);
border-right: 2px solid var(--mst-ink);
}
.mst-rel__nav--prev span {
transform: translateX(2px) rotate(-135deg);
}
.mst-rel__nav--next span {
transform: translateX(-2px) rotate(45deg);
}
.mst-rel__nav:hover {
background: linear-gradient(150deg, var(--mst-card), var(--mst-focus));
box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .5);
transform: translateY(-50%) scale(1.06);
}
.mst-rel__nav:active {
transform: translateY(-50%) scale(.96);
}
.mst-rel__nav:focus-visible {
outline: 3px solid var(--mst-focus);
outline-offset: 3px;
}
@media (max-width: 700px), (hover: none) {
.mst-rel__nav {
display: none;
}
}
.mst-how {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
margin-top: clamp(26px, 3.4vw, 44px);
padding-top: clamp(22px, 3vw, 36px);
border-top: 1px solid rgba(0, 0, 0, .1);
scroll-margin-top: 78px;
}
.mst-how > * {
width: 100%;
}
.mst-how__title {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.6vw, 22px);
margin: 0 0 16px;
color: var(--mst-ink);
font-size: clamp(1.3rem, .98rem + 1.4vw, 2.05rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.03em;
text-align: center;
text-wrap: balance;
}
.mst-how__title::before,
.mst-how__title::after {
content: "";
display: block;
flex: 0 1 clamp(20px, 6vw, 90px);
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--mst-focus));
}
.mst-how__title::after {
background: linear-gradient(90deg, var(--mst-focus), transparent);
}
.mst-how > .mst-how__avtor {
display: inline-flex;
align-items: center;
gap: 10px;
width: auto;
margin: 0 0 clamp(18px, 2.4vw, 26px);
padding: 5px 18px 5px 5px;
border: 1px solid rgba(252, 142, 12, .28);
border-radius: 999px;
background: var(--mst-white);
box-shadow: 0 6px 18px -10px rgba(252, 142, 12, .55);
line-height: 1;
}
.mst-how__avtor-znak {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mst-amber), var(--mst-focus));
color: var(--mst-ink);
font-size: 1rem;
font-weight: 900;
}
.mst-how__avtor-metka {
color: var(--mst-muted);
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.mst-how__avtor-imya {
padding-left: 10px;
border-left: 1px solid rgba(0, 0, 0, .12);
color: var(--mst-ink);
font-size: 1rem;
font-weight: 800;
letter-spacing: -.01em;
}
.mst-how__body {
max-width: 900px;
margin: 0 auto;
font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
line-height: 1.6;
}
.mst-how__body > * {
box-sizing: border-box;
width: 100%;
}
.mst-how__body p {
margin: 0 0 16px;
line-height: 1.62;
text-align: justify;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 7 4 3;
}
.mst-how__body > p:first-child,
.mst-how__intro {
text-align: center;
hyphens: manual;
-webkit-hyphens: manual;
}
.mst-how__body .mst-how__intro {
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
}
.mst-how__intro {
margin-bottom: 10px !important;
color: var(--mst-ink);
font-weight: 700;
}
.mst-how__body > p:first-child {
max-width: 72ch;
margin: 0 auto clamp(20px, 2.6vw, 30px);
color: var(--mst-grey);
font-size: clamp(1.02rem, .97rem + .3vw, 1.16rem);
text-align: center;
}
.mst-how__body h3 {
display: flex;
align-items: center;
gap: 12px;
margin: clamp(20px, 2.4vw, 28px) 0 12px;
color: var(--mst-ink);
font-size: clamp(1.05rem, .98rem + .35vw, 1.28rem);
font-weight: 800;
letter-spacing: -.01em;
}
.mst-how__body h3::after {
content: "";
flex: 1;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--mst-focus), transparent);
opacity: .55;
}
.mst-how__body ul.mst-ing {
margin: 0 0 20px;
padding: 10px clamp(16px, 2vw, 24px);
border-radius: 18px;
background: var(--mst-white);
box-shadow: 0 18px 34px -32px rgba(0, 0, 0, .55);
list-style: none;
}
@media (min-width: 760px) {
.mst-how__body ul.mst-ing {
columns: 2;
column-gap: clamp(28px, 3vw, 48px);
}
}
.mst-how__body ul.mst-ing > li {
break-inside: avoid;
position: relative;
display: flex;
align-items: baseline;
gap: 7px;
padding: 8px 0 8px 28px;
}
.mst-how__body ul.mst-ing > li::before {
content: "";
position: absolute;
left: 0;
top: .42em;
width: 18px;
height: 18px;
border-radius: 6px;
background: linear-gradient(150deg, var(--mst-card), var(--mst-focus));
}
.mst-how__body ul.mst-ing > li::after {
content: "";
position: absolute;
left: 5px;
top: .64em;
width: 8px;
height: 4px;
border-left: 2px solid var(--mst-ink);
border-bottom: 2px solid var(--mst-ink);
transform: rotate(-45deg);
}
.mst-ing__name {
flex: 0 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
@media (max-width: 380px) {
.mst-how__body ul.mst-ing > li {
flex-wrap: wrap;
}
.mst-how__body ul.mst-ing .mst-ing__qty {
margin-left: auto;
}
}
.mst-ing__lead {
flex: 1 1 auto;
min-width: 14px;
height: .55em;
border-bottom: 1px dotted rgba(0, 0, 0, .3);
}
.mst-ing__qty {
flex: 0 0 auto;
color: var(--mst-ink);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mst-how__num {
color: #8A5A00;
font-weight: 800;
white-space: nowrap;
}
.mst-how__body ol {
display: grid;
gap: 12px;
margin: clamp(16px, 2vw, 22px) 0 0;
padding: 0;
list-style: none;
counter-reset: mst-step;
}
.mst-how__body ol > li {
position: relative;
padding: 14px 18px 14px 66px;
border-radius: 16px;
background: var(--mst-white);
box-shadow: 0 16px 30px -30px rgba(0, 0, 0, .6);
}
.mst-how__body ol > li::before {
counter-increment: mst-step;
content: counter(mst-step);
position: absolute;
left: 14px;
top: 13px;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: linear-gradient(150deg, var(--mst-card), var(--mst-focus));
color: var(--mst-ink);
font-size: 1.02rem;
font-weight: 800;
}
.mst-how__body blockquote {
margin: clamp(16px, 2vw, 22px) 0 0;
padding: 14px 18px;
border-left: 3px solid var(--mst-focus);
border-radius: 0 14px 14px 0;
background: linear-gradient(150deg, #FFF4D2, #FFE9AE);
}
.mst-how__body blockquote p:last-child {
margin: 0;
}
@media (max-width: 600px) {
.mst-how__body ol > li {
padding: 12px 14px 12px 50px;
}
.mst-how__body ol > li::before {
left: 11px;
top: 11px;
width: 30px;
height: 30px;
border-radius: 10px;
font-size: .95rem;
}
}
.mst-fab {
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 9000;
}
.mst-fab__chk {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mst-fab__btn {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--mst-amber);
color: var(--mst-ink);
cursor: pointer;
box-shadow:
0 2px 8px rgba(0,0,0,.18),
0 0 0 4px rgba(252,190,12,.25);
transition: transform .25s, box-shadow .25s;
}
.mst-fab__btn:hover {
transform: scale(1.07);
box-shadow:
0 4px 18px rgba(0,0,0,.22),
0 0 0 6px rgba(252,190,12,.3);
}
.mst-fab__btn svg {
width: 26px;
height: 26px;
transition: transform .3s;
}
.mst-fab__chk:focus-visible ~ .mst-fab__btn {
outline: 3px solid var(--mst-ink);
outline-offset: 3px;
}
.mst-fab__chk:checked ~ .mst-fab__btn svg {
transform: rotate(45deg);
}
.mst-fab__menu {
position: absolute;
right: 0;
bottom: calc(100% + 14px);
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(.92);
transition: opacity .25s, transform .25s, visibility .25s;
}
.mst-fab__chk:checked ~ .mst-fab__menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.mst-fab__link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
min-width: max-content;
border-radius: 10px;
background: transparent;
color: var(--mst-ink);
text-decoration: none;
font-size: .875rem;
font-weight: 500;
white-space: nowrap;
transition: background .15s;
}
.mst-fab__link:hover {
background: var(--mst-amber);
}
.mst-fab__ico {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: var(--mst-field);
color: var(--mst-ink);
}
.mst-fab__ico--wa {
background: #25D366;
color: #fff;
}
.mst-fab__ico--tg {
background: #229ED9;
color: #fff;
}
.mst-fab__ico--vk {
background: #0077FF;
color: #fff;
}
.mst-fab__ico--tel {
background: var(--mst-ink);
color: var(--mst-amber);
}
.mst-fab__ico svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.mst-fab__overlay {
display: none;
}
.mst-fab__chk:checked ~ .mst-fab__overlay {
display: block;
position: fixed;
inset: 0;
z-index: -1;
}
@media (max-width: 600px) {
.mst-fab__btn {
width: 52px;
height: 52px;
}
.mst-fab__btn svg {
width: 22px;
height: 22px;
}
.mst-fab__menu {
padding: 6px;
}
.mst-fab__link {
padding: 7px 12px 7px 7px;
font-size: .8125rem;
}
.mst-fab__ico {
width: 30px;
height: 30px;
}
.mst-fab__ico svg {
width: 16px;
height: 16px;
}
}
.mst-cookie {
position: fixed;
left: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 9500;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 380px;
padding: 20px 22px;
border-radius: 16px;
background: #fff;
color: var(--mst-ink);
font-size: .8125rem;
line-height: 1.5;
box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.06);
}
.mst-cookie[hidden] {
display: none !important;
}
.mst-cookie__text {
margin: 0;
}
.mst-cookie__text a {
color: var(--mst-focus);
text-decoration: underline;
text-underline-offset: 2px;
}
.mst-cookie__text a:hover {
color: var(--mst-ink);
}
.mst-cookie__ok {
align-self: flex-start;
padding: 10px 24px;
border: none;
border-radius: 8px;
background: var(--mst-ink);
color: #fff;
font-size: .8125rem;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.mst-cookie__ok:hover {
background: var(--mst-grey);
}
@media (max-width: 600px) {
.mst-cookie {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
padding: 16px;
gap: 12px;
}
.mst-cookie__ok {
align-self: stretch;
text-align: center;
padding: 12px;
}
}
#voprosy {
padding: clamp(18px, 2.6vw, 37px);
}
@media (min-width: 701px) {
.mst-faq summary {
padding-block: 8px;
}
}
.mst-cta .mst-h2 {
margin-bottom: 12px;
}
.mst-form .mst-input {
color: var(--mst-ink);
border-color: rgba(0, 0, 0, .12);
background: var(--mst-field);
font-size: 1rem;
box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset;
padding-block: 6px;
}
.mst-form .mst-agree {
margin: 8px 0 10px;
}
.mst-form .mst-btn {
padding: 13px 30px;
padding-block: 10px;
}
#otzyvy {
padding: clamp(18px, 2.6vw, 37px);
}
#otzyvy .mst-h2 {
margin-bottom: 12px;
}
.mst-otz__card {
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 22px;
background: var(--mst-white);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
gap: 9px;
padding: 14px 18px 11px;
min-width: 0;
}
.mst-otz__name,
.mst-otz__text {
overflow-wrap: anywhere;
}
.mst-otz__text {
margin: 0;
color: var(--mst-grey);
font-size: .98rem;
line-height: 1.42;
}
.mst-otz__head {
display: flex;
align-items: center;
padding-bottom: 9px;
border-bottom: 1px solid rgba(252, 190, 12, .5);
gap: 10px;
padding-top: 9px;
}
.mst-otz__ava {
flex: 0 0 auto;
border: 2px solid var(--mst-white);
border-radius: 50%;
overflow: hidden;
background: var(--mst-field);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
width: 38px;
height: 38px;
}
.mst-otz-dalshe {
margin-top: clamp(10px, 1.3vw, 16px);
}
.mst-otz-dalshe .mst-dalshe__btn {
padding: 9px 30px;
}
.mst-karta-ssylka {
display: inline-flex;
align-items: center;
gap: .45em;
color: #C9C9C9;
font-size: .88rem;
font-weight: 400;
text-decoration: none;
}
.mst-karta-ssylka__slova {
text-decoration: underline;
text-decoration-color: rgba(252, 190, 12, .5);
text-underline-offset: 3px;
}
.mst-karta-ssylka:hover,
.mst-karta-ssylka:focus-visible {
color: var(--mst-amber);
}
.mst-karta-ssylka:hover .mst-karta-ssylka__slova,
.mst-karta-ssylka:focus-visible .mst-karta-ssylka__slova {
text-decoration-color: var(--mst-amber);
}
.mst-karta-okno {
width: min(96vw, 1360px);
max-width: none;
height: min(88vh, 920px);
max-height: none;
padding: 0;
border: 0;
border-radius: 28px;
overflow: hidden;
background: var(--mst-white);
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65);
}
.mst-karta-okno[open] {
display: flex;
flex-direction: column;
}
.mst-karta-okno__shapka {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex: 0 0 auto;
padding: 10px 10px 10px clamp(14px, 2vw, 24px);
background: var(--mst-ink);
color: var(--mst-white);
}
.mst-karta-okno__adres {
min-width: 0;
font-size: clamp(.86rem, .8rem + .3vw, 1.02rem);
font-weight: 700;
line-height: 1.25;
text-wrap: balance;
}
.mst-karta-okno::backdrop {
background: rgba(24, 19, 12, .72);
backdrop-filter: blur(3px);
}
.mst-karta-okno iframe {
display: block;
flex: 1 1 auto;
width: 100%;
height: auto;
min-height: 0;
border: 0;
}
.mst-karta-okno__zakryt {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--mst-ink);
color: var(--mst-amber);
cursor: pointer;
box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
transition: background .2s, transform .15s;
}
.mst-karta-okno__zakryt:hover {
background: #000;
transform: scale(1.06);
}
.mst-karta-okno__zakryt:focus-visible {
outline: 2px solid var(--mst-focus);
outline-offset: 3px;
}
.mst-karta-okno__zakryt span {
display: block;
width: 17px;
height: 17px;
background:
linear-gradient(currentColor, currentColor) center / 17px 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 17px no-repeat;
transform: rotate(45deg);
}
body.mst-zamok {
overflow: hidden;
}
@media (max-width: 700px) {
.mst-karta-okno {
width: 100vw;
height: 100dvh;
border-radius: 0;
}
.mst-karta-okno__shapka {
padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.mst-karta-okno__zakryt {
transition: none;
}
}
.mst-cta {
display: grid;
box-sizing: border-box;
width: 100%;
max-width: calc(820px + 2 * clamp(11px, 1.3vw, 17px));
margin-inline: auto;
border-radius: 28px;
background:
radial-gradient(130% 100% at 10% -10%, rgba(252, 190, 12, .15) 0%, rgba(252, 190, 12, 0) 60%),
linear-gradient(158deg, #5A4A3C 0%, #493B2F 52%, #3B3026 100%);
border: 1px solid rgba(252, 190, 12, .22);
color: var(--mst-white);
box-shadow: 0 26px 54px -34px rgba(60, 38, 0, .8);
padding: clamp(11px, 1.3vw, 17px);
gap: clamp(9px, 1vw, 13px);
}
.mst-cta__text > p {
text-align: center;
text-wrap: balance;
margin-bottom: 10px;
line-height: 1.45;
}
.mst-form .mst-field__cap {
margin-bottom: 2px;
}
.mst-form textarea.mst-input {
resize: vertical;
min-height: 0;
height: 62px;
}
.mst-form__niz {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(12px, 1.6vw, 22px);
margin-top: clamp(6px, .8vw, 10px);
}
.mst-otz-knopki {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 14px;
margin-top: clamp(10px, 1.3vw, 16px);
}
.mst-otz-knopki .mst-otz-dalshe .mst-btn,
.mst-otzf-knopka {
box-sizing: border-box;
min-width: 214px;
}
.mst-otz-knopki .mst-otz-dalshe {
margin-top: 0;
}
.mst-otzf-knopka {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
box-sizing: border-box;
padding: 9px 28px;
border-radius: 999px;
color: var(--mst-ink);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -.01em;
line-height: 1.4;
box-shadow: 0 0 0 2px var(--mst-ink) inset;
cursor: pointer;
transition: transform .2s, background .2s, color .2s;
}
.mst-otzf-knopka__ico {
flex: 0 0 auto;
width: 16px;
height: 16px;
}
@media (hover: hover) {
.mst-otzf-knopka:hover {
transform: translateY(-2px);
background: var(--mst-ink);
color: var(--mst-amber);
}
}
.mst-otzf-knopka:has(.mst-otzf-toggle:focus-visible) {
outline: 2px solid var(--mst-ink);
outline-offset: 3px;
}
.mst-otzf-toggle {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mst-otzf-knopka .mst-fold__t--on,
.mst-otzf-knopka:has(.mst-otzf-toggle:checked) .mst-fold__t--off {
display: none;
}
.mst-otzf-knopka:has(.mst-otzf-toggle:checked) .mst-fold__t--on {
display: inline;
}
#otzyvy:not(:has(.mst-otzf-toggle:checked)) .mst-otzf {
display: none;
}
.mst-otzf {
max-width: 760px;
margin: clamp(14px, 1.8vw, 22px) auto 0;
}
.mst-otzf__forma {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mst-otzf .mst-input {
padding: 10px 14px;
color: var(--mst-ink);
border-color: transparent;
background: var(--mst-white);
font-size: 1rem;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}
.mst-otzf .mst-input:focus {
border-color: var(--mst-focus);
box-shadow: none;
}
.mst-otzf__tekst {
grid-column: 1 / -1;
min-height: 96px;
resize: vertical;
}
.mst-otzf .mst-agree {
align-self: center;
margin: 4px 0 0;
color: var(--mst-muted);
font-size: .8rem;
}
.mst-otzf .mst-agree a {
color: var(--mst-grey);
}
.mst-otzf .mst-btn {
justify-self: end;
align-self: center;
margin-top: 4px;
padding: 10px 34px;
font-size: 1rem;
}
.mst-otzf__note {
margin: 0 0 12px;
padding: 11px 16px;
border-radius: 12px;
text-align: center;
font-size: .95rem;
font-weight: 700;
}
.mst-otzf__note--ok {
background: rgba(252, 190, 12, .22);
color: var(--mst-ink);
}
.mst-otzf__note--err {
background: rgba(228, 25, 25, .1);
color: #B3261E;
}
@media (max-width: 600px) {
.mst-otzf__forma {
grid-template-columns: 1fr;
}
.mst-otzf .mst-btn {
justify-self: stretch;
}
}