@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input,
textarea,
select,
button {
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 400;
    accent-color: #ff9421
}

html {
    scroll-behavior: smooth
}

body {
    font-size: 14px;
    background: #f8f8f8;
    color: #000;
    font-family: "Poppins", sans-serif
}

input,
textarea,
select,
button {
    font-family: "Poppins", sans-serif
}

a {
    color: #000;
    transition: color .3s ease
}

a:hover {
    color: #ff9421
}

strong {
    font-weight: 600
}

p {
    margin-bottom: 15px
}

.hidden {
    display: none !important
}

.upparcase {
    text-transform: uppercase
}

.button {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #f4f3f3;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    padding: 5px;
    position: relative;
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .3s ease;
    cursor: pointer
}

.button--all {
    font-weight: 500;
    background: #fff;
    padding: 8px 15px;
    gap: 5px;
    white-space: nowrap
}

@media(max-width: 600px) {
    .button--all {
        font-size: 12px
    }
}

.button--all:hover {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.button--all i {
    opacity: .2
}

.button--all-categories {
    padding: 5px 8px 5px 5px
}

@media(max-width: 600px) {
    .button--all-categories {
        padding: 3px;
        position: absolute;
        left: 10px
    }
}

.button--all-categories span {
    display: flex
}

@media(max-width: 600px) {
    .button--all-categories span {
        display: none
    }
}

.button--all-categories:hover {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.button--all-categories i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 24px;
    background: #f4f3f3;
    border-radius: 8px;
    pointer-events: none
}

@media(max-width: 600px) {
    .button--all-categories i {
        width: 30px;
        height: 30px;
        font-size: 20px
    }
}

.button--all-texts {
    padding: 0;
    box-shadow: none;
    border: none;
    font-size: 12px
}

.button--all-texts.active i {
    transform: rotate(180deg)
}

.button--all-texts>i {
    font-size: 16px;
    opacity: .2;
    transition: all .3s ease
}

.button--search {
    display: none;
    padding: 5px 8px 5px 5px
}

@media(max-width: 600px) {
    .button--search {
        padding: 3px;
        display: flex
    }
}

.button--search:hover {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.button--search i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 24px;
    background: #f4f3f3;
    border-radius: 8px
}

@media(max-width: 600px) {
    .button--search i {
        width: 30px;
        height: 30px;
        font-size: 20px
    }
}

.button--login {
    padding: 5px 8px 5px 5px
}

@media(max-width: 600px) {
    .button--login {
        padding: 3px
    }
}

.button--login span {
    display: flex
}

@media(max-width: 600px) {
    .button--login span {
        display: none
    }
}

.button--login:hover {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.button--login i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 24px;
    background: #f4f3f3;
    border-radius: 8px
}

@media(max-width: 600px) {
    .button--login i {
        width: 30px;
        height: 30px;
        font-size: 20px
    }
}

.button--basket {
    padding: 5px 8px 5px 5px;
    background: #737373;
    color: #fff !important;
    border: 1px solid #666
}

@media(max-width: 600px) {
    .button--basket {
        padding: 3px
    }
}

.button--basket span {
    display: flex
}

@media(max-width: 600px) {
    .button--basket span {
        display: none
    }
}

.button--basket:hover {
    background: #5c5c5c;
    border: 1px solid #474747;
    outline: 3px solid rgba(71, 71, 71, .3137254902)
}

.button--basket:hover i {
    background: #474747
}

.button--basket.active {
    background: #5c5c5c;
    border: 1px solid #474747
}

.button--basket.active i {
    background: #474747
}

.button--basket.active sub {
    transform: scale(1);
    opacity: 1;
    color: #fff
}

.button--basket i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 24px;
    background: #5d5d5d;
    border-radius: 8px;
    transition: all .3s ease
}

@media(max-width: 600px) {
    .button--basket i {
        width: 30px;
        height: 30px;
        font-size: 20px
    }
}

.button--basket sub {
    font-size: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ff1616;
    position: absolute;
    top: 5px;
    left: 25px;
    transform: scale(0);
    transition: all .3s ease;
    opacity: 0
}

@media(max-width: 600px) {
    .button--basket sub {
        top: -5px
    }
}

.button--menu-red {
    font-weight: 500;
    gap: 5px;
    padding: 5px 8px;
    background: #fcefef;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0)
}

.button--menu-red:hover {
    border: 1px solid #ff1616;
    color: #ff1616
}

.button--menu-red i {
    color: #ff1616;
    transition: all .3s ease
}

.button--menu-orange {
    font-weight: 500;
    gap: 5px;
    padding: 5px 8px;
    background: #fff5ea;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0)
}

.button--menu-orange:hover {
    border: 1px solid #ff9421;
    color: #ff9421
}

.button--menu-orange i {
    color: #eb8a18;
    transition: all .3s ease
}

.button--menu-green {
    font-weight: 500;
    gap: 5px;
    padding: 5px 8px;
    background: #e4ffde;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0)
}

.button--menu-green:hover {
    border: 1px solid #319717;
    color: #319717
}

.button--menu-green i {
    color: #319717;
    transition: all .3s ease
}

.button--filter-mobile {
    display: none;
    height: 30px;
    padding: 0 10px;
    background: #fff;
    box-shadow: none;
    font-size: 12px;
    width: 100%;
    justify-content: center
}

.button--filter-mobile:hover {
    border: 1px solid #ff9421
}

@media(max-width: 600px) {
    .button--filter-mobile {
        display: flex
    }
}

.button--filter {
    padding: 5px 10px;
    border: 1px solid #ff9421;
    box-shadow: none;
    font-size: 12px
}

@media(max-width: 600px) {
    .button--filter {
        padding: 5px 8px;
        border-radius: 5px
    }
}

.button--filter i {
    color: #ff9421
}

.button--filter-remove {
    padding: 5px 10px;
    background: #f8f8f8;
    box-shadow: none;
    flex-shrink: 0;
    font-size: 12px
}

.button--filter-remove span {
    display: flex
}

@media(max-width: 600px) {
    .button--filter-remove span {
        display: none
    }
}

.button--filter-remove:hover {
    border: 1px solid #ff9421
}

.button--detail-info {
    padding: 5px 8px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    line-height: 1
}

@media(max-width: 600px) {
    .button--detail-info {
        border-radius: 5px
    }
}

.button--detail-info:hover {
    border: 1px solid #ff9421;
    background: #fff5ea
}

.button--detail-add {
    padding: 5px 8px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    box-shadow: none
}

.button--detail-add:hover {
    border: 1px solid #ff9421;
    background: #fff5ea
}

.button--basket-add {
    height: 50px;
    justify-content: center;
    background: #ffc700;
    color: #362b02 !important;
    border: 1px solid #ffd647;
    font-weight: 500;
    width: 50%;
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .6s ease
}

@media(max-width: 600px) {
    .button--basket-add {
        width: 100%
    }
}

.button--basket-add:hover {
    background: #ffd647;
    outline: 3px solid rgba(255, 214, 71, .3137254902);
    border: 1px solid #eabe2e
}

.button--basket-add>i {
    width: 0;
    height: 35px;
    overflow: hidden;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .6s ease;
    animation: spin 1s linear infinite
}

.button--basket-add span.main {
    width: 90px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: all .6s ease
}

.button--basket-add span.success {
    width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    visibility: hidden;
    transition: all .6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.button--basket-add span.success>i {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #34b015;
    font-size: 20px
}

.button--basket-add.loading-button {
    filter: grayscale(100%);
    pointer-events: none
}

.button--basket-add.loading-button span.main {
    width: 0;
    opacity: 0;
    visibility: hidden
}

.button--basket-add.loading-button i {
    width: 35px;
    opacity: 1;
    visibility: visible
}

.button--basket-add.success-button {
    background: #73ef54;
    border: 1px solid #49e023;
    pointer-events: none
}

.button--basket-add.success-button span.main {
    width: 0;
    opacity: 0;
    visibility: hidden
}

.button--basket-add.success-button span.success {
    width: 100%;
    opacity: 1;
    visibility: visible;
    padding-right: 20px
}

.button--sold-out {
    height: 50px;
    justify-content: center;
    background: #737373;
    color: #fff !important;
    border: 1px solid #666;
    font-weight: 500;
    width: 50%;
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .6s ease;
    cursor: not-allowed
}

@media(max-width: 600px) {
    .button--sold-out {
        width: 100%
    }
}

.button--complate {
    height: 50px;
    justify-content: center;
    background: #ffc700;
    color: #362b02 !important;
    border: 1px solid #ffd647;
    font-weight: 500;
    width: 100%;
    outline: 3px solid rgba(0, 0, 0, 0)
}

.button--complate:hover {
    background: #ffd647;
    outline: 3px solid rgba(255, 214, 71, .3137254902);
    border: 1px solid #eabe2e
}

.button--basket-remove {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: none;
    background: #f8f8f8
}

.button--basket-remove:hover {
    border: 1px solid #ff9421
}

.button--provoke {
    padding: 8px 15px;
    box-shadow: none;
    background: #34b015;
    color: #fff !important;
    border: 1px solid #37d211;
    font-weight: 500
}

@media(max-width: 600px) {
    .button--provoke {
        display: none
    }
}

.button--provoke:hover {
    background: #2b8c11
}

.button--scs-login {
    padding: 8px 5px 8px 15px;
    background: #fcfcfc;
    box-shadow: none
}

.button--scs-login i {
    opacity: .2;
    font-size: 24px;
    line-height: 1
}

.button--address-edit {
    font-size: 12px;
    padding: 5px 8px;
    background: #f8f8f8;
    box-shadow: none
}

.button--address-edit:hover {
    border: 1px solid #ff9421
}

.button--address-delete {
    font-size: 12px;
    padding: 5px 8px;
    background: #f8f8f8;
    box-shadow: none
}

.button--address-delete:hover {
    border: 1px solid #ff9421
}

.button--copy {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #f8f8f8;
    border: 1px solid #f4f3f3
}

.button--copy:hover {
    border: 1px solid #ff9421
}

.button--ghost {
    padding: 10px 20px;
    gap: 10px;
    font-weight: 500;
    background: #fff !important
}

.button--ghost:hover {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .3137254902)
}

.button--ghost i {
    line-height: 1;
    font-size: 18px
}

.button--main {
    padding: 10px 20px;
    background: #ffc700;
    color: #362b02 !important;
    border: 1px solid #ffd647;
    font-weight: 500
}

.button--main:hover {
    background: #ffd647 !important;
    outline: 3px solid rgba(255, 214, 71, .3137254902) !important;
    border: 1px solid #eabe2e !important
}

.button--main:disabled {
    background: #f8f8f8 !important;
    color: #000 !important;
    border: 1px solid #e0e0e0;
    cursor: not-allowed
}

.button--black {
    padding: 10px 20px;
    gap: 10px;
    font-weight: 500;
    background: #5c5c5c;
    color: #fff !important;
    border: 1px solid #474747;
    box-shadow: none
}

.button--black:hover {
    background: #474747;
    outline: 3px solid rgba(71, 71, 71, .3137254902)
}

.button--black-mini {
    padding: 5px 10px;
    gap: 5px;
    font-weight: 500;
    background: #5c5c5c;
    color: #fff;
    box-shadow: none;
    font-size: 14px;
    border-radius: 5px
}

.button--black-mini:hover {
    background: #474747
}

.button--order-detail {
    padding: 8px 10px;
    background: #fff
}

.button--order-detail:hover {
    border: 1px solid #ff9421
}

.button--order-print {
    padding: 8px 10px
}

.button--order-print:hover {
    border: 1px solid #ff9421
}

.button--order-payment {
    padding: 8px 10px;
    width: 100%;
    justify-content: center;
    background: #fff5ea;
    border: 1px solid #ffd5a7
}

.button--order-payment:hover {
    border: 1px solid #ff9421
}

.button--address-add {
    padding: 8px 10px;
    background: #f8f8f8;
    border: 1px solid #f4f3f3;
    box-shadow: none
}

.button--address-add:hover {
    border: 1px solid #ff9421
}

.button--coupon {
    gap: 5px;
    padding: 5px 8px;
    font-size: 12px;
    width: 100%;
    box-shadow: none;
    border-radius: 5px;
    background: #f8f8f8;
    white-space: nowrap
}

.button--coupon:hover {
    border: 1px solid #ff9421
}

.button--user-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: none;
    background: #f8f8f8
}

.button--banner-close {
    width: 25px;
    height: 25px;
    background: #5c5c5c;
    border: 1px solid #474747;
    color: #fff !important
}

.button--banner-close:hover {
    background: #474747
}

.loading {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 8px 15px;
    background: #ededed;
    border: 1px solid #fff;
    border-radius: 30px;
    margin: 0 auto;
    box-shadow: none;
    transition: all .3s ease;
    visibility: hidden;
    opacity: 0
}

.loading.active {
    visibility: visible;
    opacity: 1
}

.loading i {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite
}

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

    100% {
        transform: rotate(360deg)
    }
}

.product {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 8px;
    overflow: hidden
}

.product:hover .product__fav {
    opacity: 1;
    transform: translateX(0)
}

.product:hover .product__fav-remove {
    opacity: 1;
    transform: translateX(0)
}

.product:hover .product__button {
    opacity: 1;
    transform: translateY(0)
}

.product.fav .product__fav {
    display: none
}

.product.fav .product__fav-remove {
    display: flex
}

.product__img {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #f4f3f3
}

.product__img-item {
    width: 100%;
    display: flex
}

.product__img-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 224/260;
    object-fit: cover
}

.product__sold-out {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    background: #f8f8f8;
    font-size: 12px;
    border-radius: 25px;
    pointer-events: none
}

.product__fav {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    background: hsla(0, 0%, 100%, .7529411765);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #f4f4f4;
    opacity: 0;
    transform: translateX(50px);
    transition: all .3s ease
}

.product__fav:hover {
    border: 1px solid #ff9421
}

.product__fav-remove {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    background: rgba(255, 22, 22, .5647058824);
    color: #fff;
    font-size: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid rgba(255, 22, 22, .062745098);
    opacity: 0;
    transform: translateX(50px);
    transition: all .3s ease
}

.product__fav-remove:hover {
    background: #ff1616;
    color: #fff
}

.product__info {
    width: 100%;
    height: 130px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    position: relative;
    overflow: hidden
}

.product__header {
    display: flex;
    flex-direction: column
}

.product__header-category {
    height: 18px;
    overflow: hidden;
    font-size: 12px;
    opacity: .5
}

.product__header-title {
    font-weight: 500;
    height: 42px;
    overflow: hidden
}

.product__prices {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.product__prices-wrapper {
    display: flex;
    flex-direction: column
}

.product__prices-wrapper del {
    font-size: 12px;
    text-decoration: line-through
}

.product__prices-wrapper ins {
    font-size: 16px;
    font-weight: 600
}

.product__prices-discount {
    color: #ff1616;
    background: rgba(255, 22, 22, .1019607843);
    border: 1px solid rgba(255, 22, 22, .062745098);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px
}

.product__button {
    width: calc(100% - 20px);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #362b02 !important;
    background: #ffc700;
    font-weight: 500;
    border-radius: 8px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    opacity: 0;
    transform: translateY(50px);
    outline: 3px solid rgba(0, 0, 0, 0);
    border: 1px solid #ffd647;
    transition: all .3s ease
}

.product__button:hover {
    background: #ffd647;
    outline: 3px solid rgba(255, 214, 71, .3137254902);
    border: 1px solid #eabe2e
}

.product__button--sold-out {
    background: #737373;
    color: #fff !important;
    border: 1px solid #666
}

.product__button--sold-out:hover {
    background: #5c5c5c;
    border: 1px solid #474747;
    outline: 3px solid rgba(71, 71, 71, .3137254902)
}

.alert {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    border: 1px solid #f4f3f3;
    background: #f8f8f8;
    border-radius: 8px
}

.alert i {
    font-size: 18px;
    line-height: 1
}

.alert--red {
    background: rgba(255, 22, 22, .1019607843);
    border: 1px solid rgba(255, 22, 22, .062745098)
}

.alert--red i {
    color: #ff1616
}

.alert--green {
    background: rgba(49, 151, 23, .1019607843);
    border: 1px solid rgba(49, 151, 23, .062745098)
}

.alert--green i {
    color: #319717
}

.alert--yellow {
    background: rgba(255, 199, 0, .1019607843);
    border: 1px solid rgba(255, 199, 0, .062745098)
}

.alert--yellow i {
    color: #ffc700
}

.alert--secure-payment {
    min-height: 100px;
    display: flex;
    justify-content: center
}

@media(max-width: 600px) {
    .alert--secure-payment {
        min-height: auto
    }
}

.alert--secure-payment i {
    color: #319717
}

.badge {
    font-size: 10px;
    display: flex;
    align-items: center
}

.badge--menu-red {
    background: #ff1616;
    color: #fff;
    padding: 3px 8px;
    border-radius: 20px
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 12px
}

@media(max-width: 600px) {
    .breadcrumb {
        display: none
    }
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 25px
}

.breadcrumb li::after {
    content: ">";
    font-size: 16px;
    opacity: .2;
    line-height: 1
}

.breadcrumb li:last-child::after {
    content: ""
}

.title-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.title-section h1,
.title-section h2,
.title-section h3,
.title-section h4 {
    font-size: 22px;
    font-weight: 500
}

@media(max-width: 600px) {

    .title-section h1,
    .title-section h2,
    .title-section h3,
    .title-section h4 {
        font-size: 18px
    }
}

.all-categories {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .8078431373);
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    overflow-y: auto
}

.all-categories:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 285px;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: all .3s ease
}

.all-categories.active {
    opacity: 1;
    visibility: visible
}

.all-categories.active:before {
    transform: translateX(0)
}

.all-categories.active .all-categories__container {
    transform: translateX(0)
}

.all-categories__container {
    height: 100%;
    width: 285px;
    transform: translateX(-100%);
    transition: all .3s ease
}

.all-categories__container>ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px
}

.all-categories__container>ul>li {
    width: 100%;
    display: flex;
    position: relative
}

.all-categories__container>ul>li>a {
    width: 100%;
    display: flex;
    padding: 5px;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.all-categories__container>ul>li>a span {
    display: flex;
    align-items: center;
    gap: 5px
}

.all-categories__container>ul>li>a img {
    width: 45px;
    height: 45px;
    border-radius: 5px;
    border: 1px solid #f4f3f3;
    object-fit: cover
}

.all-categories__container>ul>li>a i {
    font-size: 18px
}

.all-categories__container>ul>li>a:hover {
    background: #f8f8f8
}

.all-categories__container>ul>li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.all-categories__container>ul>li .sub-menu {
    position: absolute;
    top: 0;
    left: 265px;
    padding-left: 20px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-10px);
    transition: all .3s ease
}

@media(max-width: 600px) {
    .all-categories__container>ul>li .sub-menu {
        display: none
    }
}

.all-categories__container>ul>li .sub-menu ul {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #fff;
    min-width: 220px;
    gap: 5px;
    border-radius: 8px
}

.all-categories__container>ul>li .sub-menu ul li {
    width: 100%;
    display: flex;
    position: relative
}

.all-categories__container>ul>li .sub-menu ul li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.all-categories__container>ul>li .sub-menu ul li .sub-menu {
    left: 200px
}

.all-categories__container>ul>li .sub-menu ul a {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.all-categories__container>ul>li .sub-menu ul a img {
    display: none
}

.all-categories__container>ul>li .sub-menu ul a:hover {
    background: #f8f8f8
}

.all-categories__header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f4f3f3
}

.all-categories__header h3 {
    font-size: 22px;
    font-weight: 600
}

.all-categories__header-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #f4f3f3;
    border-radius: 5px
}

.header {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    z-index: 999
}

@media(max-width: 600px) {
    .header {
        position: sticky;
        top: 0
    }
}

.header__banner {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    background: #ffc700;
    color: #362b02;
    height: 40px;
    overflow: hidden;
    opacity: 1;
    transition: all .3s ease
}

@media(max-width: 600px) {
    .header__banner {
        height: auto;
        font-size: 12px;
        padding: 10px 40px 10px 10px
    }
}

.header__banner.hide {
    display: flex;
    height: 0;
    opacity: 0;
    padding: 0
}

.header__banner .button--banner-close {
    right: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.header__banner p {
    margin: 0
}

.header__top {
    width: 100%;
    height: 35px;
    background: #f8f8f8;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 600px) {
    .header__top {
        display: none
    }
}

.header__top-container {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header__top-container>ul {
    display: flex;
    font-size: 12px;
    gap: 20px
}

.header__top-container>ul .sub-menu {
    display: none
}

.header__top-right {
    display: flex;
    align-items: center;
    gap: 30px
}

.header__top-contact {
    display: flex;
    align-items: center;
    gap: 15px
}

.header__top-contact li {
    display: flex
}

.header__top-contact a {
    display: flex;
    gap: 5px;
    align-items: center
}

.header__top-contact a>i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 5px;
    background: #fff
}

.header__top-social {
    display: flex;
    gap: 10px
}

.header__top-social li {
    display: flex
}

.header__top-social a {
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    background: #5c5c5c;
    color: #fff;
    border-radius: 5px
}

.header__middle {
    width: 100%;
    display: flex;
    padding: 20px 0;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f4f4f4;
    position: relative
}

@media(max-width: 600px) {
    .header__middle {
        padding: 10px
    }
}

.header__middle-container {
    width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media(max-width: 600px) {
    .header__middle-container {
        width: 100%
    }
}

.header__logo {
    display: flex
}

@media(max-width: 600px) {
    .header__logo {
        margin-left: 45px
    }
}

.header__logo img {
    max-height: 100px;
    max-width: 250px
}

@media(max-width: 600px) {
    .header__logo img {
        height: 45px;
        max-width: 160px;
        object-fit: contain
    }
}

.header__search {
    display: flex;
    align-items: center;
    gap: 10px
}

.header__search form {
    display: flex;
    position: relative;
    width: 450px
}

@media(max-width: 600px) {
    .header__search form {
        width: 100%;
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 90px;
        transition: all .3s ease;
        background: #fff;
        border-bottom: 1px solid #f4f4f4;
        box-shadow: 0 5px 5px 5px rgba(0, 0, 0, .062745098)
    }

    .header__search form.active {
        top: 110px;
        opacity: 1;
        visibility: visible
    }
}

.header__search form input {
    width: 100%;
    height: 45px;
    padding: 0 45px 0 10px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    transition: all .3s ease;
    outline: 3px solid rgba(0, 0, 0, 0)
}

.header__search form input:focus {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.header__search form button {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: absolute;
    right: 5px;
    top: 5px;
    border: none;
    background: #f4f3f3;
    font-size: 24px;
    cursor: pointer;
    transition: all .3s ease
}

@media(max-width: 600px) {
    .header__search form button {
        right: 15px;
        top: 15px
    }
}

.header__search form button:hover {
    background: #e0e0e0
}

.header__user-menus {
    display: flex;
    gap: 10px;
    align-items: center
}

@media(max-width: 600px) {
    .header__user-menus {
        gap: 5px
    }
}

.header__user-login {
    display: flex;
    position: relative
}

.header__user-login:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

.header__user-login .sub-menu {
    width: 180px;
    display: flex;
    position: absolute;
    z-index: 99;
    top: 45px;
    padding-top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease
}

@media(max-width: 600px) {
    .header__user-login .sub-menu {
        display: none
    }
}

.header__user-login .sub-menu ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #f4f4f4;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    border-radius: 8px
}

.header__user-login .sub-menu ul li {
    display: flex;
    width: 100%
}

.header__user-login .sub-menu ul a {
    width: 100%;
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    transition: all .3s ease
}

.header__user-login .sub-menu ul a:hover {
    background: #f8f8f8
}

.header__user-login .sub-menu .button {
    justify-content: center;
    width: 100%;
    padding: 10px 0
}

.header__bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f4f4f4
}

@media(max-width: 600px) {
    .header__bottom {
        justify-content: flex-start;
        overflow-x: auto
    }
}

.header__bottom-container {
    width: 1200px;
    display: flex;
    align-items: center;
    gap: 30px
}

@media(max-width: 600px) {
    .header__bottom-container {
        width: 100%;
        gap: 0
    }
}

.header__bottom-container>ul {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between
}

@media(max-width: 600px) {
    .header__bottom-container>ul {
        width: max-content
    }
}

.header__bottom-container>ul>li {
    display: flex;
    position: relative
}

.header__bottom-container>ul>li>a {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media(max-width: 600px) {
    .header__bottom-container>ul>li>a {
        padding: 0 10px
    }
}

.header__bottom-container>ul>li>a>i {
    font-size: 16px;
    opacity: .2
}

@media(max-width: 600px) {
    .header__bottom-container>ul>li>a>i {
        display: none
    }
}

.header__bottom-container>ul>li>.sub-menu {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all .3s ease;
    padding: 15px;
    background: #fff;
    border: 1px solid #f4f4f4;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    min-width: 220px;
    position: absolute;
    top: 45px
}

.header__bottom-container>ul>li.menu-left>.sub-menu {
    left: 0;
    right: auto;
}

.header__bottom-container>ul>li.menu-right>.sub-menu {
    right: 0;
    left: auto;
}


@media(max-width: 600px) {
    .header__bottom-container>ul>li>.sub-menu {
        display: none
    }
}

.header__bottom-container>ul>li>.sub-menu ul {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.header__bottom-container>ul>li:hover>.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.header__menu-discounts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

@media(max-width: 600px) {
    .header__menu-discounts {
        padding: 0 10px
    }
}

.hero-old {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    background: #eee
}

@media(max-width: 600px) {
    .hero-old {
        padding: 10px
    }
}

.hero-old__container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media(max-width: 600px) {
    .hero-old__container {
        width: 100%
    }
}

.hero-old__slider {
    width: 100%;
    border-radius: 16px;
    background: hsla(0, 0%, 100%, .7529411765);
    border: 1px solid #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    overflow: hidden
}

@media(max-width: 600px) {
    .hero-old__slider {
        border-radius: 8px
    }
}

.hero-old__slider-wrapper {
    width: 100%;
    display: flex
}

.hero-old__slide {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 20px
}

@media(max-width: 600px) {
    .hero-old__slide {
        flex-direction: column;
        padding: 0
    }
}

.hero-old__slide-text {
    display: flex;
    flex-direction: column;
    max-width: 450px;
    gap: 10px
}

@media(max-width: 600px) {
    .hero-old__slide-text {
        order: 2;
        width: 100%;
        padding: 20px;
        gap: 5px
    }
}

.hero-old__slide-text h4 {
    font-weight: 300
}

.hero-old__slide-text h3 {
    font-size: 24px;
    font-weight: 600
}

@media(max-width: 600px) {
    .hero-old__slide-text h3 {
        font-size: 18px
    }
}

.hero-old__slide-img {
    width: 660px;
    display: flex
}

@media(max-width: 600px) {
    .hero-old__slide-img {
        width: 100%
    }
}

.hero-old__slide-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover
}

@media(max-width: 600px) {
    .hero-old__slide-img img {
        border-radius: 0
    }
}

.hero-old__thumb {
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 600px) {
    .hero-old__thumb {
        display: none
    }
}

.hero-old__thumb-container {
    display: flex;
    justify-content: center;
    align-items: center
}

.hero-old__thumb-wrapper {
    display: flex;
    justify-content: center
}

.hero-old__thumb-slide {
    display: flex;
    width: 100px !important
}

.hero-old__thumb-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0);
    transition: all .3s ease
}

.hero-old__thumb-slide.swiper-slide-thumb-active img {
    border: 2px solid #ff9421
}

.hero {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    background: #eee
}

@media(max-width: 600px) {
    .hero {
        padding: 10px
    }
}

.hero__container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    position: relative
}

@media(max-width: 600px) {
    .hero__container {
        width: 100%
    }
}

.hero__slider {
    width: 100%;
    display: flex;
    overflow: hidden;
    border-radius: 16px
}

@media(max-width: 600px) {
    .hero__slider {
        border-radius: 8px
    }
}

.hero__slider-wrapper {
    width: 100%;
    display: flex
}

.hero__item {
    width: 100%;
    display: flex
}

.hero__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 120/45;
    object-fit: cover
}

.hero__pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    z-index: 99;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%)
}

@media(max-width: 600px) {
    .hero__pagination {
        bottom: 5px !important;
        gap: 5px
    }
}

.hero__pagination span {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    transition: all .3s ease;
    opacity: 1;
    margin: 0 !important
}

@media(max-width: 600px) {
    .hero__pagination span {
        width: 5px;
        height: 5px
    }
}

.hero__pagination span.swiper-pagination-bullet-active {
    background: #ffc700;
    width: 30px
}

@media(max-width: 600px) {
    .hero__pagination span.swiper-pagination-bullet-active {
        width: 15px
    }
}

.hero__arrow {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(0, 0%, 100%, .7529411765);
    border: 1px solid #f4f3f3;
    font-size: 30px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    transition: all .3s ease
}

@media(max-width: 600px) {
    .hero__arrow {
        width: 30px;
        height: 30px;
        font-size: 20px
    }
}

.hero__arrow:hover {
    border: 1px solid #ff9421
}

.hero__arrow--left {
    left: 15px
}

@media(max-width: 600px) {
    .hero__arrow--left {
        left: 5px
    }
}

.hero__arrow--right {
    right: 15px
}

@media(max-width: 600px) {
    .hero__arrow--right {
        right: 5px
    }
}

.products {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px
}

@media(max-width: 600px) {
    .products {
        margin-top: 20px;
        padding: 0 10px
    }
}

.products__container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 600px) {
    .products__container {
        width: 100%;
        gap: 5px
    }
}

.products__wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px
}

@media(max-width: 600px) {
    .products__wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px
    }
}

.products__slider {
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative
}

.products__slider-container {
    width: 100%;
    display: flex
}

.products__slider-wrapper {
    width: 100%;
    display: flex
}

.products__slider-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(0, 0%, 100%, .7529411765);
    border: 1px solid #f4f3f3;
    font-size: 16px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 70px));
    z-index: 9;
    transition: all .3s ease
}

.products__slider-arrow:hover {
    border: 1px solid #ff9421
}

.products__slider-arrow--left {
    left: 5px
}

.products__slider-arrow--right {
    right: 5px
}

.tabs {
    display: flex
}

.tabs__menu {
    display: flex;
    padding: 5px;
    background: #eee;
    width: max-content;
    margin: auto;
    border-radius: 8px
}

@media(max-width: 600px) {
    .tabs__menu {
        padding: 3px
    }
}

.tabs__menu li {
    display: flex
}

.tabs__menu a {
    display: flex;
    border-radius: 5px;
    padding: 10px 15px;
    opacity: .5;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all .3s ease
}

@media(max-width: 600px) {
    .tabs__menu a {
        padding: 5px 10px;
        font-size: 12px
    }
}

.tabs__menu a:hover {
    color: #000;
    opacity: 1
}

.tabs__menu a.active {
    background: hsla(0, 0%, 100%, .7529411765);
    border: 1px solid #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    opacity: 1
}

.tabs__container {
    width: 100%;
    display: flex;
    flex-direction: column
}

.tabs__item {
    width: 100%;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px
}

@media(max-width: 600px) {
    .tabs__item {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px
    }
}

.tabs__item.active {
    display: grid
}

.banners {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px
}

@media(max-width: 600px) {
    .banners {
        margin-top: 20px;
        padding: 0 10px
    }
}

.banners__container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 600px) {
    .banners__container {
        width: 100%;
        gap: 10px
    }
}

.banners__row {
    width: 100%;
    display: flex;
    gap: 20px
}

@media(max-width: 600px) {
    .banners__row {
        flex-direction: column;
        gap: 5px
    }
}

.banners__item {
    width: 100%;
    display: flex
}

.banners__item img {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 8px;
    object-fit: cover
}

.slogans {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px
}

@media(max-width: 600px) {
    .slogans {
        margin-top: 20px;
        padding: 0 10px
    }
}

.slogans__container {
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

@media(max-width: 600px) {
    .slogans__container {
        width: 100%;
        gap: 5px;
        grid-template-columns: 1fr
    }
}

.slogan {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border: 1px solid #f4f3f3;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    border-radius: 8px
}

.slogan>i {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f4f3f3;
    font-size: 36px
}

.slogan>span {
    font-size: 18px;
    font-weight: 500
}

.slogan>span strong {
    font-weight: 600
}

.slogan--orange i {
    background: #fff5e8;
    color: #ff8801
}

.slogan--orange strong {
    color: #ff8801
}

.slogan--green i {
    background: #eeffe9;
    color: #319717
}

.slogan--green strong {
    color: #319717
}

.slogan--blue i {
    background: #e6f6ff;
    color: #04a0f7
}

.slogan--blue strong {
    color: #04a0f7
}

.slogan--purple i {
    background: #f7efff;
    color: #832fd7
}

.slogan--purple strong {
    color: #832fd7
}

.blogs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px
}

@media(max-width: 600px) {
    .blogs {
        margin-top: 20px;
        padding: 0 10px
    }
}

.blogs__container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

@media(max-width: 600px) {
    .blogs__container {
        width: 100%;
        gap: 5px
    }
}

.blogs__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

@media(max-width: 600px) {
    .blogs__wrapper {
        grid-template-columns: 1fr;
        gap: 5px
    }
}

.pagination {
    display: flex;
    align-items: center
}

.pagination ul {
    display: flex;
    gap: 5px
}

.pagination ul li {
    display: flex
}

.pagination ul a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #f4f3f3;
    font-size: 12px;
    font-weight: 300;
    transition: all .3s ease
}

.pagination ul a:hover {
    border: 1px solid #ffc700
}

.pagination ul a.active {
    background: #ffc700;
    color: #362b02;
    font-weight: 500;
    border: 1px solid #ffc700
}

.blog {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 8px;
    overflow: hidden
}

.blog__img {
    width: 100%;
    display: flex;
    border: 1px solid #f4f3f3
}

.blog__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover
}

.blog__text {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 8px
}

.blog__text>h2 {
    font-size: 16px;
    font-weight: 500
}

.blog__text>span {
    font-weight: 300
}

.blog__info {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 300
}

.blog__category {
    font-weight: 500
}

.footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 45px;
    background: #fff;
    border-top: 1px solid #f4f4f4
}

@media(max-width: 600px) {
    .footer {
        margin-top: 20px
    }
}

.footer__texts {
    width: 100%;
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f4f4f4
}

@media(max-width: 600px) {
    .footer__texts {
        padding: 20px 10px
    }
}

.footer__texts-container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

@media(max-width: 600px) {
    .footer__texts-container {
        width: 100%
    }
}

.footer__texts-container>h1 {
    width: 100%;
    font-size: 16px;
    font-weight: 600
}

.footer__texts-description {
    width: 100%;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 5px;
    max-height: 100px;
    overflow: hidden;
    position: relative;
    transition: all 1s ease
}

.footer__texts-description>h2 {
    font-size: 16px;
    font-weight: 600
}

.footer__texts-description>h3 {
    font-size: 14px;
    font-weight: 500
}

.footer__texts-description>ul {
    margin: 10px
}

.footer__texts-description>ul li {
    list-style: disc
}

.footer__texts-description:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(transparent, white);
    opacity: 1;
    transition: all 1s ease
}

.footer__texts-description.active {
    max-height: 1000px
}

.footer__texts-description.active:after {
    opacity: 0
}

.footer__menus {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    border-bottom: 1px solid #f4f4f4
}

@media(max-width: 600px) {
    .footer__menus {
        padding: 20px 10px
    }
}

.footer__menus-container {
    width: 1200px;
    display: flex;
    justify-content: space-between
}

@media(max-width: 600px) {
    .footer__menus-container {
        width: 100%;
        flex-direction: column;
        gap: 20px
    }
}

.footer__menu {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.footer__menu>h5 {
    font-size: 16px;
    font-weight: 600
}

.footer__menu>ul {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer__menu>ul .sub-menu {
    display: none
}

.footer__contact {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 600px) {
    .footer__contact {
        width: 100%
    }
}

.footer__contact-item {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.footer__contact-item span:first-child {
    font-size: 12px;
    font-weight: 300
}

.footer__contact-item a {
    font-weight: 600
}

.footer__contact-item p {
    margin-bottom: 0
}

.footer__contact-row {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.footer__bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    border-bottom: 1px solid #f4f4f4
}

@media(max-width: 600px) {
    .footer__bottom {
        padding: 20px 10px
    }
}

.footer__bottom-container {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media(max-width: 600px) {
    .footer__bottom-container {
        width: 100%;
        gap: 15px
    }
}

.footer__logo {
    display: flex
}

.footer__logo img {
    max-height: 55px;
    max-width: 200px
}

@media(max-width: 600px) {
    .footer__logo img {
        height: 35px;
        max-width: 160px;
        object-fit: contain
    }
}

.footer__social {
    display: flex;
    gap: 10px
}

@media(max-width: 600px) {
    .footer__social {
        gap: 5px
    }
}

.footer__social li {
    display: flex
}

.footer__social a {
    display: flex
}

.footer__social a i {
    width: 35px;
    height: 35px;
    font-size: 24px;
    background: #5c5c5c;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    outline: 3px solid rgba(0, 0, 0, 0)
}

@media(max-width: 600px) {
    .footer__social a i {
        width: 30px;
        height: 30px;
        font-size: 18px
    }
}

.footer__social a i:hover {
    outline: 3px solid rgba(92, 92, 92, .3137254902)
}

.footer__social a i.uil-facebook-f {
    background: #3b5998
}

.footer__social a i.uil-facebook-f:hover {
    outline: 3px solid rgba(59, 89, 152, .3137254902)
}

.footer__social a i.uil-twitter {
    background: #1da1f2
}

.footer__social a i.uil-twitter:hover {
    outline: 3px solid rgba(29, 161, 242, .3137254902)
}

.footer__social a i.uil-instagram {
    background: #5925ed
}

.footer__social a i.uil-instagram:hover {
    outline: 3px solid rgba(89, 37, 237, .3137254902)
}

.footer__social a i.uil-youtube {
    background: red
}

.footer__social a i.uil-youtube:hover {
    outline: 3px solid rgba(255, 0, 0, .3137254902)
}

.footer__social a i.uil-linkedin {
    background: #0077b5
}

.footer__social a i.uil-linkedin:hover {
    outline: 3px solid rgba(0, 119, 181, .3137254902)
}

.footer__copyright {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0
}

@media(max-width: 600px) {
    .footer__copyright {
        padding: 20px 10px
    }
}

.footer__copyright-container {
    max-width: 850px;
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6
}

.footer__copyright-container a {
    text-decoration: underline
}

.blog-detail {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 600px) {
    .blog-detail {
        margin-top: 20px;
        padding: 0 10px
    }
}

.blog-detail__container {
    width: 1200px;
    display: flex;
    flex-direction: column
}

@media(max-width: 600px) {
    .blog-detail__container {
        width: 100%
    }
}

.blog-detail__container .breadcrumb {
    margin: 10px 0
}

.blog-detail__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.blog-detail__img {
    width: 100%;
    height: auto;
    aspect-ratio: 120/56;
    border-radius: 16px;
    background: #fff;
    object-fit: cover
}

@media(max-width: 600px) {
    .blog-detail__img {
        border-radius: 8px 8px 0 0
    }
}

.blog-detail__texts {
    width: 960px;
    background: #fff;
    border: 1px solid #f4f4f4;
    border-radius: 0 0 16px 16px
}

@media(max-width: 600px) {
    .blog-detail__texts {
        width: 100%;
        border-radius: 0 0 8px 8px
    }
}

.blog-detail__texts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 30px 30px 30px
}

@media(max-width: 600px) {
    .blog-detail__texts-wrapper {
        padding: 20px 10px;
        gap: 5px
    }
}

.blog-detail__texts-wrapper>h1 {
    font-size: 28px;
    font-weight: 600
}

@media(max-width: 600px) {
    .blog-detail__texts-wrapper>h1 {
        font-size: 18px
    }
}

.blog-detail__texts-description {
    font-size: 16px;
    line-height: 1.6
}

.blog-detail__texts-gallery {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr)
}

.blog-detail__texts-gallery li {
    display: flex
}

.blog-detail__texts-gallery a {
    width: 100%;
    display: flex
}

.blog-detail__texts-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 8px;
    border: 1px solid #f4f4f4;
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .3s ease;
    object-fit: cover
}

.blog-detail__texts-gallery img:hover {
    outline: 3px solid rgba(255, 148, 33, .1450980392);
    border: 1px solid #ff9421
}

.blog-detail__info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px solid #f4f4f4
}

@media(max-width: 600px) {
    .blog-detail__info {
        padding: 10px
    }
}

.blog-detail__info-meta {
    display: flex;
    gap: 20px
}

@media(max-width: 600px) {
    .blog-detail__info-meta {
        gap: 15px;
        font-size: 12px
    }
}

.blog-detail__info-meta a {
    font-weight: 600
}

.blog-detail__info-meta span {
    font-weight: 300
}

.blog-detail__info-share {
    display: flex;
    gap: 15px;
    align-items: center
}

@media(max-width: 600px) {
    .blog-detail__info-share {
        gap: 5px
    }
}

.blog-detail__info-share span {
    font-size: 12px;
    font-weight: 300
}

.blog-detail__info-share ul {
    display: flex;
    gap: 10px
}

@media(max-width: 600px) {
    .blog-detail__info-share ul {
        gap: 5px
    }
}

.blog-detail__info-share ul li {
    display: flex
}

.blog-detail__info-share ul a {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #5c5c5c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.page {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 600px) {
    .page {
        margin-top: 20px;
        padding: 0 10px
    }
}

.page__container {
    width: 1200px;
    display: flex;
    flex-direction: column
}

@media(max-width: 600px) {
    .page__container {
        width: 100%
    }
}

.page__container .breadcrumb {
    margin: 10px 0
}

.page__wrapper {
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: flex-start
}

@media(max-width: 600px) {
    .page__wrapper {
        flex-direction: column;
        gap: 10px
    }
}

.page__sidebar {
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
    padding: 30px;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 16px
}

@media(max-width: 600px) {
    .page__sidebar {
        width: 100%;
        order: 2;
        border-radius: 8px;
        padding: 20px
    }
}

.page__sidebar h2 {
    font-size: 16px;
    font-weight: 600
}

.page__sidebar ul {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.page__sidebar ul li {
    display: flex
}

.page__sidebar ul a {
    display: flex
}

.page__sidebar ul a.active {
    color: #ff9421
}

.page__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 16px
}

@media(max-width: 600px) {
    .page__content {
        padding: 20px;
        border-radius: 8px
    }
}

.page__content h1 {
    font-size: 18px;
    font-weight: 600
}

.page__content h2,
.page__content h3,
.page__content h4 {
    font-size: 16px;
    font-weight: 600
}

.page__content-description {
    font-size: 16px;
    line-height: 1.6
}

.page__content-description ul {
    margin: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style-type: disc
}

.page__content-description ul li {
    list-style-type: disc
}

.category {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 0px 20px 0px 20px;
}

@media(max-width: 600px) {
    .category {
        margin-top: 10px;
        padding: 0 10px
    }
}

.category__container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 600px) {
    .category__container {
        width: 100%;
        gap: 5px
    }
}

.category__title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media(max-width: 600px) {
    .category__title {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px
    }
}

.category__title h1 {
    font-size: 32px;
    font-weight: 600
}

@media(max-width: 600px) {
    .category__title h1 {
        font-size: 22px
    }
}

.category__title-left {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.category__title-right {
    display: flex;
    align-items: center;
    gap: 20px
}

@media(max-width: 600px) {
    .category__title-right {
        gap: 5px;
        width: 100%;
        justify-content: space-between
    }
}

.category__title-right span {
    font-size: 12px;
    font-weight: 300
}

@media(max-width: 600px) {
    .category__title-right span {
        display: none
    }
}

.category__title-right select {
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #f4f3f3;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431)
}

@media(max-width: 600px) {
    .category__title-right select {
        width: 100%;
        padding: 5px 8px;
        font-size: 12px;
        box-shadow: none;
        text-align: center
    }

    .category__title-right select:focus {
        border: 1px solid #ff9421
    }
}

.category__wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative
}

@media(max-width: 600px) {
    .category__wrapper {
        flex-direction: column;
        gap: 0
    }
}

.category__sidebar {
    width: 210px;
    max-height: calc(100vh - 20px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    position: sticky;
    top: 10px;
    transition: all .3s ease
}

@media(max-width: 600px) {
    .category__sidebar {
        width: 100%;
        position: initial;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        opacity: 0
    }

    .category__sidebar.active {
        visibility: visible;
        max-height: 600px;
        overflow: auto;
        opacity: 1;
        margin-bottom: 10px
    }
}

.category__sidebar-item {
    padding: 20px 15px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.category__sidebar-item ul {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.category__sidebar-item ul li {
    display: flex;
    width: 100%
}

.category__sidebar-item ul label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px;
    border-radius: 6px
}

.category__sidebar-item ul label:hover {
    background: #f8f8f8
}

.category__sidebar-item ul label input[type=checkbox] {
    width: 15px;
    height: 15px;
    border: 1px solid #bababa
}

.category__sidebar-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ebebeb
}

.category__sidebar-title {
    display: flex;
    flex-direction: column
}

.category__sidebar-title h5 {
    font-size: 14px;
    font-weight: 600
}

.category__sidebar-title>a {
    font-size: 12px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 3px
}

.category__products {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 600px) {
    .category__products {
        gap: 5px
    }
}

.category__products-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

@media(max-width: 600px) {
    .category__products-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    .category__products-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    .category__products-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

.category__filter {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid #f4f3f3;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    padding: 10px;
    border-radius: 8px
}

@media(max-width: 600px) {
    .category__filter {
        padding: 5px
    }
}

.category__filter-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

@media(max-width: 600px) {
    .category__filter-wrapper {
        gap: 5px
    }
}

.product-detail {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.product-detail__container {
    width: 1200px;
    display: flex;
    flex-direction: column
}

@media(max-width: 600px) {
    .product-detail__container {
        width: 100%
    }
}

.product-detail__container .breadcrumb {
    margin: 10px 0
}

.product-detail__wrapper {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px
}

@media(max-width: 600px) {
    .product-detail__wrapper {
        flex-direction: column;
        gap: 10px
    }
}

.product-detail__images {
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0
}

@media(max-width: 600px) {
    .product-detail__images {
        width: 100%
    }
}

.product-detail__images-main {
    width: 100%;
    display: flex;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 16px;
    position: relative
}

@media(max-width: 600px) {
    .product-detail__images-main {
        border-radius: 0;
        border: 0
    }
}

.product-detail__images-main .product-badges {
    top: 10px;
    left: 10px
}

.product-detail__images-main-wrapper {
    width: 100%;
    display: flex
}

.product-detail__images-main-item {
    width: 100%;
    display: flex
}

.product-detail__images-main-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 60/76;
    object-fit: cover
}

.product-detail__images-thumbs {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 15px
}

@media(max-width: 600px) {
    .product-detail__images-thumbs {
        gap: 5px
    }
}

.product-detail__images-thumbs-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(0, 0%, 100%, .7529411765);
    border: 1px solid #f4f3f3;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer
}

.product-detail__images-thumbs-slider {
    width: 100%;
    display: flex;
    overflow: hidden
}

.product-detail__images-thumbs-wrapper {
    width: 100%;
    display: flex
}

.product-detail__images-thumbs-item {
    display: flex;
    width: 100%
}

.product-detail__images-thumbs-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border: 2px solid #f4f3f3;
    border-radius: 8px;
    object-fit: cover
}

.product-detail__images-thumbs-item.swiper-slide-thumb-active img {
    border: 2px solid #ff9421
}

.product-detail__summary {
    width: 100%;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 16px;
    overflow: hidden
}

@media(max-width: 600px) {
    .product-detail__summary {
        border-radius: 0
    }
}

.product-detail__header {
    width: 100%;
    padding: 30px;
    border-bottom: 1px solid #f4f3f3;
    display: flex;
    flex-direction: column
}

@media(max-width: 600px) {
    .product-detail__header {
        padding: 20px 10px
    }
}

.product-detail__header h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px
}

@media(max-width: 600px) {
    .product-detail__header h1 {
        font-size: 22px
    }
}

.product-detail__header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px
}

@media(max-width: 600px) {
    .product-detail__header-info {
        font-size: 12px
    }
}

.product-detail__header-info>span {
    font-weight: 300
}

.product-detail__header-info>span .available {
    color: #34b015
}

.product-detail__header-info>span .unavailable {
    color: #ff1616
}

.product-detail__header-description {
    font-size: 14px;
    font-weight: 300;
    margin-top: 15px
}

.product-detail__header-description>a {
    font-weight: 500;
    margin-left: 5px;
    white-space: nowrap
}

.product-detail__header-description>a i {
    font-size: 12px;
    opacity: .5
}

.product-detail__prices {
    width: 100%;
    padding: 30px;
    border-bottom: 1px solid #f4f3f3;
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media(max-width: 600px) {
    .product-detail__prices {
        padding: 20px 10px
    }
}

.product-detail__prices-container {
    display: flex;
    gap: 30px;
    align-items: center
}

@media(max-width: 600px) {
    .product-detail__prices-container {
        gap: 0;
        justify-content: space-between
    }
}

.product-detail__prices-wrapper {
    display: flex;
    flex-direction: column
}

.product-detail__prices-wrapper del {
    font-size: 16px;
    text-decoration: line-through;
    font-weight: 300
}

.product-detail__prices-wrapper ins {
    font-size: 24px;
    font-weight: 600
}

.product-detail__prices-discount {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ff1616;
    background: rgba(255, 22, 22, .062745098);
    border: 1px solid rgba(255, 22, 22, .062745098);
    font-weight: 600;
    border-radius: 8px;
    font-size: 16px
}

.product-detail__prices-discount i {
    font-size: 24px;
    line-height: 1
}

.product-detail__prices-installments {
    color: #34b015
}

.product-detail__options {
    width: 100%;
    padding: 30px;
    border-bottom: 1px solid #f4f3f3;
    display: flex;
    flex-direction: column;
    gap: 30px
}

@media(max-width: 600px) {
    .product-detail__options {
        padding: 20px 10px;
        gap: 20px
    }
}

.product-detail__option {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.product-detail__option>div {
    display: flex;
    font-weight: 300;
    gap: 10px
}

.product-detail__option-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.product-detail__option-images li {
    display: flex
}

.product-detail__option-images a {
    display: flex;
    width: 70px;
    border: 1px solid #f4f3f3;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s ease
}

.product-detail__option-images a:hover {
    border: 1px solid #ff9421
}

.product-detail__option-images a img {
    width: 100%;
    height: auto;
    aspect-ratio: 70/100;
    object-fit: cover
}

.product-detail__option-images a.active {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.product-detail__option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.product-detail__option-buttons li label {
    display: flex;
    min-width: 45px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    line-height: 1;
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .3s ease;
    cursor: pointer
}

.product-detail__option-buttons li label:hover {
    border: 1px solid #ff9421
}

.product-detail__option-buttons li label.knight-rider-animation {
    animation: knight-rider 1s forwards
}

@keyframes knight-rider {
    0% {
        outline: 3px solid rgba(255, 0, 0, .5);
        border: 1px solid red
    }

    100% {
        outline: 3px solid rgba(255, 0, 0, 0);
        border: 1px solid #e0e0e0
    }
}

.product-detail__option-buttons li input[type=radio] {
    display: none
}

.product-detail__option-buttons li input[type=radio]:checked+label {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.product-detail__option-buttons a {
    display: flex;
    min-width: 45px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    line-height: 1
}

.product-detail__option-buttons a.active {
    border: 1px solid #ff9421
}

.product-detail__basket {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.product-detail__basket-wrapper {
    display: flex;
    align-items: center;
    gap: 15px
}

.product-detail__basket-estimated {
    font-size: 12px
}

.product-detail__basket-estimated strong.time {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: 600
}

.product-detail__badges {
    width: 100%;
    display: flex;
    gap: 15px;
    padding: 20px 30px;
    border-bottom: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .product-detail__badges {
        padding: 20px 10px;
        flex-wrap: wrap;
        gap: 5px
    }
}

.product-detail__buttons {
    width: 100%;
    display: flex;
    gap: 15px;
    padding: 20px 30px;
    background: #fcfcfc
}

@media(max-width: 600px) {
    .product-detail__buttons {
        padding: 20px 10px
    }
}

.product-features {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px;
    scroll-margin-top: 10px
}

@media(max-width: 600px) {
    .product-features {
        margin-top: 20px;
        scroll-margin-top: 115px
    }
}

.product-features__container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 600px) {
    .product-features__container {
        gap: 5px
    }
}

@media(max-width: 600px) {
    .product-features__container .title-section {
        padding: 0 10px
    }
}

.product-features__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 16px
}

@media(max-width: 600px) {
    .product-features__wrapper {
        border-radius: 0
    }
}

.product-features__texts {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 30px;
    border-bottom: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .product-features__texts {
        padding: 10px;
        flex-direction: column;
        gap: 20px
    }
}

.product-features__texts-img {
    width: 100%;
    height: auto;
    max-width: 280px;
    aspect-ratio: 28/35;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    object-fit: cover
}

@media(max-width: 600px) {
    .product-features__texts-img {
        max-width: 100%
    }
}

.product-features__texts-description h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px
}

.product-features__texts-description ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style-type: disc;
    margin: 20px
}

.product-features__texts-description ul li {
    list-style-type: disc
}

.product-features__texts-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0
}

.product-features__texts-description table thead {
    background: #f4f4f4;
    text-align: left
}

.product-features__texts-description table tr:hover {
    background: #f8f8f8
}

.product-features__texts-description table th,
.product-features__texts-description table td {
    border: 1px solid #f4f3f3;
    padding: 10px
}

.product-features__items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px
}

@media(max-width: 600px) {
    .product-features__items {
        padding: 20px 10px
    }
}

.product-features__items h4 {
    font-size: 18px;
    font-weight: 500
}

.product-features__items ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
}

@media(max-width: 600px) {
    .product-features__items ul {
        grid-template-columns: 1fr;
        gap: 5px
    }
}

.product-features__items ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 8px
}

.piece-input {
    height: 50px;
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    padding-right: 16px;
    flex-shrink: 0
}

.piece-input input {
    width: 100%;
    border: none;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    text-align: center
}

.piece-input input:focus {
    outline: none
}

.piece-input span {
    font-size: 10px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 3px
}

.piece-input__buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    right: 5px
}

.piece-input__buttons i {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease
}

.piece-input__buttons i:hover {
    background: #e0e0e0
}

.shop-cart {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.shop-cart__container {
    width: 1200px;
    display: flex;
    flex-direction: column
}

@media(max-width: 600px) {
    .shop-cart__container {
        width: 100%
    }
}

.shop-cart__container>h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 500;
    margin: 20px 0
}

@media(max-width: 600px) {
    .shop-cart__container>h1 {
        margin: 10px;
        font-size: 18px
    }
}

.shop-cart__container>h1 span {
    font-size: 14px;
    font-weight: 300
}

.shop-cart__wrapper {
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: flex-start
}

@media(max-width: 600px) {
    .shop-cart__wrapper {
        flex-direction: column
    }
}

.shop-cart__basket {
    width: 880px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .shop-cart__basket {
        width: 100%;
        border-radius: 0
    }
}

.shop-cart__basket-wrapper {
    display: flex;
    flex-direction: column
}

.shop-cart__alerts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .shop-cart__alerts {
        padding: 10px
    }
}

.shop-cart__provoke {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 15px;
    border: 1px solid #34b015;
    border-radius: 8px
}

@media(max-width: 600px) {
    .shop-cart__provoke {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 10px;
        font-size: 12px
    }
}

.shop-cart__provoke-alert {
    display: flex;
    align-items: center;
    gap: 10px
}

@media(max-width: 600px) {
    .shop-cart__provoke-alert {
        gap: 5px
    }
}

.shop-cart__provoke-alert i {
    font-size: 24px;
    line-height: 1;
    color: #34b015
}

@media(max-width: 600px) {
    .shop-cart__provoke-alert i {
        font-size: 14px
    }
}

.shop-cart__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f4f3f3;
    position: relative
}

@media(max-width: 600px) {
    .shop-cart__item {
        padding: 15px 10px;
        gap: 10px
    }

    .shop-cart__item .piece-input {
        padding: 0 10px 0 0;
        width: 50px;
        height: 40px
    }

    .shop-cart__item .piece-input input {
        font-size: 14px
    }

    .shop-cart__item .piece-input__buttons {
        right: 0
    }

    .shop-cart__item .button--basket-remove {
        width: 25px;
        height: 25px;
        font-size: 16px;
        position: absolute;
        left: 15px;
        bottom: 20px;
        border-radius: 3px
    }
}

.shop-cart__item-texts {
    width: 450px;
    display: flex;
    align-items: center;
    gap: 15px
}

@media(max-width: 600px) {
    .shop-cart__item-texts {
        gap: 5px;
        width: 60%;
        flex-shrink: 0
    }
}

.shop-cart__item-texts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media(max-width: 600px) {
    .shop-cart__item-texts-wrapper {
        gap: 5px
    }
}

.shop-cart__item-texts-wrapper h2 {
    font-size: 14px;
    font-weight: 600
}

.shop-cart__item-texts-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 300
}

@media(max-width: 600px) {
    .shop-cart__item-texts-wrapper ul {
        gap: 5px;
        font-size: 12px
    }
}

.shop-cart__item-texts-wrapper ul li {
    display: flex;
    gap: 5px
}

.shop-cart__item-img {
    display: flex;
    width: 80px;
    flex-shrink: 0
}

@media(max-width: 600px) {
    .shop-cart__item-img {
        width: 60px
    }
}

.shop-cart__item-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 80/115;
    border-radius: 8px;
    border: 1px solid #f4f3f3;
    object-fit: cover
}

.shop-cart__item-prices {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: 215px
}

@media(max-width: 600px) {
    .shop-cart__item-prices {
        gap: 10px
    }
}

.shop-cart__item-prices-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.shop-cart__item-prices-wrapper del {
    font-size: 14px;
    font-weight: 300;
    text-decoration: line-through;
    white-space: nowrap
}

@media(max-width: 600px) {
    .shop-cart__item-prices-wrapper del {
        font-size: 12px
    }
}

.shop-cart__item-prices-wrapper ins {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap
}

@media(max-width: 600px) {
    .shop-cart__item-prices-wrapper ins {
        font-size: 14px
    }
}

.summary {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: 10px
}

@media(max-width: 600px) {
    .summary {
        margin: 0 10px;
        width: calc(100% - 20px);
        border-radius: 8px
    }
}

.summary__texts {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #f4f3f3;
    gap: 15px
}

.summary__texts>h2 {
    font-size: 18px;
    font-weight: 500
}

.summary__texts>ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.summary__texts>ul li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.summary__texts>ul li span {
    font-weight: 300
}

.summary__texts>ul li strong {
    font-weight: 600
}

.summary__texts>ul li strong.total {
    font-size: 16px
}

.summary__texts>ul li strong.free {
    color: #34b015
}

.summary__coupon {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #f4f3f3;
    padding: 20px;
    position: relative
}

.summary__coupon input {
    width: 100%;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    padding: 0 10px;
    align-items: center;
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .3s ease
}

.summary__coupon input:focus {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.summary__coupon button {
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    background: #f4f3f3;
    border: none;
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer;
    transition: all .3s ease
}

.summary__coupon button:hover {
    background: #e0e0e0
}

.summary__button {
    width: 100%;
    padding: 20px;
    background: #fcfcfc;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.summary__checkbox {
    display: flex;
    gap: 5px
}

.summary__checkbox input[type=checkbox] {
    width: 20px;
    height: 20px;
    border: 1px solid #e0e0e0
}

.summary__checkbox span {
    font-size: 12px;
    font-weight: 300
}

.summary__checkbox a {
    font-weight: 500;
    text-decoration: underline
}

.header-mini {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background: #fff;
    border-bottom: 1px solid #f4f4f4
}

@media(max-width: 600px) {
    .header-mini {
        padding: 10px
    }
}

.header-mini__container {
    width: 1000px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media(max-width: 600px) {
    .header-mini__container {
        width: 100%
    }
}

.header-mini__logo {
    display: flex
}

.header-mini__logo img {
    max-height: 50px;
    max-width: 200px
}

@media(max-width: 600px) {
    .header-mini__logo img {
        max-height: 40px;
        max-width: 160px;
        object-fit: contain
    }
}

.scs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

@media(max-width: 600px) {
    .scs {
        margin-top: 0
    }
}

.scs__container {
    width: 1000px;
    display: flex;
    align-items: flex-start;
    gap: 20px
}

@media(max-width: 600px) {
    .scs__container {
        width: 100%;
        flex-direction: column
    }
}

.scs__forms {
    width: 680px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .scs__forms {
        width: 100%;
        border-radius: 0
    }
}

.scs__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    border-bottom: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .scs__form {
        padding: 20px 10px
    }
}

.scs__form-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.scs__form-title h4 {
    font-size: 18px;
    font-weight: 500
}

.scs__form-row {
    display: flex;
    gap: 15px
}

@media(max-width: 600px) {
    .scs__form-row--mobile {
        flex-direction: column
    }
}

.scs__payment {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0);
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .5s ease
}

.scs__payment.active {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.scs__payment.active .scs__payment-title {
    border-radius: 8px 8px 0 0
}

.scs__payment.active .scs__payment-wrapper {
    display: flex;
    max-height: 1000px;
    padding: 15px;
    visibility: visible;
    opacity: 1
}

.scs__payment-title {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    justify-content: space-between;
    border: 1px solid #f4f3f3;
    border-radius: 8px;
    transition: all .5s ease;
    cursor: pointer
}

.scs__payment-title:hover {
    background: #f8f8f8
}

.scs__payment-title-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500
}

.scs__payment-title input[type=checkbox] {
    width: 15px;
    height: 15px
}

.scs__payment-discount {
    color: #ff1616;
    background: rgba(255, 22, 22, .1019607843);
    border: 1px solid rgba(255, 22, 22, .062745098);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px
}

.scs__payment-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
    border: 1px solid #f4f3f3;
    border-radius: 0 0 8px 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all .5s ease
}

.scs__bank {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border: 1px solid #f4f3f3;
    border-radius: 8px
}

.scs__bank-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.scs__bank-title span {
    font-weight: 600
}

.scs__bank-title img {
    height: 30px
}

.scs__bank-wrapper {
    display: flex;
    gap: 5px
}

@media(max-width: 600px) {
    .scs__bank-wrapper {
        flex-direction: column
    }
}

.scs__bank-info {
    padding: 5px 5px 5px 10px;
    border-radius: 8px;
    background: #fcfcfc;
    border: 1px solid #f4f3f3;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center
}

.scs__bank-info span {
    font-size: 12px
}

.form-item {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.form-item.success::before {
    content: "";
    font-family: "unicons-line";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 18px;
    display: grid;
    place-items: center;
    background: #34b015;
    color: #fff;
    border-radius: 50%;
    z-index: 1
}

.form-item.error input {
    border: 1px solid #ff1616;
    outline: 3px solid rgba(255, 22, 22, .1450980392)
}

.form-item.error span {
    display: flex;
    color: #ff1616;
    font-size: 12px;
    font-weight: 300;
    margin-top: 5px
}

.form-item--phone .iti {
    width: 100%
}

.form-item--phone .iti__dropdown-content {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    overflow: hidden;
    top: 55px
}

.form-item--phone .iti__dropdown-content input {
    padding: 15px;
    border-radius: 8px 8px 0 0
}

.form-item--phone .iti__dropdown-content input:focus {
    border: 1px solid #ff9421
}

.form-item--phone label {
    left: 50px !important;
    top: 8px !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    opacity: 1 !important
}

.form-item--password i {
    cursor: pointer
}

.form-item--location i {
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    border: 1px solid #ff9421;
    outline: 3px solid rgba(0, 0, 0, 0);
    transition: all .3s ease;
    color: #ff9421;
    background: #fff
}

.form-item--location i:hover {
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.form-item--honey {
    display: block;
}

.form-item-forgotten {
    margin-left: auto;
    text-decoration: underline
}

.form-item-checkbox {
    display: flex;
    align-items: center;
    gap: 5px
}

.form-item-checkbox input[type=checkbox] {
    width: 15px;
    height: 15px;
    border: 1px solid #e0e0e0
}

.form-item-checkbox a {
    font-weight: 500;
    text-decoration: underline
}

.form-item input,
.form-item select,
.form-item textarea {
    width: 100%;
    padding: 23px 15px 8px 15px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    font-size: 16px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    transition: all .3s ease;
    outline: 3px solid rgba(0, 0, 0, 0)
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.form-item input:not(:placeholder-shown):not(:focus):valid+label,
.form-item input:focus+label,
.form-item select:not(:placeholder-shown):not(:focus):valid+label,
.form-item select:focus+label,
.form-item textarea:not(:placeholder-shown):not(:focus):valid+label,
.form-item textarea:focus+label {
    top: 8px;
    font-size: 10px;
    font-weight: 300;
    opacity: 1
}

.form-item input.phone_number,
.form-item input.credit_card,
.form-item input.expiration_date,
.form-item input.security_code,
.form-item select.phone_number,
.form-item select.credit_card,
.form-item select.expiration_date,
.form-item select.security_code,
.form-item textarea.phone_number,
.form-item textarea.credit_card,
.form-item textarea.expiration_date,
.form-item textarea.security_code {
    font-family: "Courier New", Courier, monospace;
    font-weight: 600
}

.form-item select {
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 5px center;
    background-size: 20px
}

.form-item select+label {
    top: 8px;
    font-size: 10px;
    font-weight: 300;
    opacity: 1
}

.form-item textarea {
    height: 100px;
    resize: none
}

.form-item label {
    font-size: 16px;
    position: absolute;
    left: 15px;
    top: 16px;
    font-weight: 400;
    transition: all .3s ease;
    pointer-events: none;
    opacity: .5
}

.form-item i {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 18px
}

.form-tab {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.form-tab__menu {
    display: flex;
    width: 100%;
    padding: 5px;
    background: #eee;
    border-radius: 8px
}

.form-tab__content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-radius: 8px
}

.form-tab .radio {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    width: 100%
}

.form-tab .radio input[type=radio] {
    display: none
}

.form-tab .radio input[type=radio]:checked+span {
    background: hsla(0, 0%, 100%, .7529411765);
    border: 1px solid #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    opacity: 1
}

.form-tab .radio span {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    transition: all .3s ease;
    text-align: center;
    opacity: .5;
    border: 1px solid rgba(0, 0, 0, 0)
}

.tabs-menu {
    display: flex;
    padding: 5px;
    background: #eee;
    margin: auto;
    border-radius: 8px;
    width: 100%
}

.tabs-menu li {
    display: flex;
    width: 100%
}

.tabs-menu a {
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    padding: 10px 15px;
    opacity: .5;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all .3s ease;
    color: #000
}

.tabs-menu a:hover {
    opacity: 1
}

.tabs-menu a.active {
    background: hsla(0, 0%, 100%, .7529411765);
    border: 1px solid #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    opacity: 1
}

.user-address {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    outline: 3px solid rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all .3s ease
}

.user-address.select .user-address__title {
    cursor: pointer
}

.user-address.select .user-address__title:hover {
    background: #f8f8f8
}

.user-address.active {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.user-address__title {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    justify-content: space-between;
    border: 1px solid #f4f3f3;
    border-radius: 8px 8px 0 0;
    transition: all .3s ease
}

.user-address__title-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500
}

.user-address__title input[type=checkbox] {
    width: 15px;
    height: 15px
}

.user-address__buttons {
    display: flex;
    gap: 10px
}

.user-address__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    border: 1px solid #f4f3f3;
    border-top: none;
    border-radius: 0 0 8px 8px
}

.user-address__info .corporate {
    background: #f4f3f3;
    border-radius: 5px;
    padding: 10px;
    justify-content: space-between
}

.user-address__info>div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.user-address__info>div:last-child {
    font-size: 12px
}

.footer-mini {
    width: 100%;
    padding: 45px 0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 600px) {
    .footer-mini {
        padding: 20px 10px
    }
}

.footer-mini__container {
    width: 850px;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    font-weight: 300
}

.footer-mini__container a {
    text-decoration: underline
}

.scs-result {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

@media(max-width: 600px) {
    .scs-result {
        margin-top: 0
    }
}

.scs-result__container {
    width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #f4f4f4;
    border-radius: 16px;
    padding: 50px;
    min-height: 600px
}

@media(max-width: 600px) {
    .scs-result__container {
        width: 100%;
        padding: 20px 10px;
        border-radius: 0
    }
}

.scs-result__info {
    width: 650px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 10px
}

@media(max-width: 600px) {
    .scs-result__info {
        width: 100%
    }
}

.scs-result__info>h1 {
    font-size: 26px;
    font-weight: 500
}

@media(max-width: 600px) {
    .scs-result__info>h1 {
        font-size: 18px
    }
}

.scs-result__info>span {
    font-weight: 300;
    line-height: 1.6
}

.scs-result__icon {
    font-size: 85px;
    display: flex
}

.scs-result__icon.success {
    color: #34b015
}

.scs-result__icon.error {
    color: #ff1616
}

.scs-result__icon i {
    line-height: 1
}

.scs-result__buttons {
    display: flex;
    gap: 15px
}

.user-order {
    width: 100%;
    background: #fff;
    border: 1px solid #f4f4f4;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
    outline: 3px solid rgba(0, 0, 0, 0);
    overflow: hidden
}

@media(max-width: 600px) {
    .user-order {
        border-radius: 8px
    }
}

.user-order:hover {
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.user-order__title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #f4f4f4;
    background: #fcfcfc
}

@media(max-width: 600px) {
    .user-order__title {
        padding: 10px;
        gap: 20px;
        overflow-y: auto
    }
}

.user-order__info {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.user-order__info span:first-child {
    font-size: 12px;
    font-weight: 300;
    white-space: nowrap
}

.user-order__info span:last-child {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

.user-order__info span:last-child.orange {
    color: #ff9421
}

.user-order__info span:last-child.green {
    color: #34b015
}

.user-order__info span:last-child.red {
    color: #ff1616
}

.user-order__wrapper {
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
}

@media(max-width: 600px) {
    .user-order__wrapper {
        padding: 10px;
        grid-template-columns: 1fr
    }
}

.order-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
}

@media(max-width: 600px) {
    .order-products {
        grid-template-columns: 1fr
    }
}

.order-product {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #f4f3f3;
    border-radius: 8px
}

.order-product__texts {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 260px
}

@media(max-width: 600px) {
    .order-product__texts {
        width: 100%
    }
}

.order-product__texts-img {
    display: flex;
    width: 55px;
    flex-shrink: 0
}

.order-product__texts-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 80/115;
    border-radius: 8px;
    border: 1px solid #f4f3f3
}

.order-product__texts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.order-product__texts-wrapper h2 {
    font-size: 14px;
    font-weight: 600
}

.order-product__texts-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 300;
    font-size: 12px
}

.order-product__texts-wrapper ul li {
    display: flex;
    gap: 5px
}

.order-product__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.order-product__prices del {
    font-size: 14px;
    font-weight: 300;
    text-decoration: line-through
}

.order-product__prices ins {
    font-size: 16px;
    font-weight: 600
}

.login {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

@media(max-width: 600px) {
    .login {
        background: #fff
    }
}

.login__container {
    width: 460px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

@media(max-width: 600px) {
    .login__container {
        width: 100%
    }
}

.login__title {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px
}

.login__title span {
    font-weight: 300
}

.login__logo {
    display: flex
}

.login__logo img {
    max-height: 100px;
    max-width: 200px
}

@media(max-width: 600px) {
    .login__logo img {
        max-height: 45px
    }
}

.login__wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .login__wrapper {
        border: none;
        background: rgba(0, 0, 0, 0);
        padding: 20px
    }
}

.login__wrapper-title {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.login__wrapper-title h3 {
    font-size: 22px;
    font-weight: 600
}

.login__wrapper-title span {
    font-weight: 300;
    line-height: 1.6
}

.user-page {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

@media(max-width: 600px) {
    .user-page {
        margin-top: 10px
    }
}

.user-page__container {
    width: 1200px;
    display: flex;
    gap: 10px;
    align-items: flex-start
}

@media(max-width: 600px) {
    .user-page__container {
        width: 100%;
        flex-direction: column
    }
}

.user-page__sidebar {
    width: 260px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0
}

@media(max-width: 600px) {
    .user-page__sidebar {
        width: 100%;
        padding: 0 10px
    }
}

.user-page__sidebar>ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.user-page__sidebar>ul li {
    width: 100%;
    display: flex
}

.user-page__sidebar>ul a {
    width: 100%;
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 8px
}

.user-page__sidebar>ul a.active {
    background: #fff;
    border: 1px solid #f4f3f3
}

.user-page__sidebar>ul a.active>i {
    opacity: .8
}

.user-page__sidebar>ul a>span {
    display: flex;
    align-items: center;
    gap: 5px
}

.user-page__sidebar>ul a>span>i {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f4f3f3;
    font-size: 18px;
    line-height: 1
}

.user-page__sidebar>ul a>i {
    font-size: 16px;
    opacity: .2
}

.user-page__wrapper {
    width: 100%;
    padding: 30px;
    gap: 15px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f4f3f3;
    border-radius: 16px;
    min-height: 450px
}

@media(max-width: 600px) {
    .user-page__wrapper {
        padding: 20px 10px;
        border-radius: 0;
        min-height: auto
    }
}

.user-page__title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.user-page__title h2 {
    font-size: 18px;
    font-weight: 500
}

.user-page__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px
}

@media(max-width: 600px) {
    .user-page__cards {
        grid-template-columns: 1fr;
        gap: 5px
    }
}

.user-page__card {
    width: 100%;
    padding: 15px;
    border: 1px solid #f4f3f3;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    color: #000 !important;
    transition: all .3s ease;
    outline: 3px solid rgba(0, 0, 0, 0)
}

.user-page__card:hover {
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, .1450980392)
}

.user-page__card>i {
    width: 55px;
    height: 55px;
    border-radius: 8px;
    background: #f4f3f3;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.user-page__card>i.red {
    background: #ffe8e8;
    color: #ff1616
}

.user-page__card>i.orange {
    background: #fff5e8;
    color: #ff8801
}

.user-page__card>i.purple {
    background: #f7efff;
    color: #832fd7
}

.user-page__card-texts {
    display: flex;
    flex-direction: column
}

.user-page__card-texts span:first-child {
    font-size: 22px;
    font-weight: 600
}

.user-page__card-texts span:last-child {
    font-size: 12px;
    font-weight: 300;
    opacity: .4
}

.user-page__info {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px
}

@media(max-width: 600px) {
    .user-page__info {
        flex-direction: column
    }
}

.user-page__info h3 {
    font-size: 18px;
    font-weight: 500
}

.user-page__info-edit {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.user-page__info-password {
    width: 390px;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border: 1px solid #f4f3f3;
    background: #fcfcfc;
    border-radius: 8px
}

@media(max-width: 600px) {
    .user-page__info-password {
        width: 100%
    }
}

.user-page__favorites {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px
}

@media(max-width: 600px) {
    .user-page__favorites {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px
    }
}

.user-page__addresses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
}

@media(max-width: 600px) {
    .user-page__addresses {
        grid-template-columns: 1fr;
        gap: 5px
    }
}

.user-page__coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 10px;
    border: 1px solid #f4f3f3;
    border-radius: 8px
}

@media(max-width: 600px) {
    .user-page__coupon {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }
}

.user-page__coupon-code {
    display: flex;
    gap: 10px;
    align-items: center
}

@media(max-width: 600px) {
    .user-page__coupon-code {
        width: 100%
    }
}

.user-page__coupon-code>span {
    font-size: 22px;
    background: #fffcf2;
    padding: 20px;
    font-weight: 600;
    font-family: monospace;
    border-radius: 8px;
    color: #ff9421;
    border: 1px dashed #ff9421
}

@media(max-width: 600px) {
    .user-page__coupon-code>span {
        width: 100%;
        text-align: center
    }
}

.user-page__coupon-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 125px
}

.user-page__coupon-info {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.user-page__coupon-info span:first-child {
    font-size: 12px;
    font-weight: 300
}

.user-page__coupon-info span:last-child {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px
}

.user-page__coupon-info span:last-child.orange {
    color: #ff9421
}

.user-page__coupon-info span:last-child.green {
    color: #34b015
}

.user-page__coupon-info span:last-child.red {
    color: #ff1616
}

.order-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid #f4f4f4;
    background: #fcfcfc;
    border-radius: 8px
}

@media(max-width: 600px) {
    .order-title {
        padding: 10px;
        gap: 20px;
        overflow-y: auto
    }
}

.order-title__info {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.order-title__info span:first-child {
    font-size: 12px;
    font-weight: 300;
    white-space: nowrap
}

.order-title__info span:last-child {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

.order-title__info span:last-child.orange {
    color: #ff9421
}

.order-title__info span:last-child.green {
    color: #34b015
}

.order-title__info span:last-child.red {
    color: #ff1616
}

.order-info {
    display: flex;
    gap: 20px
}

@media(max-width: 600px) {
    .order-info {
        gap: 15px;
        flex-direction: column
    }
}

.order-info__addresses {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 415px
}

@media(max-width: 600px) {
    .order-info__addresses {
        width: 100%
    }
}

.order-info__adress {
    width: 100%;
    border: 1px solid #eaeaea;
    border-radius: 8px
}

.order-info__adress>h3 {
    padding: 10px 15px;
    border-bottom: 1px solid #eaeaea;
    font-size: 14px;
    font-weight: 500
}

.order-info__adress-texts {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.order-info__adress-texts .corporate {
    display: flex;
    background: #f4f3f3;
    border-radius: 5px;
    padding: 10px;
    justify-content: space-between
}

.order-info__adress-texts>div:first-child {
    display: flex;
    gap: 5px
}

.order-info__adress-texts>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px
}

.order-info__summary {
    display: flex;
    flex-direction: column;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    width: 415px
}

@media(max-width: 600px) {
    .order-info__summary {
        width: 100%
    }
}

.order-info__summary>h3 {
    padding: 10px 15px;
    border-bottom: 1px solid #eaeaea;
    font-size: 14px;
    font-weight: 500
}

.order-info__summary-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-bottom: 1px solid #eaeaea
}

.order-info__summary-wrapper>ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.order-info__summary-wrapper>ul li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.order-info__summary-wrapper>ul li span {
    font-weight: 300
}

.order-info__summary-wrapper>ul li strong {
    font-weight: 600
}

.order-info__summary-wrapper>ul li strong.total {
    font-size: 16px
}

.order-info__summary-wrapper>ul li strong.free {
    color: #34b015
}

.order-info__payment {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px
}

.order-info__payment>div {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.result {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 600px) {
    .result {
        padding: 0 10px
    }
}

.result--frame .result__container {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .result--frame .result__container {
        border-radius: 8px
    }
}

.result--tracking .result__container {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f4f3f3
}

@media(max-width: 600px) {
    .result--tracking .result__container {
        border-radius: 8px
    }
}

.result--tracking .result__container p {
    max-width: 600px
}

.result--tracking .result__container form {
    width: 100%;
    max-width: 800px;
    display: flex;
    gap: 20px;
    margin-bottom: 20px
}

@media(max-width: 600px) {
    .result--tracking .result__container form {
        flex-direction: column
    }
}

.result--tracking .result__container form button {
    width: max-content;
    flex-shrink: 0;
    padding: 10px 20px
}

@media(max-width: 600px) {
    .result--tracking .result__container form button {
        width: 100%
    }
}

.result--tracking .result__container .alert {
    max-width: 800px
}

.result--tracking .result__container .user-order {
    max-width: 800px;
    text-align: left
}

.result--tracking .result__container .user-order .button {
    display: none
}

.result__container {
    width: 100%;
    max-width: 1200px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

@media(max-width: 600px) {
    .result__container {
        padding: 20px;
        width: 100%;
        min-height: 450px
    }
}

.result__container>h1,
.result__container>h2 {
    max-width: 600px;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 10px
}

@media(max-width: 600px) {

    .result__container>h1,
    .result__container>h2 {
        font-size: 22px
    }
}

.result__container>p {
    max-width: 600px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6
}

@media(max-width: 600px) {
    .result__container>p {
        font-size: 14px
    }
}

.result__icon {
    font-size: 75px;
    margin-bottom: 20px
}

@media(max-width: 600px) {
    .result__icon {
        margin-bottom: 10px;
        font-size: 45px
    }
}

.result__buttons {
    display: flex;
    gap: 15px
}

.maintenance {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px
}

.maintenance__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 500px
}

.maintenance__logo {
    display: flex
}

.maintenance__logo img {
    max-width: 200px;
    max-height: 100px
}

@media(max-width: 600px) {
    .maintenance__logo img {
        max-width: 150px;
        max-height: 75px
    }
}

.maintenance__wrapper {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f4f3f3;
    text-align: center
}

.maintenance__wrapper h1 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px
}

.maintenance__description {
    font-size: 16px;
    font-weight: 300
}

.cookie-policy {
    width: 100%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    position: fixed;
    z-index: 9999;
    bottom: 15px;
    left: 15px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .0196078431), inset 0 -2px 0px rgba(0, 0, 0, .0196078431);
    border: 1px solid #fff
}

.cookie-policy.hide {
    display: none
}

.cookie-policy a {
    font-weight: 500;
    text-decoration: underline
}

.popup-banner {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
    opacity: 1;
    transition: all .3s ease;
    visibility: visible;
    padding: 10px
}

.popup-banner.hide {
    opacity: 0;
    visibility: hidden
}

.popup-banner__container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.popup-banner__container img {
    width: 100%;
    max-width: 800px;
    height: auto;
    max-height: 500px;
    border-radius: 16px
}

.popup-banner__container .button--banner-close {
    position: absolute;
    right: 10px;
    top: 10px
}

.product-badges {
    position: absolute;
    z-index: 99;
    top: 5px;
    left: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none
}

.product-badges__item {
    width: max-content;
    font-size: 12px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    border-radius: 5px
}

#installment {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    border: 1px solid #f4f3f3
}

#installment .installment-row {
    display: flex;
    align-items: center;
    gap: 10px
}

#installment .cash-price {
    font-size: 10px;
    padding: 3px 5px;
    background: #2b8c11;
    border-radius: 5px;
    font-weight: 500;
    color: #fff
}

#installment table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(0, 0, 0, 0)
}

#installment th,
#installment td {
    border: 1px solid #f4f3f3;
    padding: 10px;
    text-align: left
}

#installment th {
    background-color: #f8f8f8
}

#installment tr:hover {
    background-color: #f8f8f8;
    cursor: pointer
}

#installment tr.active {
    background-color: rgba(255, 148, 33, .062745098)
}

.modal__overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: center
}

.modal__container {
    background-color: #fff;
    padding: 30px;
    max-width: 750px;
    min-width: 550px;
    max-height: 100vh;
    border-radius: 8px;
    overflow-y: auto;
    box-sizing: border-box
}

@media(max-width: 600px) {
    .modal__container {
        min-width: 100%;
        height: 100vh;
        border-radius: 0;
        padding: 20px 10px
    }
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    box-sizing: border-box
}

.modal__close {
    background: rgba(0, 0, 0, 0);
    border: 0;
    cursor: pointer
}

.modal__header .modal__close:before {
    content: "✕"
}

.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, .8)
}

.modal__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0
}

.modal__form-row {
    display: flex;
    gap: 10px
}

.modal__footer {
    display: flex;
    align-items: center;
    gap: 10px
}

@keyframes mmfadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-10%)
    }
}

.micromodal-slide {
    display: none
}

.micromodal-slide.is-open {
    display: block
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide[aria-hidden=false] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide[aria-hidden=true] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform
}

.notyf {
    padding: 15px
}

.notyf__ripple {
    background: rgba(0, 0, 0, 0) !important
}

.notyf__toast {
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 14px !important;
    line-height: 1
}

.notyf__wrapper {
    padding: 0;
    gap: 5px
}

.notyf__icon {
    margin-right: 0
}

.notyf__toast.notyf-red {
    border: 1px solid #ff4949;
    outline: 5px solid rgba(255, 22, 22, .1882352941);
    background: #ff1616 !important;
    color: #fff !important
}

.notyf__toast.notyf-orange {
    border: 1px solid rgb(255, 210.2, 51);
    outline: 5px solid rgba(255, 199, 0, .1882352941);
    background: #ffc700 !important;
    color: #362b02 !important
}

.notyf__toast.notyf-green {
    border: 1px solid hsl(107.8125, 73.5632183908%, 44.1176470588%);
    outline: 5px solid rgba(49, 151, 23, .062745098);
    background: #319717 !important;
    color: #fff !important
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

.mypage-whatsapp-phone {
    position: fixed;
    bottom: 0;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0);
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 99
}

.mypage-whatsapp-phone.bottom_left {
    left: 0
}

.mypage-whatsapp-phone.bottom_right {
    right: 0
}

.mypage-whatsapp-ph-img-circle {
    width: 30px;
    height: 30px;
    top: 43px;
    left: 43px;
    font-size: 18px;
    text-align: center;
    line-height: 28px;
    color: #fff;
    position: absolute;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(0, 0, 0, 0);
    opacity: .7;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-color: #0d9f16;
    background-size: 70%;
    display: flex;
    align-items: center;
    justify-content: center
}

.mypage-whatsapp-ph-circle-fill {
    width: 60px;
    height: 60px;
    top: 28px;
    left: 28px;
    position: absolute;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(0, 0, 0, 0);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    background-color: rgba(13, 159, 22, .5);
    opacity: .75 !important
}

.mypage-whatsapp-ph-circle {
    width: 90px;
    height: 90px;
    top: 12px;
    left: 12px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(30, 30, 30, .4);
    opacity: .1;
    border-color: #0d9f16;
    opacity: .5
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    50% {
        opacity: 1
    }
}

@media screen and (max-device-width: 600px) {
    .mypage-whatsapp-phone {
        transform: scale(0.8)
    }
}

.location-results {
    position: absolute;
    width: 100%;
    max-height: 450px;
    overflow: auto;
    display: none;
    background: #fff;
    border: 1px solid #ff9421;
    outline: 3px solid rgba(255, 148, 33, 0.1450980392);
    border-radius: 8px;
    z-index: 99;
    top: 67px
}

.location-results.active {
    display: block
}

.location-results .result-item {
    width: 100%;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #f4f3f3
}

.location-results .result-item:hover {
    background: #f4f3f3
}

.location-results .loading-state {
    width: 100%;
    display: flex;
    padding: 15px;
    justify-content: center;
    align-items: center
}

.location-results .loading-state .spinner {
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #ff9421;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite
}

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

    100% {
        transform: rotate(360deg)
    }
}

.location-results .no-results {
    width: 100%;
    display: flex;
    padding: 15px;
    justify-content: center;
    align-items: center
}

.location-detail {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 12px
}

.location-detail__item {
    display: flex;
    padding: 3px 5px;
    border-radius: 5px;
    background: #f4f3f3
}

.location-detail__item span:first-child {
    font-weight: 300;
    margin-right: 5px
}

.location-detail__item span:last-child {
    font-weight: 500
}

body {
    top: 0px !important
}

body>.skiptranslate:first-child {
    display: none !important
}

#google_translate_element {
    position: fixed;
    z-index: 99;
    font-family: "Poppins", sans-serif !important
}

#google_translate_element .goog-te-gadget-simple {
    border: 1px solid #ff9421;
    border-radius: 25px;
    outline: 3px solid rgba(255, 148, 33, .1450980392);
    overflow: hidden;
    padding: 5px
}

.pwa-install {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
    padding: 15px;
    z-index: 9999;
    border-top: 1px solid #f4f3f3;
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
    transition: all .3s ease
}

.pwa-install--active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.pwa-install--ios .pwa-install__content::before {
    content: "";
    font-family: "unicons-line";
    margin-right: 10px;
    font-size: 32px
}

.pwa-install--android .pwa-install__content::before {
    content: "";
    font-family: "unicons-line";
    margin-right: 10px;
    font-size: 32px
}

.pwa-install__header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.pwa-install__title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin: 0
}

.pwa-install__close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #000
}

.pwa-install__content {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.pwa-install__text {
    margin: 0;
    font-size: 14px
}

/*# sourceMappingURL=main.css.map */



.sub-menu .subcategory-title {
    font-weight: bold;
    padding: 8px 8px 8px 0px;
    display: block;
}

.sub-menu {
    width: auto;
    min-width: 150px;
    display: inline-block;
    white-space: nowrap;
}

.sub-menu li {
    padding: 0px 8px 0px 0px;
    display: block;
}

.scs__saved-address {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.scs__address-radio {
    margin-top: 4px;
    display: block;
}

.scs__saved-address-body {
    display: flex;
    flex-direction: column;
}

.scs__saved-address-body span {
    font-size: 0.9em;
    color: #666;
    margin-top: 2px;
}

/* Iletiism sayfası */


.contact-header {
    text-align: center;
    margin-bottom: 50px;
}
.contact-header h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}
.contact-header p {
    color: #666;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.info-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.icon-box {
    width: 70px;
    height: 70px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: #222;
    transition: background 0.3s, color 0.3s;
}

.info-card:hover .icon-box {
    background: #000;
    color: #fff;
}

.icon-box svg {
    width: 30px;
    height: 30px;
}

.info-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #000;
}

.info-card p, .info-card a {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    text-decoration: none;
    margin: 0;
}

.info-card a:hover {
    color: #000;
    text-decoration: underline;
}

.contact-content-split {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    border: 1px solid #eee;
}

.contact-form-area {
    flex: 1;
    padding: 60px;
    min-width: 350px;
}

.form-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #000;
}

.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.styled-input {
    width: 100%;
    padding: 16px 20px;
    background: #f9f9f9;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Taşmayı engeller */
}

.styled-input:focus {
    background: #fff;
    border-color: #000;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
}

.submit-btn {
    background: #000;
    color: #fff;
    padding: 18px 40px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s, transform 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

.contact-map-area {
    flex: 1;
    min-width: 350px;
    position: relative;
    min-height: 500px;
}

.contact-map-area iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    filter: grayscale(20%) contrast(1.1);
}

@media (max-width: 900px) {
    .contact-content-split {
        flex-direction: column-reverse;
        display: block;
    }
    .contact-map-area {
        height: 350px;
        min-height: 350px;
    }
    .contact-form-area {
        padding: 30px;
    }
    .contact-header h1 {
        font-size: 28px;
    }
}

.contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.floating-group {
    position: relative;
    margin-bottom: 20px;
}

.floating-input {
    width: 100%;
    padding: 25px 15px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: transparent;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: border-color 0.3s ease;
}

textarea.floating-input {
    resize: vertical;
    min-height: 120px;
}

.floating-input:focus {
    border-color: #ddd;
}

.floating-group label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: transparent;
}

.floating-group textarea + label {
    top: 25px;
    transform: translateY(-50%);
}

.floating-input:focus + label,
.floating-input:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 11px;
    color: rgba(68, 68, 68, 0.53);
    font-weight: 600;
    transform: translateY(0);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}
.submit-btn:hover {
    background-color: #c9302c;
}

/* Adresler */
.floating-label {
    position: relative;
    margin-bottom: 20px;
}

.floating-label select {
    width: 100%;
    height: 50px;
    padding: 20px 10px 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.floating-label label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    transition: all 0.2s ease;
    pointer-events: none;
    background-color: transparent;
}

.floating-label select:focus + label,
.floating-label select:valid + label {
    top: 10px;
    font-size: 11px;
    transform: translateY(0);
}