:root {
    /* Colors */
    --color-white: #ffffff;
    --color-black: #030303;
    --color-green: #43B22D;
    --color-green-dark: #378428;
    --color-red:#E12528;
    --color-gray-0: #FCFCFC;
    --color-gray-10: #F4F3F3;
    --color-gray-20: #E0E0E0;
    --color-gray-30: #C2C2C2;
    --color-gray-40: #979797;
    --color-gray-50: #707070;
    --color-gray-60: #474747;
    --color-gray-70: #2A2A2A;
    --color-gray-80: #171717;
    --color-black-90: #0B0B0B;
    --color-yellow: #FFB82E;
}

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

/* Container */
.container-full {
    width: 100%;
}
.container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Visible */
.d-block {
    display: block;
}
.d-flex {
    display: flex;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

a {
    color: var(--color-gray-0);
    text-decoration: none !important;
}
a:hover {
    color: var(--color-gray-0);
    text-decoration: none;
}

/* Text */
.display_1 {
    font-family: "WT Monarch Nova", serif;
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 76px */
}

.display_2 {
    font-family: "WT Monarch Nova", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
}

.h1, h1 {
    /* Heading/H-1_L_100_100%_-2% */
    font-family: 'Montserrat', serif;
    font-size: 100px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 100px */
    letter-spacing: -2px;
}

.h2, h2 {
    /* Heading/H-2_L_76_110%_-2% */
    font-family: 'Montserrat', serif;
    font-size: 76px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%; /* 83.6px */
    letter-spacing: -1.52px;
}

.h3, h3 {
    /* Heading/H-3_L_56_110%_-2% */
    font-family: 'Montserrat', serif;
    font-size: 56px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%; /* 61.6px */
    letter-spacing: -1.12px;
}

.h4, h4 {
    /* Heading/H-4_L_48_110%_-2% */
    font-family: 'Montserrat', serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%; /* 52.8px */
    letter-spacing: -0.96px;
}

.h5, h5 {
    margin: 0 0 32px 0;
    /* Heading/H-5_L_32_120% */
    font-family: 'Montserrat', serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 38.4px */
}

.h6, h6 {
    /* Heading/H-6_L_24_120% */
    font-family: 'Montserrat', serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 28.8px */
}

ul, ol {
    padding: 0 0 0 25px;
}
ul li {
    margin-bottom: 24px;
}
ol li {
    margin-bottom: 16px;
}

.subtitle-1 {
    /* Subtitle/Subtitle-1_M_32_38 */
    font-family: 'Montserrat', serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px; /* 118.75% */
}

.subtitle-2 {
    /* Subtitle/Subtitle-2_M_24_32 */
    font-family: 'Montserrat', serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
}

.subtitle-3 {
    /* Subtitle/Subtitle-3_M_18_24 */
    font-family: 'Montserrat', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.subtitle-4 {
    /* Subtitle/Subtitle-4_M_16_22 */
    font-family: 'Montserrat', serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 137.5% */
}

.subtitle-5 {
    /* Subtitle/Subtitle-5_M_14_20 */
    font-family: 'Montserrat', serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.subtitle-6 {
    /* Subtitle/Subtitle-6_M_12_16 */
    font-family: 'Montserrat', serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
}

.body-1 {
    /* Body/Body-1_R_18_24 */
    font-family: 'Montserrat', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}

.body-2 {
    /* Body/Body-2_R_16_22 */
    font-family: 'Montserrat', serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
}

.body-3 {
    /* Body/Body-3_R_14_20 */
    font-family: 'Montserrat', serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.caption-1 {
    /* Body/Caption-1_R_12_16_6% */
    font-family: 'Montserrat', serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.72px;
}


.caption-2 {
    /* Body/Caption-2_R_Uppercase_12_16_6% */
    font-family: 'Montserrat', serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.72px;
    text-transform: uppercase;
}

.caption-3 {
    /* Body/Caption-3_R_12_18 */
    font-family: 'Montserrat', serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    text-decoration-line: line-through;
}

.caption-4 {
    /* Body/Caption-4_R_Uppercase_10_16 */
    font-family: 'Montserrat', serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 160% */
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.text-1 {
    /* Text/Text-1_R_18_150% */
    font-family: 'Montserrat', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.text-2 {
    /* Text/Text-2_R_16_150% */
    font-family: 'Montserrat', serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.text-u {
    text-transform: uppercase;
}

/* Buttons */
.btn {
    display: flex;
    min-height: 48px;
    padding: 15px 32px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    font-family: 'Montserrat', serif;
    line-height: 16px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    user-select: none;
    cursor: pointer;
}

.btn > span {
    display: inline-block;
}
.btn .icon, .btn i, .btn svg {
    display: block;
    height: 20px;
}
.btn .icon + span, .btn i + span,
.btn span + .icon, .btn span + i,
.btn svg + span, .btn span + svg {
    margin-left: 8px;
}

/* Btn Small */
.btn-m {
    height: 40px;
    min-height: 40px;
    padding: 12px 24px;
}
.btn-m .icon, .btn-m i, .btn-m svg {
    height: 16px;
}
.btn-m .icon + span, .btn-m i + span,
.btn-m span + .icon, .btn-m span + i,
.btn-m svg + span, .btn-m span + svg {
    margin-left: 6px;
}

/* Btn Extra Small */
.btn-s {
    min-height: 30px;
    padding: 8px 24px;
    font-size: 12px;
}
.btn-s .icon, .btn-s i, .btn-s svg {
    height: 16px;
}
.btn-s .icon + span, .btn-s i + span,
.btn-s span + .icon, .btn-s span + i,
.btn-s svg + span, .btn-s span + svg {
    margin-left: 6px;
}

.btn-primary {
    background: var(--color-gray-0) !important;
    color: var(--color-black) !important;
    border: 1px solid var(--color-gray-0) !important;
    text-decoration: none !important;
}
.btn-primary:hover {
    color: var(--color-gray-0) !important;
    border: 1px solid var(--color-gray-70) !important;
    background: var(--color-black) !important;
}
.btn-primary:active {
    color: var(--color-gray-0) !important;
    border: 2px solid var(--color-green) !important;
    background: var(--color-black-90) !important;
}
.btn-primary:disabled {
    color: var(--color-gray-0) !important;
    border: 2px solid var(--color-green) !important;
    background: var(--color-gray-60) !important;
}

.btn-default {
    color: var(--color-gray-0) !important;
    background: var(--color-black) !important;
    border: 1px solid var(--color-gray-10) !important;
}
.btn-default:hover {
    color: var(--color-black) !important;
    border: 1px solid var(--color-gray-20) !important;
    background: var(--color-gray-0) !important;
}
.btn-default:hover svg path {
    fill: var(--color-black);
}
.btn-default:active {
    color: var(--color-black) !important;
    border: 1px solid var(--color-gray-20) !important;
    background: var(--color-gray-30) !important;
}
.btn-default:disabled {
    color: var(--color-gray-60) !important;
    border: 1px solid var(--color-gray-70) !important;
    background: var(--color-black-90) !important;
}

.btn.disabled,
.btn:disabled {
    background: var(--color-gray-60) !important;
    border: 1px solid var(--color-gray-60) !important;
    color: var(--color-gray-80) !important;
    cursor: not-allowed !important;
}
.btn-default.disabled,
.btn-default:disabled {
    background: var(--color-gray-40) !important;
    border: 1px solid var(--color-gray-40) !important;
    color: var(--color-gray-20) !important;
    cursor: not-allowed !important;
}

.btn-full {
    width: 100%;
}

/* tabs */
.tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.btn-tab {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-height: 48px;
    padding: 12.5px 24px 12px 24px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--color-gray-20);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px; /* 133.333% */
    border-radius: 100px;
    border: 1px solid var(--color-gray-70);
    white-space: nowrap;
    cursor: pointer;
    background: none;
}
.btn-tab.active,
.btn-tab:hover {
    border: 1px solid var(--color-gray-40);
    background: var(--color-black);
}
.btn-tab.active:disabled,
.btn-tab:disabled {
    color: var(--color-gray-60);
    border: 1px solid var(--color-gray-40);
    background: var(--color-black);
}
.btn-tab.active:focus,
.btn-tab:focus {
    border-color: var(--color-green);
    outline: none !important;
}
.btn-tab_min {
    padding: 8px 14px;
    text-transform: none;
    font-size: 12px;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.72px;
}
.btn-tab_m {
    padding: 9px 16px;
    text-transform: none;
}

.success-btn {
    color: var(--color-black) !important;
    border: 1px solid var(--color-gray-20) !important;
    background: var(--color-gray-0) !important;
}
.success-btn svg {
    margin: -10px 0;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

/* Link */
.link {
    position: relative;
    display: inline-flex;
    transition: all 0.3s ease;
}
.link-u {
    background: none !important;
    border: none !important;
    outline: none !important;
}
.link:before,
.link-u:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-green);
    transition: all 0.3s ease;
    z-index: 1;
}
.link:hover:before {
    width: 100%;
}
.link:disabled {
    color: var(--color-gray-70);
}
.link:disabled:before {
    width: 0;
}
.link-u:after {
    width: 100%;
    background: var(--color-gray-0);
    z-index: 0;
}

.link-l {
    font-size: 48px;
    line-height: 110%;
    letter-spacing: -0.96px;
}
.link-m {
    font-size: 18px;
    line-height: 24px;
}
.link-s {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}
.link-es {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.icon-link {
    display: flex;
    align-items: center;
}
.icon-link > span {
    position: relative;
    transition: all 1s ease;
}
.icon-link > span:before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-green);
    transition: all 0.3s ease;
}
.icon-link:hover > span:before {
    width: 100%;
}

.icon-link:disabled > span {
    color: var(--color-gray-70);
}
.icon-link:disabled > span:before {
    width: 0;
}

/* Tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag {
    display: flex;
    height: 32px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 1px solid var(--color-gray-60);
    background: var(--color-black);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.72px;
    cursor: pointer;
}
.tag:hover {
    background: var(--color-black);
    border: 1px solid var(--color-gray-40);
}
.tag-inactive {
    background: none !important;
    border: 1px solid var(--color-gray-70) !important;
    cursor: default;
}
.btn-tag {
    background: none;
    border: 1px solid var(--color-gray-70);
}

/* Scroll */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-40) transparent;
}
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--color-gray-40);
    border-radius: 10px;
}


/* Label */
.label {
    display: inline-flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--color-gray-0);
    background: var(--color-gray-70);
    border-radius: 100px;
}
.label.active {
    border: 1px solid var(--color-gray-30);
    background: var(--color-black);
}

/* Inputs */
.form-group_line {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}
.form-group_line .btn {
    flex-shrink: 0;
}

.input-group_line {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.input-group_line label {
    min-width: 2px;
    min-height: 22px;
    padding-top: 6px;
    color: var(--color-gray-20);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.input-group_line .input-group_icon {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.form-control_line {
    display: block;
    width: 100%;
    padding: 6px 0 10px 0;
    border: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    color: var(--color-gray-30, #C2C2C2);
    border-bottom: 1px solid var(--color-gray-30);
    outline: none !important;
    background: none !important;
}
.form-control_line:hover {
    color: var(--color-gray-0, #C2C2C2);
    border-bottom: 1px solid var(--color-gray-0);
}
.form-control_line:focus {
    color: var(--color-gray-0, #C2C2C2);
    border-bottom: 1px solid var(--color-green-dark);
}
textarea.form-control_line {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.form-control_line.has-error {
    border-bottom: 1px solid var(--color-red);
}
.input-group_line .input-group_counter {
    margin-top: 8px;
    margin-left: auto;
    color: var(--color-gray-40);
    text-align: right;
    font-size: 12px;
    line-height: 16px;
}

.input-group {
    display: flex;
    flex-direction: column;
}
.input-group input,
.input-group textarea,
.input-group select {
    display: block;
    padding: 12px 16px;
    color: var(--color-gray-0);
    font-size: 16px;
    line-height: 24px;
    outline: none !important;
    border-radius: 12px;
    border: 1px solid var(--color-gray-50, #707070);
    background: none !important;
}
.input-group textarea {
    resize: vertical;
}
.input-group input:hover,
.input-group textarea:hover,
.input-group select:hover {
    border: 1px solid var(--color-gray-0);
}
.input-group input:active,
.input-group input:focus,
.input-group textarea:active,
.input-group textarea:focus,
.input-group select:active,
.input-group select:focus {
    border: 1px solid var(--color-green-dark);
}
.input-group.has-error input,
.input-group input.has-error,
.input-group.has-error textarea,
.input-group textarea.has-error,
.input-group.has-error select,
.input-group select.has-error {
    border: 1px solid var(--color-red) !important;
}
.input-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-20);
    font-size: 13px;
    line-height: 16px;
}
.input-group .input-group_counter {
    margin-top: 8px;
    margin-left: auto;
    color: var(--color-gray-40);
    text-align: right;
    font-size: 12px;
    line-height: 16px;
}

.form-group_title {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.text-danger {
    display: flex;
    align-items: center;
    margin-top: 8px;
    color: var(--color-red);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    gap: 8px;
}
.text-danger:before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("/catalog/view/theme/itis/img/icons/icon-error.svg");
}

.form-control_file {
    text-align: center;
}
.form-control_file-title {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}
.file-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed var(--color-gray-60);
    cursor: pointer;
}
.file-group input {
    display: none;
    opacity: 0;
}
.file-group .file-group_text {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-50);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.form-control_file-previews {
    display: flex;
    justify-content: center;
}
.form-control_file-preview {
    position: relative;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}
.form-control_file-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}
.form-control_file-remove {
    padding: 8px;
    margin-right: -32px;
    border-radius: 100px;
    border: 1px solid var(--color-gray-60);
    background: var(--color-black-90);
    cursor: pointer;
}
.form-control_file-remove svg {
    display: block;
}

.form-control_file-preview.file-type {
    width: calc(100% - 30px);
    justify-content: space-between;
    flex-direction: row-reverse;
}
.form-control_file-preview.file-type .form-control_file-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Radio */
.radio-group {
    display: flex;
    align-items: center;
    padding: 16px 0 16px 0;
}

.radio-group label {
    margin-right: 24px;
    user-select: none;
    color: var(--color-black);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px; /* 137.5% */
}

.radio-group input {
    position: absolute;
    display: none;
    opacity: 0;
}

.radio-group_btn {
    position: relative;
    display: none;
    align-items: center;
    cursor: pointer;
}

.radio-group_btn:after {
    content: '';
    position: relative;
    display: block;
    width: 48px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg width='48' height='28' viewBox='0 0 48 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='47' height='27' rx='13.5' fill='%23FCFCFC'/%3E%3Crect x='0.5' y='0.5' width='47' height='27' rx='13.5' stroke='%23C2C2C2'/%3E%3Ccircle cx='14' cy='14' r='12' fill='%23C2C2C2'/%3E%3C/svg%3E%0A") center no-repeat;
    background-size: contain;
}
input:nth-child(3):checked + .radio-group_btn:after {
    background: url("data:image/svg+xml,%3Csvg width='48' height='28' viewBox='0 0 48 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='47' height='27' rx='13.5' fill='%23FCFCFC'/%3E%3Crect x='0.5' y='0.5' width='47' height='27' rx='13.5' stroke='%230B0B0B'/%3E%3Ccircle cx='34' cy='14' r='12' fill='%230B0B0B'/%3E%3C/svg%3E") center no-repeat;
}

input:nth-child(3):checked + .radio-group_btn {
    display: flex;
}

input:first-child:checked + .radio-group_btn {
    display: flex;
}

.radio-group_full {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.radio-group_full > label {
    width: 100%;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 130%;
}

.radio-group_full-checker {}

.radio-group_full-checker input {
    position: absolute;
    opacity: 0;
    z-index: -10;
}
.radio-group_full-btn {
    display: flex;
    align-items: center;
    margin-right: 30px;
    cursor: pointer;
    line-height: 23px;
}
.radio-group_full-btn:before {
    content: '';
    display: flex;
    width: 23px;
    height: 23px;
    margin-right: 10px;
    border-radius: 3px;
    border: 1px solid #ddd;
    cursor: pointer;
}
.radio-group_full-btn span {
    opacity: 0.75;
}

.radio-group_full-checker input:checked + .radio-group_full-btn:before {
    background: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.95652L4.0303 8L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.checkout-page_radio-group {
    cursor: pointer;
}
.checkout-page_radio-group input {
    display: none;
}
.checkout-page_radio-group label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--color-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}
.checkout-page_radio-group label:before {
    content: '';
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%23FCFCFC' stroke='%23C2C2C2'/%3E%3C/svg%3E") center no-repeat;
}
.checkout-page_radio-group input:checked + label:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%23FCFCFC' stroke='%230B0B0B'/%3E%3Ccircle cx='12' cy='12' r='8' fill='%230B0B0B'/%3E%3C/svg%3E") center no-repeat;
}

/* Margin */
.mt-10 {
    margin-top: 10px;
}
.mt-16 {
    margin-top: 16px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-32 {
    margin-top: 32px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-60 {
    margin-top: 60px;
}
.mt-70 {
    margin-top: 70px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-90 {
    margin-top: 90px;
}
.mt-100 {
    margin-top: 100px;
}
.mt-110 {
    margin-top: 110px;
}
.mt-120 {
    margin-top: 120px;
}
.mt-130 {
    margin-top: 130px;
}
.mt-140 {
    margin-top: 140px;
}
.mt-150 {
    margin-top: 150px;
}

.mb-10 {
    margin-bottom: 10px;
}
.mb-16 {
    margin-bottom: 20px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-32 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mb-80 {
    margin-bottom: 80px;
}
.mb-90 {
    margin-bottom: 90px;
}
.mb-100 {
    margin-bottom: 100px;
}
.mb-110 {
    margin-bottom: 110px;
}
.mb-120 {
    margin-bottom: 120px;
}
.mb-130 {
    margin-bottom: 130px;
}
.mb-140 {
    margin-bottom: 140px;
}
.mb-150 {
    margin-bottom: 150px;
}
.mb-160 {
    margin-bottom: 160px;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.gap-0  { gap: 0px; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-16-24 { gap: 16px 24px; }

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    flex-wrap: wrap;
    list-style: none !important;
    margin: 24px 0;
    padding: 0;
}
.breadcrumb-item {
    margin-bottom: 0;
}
.breadcrumb-item a {
    display: flex;
    align-items: center;
    color: var(--color-gray-30);
    font-weight: 500;
    line-height: 16px;
}
.breadcrumb-item a:after {
    content: '';
    margin-right: 8px;
    margin-left: 14px;
    width: 1px;
    height: 12px;
    background: var(--color-gray-30);
}
.breadcrumb-item span {
    display: block;
    color: var(--color-gray-50);
    font-weight: 500;
    line-height: 16px;
}

/* Quantity Counter */
.quantity-counter_block {
    display: flex;
    align-items: center;
    gap: 2px;
}
.quantity-btn_minus,
.quantity-btn_plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 100px;
    border: 1px solid var(--color-gray-60);
    background: var(--color-black-90);
    cursor: pointer;
    user-select: none;
}
.quantity-btn_minus:hover,
.quantity-btn_plus:hover {
    border: 1px solid var(--color-gray-0);
    background: var(--color-black);
}
.quantity-btn_minus svg,
.quantity-btn_plus svg {
    display: block;
    width: 20px;
    height: 20px;
}
.quantity-btn_minus svg path,
.quantity-btn_plus svg path {
    fill: var(--color-gray-20);
}
.quantity-btn_minus.disabled,
.quantity-btn_plus.disabled {
    border: 1px solid var(--color-gray-70, #2A2A2A);
    background: var(--color-black-90, #0B0B0B);
}
.quantity-btn_minus.disabled svg path,
.quantity-btn_plus.disabled svg path {
    fill: var(--color-gray-60);
}

.quantity-counter_text {
    min-width: 32px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    user-select: none;
}

/* Table Flex */
.table {
    display: flex;
    flex-direction: column;
    margin-top: -1px;
    border-top: 1px solid var(--color-gray-70);
}
.table-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray-70);
    color: var(--color-gray-30);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

/* Image Upload */
.image-upload .drop-area {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.image-upload .drop-area input[type="file"] {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.image-upload .preview {
    margin-top: 10px;
    position: relative;
}
.image-upload .img-preview {
    max-width: 100px;
    border: 1px solid #ccc;
}
.image-upload .remove-image {
    position: absolute;
    top: 0; right: 0;
    background: red;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

/* Popup */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 50px 0;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    display: none;
}
.popup.show {
    display: block;
}

.popup-content {
    position: relative;
    top: 0;
    width: 100%;
    max-width: calc(100% - 32px);
    margin: 50px auto;
    border-radius: 32px;
    padding: 32px;
    border: 1px solid var(--color-gray-60);
    background: var(--color-black-90);
    z-index: 10;
}
.popup-full  {
    width: 900px;
    padding: 60px 120px 80px 120px;
}
.popup-min  {
    width: 440px;
    padding: 60px;
}
.popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 14px;
    cursor: pointer;
    border-radius: 100px;
    border: 1px solid var(--color-gray-60);
    background: var(--color-black-90);
}
.popup-close svg {
    display: block;
}
.popup-login_prev {
    position: absolute;
    top: 16px;
    left: 16px;
    cursor: pointer;
    padding: 12px;
}

/* Overlay */
.bg-overlay {
    position: fixed;
    top: 92px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    /* backdrop-filter: blur(1px); */
    display: none;
    z-index: 9;
}
.bg-overlay.show {
    display: block;
}
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 80px 0 0 0;
    padding: 0;
    gap: 4px;
    list-style: none;
}
.pagination div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.pagination div.active:before,
.pagination div:hover:before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 4px;
    width: 16px;
    height: 1px;
    background: var(--color-gray-0);
}
.pagination div a,
.pagination div span {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    user-select: none;
}
.pagination div a {
    color: var(--color-gray-40);
}
.pagination div:hover a,
.pagination div span {
    color: var(--color-gray-0);
}
.pagination .prev-page:before,
.pagination .next-page:before {
    display: none !important;
}
.pagination .prev-page {
    margin-right: 16px;
}
.pagination .next-page {
    margin-left: 16px;
}
.pagination .prev-page.disabled path,
.pagination .next-page.disabled path {
    fill: #474747;
}

/* White Mode */
.white-page {
    background: var(--color-gray-10);
    color: var(--color-black);
}
.white-page a {
    color: var(--color-black-90);
}

.white-page .link-u:after {
    background: var(--color-black);
}

.white-page .input-group label {
    color: var(--color-gray-80);
}
.white-page .input-group input,
.white-page .input-group textarea,
.white-page .input-group select {
    border: 1px solid var(--color-gray-60);
    background: var(--color-gray-0) !important;
    color: var(--color-black);
}
.white-page .input-group input:active, .white-page .input-group input:focus,
.white-page .input-group textarea:active, .white-page .input-group textarea:focus,
.white-page .input-group select:active, .white-page .input-group select:focus {
    border: 1px solid var(--color-green-dark);
}

/* Notify */
.notify {
    position: fixed;
    display: none;
    top: 100px;
    right: 12px;
    padding: 4px 4px 12px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-70);
    background: var(--color-black-90);
    box-shadow: 0 8px 30px 0 rgba(3, 3, 3, 0.60);
    justify-content: space-between;
    gap: 24px;
    z-index: 11;
}
.notify.show {
    display: flex;
}
.notify-text {
    padding-top: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.notify-text b {
    font-weight: 500;
}
.notify-text a {
    text-decoration: underline !important;
}
.notify-close {
    padding: 6px;
    cursor: pointer;
}
.notify-close svg {
    width: 15px;
    height: 15px;
}

/* Alert */
.alert {
	padding: 14px 16px;
}
.alert-info {
	display: flex;
    font-size: 14px;
    line-height: 16px;
    align-items: center;
    border: 1px solid #e99f0038;
    background: #e99f0038;
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 1150px){
    .h1 {
        font-size: 48px;
        line-height: 95%;
        letter-spacing: -0.96px;
    }
    .h6 {
        font-size: 18px;
    }

    .body-2 {
        font-size: 16px;
        line-height: 22px;
    }

    .product-item_content {
        padding: 0 12px 24px 12px;
    }
    .product-item_title {
        font-size: 17px;
    }
}

@media (max-width: 992px){
    .btn {
        min-height: 40px;
        padding: 8px 24px;
    }

    .product-item_title {
        font-size: 14px;
    }

    .popup-full {
        padding: 48px 48px 60px 48px;
    }

    .notify {
        top: 68px;
        right: 16px;
        left: 16px;
        width: calc(100% - 32px);
    }
}

@media (max-width: 768px){
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mt-m-0 {
        margin-top: 0;
    }
    .mb-m-100 {
        margin-bottom: 100px;
    }

    .col-m-1  { grid-column: span 1; }
    .col-m-2  { grid-column: span 2; }
    .col-m-3  { grid-column: span 3; }
    .col-m-4  { grid-column: span 4; }
    .col-m-5  { grid-column: span 5; }
    .col-m-6  { grid-column: span 6; }
    .col-m-7  { grid-column: span 7; }
    .col-m-8  { grid-column: span 8; }
    .col-m-9  { grid-column: span 9; }
    .col-m-10 { grid-column: span 10; }
    .col-m-11 { grid-column: span 11; }
    .col-m-12 { grid-column: span 12; }

    .gap-m-0  { gap: 0px; }
    .gap-m-8  { gap: 8px; }
    .gap-m-16 { gap: 16px; }
    .gap-m-24 { gap: 24px; }
    .gap-m-32 { gap: 32px; }
    .gap-m-32-0 { gap: 32px 0; }
    .gap-m-16-24 { gap: 16px 24px; }

    .btn-tab {
        min-height: auto;
        padding: 8px 14px;
        text-transform: none;
    }

    .breadcrumb {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .breadcrumb-item {
        white-space: nowrap;
    }

    .popup-full {
        padding: 48px 16px 60px 16px;
    }
    .popup-min {
        padding: 60px 16px;
    }
    .popup-close {
        top: 12px;
        right: 12px;
        padding: 12px;
    }
    .popup-close svg {
        width: 12px;
        height: 12px;
    }
    .popup-close {
        top: 12px;
        right: 12px;
        padding: 12px;
    }
    .popup-close svg {
        width: 12px;
        height: 12px;
    }
    .popup-login_prev {
        top: 12px;
        right: 12px;
        padding: 12px;
    }
}