@charset "UTF-8";

/* font-family settings */
@font-face {
    font-family: "Arial";
    src: url("../fonts/ArialMT.eot");
    src: url("../fonts/ArialMT.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialMT.woff2") format("woff2"), url("../fonts/ArialMT.woff") format("woff"), url("../fonts/ArialMT.ttf") format("truetype"), url("../fonts/ArialMT.svg#ArialMT") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-BoldMT.eot");
    src: url("../fonts/Arial-BoldMT.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-BoldMT.woff2") format("woff2"), url("../fonts/Arial-BoldMT.woff") format("woff"), url("../fonts/Arial-BoldMT.ttf") format("truetype"), url("../fonts/Arial-BoldMT.svg#Arial-BoldMT") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-BoldMT_1.eot");
    src: url("../fonts/Arial-BoldMT_1.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-BoldMT_1.woff2") format("woff2"), url("../fonts/Arial-BoldMT_1.woff") format("woff"), url("../fonts/Arial-BoldMT_1.ttf") format("truetype"), url("../fonts/Arial-BoldMT_1.svg#Arial-BoldMT") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-Lgt.eot");
    src: url("../fonts/Arial-Lgt.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-Lgt.woff2") format("woff2"), url("../fonts/Arial-Lgt.woff") format("woff"), url("../fonts/Arial-Lgt.ttf") format("truetype"), url("../fonts/Arial-Lgt.svg#Arial-Lgt") format("svg");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-BlackItalic.eot");
    src: url("../fonts/Arial-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-BlackItalic.woff2") format("woff2"), url("../fonts/Arial-BlackItalic.woff") format("woff"), url("../fonts/Arial-BlackItalic.ttf") format("truetype"), url("../fonts/Arial-BlackItalic.svg#Arial-BlackItalic") format("svg");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial CE";
    src: url("../fonts/ArialCE-BoldItalic.eot");
    src: url("../fonts/ArialCE-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialCE-BoldItalic.woff2") format("woff2"), url("../fonts/ArialCE-BoldItalic.woff") format("woff"), url("../fonts/ArialCE-BoldItalic.ttf") format("truetype"), url("../fonts/ArialCE-BoldItalic.svg#ArialCE-BoldItalic") format("svg");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("../fonts/ArialNarrow-BoldItalic.eot");
    src: url("../fonts/ArialNarrow-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialNarrow-BoldItalic.woff2") format("woff2"), url("../fonts/ArialNarrow-BoldItalic.woff") format("woff"), url("../fonts/ArialNarrow-BoldItalic.ttf") format("truetype"), url("../fonts/ArialNarrow-BoldItalic.svg#ArialNarrow-BoldItalic") format("svg");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("../fonts/ArialNarrow-Italic.eot");
    src: url("../fonts/ArialNarrow-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialNarrow-Italic.woff2") format("woff2"), url("../fonts/ArialNarrow-Italic.woff") format("woff"), url("../fonts/ArialNarrow-Italic.ttf") format("truetype"), url("../fonts/ArialNarrow-Italic.svg#ArialNarrow-Italic") format("svg");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-ItalicMT.eot");
    src: url("../fonts/Arial-ItalicMT.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-ItalicMT.woff2") format("woff2"), url("../fonts/Arial-ItalicMT.woff") format("woff"), url("../fonts/Arial-ItalicMT.ttf") format("truetype"), url("../fonts/Arial-ItalicMT.svg#Arial-ItalicMT") format("svg");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-BoldItalicMT.eot");
    src: url("../fonts/Arial-BoldItalicMT.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-BoldItalicMT.woff2") format("woff2"), url("../fonts/Arial-BoldItalicMT.woff") format("woff"), url("../fonts/Arial-BoldItalicMT.ttf") format("truetype"), url("../fonts/Arial-BoldItalicMT.svg#Arial-BoldItalicMT") format("svg");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-ItalicMT_1.eot");
    src: url("../fonts/Arial-ItalicMT_1.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-ItalicMT_1.woff2") format("woff2"), url("../fonts/Arial-ItalicMT_1.woff") format("woff"), url("../fonts/Arial-ItalicMT_1.ttf") format("truetype"), url("../fonts/Arial-ItalicMT_1.svg#Arial-ItalicMT") format("svg");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-Mdm.eot");
    src: url("../fonts/Arial-Mdm.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-Mdm.woff2") format("woff2"), url("../fonts/Arial-Mdm.woff") format("woff"), url("../fonts/Arial-Mdm.ttf") format("truetype"), url("../fonts/Arial-Mdm.svg#Arial-Mdm") format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-Black.eot");
    src: url("../fonts/Arial-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-Black.woff2") format("woff2"), url("../fonts/Arial-Black.woff") format("woff"), url("../fonts/Arial-Black.ttf") format("truetype"), url("../fonts/Arial-Black.svg#Arial-Black") format("svg");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-MdmItl.eot");
    src: url("../fonts/Arial-MdmItl.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-MdmItl.woff2") format("woff2"), url("../fonts/Arial-MdmItl.woff") format("woff"), url("../fonts/Arial-MdmItl.ttf") format("truetype"), url("../fonts/Arial-MdmItl.svg#Arial-MdmItl") format("svg");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("../fonts/ArialNarrow.eot");
    src: url("../fonts/ArialNarrow.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialNarrow.woff2") format("woff2"), url("../fonts/ArialNarrow.woff") format("woff"), url("../fonts/ArialNarrow.ttf") format("truetype"), url("../fonts/ArialNarrow.svg#ArialNarrow") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial CE MT";
    src: url("../fonts/ArialCEMTBlack-Regular.eot");
    src: url("../fonts/ArialCEMTBlack-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialCEMTBlack-Regular.woff2") format("woff2"), url("../fonts/ArialCEMTBlack-Regular.woff") format("woff"), url("../fonts/ArialCEMTBlack-Regular.ttf") format("truetype"), url("../fonts/ArialCEMTBlack-Regular.svg#ArialCEMTBlack-Regular") format("svg");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial CE";
    src: url("../fonts/ArialCE.eot");
    src: url("../fonts/ArialCE.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialCE.woff2") format("woff2"), url("../fonts/ArialCE.woff") format("woff"), url("../fonts/ArialCE.ttf") format("truetype"), url("../fonts/ArialCE.svg#ArialCE") format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-BoldItalicMT_1.eot");
    src: url("../fonts/Arial-BoldItalicMT_1.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-BoldItalicMT_1.woff2") format("woff2"), url("../fonts/Arial-BoldItalicMT_1.woff") format("woff"), url("../fonts/Arial-BoldItalicMT_1.ttf") format("truetype"), url("../fonts/Arial-BoldItalicMT_1.svg#Arial-BoldItalicMT") format("svg");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("../fonts/ArialNarrow-Bold.eot");
    src: url("../fonts/ArialNarrow-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialNarrow-Bold.woff2") format("woff2"), url("../fonts/ArialNarrow-Bold.woff") format("woff"), url("../fonts/ArialNarrow-Bold.ttf") format("truetype"), url("../fonts/ArialNarrow-Bold.svg#ArialNarrow-Bold") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial CE";
    src: url("../fonts/Arial-BoldMT_2.eot");
    src: url("../fonts/Arial-BoldMT_2.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-BoldMT_2.woff2") format("woff2"), url("../fonts/Arial-BoldMT_2.woff") format("woff"), url("../fonts/Arial-BoldMT_2.ttf") format("truetype"), url("../fonts/Arial-BoldMT_2.svg#Arial-BoldMT") format("svg");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial-LgtItl.eot");
    src: url("../fonts/Arial-LgtItl.eot?#iefix") format("embedded-opentype"), url("../fonts/Arial-LgtItl.woff2") format("woff2"), url("../fonts/Arial-LgtItl.woff") format("woff"), url("../fonts/Arial-LgtItl.ttf") format("truetype"), url("../fonts/Arial-LgtItl.svg#Arial-LgtItl") format("svg");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Arial CE";
    src: url("../fonts/ArialCE-Italic.eot");
    src: url("../fonts/ArialCE-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/ArialCE-Italic.woff2") format("woff2"), url("../fonts/ArialCE-Italic.woff") format("woff"), url("../fonts/ArialCE-Italic.ttf") format("truetype"), url("../fonts/ArialCE-Italic.svg#ArialCE-Italic") format("svg");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* base styles and settings */
* {
    margin: 0;
    padding: 0;
    font-family: Arial CE, sans-serif;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000000;
}

@media screen and (max-width: 576px) {
    body {
        overflow-x: hidden;
    }
}

ol,
ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

p {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
}

a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #FFFFFF;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
}

button {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

form,
input,
label,
textarea {
    margin: 0;
    padding: 0;
}

.container {
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
    max-width: 1110px;
    width: 100%;
    position: absolute;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

@media screen and (max-width: 664px) {
    .container {
        position: relative;
        padding: 20px;
        right: 0;
        bottom: 0;
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
    }
}

.wrapper {
    display: grid;
    grid-template-areas: "logo content menu" "logo content menu" "link content menu";
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media screen and (max-width: 992px) {
    .home-wrapper {
        grid-template-areas: "logo logo" "content menu" "link link";
        grid-template-rows: 0.05fr 0.8fr 0.05fr;
        grid-template-columns: 1fr 0.1fr;
        height: 100%;
        gap: 60px;
    }
}

@media (min-width: 665px) and (max-width: 768px) {
    .home-wrapper {
        grid-template-areas: "logo logo" "content menu" "link link";
        grid-template-rows: auto 0.9fr;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (min-width: 577px) and (max-width: 664px) {
    .home-wrapper {
        grid-template-areas: "logo" "content" "link";
        grid-template-rows: 0.05fr 0.9fr 0.05fr;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media screen and (max-width: 576px) {
    .home-wrapper {
        grid-template-areas: "logo" "content" "link";
        grid-template-rows: 0.1fr 0.9fr;
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.logo {
    display: inline-block;
    margin-top: auto;
    height: 25px;
    width: 235px;
    background: url("../images/logo.svg") no-repeat center center/contain;
}

@media screen and (max-width: 576px) {
    .logo {
        height: 35px;
    }
}

@media (min-width: 410px) and (max-width: 486px) {
    .logo {
        height: 30px;
    }
}

@media (min-width: 360px) and (max-width: 409px) {
    .logo {
        height: 25px;
    }
}

@media (min-width: 320px) and (max-width: 360px) {
    .logo {
        height: 22px;
    }
}

.link {
    grid-area: link;
    margin-top: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
}

.link__position {
    display: inline-block;
    margin-top: auto;
    width: 25px;
    height: 25px;
}

.link__fb {
    background: url("../images/facebook.svg") no-repeat center center;
}

.link__insta {
    background: url("../images/instagram.svg") no-repeat center center;
}

.link__tg {
    background: url("../images/telegram.svg") no-repeat center center;
}

.link__basket {
    background: url("../images/shopping-bags.png") no-repeat center center/contain;
    position: relative;
}

.link__basket span {
    position: absolute;
    bottom: 80%;
    left: 100%;
    font-size: 9px;
    width: max-content;
}
.link__rus {
    background: url("../images/rus.svg") no-repeat center bottom;
}

.link__eng {
    background: url("../images/eng.svg") no-repeat center bottom;
}

.menu {
    grid-area: menu;
    width: 167px;
}

@media screen and (max-width: 664px) {
    .menu {
        position: fixed;
        top: 0;
        right: 0;
        background: #000000;
        padding: 0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        height: 100svh;
        width: 0;
        overflow: hidden;
        z-index: 1000;
        padding-top: 50px;
    }

    .link {
        display: none;
    }

    .menu.active {
        width: 100%;
        right: 0;
        padding-left: 50px;
    }
}

.menu__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
}

.menu__item-link.active {
    color: gray;
    /* Цвет для активного элемента */
}

@media screen and (max-width: 664px) {
    .menu__list {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 768px) {
    .menu__item {
        margin-bottom: 30px;
    }

    .menu__item:last-of-type {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 664px) {
    .menu__item:last-of-type {
        margin-bottom: 30px;
    }
}

.menu__item-link {
    font-size: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
}

@media screen and (max-width: 768px) {
    .menu__item-link {
        font-size: 18px;
    }
}

.menu__mobile-exit,
.mobile__social-list {
    display: none;
}

.mobile__social-item {
    margin-right: 20px;
}

.mobile__social-link {
    display: block;
    width: 25px;
    height: 25px;
}

.menu__mobile-exit {
    background: url("../images/icon-close.png") no-repeat 0 50%/contain;
    text-transform: uppercase;
    max-width: 130px;
    padding: 10px;
    color: #FFFFFF;
    border-radius: 10px;
    text-align: end;
}

@media screen and (max-width: 664px) {
    .menu__mobile-exit {
        display: block;
    }

    .mobile__social-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 15px;
    }
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.preloader__spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.base-content {
    grid-area: present;
    padding-top: 63px;
    padding-bottom: 63px;
}

@media screen and (max-width: 992px) {
    .base-content {
        padding: 0 0 180px;
        max-height: none !important;
        height: 550px;
    }
}

@media screen and (max-width: 664px) {
    .base-content {
        padding: 0;
        height: auto;
    }
}

.base-wrapper {
    grid-template-rows: 0.05fr 1fr 0.05fr;
    grid-template-areas: "logo menu" "present menu" "link menu";
    grid-template-columns: 1fr 0.1fr;
}

@media screen and (max-width: 992px) {
    .base-wrapper {
        grid-template-areas: "logo logo" "present menu" "link link";
        grid-template-rows: 0.05fr 1fr 0.05fr;
        gap: 60px;
        height: 100%;
    }
}

@media screen and (max-width: 768px) {
    .home-wrapper {
        gap: 60px 0;
    }

    .base-wrapper {
        grid-template-areas: "logo logo" "present menu" "link link";
        grid-template-rows: 0.05fr 1fr 0.05fr;
        grid-template-columns: 1fr 0.1fr;
        gap: 60px 0;
    }
}

@media screen and (max-width: 664px) {
    .home-wrapper {
        gap: 45px 0;
    }

    .base-wrapper {
        grid-template-areas: "logo logo" "present present" "link link";
        grid-template-rows: 0.05fr 1fr 0.05fr;
        grid-template-columns: 1fr 0.1fr;
        gap: 45px 0;
    }
}

/* modal window with sliders */
.modal-slider__collections {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: rgba(0, 0, 0, 0.8);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    position: relative;
    background: #000;
    border-radius: 8px;
    width: 100%;
    height: 100svh;
}

@media screen and (max-width: 992px) {
    .modal-content {
        height: 100svh;
    }
    /* надо все model-content проверить из этого изменения */
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: url("../images/icon-close.png") no-repeat center center/contain;
    z-index: 1000;
}

@media screen and (max-width: 768px) {
    .modal-close {
        width: 36px;
        height: 36px;
    }
}

.modal-slider-container {
    width: 100%;
    height: 100%;
}

.home,
.collection,
.info,
.portfolio,
.video,
.showroom {
    height: 100svh;
    position: relative;
}

/* homepage */
.home__block {
    display: block;
    grid-area: logo;
    align-self: start;
    line-height: 0.8;
}

@media screen and (max-width: 768px) {
    .home__block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
}

.home__content {
    margin: 0 60px 0 auto;
}

.home__content {
    grid-area: content;
    position: relative;
    max-width: 366px;
    max-height: 550px;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 991px) {
    .home__content {
        margin: 0;
    }
}

@media screen and (max-width: 664px) {
    .home__content {
        margin: auto;
        max-width: 366px;
    }
}

@media screen and (max-width: 576px) {
    .home__content {
        max-width: 100%;
    }
}

.home__content-video {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.home__burger {
    display: none;
    background: #353333;
    width: 45px;
    height: 45px;
    position: relative;
}

.home__burger span {
    background-color: #FFFFFF;
    height: 2px;
    width: 90%;
    display: inline-block;
    position: absolute;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

.home__burger::before,
.home__burger::after {
    content: "";
    background-color: #FFFFFF;
    height: 2px;
    width: 90%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.home__burger::before {
    top: 9px;
}

.home__burger::after {
    bottom: 9px;
}

@media screen and (max-width: 664px) {
    .home__burger {
        display: inline-block;
    }
}

/* collection page */
.collection__slider {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 420px;
    width: 100%;
}

@media screen and (max-width: 664px) {

    .collection__slider,
    .showroom-block {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        max-width: none;
    }
}

.collection__slider-gallery {
    width: 235px;
    height: 370px;
}

@media screen and (max-width: 768px) {
    .collection__slider-gallery {
        margin-left: 0;
        max-height: calc((100vw - 80px) / 2 * 3);
    }
}

@media screen and (max-width: 664px) {
    .collection__slider-gallery {
        margin-right: 0;
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 664px) {

    .collection__slider-gallery__button_up,
    .collection__slider-gallery__button_down,
    .showroom__slider-gallery__button_up,
    .showroom__slider-gallery__button_down {
        display: none;
    }
}

.collection_slider-gallery__wrapper,
.portfolio-slider_gallery-wrapper,
.showroom-slider_gallery-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 15px;
}

@media screen and (max-width: 664px) {

    .collection_slider-gallery__wrapper,
    .portfolio-slider_gallery-wrapper {
        margin-right: 0;
    }

    .portfolio-slider_gallery-wrapper {
        width: 100%;
    }
}

.collection__slider-gallery__button_up,
.showroom__slider-gallery__button_up {
    position: absolute;
    top: -27px;
    right: 0;
    background: url("../images/arrow.png") no-repeat center center;
    width: 18px;
    height: 16px;
}

.collection__slider-gallery__button_down,
.showroom__slider-gallery__button_down {
    position: absolute;
    bottom: -27px;
    right: 0;
    background: url("../images/arrow-down.png") no-repeat center center;
    width: 18px;
    height: 16px;
}

.collection_slider-gallery__btn {
    border: none;
    display: block;
    width: 100%;
    height: 100%;
}

.collection_slider-gallery__img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

@media screen and (max-width: 664px) {
    .collection_slider-gallery__img {
        -o-object-fit: cover;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .collection__slider-gallery__photo {
        aspect-ratio: 2/1;
        width: calc(100vw - 40px);
    }
}

.collection__slider-collect {
    width: 170px;
    height: 100px;
    overflow: hidden;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .collection__slider-collect {
        margin: 0 0 30px;
    }
}

@media screen and (max-width: 664px) {
    .collection__slider-collect {
        width: 210px;
        margin: 0 0 40px;
    }
}

@media screen and (max-width: 476px) {
    .collection__slider-collect {
        margin: 0 0 25px;
    }
}

.collection__slider-collect__link {
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 12px;
}

.swiper-slide-active a {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: grey;
    text-transform: uppercase;
}

@media screen and (max-width: 664px) {

    .collection__slider-collect__link,
    .showroom-map__link {
        font-size: 15px !important;
    }
}

/* info page */
.info-block {
    grid-area: present;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 60px 0 0;
    position: relative;
}

@media screen and (max-width: 992px) {
    .info-block {
        padding: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

@media screen and (max-width: 664px) {
    .info-block {
        margin: 0;
    }
}

.scroll__info-slide {
    width: 100%;
    height: 370px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media screen and (max-width: 992px) {
    .scroll__info-slide {
        height: 550px;
    }

    .info-block__contact {
        position: static;
    }
}

.scroll__info-slide::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.info-block__contact {
    position: fixed;
}

.info-block__contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 180px;
    width: 100%;
    height: 370px;
}

@media screen and (max-width: 992px) {
    .info-block__contact {
        position: static;
    }
}

.info-block__contact-details_title,
.info-block__contact-address_item_title {
    text-transform: uppercase;
}

.info-block__link_grey {
    color: #989898;
}

.info-block__contact-details_item {
    color: #FFFFFF;
    margin-bottom: 10px;
}

.info-block__contact-details_item span {
    color: #FFFFFF;
}

.info-block__slider-biography {
    max-width: 540px;
    height: 100%;
    margin-left: auto;
}

@media screen and (max-width: 1030px) {
    .info-block__slider-biography {
        max-width: 490px;
    }
}

/*
@media screen and (max-width: 768px) {
    .info-block__slider-biography {
        height: 354px;
    }
} */
.info-block__slider-biography__title {
    margin-bottom: 12px;
}

.swiper__info-slide {
    height: auto !important;
}

.info-block__slider-arrow-up,
.info-block__slider-arrow-down {
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    right: 0;
}

.info-block__slider-arrow-up {
    top: 8%;
    background: url("../images/arrow.png") no-repeat;
}

.info-block__slider-arrow-down {
    bottom: 8%;
    background: url("../images/arrow-down.png") no-repeat;
}

.info-block__contact-address {
    margin-top: auto;
}

.info-block__contact-details_title,
.info-block__contact-address_title {
    font-size: 14px;
}

.info-block__contact-details_list,
.info-block__contact-address_item_text,
.info-block__contact-address_link {
    font-size: 12px;
}

.info-block__contact-address_title,
.info-block__contact-address_item:first-of-type {
    margin-bottom: 10px;
}

.info-block__slider-biography__text {
    font-size: 12px;
}

/* portfolio page */
.portfolio-block__slider-product {
    width: 235px;
    height: 370px;
    margin: 0;
}

@media screen and (max-width: 664px) {
    .portfolio-block__slider-product {
        margin: auto;
        width: 100%;
        max-height: calc((100vw - 51px) * 1.6 + 22px);
        height: 100%;
    }
}

.portfolio-block {
    max-width: 420px;
    width: 100%;
    max-height: 496px;
}

.showroom-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.showroom-map__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.showroom-map__item {
    padding: 0 10px 10px 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.showroom-map__link {
    font-size: 12px;
    text-transform: uppercase;
    color: #FFFFFF;
}

@media screen and (max-width: 664px) {
    .showroom-map__item {
        padding-left: 0;
    }

    .portfolio-block {
        max-width: none;
        max-height: none;
    }
}

.portfolio-block__slide-pos {
    max-width: 112px;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 664px) {
    .portfolio-block__slide-pos {
        max-width: none;
        max-height: none;
    }
}

.portfolio-block__slide-img {
    width: 100%;
    height: 100%;
}

.portfolio-block__slide-pos:nth-child(2n) {
    margin-left: 11px;
}

/* slider gallery collections */
.slider {
    padding: 32px;
    color: #fff;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.slider__flex {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding: 10px;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    overflow: hidden;
}

.slider__card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: 100vh;
    height: 100%;
    overflow: hidden;
    gap: 5px;
}

@media screen and (max-width: 768px) {
    .slider__flex {
        padding: 20px;
    }
}

@media screen and (max-width: 664px) {
    .slider__flex {
        padding: 20px 0 20px;
    }
}
@media screen and (max-width: 576px) {
    .slider__flex {
        padding: 50px 0 20px;
    }
}

.slider__prev {
    position: absolute;
    background: url("../images/arrow.png") no-repeat center center;
    top: 0;
}

.slider__next {
    position: absolute;
    background: url("../images/arrow-down.png") no-repeat center center;
    bottom: 0;
}

.slider__prev,
.slider__next {
    cursor: pointer;
    height: 18px;
    width: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: 11px;
}

.slider__prev:focus,
.slider__next:focus {
    outline: none;
}

.slider__thumbs {
    height: 100%;
    overflow: hidden;
    max-width: 120px;
}

.slider__thumbs .slider__image {
    opacity: 0.7;
    width: auto;
}

.slider__thumbs .slider__image:hover {
    opacity: 0.8;
}

.slider__thumbs .swiper-slide-thumb-active .slider__image {
    opacity: 1;
}

.slider__images {
    height: 100%;
    margin-right: 5px;
    width: auto;
}

.modal-slider__container {
    height: 100%;
}

.slider__image {
    height: 100%;
    aspect-ratio: 2/3;
}

.slider__thumbs .slider__image-thumbs img,
.slider__preview .slider__image img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0;
}

.slider__big .slider__image img {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0;
    width: 100%;
    height: 100%;
    -o-object-position: left;
    object-position: left;
}

@media screen and (max-width: 992px) {
    .slider__big .slider__image img {
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: top;
        object-position: top;
    }
}

.slider__col,
.slider__card-col {
    position: relative;
    height: 100%;
}

.slider__card-col .slider__next,
.slider__card-col .slider__prev {
    left: 0;
}

.slider__card-col {
    width: 20px;
}

.flex-card__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
    gap: 45px;
    overflow: hidden;
}

@media screen and (max-width: 1320px) {
    .flex-card__container {
        gap: 20px;
        grid-template-columns: 0.9fr 0.6fr;
    }
}

@media screen and (max-width: 992px) {
    .flex-card__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-info {
    padding-top: 40px;
    height: 100%;
    position: relative;
}

.card-info__title {
    font-size: 14px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: normal;
}

.card-info__delivery-text {
    margin-bottom: 10px;
}

.card-info__delivery-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.card-info__delivery-item {
    margin-bottom: 15px;
    text-align: center;
}

.card-info__delivery-link,
.card-info__return-link,
.card-info__delivery-btn {
    text-transform: uppercase;
    color: #FFF;
    font-size: 14px;
}

.card-info__delivery-order_link {
    text-transform: uppercase;
    margin-bottom: 25px;
    display: inline-flex;
    color: #FFFFFF;
    gap: 10px;
    align-items: baseline;
}

.card-info__delivery-order_link span {
    width: 14px;
    height: 14px;
    background: url('../images/arrow.png') no-repeat center center / contain;
    /* display: inline-block; */
    transform: rotate(90deg);
}

.card-info__product,
.card-info__collection {
    margin-bottom: 20px;
}

.card-info__price {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    text-transform: uppercase;
}

.card-info__price_text {
    margin-right: 10px;
}

.card-info__description-title,
.made-to-order {
    color: #FFFFFF;
    width: 100%;
    text-align: left;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-size: 14px;
}

.made-to-order__description {
    margin-bottom: 25px;
    max-width: 585px;
    font-size: 14px;
}

.card-info__description-text,
.card-info__description-info,
.card-info__description-article {
    margin-bottom: 15px;
    max-width: 585px;
}

.card-info__description-text,
.card-info__description_model-size,
.card-info__description-info,
.card-info__description-country,
.card-info__description-article {
    font-size: 14px;
}

.card-info__consist-text,
.card-info__care-text {
    text-transform: uppercase;
    font-size: 14px;
}

.card-info__article,
.card-info__care,
.card-info__consist,
.card-info__color {
    margin-bottom: 10px;
}

.card-info__color {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
}

.card-info_color-block {
    width: 13px;
    height: 13px;
    border: 0.5px solid #FFFFFF;
    margin-right: 10px;
}

.card-info__color-text {
    text-transform: uppercase;
    margin-right: 10px;
}

.card-info__color-item_image {
    max-width: 50px;
    -o-object-fit: contain;
    object-fit: contain;
}

.card-info__size {
    margin-bottom: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
}

.card-info__size_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.card-info__size_item {
    color: #FFFFFF;
    font-size: 14px;
    border: 1px solid #FFFFFF;
    padding: 5px;
    margin: 0 5px;
}

.card-info__size_item-btn {
    color: #FFFFFF;
}

.card-info__size_item-btn.active {
    color: gray;
}

.atelier-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.atelier__content_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 992px) {
    .atelier-wrapper {
        padding: 0 0 150px !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}
@media screen and (max-width: 768px) {
    .atelier-wrapper {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.atelier-info__block {
    max-width: 550px;
    font-size: 12px;
    color: #FFFFFF;
    margin-right: 60px;
}

@media screen and (max-width: 992px) {
    .atelier-info__block {
        margin-right: 0;
        margin-top: 10px
    }
}

.atelier-info__block-title {
    font-size: 12px;
}

.atelier-info__block-btn {
    text-transform: uppercase;
    color: #FFFFFF;
    display: inline-block;
}

.atelier-info__block-title,
.atelier-info__block-text,
.atelier-info__block-list,
.atelier-info__block-text_order,
.atelier-info__block-text_strong,
.atelier-info__block-btn,
.atelier-info__block-owner {
    margin-bottom: 15px;
}

.atelier__content {
    width: 235px;
    max-height: 370px;
    overflow: hidden;
    height: 100%;
}

@media screen and (max-width: 992px) {
    .atelier__content {
        max-width: none;
        width: 266px;
        max-height: none;
    }
}

@media screen and (max-width: 768px) {
    .atelier__content {
        max-width: none;
        width: 240px;
    }
    .atelier-info__block-title,
    .atelier-info__block-text,
    .atelier-info__block-list,
    .atelier-info__block-text_order,
    .atelier-info__block-owner {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 664px) {

    .atelier__content {
        width: 100%;
    }

    .collection_slider-gallery__wrapper {
        margin-bottom: 20px;
    }
}

.atelier__content-video {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.card-info__size-text,
.card-info__size-tutor {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    font-size: 14px;
}

.card-info__size-text {
    color: #ffffff;
    /* border: 1px solid #878484; */
    text-transform: uppercase;
    /* margin-bottom: 20px; */
}

.card-info__color-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.card-info_color-name_text {
    text-transform: uppercase;
    color: #FFFFFF;
}

.card-info__size-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.card-info__size-item {
    background-color: #FFFFFF;
    padding: 5px 10px;
    margin-right: 5px;
}

.card-info__size-tutor {
    color: #FFFFFF;
    text-transform: uppercase;
    /* border-bottom: 1px solid #FFFFFF; */
}

.card-info__basket-btn {
    border: 1px solid #FFFFFF;
    padding: 5px 10px;
    color: #FFFFFF;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    .slider__col {
        display: none;
    }

    .slider__thumbs {
        height: 100%;
        max-width: 20%;
    }

    .slider__prev,
    .slider__next {
        height: auto;
        width: 32px;
    }
}

.modal-slider__portfolio {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 100;
}

.modal-slider__portfolio.hidden {
    display: none;
}

.modal-content__portfolio {
    padding: 10px;
    width: 100%;
    height: 100svh;
}

.swiper-modal__portfolio-slider {
    max-width: 940px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.swiper-modal__portfolio-slide {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

/* здесь проверить на наличие ошибок */
.slider__wrapper {
    width: calc(100svw - 20px);
    height: calc(100svh - 20px);
    margin: auto;
    position: absolute;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

@media screen and (max-width: 768px) {
    .swiper-modal__portfolio-gallery {
        max-width: none;
    }

    .slider__wrapper {
        max-width: 85%;
    }
}

@media screen and (max-width: 664px) {
    .modal-content__portfolio {
        padding-top: 45px;
        padding-left: 0;
        padding-right: 0;
    }

    .slider__wrapper {
        max-height: calc(100svh - 70px);
    }
}

@media screen and (max-width: 576px) {
    .slider__wrapper {
        max-width: 100%;
        position: absolut;
        -webkit-transform: translate(50%, 52%);
        -ms-transform: translate(50%, 52%);
        transform: translate(50%, 52%);
    }
}

.portfolio-gallery__slide-img {
    max-height: calc(100svh - 60px) !important;
    height: 100%;
}

.swiper-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.portfolio-gallery_slide-text {
    font-size: 12px;
    display: inline-block;
}

.swiper-modal__portfolio-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: auto;
}

.swiper-modal__portfolio-button_down,
.swiper-modal__portfolio-button_up {
    position: absolute;
    width: 18px;
    height: 18px;
    bottom: 5px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    z-index: 100;
}

.swiper-modal__portfolio-button_down {
    left: 5px;
    background: url("../images/arrow-down.png") no-repeat center center;
}

.swiper-modal__portfolio-button_up {
    right: 5px;
    background: url("../images/arrow.png") no-repeat center center;
}

.swiper-modal__portfolio-gallery {
    margin: auto;
}

@media screen and (max-width: 992px) {
    .info-block {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-right: 0;
    }

    .info-block__contact {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 400px;
        margin-bottom: 30px;
        height: auto;
    }

    .info-block__slider {
        margin-bottom: 47px;
        margin-left: 0;
    }

    .info-block__contact-details {
        margin-bottom: 30px;
    }

    .info-block__contact-address {
        max-width: 230px;
        margin-top: 0;
    }

    .info-block__slider {
        margin-bottom: 0;
    }

    .info-block__slider-biography {
        width: 100%;
        height: 270px;
        margin-left: 0;
    }

    .info-block__slider-arrow-up {
        top: -27px;
    }

    .info-block__slider-arrow-down {
        bottom: -27px;
    }

    .slider__preview {
        display: none;
    }
}

@media screen and (max-width: 850px) {

    .swiper-modal__portfolio-button_down,
    .swiper-modal__portfolio-button_up {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .info-block {
        margin-right: 40px;
    }

    .slider__card {
        padding-top: 60px;
    }

    .slider__card-col {
        display: none;
    }

    .slider__big {
        width: 100%;
    }
}

@media screen and (max-width: 664px) {
    .slider__images {
        margin-right: 0;
        max-width: 500px;
        width: 100%;
        height: 100%;
        margin-top: auto;
        margin-bottom: auto;
    }

    .info-block__slider-arrow-up,
    .info-block__slider-arrow-down {
        display: none;
    }

    .info-block__slider-biography {
        max-width: none;
    }

    .slider__thumbs {
        display: none;
    }

    .slider__image {
        height: 100%;
    }

    .flex-card__container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 10px 3%;
        height: auto;
    }

    .slider__card {
        padding-top: 40px;
        justify-content: center;
    }

    .slider__big {
        margin-left: 0 !important;
        width: calc(100% - 36px) !important;
    }

    .card-info {
        padding-top: 0;
        max-width: none !important;
        width: 100%;
    }

    .card-info__delivery-list {
        margin-bottom: 20px;
    }
    .slider__card-col {
        display: block;
        height: 18px;
        width: 100%;
        position: absolute;
        bottom: 0;
    }
    .slider__card .slider__card-col .slider__prev,
    .slider__card .slider__card-col .slider__next {
        height: 18px;
        width: 18px;
        transform: rotate(-90deg);
        bottom: 0;
        top: auto;
    }
    .slider__card .slider__card-col .slider__next {
        right: 0;
        left: auto;
    }
}

@media screen and (max-width: 576px) {
    .info-block__contact {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 510px) {
    .slider__big {
        width: calc(100% - 48px) !important;
    }
    .slider__card .slider__card-col .slider__prev,
    .slider__card .slider__card-col .slider__next {
        width: 14px;
        height: 14px;
    }
}
.my-slide {
    width: 112px;
    margin-left: 0 !important;
    margin-right: 11px;
}

.video__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.collection__video {
    position: absolute;
    width: 75%;
    aspect-ratio: 5/3;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

@media screen and (max-width: 664px) {
    .collection__video {
        width: 100%;
    }

    .my-slide {
        width: calc((100vw - 51px) / 2);
        height: auto !important;
        aspect-ratio: 1/1;
    }

    .showroom-slider_gallery-wrapper {
        margin-right: 0;
    }
}

.collection__video iframe {
    width: 100%;
    height: 100%;
}

.slider__big {
    /* margin-left: 5px; */
    width: 100%;
    height: 100%;
}

.showroom-slider {
    width: 235px;
    height: 370px;
    overflow-y: scroll;
    scrollbar-width: none;
}

#showroom-slider::-webkit-scrollbar {
    display: none;
}

#showroom-slider::-webkit-scrollbar-thumb {
    display: none;
}

.showroom-slider__wrapper {
    display: grid;
    gap: 11px;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
    -ms-flex-line-pack: start;
    align-content: start;
}

.showroom-slider__pos {
    height: 116px;
    width: 112px;
}

.showroom-slider__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: inline-block;
}

@media screen and (max-width: 664px) {
    .showroom-slider {
        width: 100%;
        height: 100%;
        aspect-ratio: 2/3;
    }

    .showroom-slider__pos {
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
    }

    .showroom-map__list {
        margin-bottom: 40px;
    }

    /* .card__size-table {
      width: 95% !important;
  } */
}

@media screen and (max-width: 1300px) {
    .card-info {
        max-width: 500px;
    }
}

/* test style */
/* Модальное окно */
.card__size-table,
.made-to-order__block {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 1001;
    -webkit-transition: opacity 0.7s ease, visibility 0.7s ease;
    transition: opacity 0.7s ease, visibility 0.7s ease;
    padding: 45px 10px 45px 5%;
    visibility: hidden;
    opacity: 0;
}

@media screen and (max-width: 664px) {

    .card__size-table,
    .made-to-order__block {
        padding: 20px 0;
    }

    .card__size-table_select {
        padding: 0 !important;
    }

    .card__size-table-close,
    .made-to-order__form-close {
        max-width: 36px;
        max-height: 36px;
    }
}

/* Состояние, когда модальное окно видно */
.card__size-table.visible,
.made-to-order__block.visible {
    visibility: visible;
    opacity: 1;
}

/* Кнопка закрытия */
.card__size-table-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: url("../images/icon-close.png") no-repeat center center/contain;
    border: none;
}

.card__size-table_wrapper {
    max-width: 450px;
    width: 100%;
    border-collapse: collapse;
    color: #FFFFFF;
    font-size: 12px;
    table-layout: fixed;
    margin-bottom: 25px;
    text-align: left;
}

@media screen and (max-width: 664px) {
    .card__size-table_wrapper {
        font-size: 11px;
        max-width: none;
    }

    .card__size-table_title {
        font-size: 9px;
    }
}

.card__size-table_row {
    border-bottom: 1px solid #333;
}

.card__size-table_title,
.card__size-table_data {
    padding: 2px;
}

.card__size-table_select {
    background: none;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    color: #FFF;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("../images/arrow-down.png") no-repeat right center/contain;
    background-size: 12px 12px;
}

select.card__size-table_select::-ms-expand {
    display: none;
}

.card__size-table_text,
.card__size-question,
.card__size-question_link {
    color: #FFFFFF;
}

.card__size-question_link a {
    color: #007bff;
    text-decoration: none;
}

.card__size-question_link a:hover {
    text-decoration: underline;
}

.card__size-table-close,
.delivery-terms__close,
.return-terms__close,
.made-to-order__form-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: url("../images/icon-close.png") no-repeat center center/contain;
}

.card__size-table_title {
    text-transform: uppercase;
}

.card__size-table_text {
    text-transform: uppercase;
    margin-bottom: 25px;
    font-size: 14px;
}

td,
th {
    border: 1px solid #A9A9A9;
    font-weight: inherit;
}

.card__size-question {
    text-transform: uppercase;
    margin-bottom: 25px;
    font-size: 14px;
}

.card__size-question_link {
    font-size: 14px;
    max-width: 420px;
}

.card__size-question_link a {
    color: #709FEB;
}

.made-to-order__title,
.made-to-order__text {
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 12px;
}

.made-to-order__description {
    font-size: 14px;
    margin-bottom: 20px;
}

.made-to-order__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    max-width: 450px;
    width: 100%;
}

.made-to-order__size-tutor {
    margin-top: 15px;
    margin-bottom: 15px;
}

.made-to-order__checkbox_wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
}

.made-to-order__submit-btn {
    text-align: left;
    color: #FFFFFF;
    background: #000000;
    text-transform: uppercase;
}

.made-to-order__checkbox_wrapper {
    color: #FFFFFF;
}

.made-to-order__form input,
.made-to-order__form textarea {
    border: 1px solid #FFF;
    background: none;
    color: #FFFFFF;
    font-size: 14px;
    padding: 5px;
}

.made-to-order__form input::-webkit-input-placeholder,
.made-to-order__form textarea::-webkit-input-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.made-to-order__form input::-moz-placeholder,
.made-to-order__form textarea::-moz-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.made-to-order__form input:-ms-input-placeholder,
.made-to-order__form textarea:-ms-input-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.made-to-order__form input::-ms-input-placeholder,
.made-to-order__form textarea::-ms-input-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.made-to-order__form input::placeholder,
.made-to-order__form textarea::placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.card-info__basket_link {
    background: url("../images/shopping-bags.png") no-repeat center center/contain;
    width: 25px;
    height: 25px;
    display: inline-block;
}

.return-terms,
.delivery-terms {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    background: #000000;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 20px 10px;
    visibility: hidden;
    opacity: 0;
}

.return-terms.active,
.delivery-terms.active {
    visibility: visible;
    opacity: 1;
}

.delivery-terms__content {
    max-width: 50%;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.delivery-terms__content-block {
    height: 100%;
    overflow: scroll;
    scrollbar-width: none;
}

.delivery-terms__title {
    text-transform: uppercase;
}
.delivery-terms__content-block p {
    margin-bottom: 20px;
}
.delivery-terms__content-block p a {
    color: #007bff;
}

.delivery-terms_arrows {
    position: relative;
    max-width: 18px;
    width: 100%;
    margin-right: 5px;
}

.delivery-terms__arrows-up,
.delivery-terms__arrows-down {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
}

.delivery-terms__arrows-up {
    background: url("../images/arrow.png") no-repeat center center/contain;
    top: 0;
}

.delivery-terms__arrows-down {
    background: url("../images/arrow-down.png") no-repeat center center/contain;
    bottom: 0;
}


@media screen and (max-width: 992px) {
    .delivery-terms__content {
        max-width: 60%;
    }
}

@media screen and (max-width: 768px) {
    .delivery-terms__content {
        max-width: 80%;
    }
}

@media screen and (max-width: 664px) {
    .delivery-terms__content {
        max-width: 100%;
    }
}

/* basket template */
.basket-product {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
    gap: 45px;
    height: 100%;
}

.basket-product__slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100;
    height: 100%;
}

.basket-product__slider_col {
    width: 20px;
    height: 100%;
    position: relative;
}

.basket-product__slider_up,
.basket-product__slider_down {
    width: 18px;
    height: 16px;
    position: absolute;
    left: 0;
}

.basket-product__slider_up {
    top: 0;
    background: url("../images/arrow.png") no-repeat center center;
}

.basket-product__slider_down {
    bottom: 0;
    background: url("../images/arrow-down.png") no-repeat center center;
}

.basker-product__slider_container {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.basket-product__slider_hidden {
    overflow-y: hidden;
    max-height: 520px;
}

.basket-product__slider_wrapper {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    padding-top: 40px;
}

.basket-product__overprice {
    margin-top: 20px;
}

.basket-product__overprice-text {
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 210px;
}

.basket-product__overprice-sum {
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 210px;
}

.basket-product__slider_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 25px;
}

.basket-product__slider_card {
    max-height: 150px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-left: 90px;
}

.basket-product__slider_card-img {
    max-width: 95px;
    width: 100%;
    height: 140px;
    margin-right: 20px;
}

.basket-product__slider_card_image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.basket-product__slider_card-content {
    position: relative;
}

.basket-product__slider_card-title,
.basket-product__slider_card-size,
.basket-product__slider_card-color,
.basket-product__slider_card-price {
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 5px;
}

.basket-product__slider_card_delete {
    width: 40px;
    height: 40px;
    background: url("../images/icon-close.png") no-repeat center center/contain;
    position: absolute;
    bottom: 0;
    left: 0;
}

.basket-product__data {
    padding-top: 30px;
}

.basket-product__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 510px;
    width: 100%;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    transition: all 0.5s ease;
}
.basket-product__form.hidden {
    display: none;
    width: 0;
    height: 0;
}

.basket-product__form input,
.basket-product__form select,
.basket-product__form label,
.basket-product__payment-method {
    border: 1px solid;
    background: none;
    color: #FFFFFF;
    font-size: 14px;
    padding: 5px;
    border-color: #888888;
    text-align: left;
}
.basket-product__form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("../images/arrow-down.png") no-repeat 98% center;
    background-size: 14px;
    width: 100%;
}

/* поле доставки, при добавлении других способов доставки убрать! */

.delivery-type-wrapper {
    position: relative;
}
.delivery-type-wrapper span {
    bottom: 50%;
    transform: translateY(50%);
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 14px;
    position: absolute;
    right: 1%;
    pointer-events: none;
}
#user-form__delivery-type {
    width: 100%;
    text-transform: uppercase;
}
.basket-product__form-info_price,
.basket-product__form-info_delivery,
.basket-product__form-info_sum {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}
.basket-product__form-info_price span {
    margin-left: auto;
    margin-right: 5px;
}
.basket-product__form-info_price span,
.basket-product__form-info_delivery span,
.basket-product__form-info_sum span {
    text-transform: uppercase;
    color: #FFF;
}
.basket-product__form-description {
    margin-bottom: 10px;
}
.basket-product__form-description {
    font-size: 14px;
}
.basket-product__form input::-webkit-input-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.basket-product__form input::-moz-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.basket-product__form input:-ms-input-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.basket-product__form input::-ms-input-placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}

.basket-product__form input::placeholder {
    background: none;
    color: #FFFFFF;
    font-size: 14px;
}
.card-input-wrapper,
.cvc-input-wrapper {
    width: 100%;
    position: relative;
}
.basket-product__form-erip,
.basket-product__form-card {
    transition: all 0.5s ease;
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}
.basket-product__form-erip.block,
.basket-product__form-card.block {
    display: block;
}
.basket-product__form-erip.active,
.basket-product__form-card.active {
    visibility: visible;
    opacity: 1;
    width: auto;
    height: auto;
}
#basket-product__form-card-number,
#basket-product__form-card-username {
    width: 100%;
}
#basket-product__form-card-username:focus {
    text-transform: uppercase;
}
.cvc-input-wrapper {
    display: flex;
}
.cvc-input-wrapper input {
    width: 50%;
}
.cvc-input-wrapper input:first-of-type {
    border-right: none;
}
.cvc-input-wrapper input:last-of-type {
    border-left: none;
}
.card-input-wrapper span,
.cvc-input-wrapper span {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    color: #FFFFFF;
    font-size: 14px;
    pointer-events: none;
}
.card-input-wrapper span {
    left: 175px;
}
.cvc-input-wrapper span {
    left: 60px
}
.basket-product__form-erip_num {
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
}
.basket-product__form-erip_list {
    padding-left: 15px;
}
.basket-product__form-erip_item {
    color: #FFFFFF;
    font-size: 14px;
    list-style-type: decimal;
    margin-bottom: 5px;
}
.basket-product__form-text {
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.basket-product__form-text:first-of-type {
    margin-top: 0;
}

.basket-product__form_wrapper {
    color: #FFFFFF;
    margin-top: 10px;
}

.basket-product__form_listmail-text,
.user-form__listmail_text {
    font-size: 14px;
}
.user-form__basket-listmail_text {
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.basket-product_form-btn {
    background-color: #626262;
    font-size: 14px;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 10px;
    margin-top: 10px;
    display: none;
}
.basket-product_form-btn.active {
    display: block;
}

.basket-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px;
}

.basket-info_color-block {
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
}

.basket-info_color-name_text {
    display: inline-block;
    color: #FFF;
    text-transform: uppercase;
    font-size: 12px;
    margin-right: 10px;
}

/* test styles in form */
.payment-options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    transition: all 0.5s ease;
    opacity: 1;
}
.payment-options.hidden {
    visibility: hidden;
    width: 0;
    height: 0;
    opacity: 0;
}

@media screen and (max-width: 768px) {
    .basket-product__slider_card {
        padding-left: 35px;
    }

    .basket-product__overprice-text {
        padding-left: 155px;
    }

    .basket-product__overprice-sum {
        padding-left: 155px;
    }
}

@media screen and (max-width: 664px) {
    .basket-product {
        grid-template-columns: 1fr;
        grid-template-rows: 570px 1fr;
        overflow: visible;
        height: auto;
        gap: 25px;
    }

    .basket-product__slider {
        max-height: 550px;
    }

    .basket-product__slider_col {
        display: none;
    }

    .basket-product__slider_card {
        padding-left: 0;
    }

    .basket-product__data {
        padding-top: 0;
    }

    .basket-product__overprice-text {
        padding-left: 120px;
    }

    .basket-product__overprice-sum {
        padding-left: 120px;
    }
}
.basket-product__form input.active {
    border: 1px solid #007bff;
}
@media screen and (max-width: 464px) {

    .basket-product__form input,
    .basket-product__form label {
        width: 100%;
    }

    .basket-product__form input[type=checkbox] {
        width: 14px;
        height: 14px;
    }
}
.basket-product__form-errors {
    color: #FFFFFF;
    font-size: 14px;
}
.basket-product__form-response {
    display: none;
    flex-direction: column;
    padding-bottom: 100px;
    height: 100%;
    max-width: 510px;
    width: 0;
    height: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}
.basket-product__form-response.block {
    display: flex;
}
.basket-product__form-response.active {
    height: 100%;
    max-width: 510px;
    width: auto;
    visibility: visible;
    opacity: 1;
}
.basket-product__form-response-success {
    margin: auto 0 10px;
}
@media screen and (max-width: 664px) {
    .basket-product__form-response-success {
        margin: 10px 0 10px;
    }
}
.basket-product__form-response-text {
    margin: 10px 0;
}
.basket-product__form-response-success,
.basket-product__form-response-text {
    text-transform: uppercase;
    font-size: 14px;
}
.basket-product__form-response-desc {
    margin: 10px 0;
    font-size: 14px;
}
.basket-product__form-response-desc:last-of-type {
    max-width: 280px;
}
.basket-product__form-response-link {
    background-color: #626262;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px;
}