@font-face {
    font-family: icon;
    src: url(../fonts/icon.woff2);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
    --bg-1: #eedfc7
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: mazzard, sans-serif;
    font-size: 16px;
    line-height: 1;
    color: var(--text-1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
html,
body {
    width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    background: var(--bg-1);
    max-width: 100dvw;
    overflow: hidden;
    padding-top: 121px;
}
body:has(header .catalog.open) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #0D0D1E66;
        z-index: 90;
    }
}
a {
    text-decoration: none;
    transition: 0.3s linear;
}
input, textarea {
    appearance: none;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #1310201a;
    color: var(--text-12);
    font-size: 16px;
    line-height: 1;
    transition: 0.3s linear;
}
input::placeholder {
    color: var(--text-12);
    font-size: 16px;
    line-height: 1;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-3) inset, 0 0 0 1px #38C1AE !important; 
    -webkit-text-fill-color: var(--input-text) !important;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: background-color 5000s ease-in-out 0s;
}
input:focus, textarea:focus {
    outline: none !important;
    border: 1px solid #38C1AE;
    box-shadow: none !important;
    font-size: 16px;
}
input.error {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, var(--error-text-2), var(--error-text-2), var(--error-text-2)) border-box;
}
input::placeholder, textarea::placeholder {
    opacity: 1;
    transition: opacity 0.3s ease;
}
input:focus::placeholder, textarea:focus::placeholder {
    opacity: 0; 
}
::selection {
    background-color: rgba(56, 193, 174, 1);
    color: #fff;
}
h1 {
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--text-1);
}
img {
    width: 100%;
    display: block;
}
label, button {
    cursor: pointer;
    appearance: none;
    border: none;
}

.wrapper {
    width: 100%;
    max-width: 1620px;
    margin: 0 auto;
}


@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1279px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
}
@media (hover:hover) {
   
}