:root {
    --color-primary: black;
    --color-primary-light: #ff3366;
    --color-primary-dark: #ba265d;
    --color-grey-light-1: #faf9f9;
    --color-grey-light-2: #f4f2f2;
    --color-grey-light-3: #f0eeee;
    --color-grey-light-4: #e8e8e8;
    --color-black-dark-2: #232323;
    --color-grey-dark-2: #777;
    --color-grey-dark-3: #999;
    --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
    --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
    --line: 1px solid var(--color-grey-light-2)
}

@keyframes show-element {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pulsate {
    0% {
        transform: translateX(0);
        text-shadow: none
    }

    50% {
        transform: translateX(10px);
        text-shadow: 0 0 4rem rgb(255, 255, 255)
    }

    100% {
        transform: translateX(0);
        text-shadow: none
    }
}

@keyframes letter-space {
    0% {
        letter-spacing: 0
    }

    50% {
        letter-spacing: 2px
    }

    100% {
        letter-spacing: 0
    }
}

@keyframes jump {

    0%,
    50% {
        transform: translatey(0) scale(1.35)
    }

    100% {
        transform: translatey(-15%) scale(1.35)
    }
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    scroll-behavior: smooth
}

a {
    text-decoration: none !important;
    color: inherit
}

html {
    font-size: 62.5%
}

@media only screen and (max-width: 75em) {
    html {
        font-size: 56.25%
    }
}

@media only screen and (max-width: 56.25em) {
    html {
        font-size: 50%
    }
}

body {
    font-family: Yekan Bakh FaNum;
    box-sizing: border-box;
    font-feature-settings: "ss01"
}

@media only screen and (max-width: 112.5em) {
    body {
        max-width: 1700px;
        margin: 0 auto
    }
}

*::-moz-selection {
    background-color: var(--color-primary);
    color: #fff
}

*::selection {
    background-color: var(--color-primary);
    color: #fff
}

@font-face {
    font-family: Yekan Bakh FaNum;
    font-style: normal;
    font-weight: 300;
    src: url("/static/assets/fonts/woff/YekanBakhFaNum-Light.woff") format("woff"), url("/static/assets/fonts/woff2/YekanBakhFaNum-Light.woff2") format("woff2")
}

@font-face {
    font-family: Yekan Bakh FaNum;
    font-style: normal;
    font-weight: normal;
    src: url("/static/assets/fonts/woff/YekanBakhFaNum-Regular.woff") format("woff"), url("/static/assets//fonts/woff2/YekanBakhFaNum-Regular.woff2") format("woff2")
}

@font-face {
    font-family: Yekan Bakh FaNum;
    font-style: normal;
    font-weight: 600;
    src: url("/static/assets/fonts/woff/YekanBakhFaNum-SemiBold.woff") format("woff"), url("/static/assets/fonts/woff2/YekanBakhFaNum-SemiBold.woff2") format("woff2")
}

@font-face {
    font-family: Yekan Bakh FaNum;
    font-style: normal;
    font-weight: bold;
    src: url("/static/assets/fonts/woff/YekanBakhFaNum-Bold.woff") format("woff"), url("/static/assets/fonts/woff2/YekanBakhFaNum-Bold.woff2") format("woff2")
}

@font-face {
    font-family: Yekan Bakh FaNum;
    font-style: normal;
    font-weight: 800;
    src: url("/static/assets/fonts/woff/YekanBakhFaNum-ExtraBold.woff") format("woff"), url("/static/assets/fonts/woff2/YekanBakhFaNum-ExtraBold.woff2") format("woff2")
}

@font-face {
    font-family: Yekan Bakh FaNum;
    font-style: normal;
    font-weight: 950;
    src: url("/static/assets/fonts/woff/YekanBakhFaNum-ExtraBlack.woff") format("woff"), url("/static/assets/fonts/woff2/YekanBakhFaNum-ExtraBlack.woff2") format("woff2")
}

.heading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.heading__line {
    width: 4px;
    height: 4rem;
    background-color: var(--color-primary);
    border-radius: 25rem
}

@media only screen and (max-width: 20em) {
    .heading__line {
        width: 3px
    }
}

.heading__title {
    font-size: 2.4rem;
    font-weight: 800;
    word-spacing: 5px;
    text-align: center;
    direction: rtl
}

@media only screen and (max-width: 37.5em) {
    .heading__title {
        font-size: 2rem
    }
}

@media only screen and (max-width: 20em) {
    .heading__title {
        font-size: 1.4rem
    }
}

.heading__title--primary {
    color: var(--color-primary)
}

.secondary-heading {
    text-align: center;
    position: relative;
    margin-block: 2.75rem
}

.secondary-heading::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 45%;
    background-color: var(--color-primary);
    top: 50%;
    right: 0
}

.secondary-heading::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 45%;
    background-color: var(--color-primary);
    top: 50%;
    left: 0
}

.secondary-heading__title {
    position: relative;
    font-size: 2.6rem;
    display: inline-block;
    background: #fff;
    z-index: 1;
    padding-inline: 1rem
}

.tertiary-heading {
    position: relative;
    font-size: 2.2rem;
    padding-right: 2rem;
    color: var(--color-primary)
}

.tertiary-heading::before {
    position: absolute;
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary);
    border-radius: 50%;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%)
}

.copy-right {
    direction: rtl;
    text-align: center
}

.copy-right h3 {
    font-size: 1.4rem;
    word-spacing: 1px;
    font-weight: 700
}

.develope {
    text-align: center
}

.develope h6 {
    font-size: 1.8rem;
    font-weight: 400
}

.develope__link {
    display: inline-block;
    animation: pulsate 1s infinite
}

.develope__link:hover {
    animation: none
}

.develope__link,
.develope:visited {
    color: var(--color-primary)
}

.u-m-20 {
    margin: 2rem !important
}

.u-mt-10 {
    margin-top: 1rem
}

.u-mt-20 {
    margin-top: 2rem
}

.u-mt-30 {
    margin-top: 3rem
}

.u-mt-40 {
    margin-top: 4rem
}

.u-mr-0 {
    margin-right: 0 !important
}

.u-mr-10 {
    margin-right: 1rem !important
}

.u-mr-auto {
    margin-right: auto !important
}

.u-my-20 {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.u-my-30 {
    margin-top: 3rem;
    margin-bottom: 3rem
}

.u-my-40 {
    margin-top: 4rem;
    margin-bottom: 4rem
}

.u-mx-auto {
    margin-inline: auto !important
}

.u-pb-30 {
    padding-bottom: 3rem !important
}

.u-py-30 {
    padding-bottom: 3rem !important;
    padding-top: 3rem !important
}

.u-w-60 {
    width: 60% !important
}

.u-center-text {
    text-align: center !important
}

.u-d-flex {
    display: flex
}

.u-position-relative {
    position: relative
}

.u-position-absolute {
    position: absolute
}

.u-left-0 {
    left: 0
}

.u-dir-r {
    direction: rtl
}

.u-dir-l {
    direction: ltr
}

.u-common-border {
    border: 2px solid var(--color-grey-dark-2);
    border-radius: 2rem
}

.u-flex-row {
    flex-direction: row !important
}

.u-flex-column {
    flex-direction: column
}

.u-align-items-base-line {
    align-items: baseline !important
}

.u-justify-content-end {
    justify-content: end !important
}

.u-align-self-end {
    align-self: flex-end !important
}

.color-primary {
    color: var(--color-primary) !important
}

.accordian {
    background-color: #e5e5e5;
    padding: 1rem;
    margin-top: 2rem;
    border-radius: 1.3rem
}

.accordian__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 2;
    border-bottom: 0 solid #000;
    cursor: pointer;
    position: relative
}

.accordian__header--active {
    border-width: 2px
}

.accordian__header span {
    font-size: 1.8rem;
    font-weight: 650
}

.accordian__icon {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    cursor: pointer
}

.accordian__icon :nth-child(1) {
    width: 2rem;
    height: 2px;
    background: var(--color-primary)
}

.accordian__icon :nth-child(2) {
    width: 2px;
    height: 2rem;
    background: var(--color-primary);
    position: absolute;
    left: 50%
}

.accordian__icon--active :nth-child(2) {
    display: none
}

.accordian__content {
    margin-top: 1rem;
    display: none;
    animation: show-element 300ms 1 ease-out
}

.accordian__content--active {
    display: block
}

.accordian__item {
    display: flex;
    align-items: center;
    direction: rtl;
    background-color: #fff;
    margin-block: 1rem;
    padding: 1rem;
    border-radius: 1.2rem
}

.accordian__title {
    font-size: 1.6rem;
    font-weight: 600;
    flex: 0 0 50%
}

.accordian__value {
    font-size: 1.3rem
}

.accordian__typography {
    font-size: 1.4rem;
    font-weight: 600;
    direction: rtl;
    text-align: justify
}

.btn-group {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap
}

@media only screen and (max-width: 37.5em) {
    .btn-group {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem
    }
}

.btn-group__item {
    border-radius: 1.1rem;
    border: 1px solid var(--color-primary);
    transition: all ease .2s
}

.btn-group__item:hover {
    background-color: var(--color-primary);
    color: #fff
}

.btn-group__item--active {
    background-color: var(--color-primary);
    color: #fff
}

.btn-group__link {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 1.5rem;
    font-weight: 600;
    padding: .75rem 3.5rem;
    border-radius: inherit
}

.btn-group__link:visited {
    color: inherit
}

.btn-group__badge {
    transition: all ease .2s
}

.btn-link {
    background-color: var(--color-primary);
    padding: .5rem 1rem;
    color: #fff;
    font-family: inherit;
    font-size: 1.6rem;
    border-radius: 1rem;
    cursor: pointer;
    display: inline-block;
    padding: 1rem 10rem;
    border: 1px solid var(--color-primary);
    transition: all ease .2s
}

@media only screen and (max-width: 26.5625em) {
    .btn-link {
        padding: 1rem 8rem
    }
}

.btn-link--flex {
    display: flex;
    align-items: center;
    gap: 2rem
}

.btn-link__icon {
    fill: currentColor;
    width: 2rem;
    height: 2rem
}

.btn-link:hover {
    background-color: #fff;
    color: var(--color-primary);
    font-weight: 600;
    animation: letter-space .5s
}

.btn-view {
    background-color: var(--color-primary);
    padding: .75rem 1.5rem;
    border-radius: 10rem;
    border: none;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff
}

@media only screen and (max-width: 26.5625em) {
    .btn-view {
        font-size: 1.3rem
    }
}

.btn-view--secondary {
    background-color: #fff;
    color: #000
}

.btn-view--arrow {
    display: flex;
    align-items: center;
    transition: all .2s
}

.btn-view--arrow::before {
    content: "←";
    background-color: #fff;
    color: #000;
    border-radius: 10rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2rem;
    margin-right: 1.5rem;
    transition: all .2s
}

.btn-view--arrow:hover {
    background-color: #fff;
    color: var(--color-primary);
    box-shadow: .2rem .2rem .5rem var(--color-primary)
}

.btn-view--arrow:hover::before {
    background-color: var(--color-primary);
    color: #fff
}

.burger {
    margin-right: 2rem;
    direction: rtl;
    display: block;
    transition: all .2s
}

@media only screen and (max-width: 37.5em) {
    .burger {
        margin-right: 0;
        padding: 1rem
    }
}

.burger label {
    display: flex;
    flex-direction: column;
    width: 6rem;
    cursor: pointer
}

@media only screen and (max-width: 26.5625em) {
    .burger label {
        width: 4.5rem
    }
}

.burger label span {
    background: var(--color-primary);
    border-radius: 10px;
    height: 4px;
    margin: 4px 0;
    transition: margin-block ease .2s
}

.burger span:nth-of-type(1) {
    width: 80%
}

.burger span:nth-of-type(2) {
    width: 100%
}

.burger span:nth-of-type(3) {
    width: 50%
}

.burger input[type=checkbox] {
    display: none
}

.burger:hover label span {
    margin-block: 5px
}

.btn {
    font-family: inherit;
    font-size: 1.8rem;
    font-weight: 600;
    border-radius: 1rem;
    border: none;
    background-color: var(--color-primary);
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    word-spacing: 2px
}

@media only screen and (max-width: 37.5em) {
    .btn {
        width: 100%
    }
}

.btn>* {
    display: inline-block;
    height: 100%;
    width: 100%;
    transition: all .4s
}

.btn__visible {
    padding: 1.25rem 8rem
}

.btn__invisible {
    position: absolute;
    padding: 1.25rem 8rem;
    left: 0;
    top: -100%
}

.btn:hover {
    background-color: #fff;
    color: var(--color-primary);
    box-shadow: 0 0 1rem var(--color-primary)
}

.btn:hover .btn__visible {
    transform: translateY(100%)
}

.btn:hover .btn__invisible {
    top: 0
}

.card-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative
}

.card-slider>* {
    flex: 1
}

.card-slider__item {
    direction: rtl;
    border-radius: 3rem;
    overflow: hidden;
    transform: scale(0.7);
    width: 100%;
    background-color: #fff;
    transition: transform ease-in-out .2s
}

.card-slider__item--scale-down {
    transform: scale(0.8);
    transition: none
}

.card-slider__top {
    position: relative;
    border-bottom: 1px solid #000
}

.card-slider__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/5;
    -o-object-fit: cover;
    object-fit: cover
}

.card-slider__color {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem
}

.card-slider__color-box {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 50%;
    margin-right: 2rem
}

@media only screen and (max-width: 37.5em) {
    .card-slider__color-box {
        flex: 0 0 60%
    }
}

.card-slider__color-box>* {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    margin-left: .5rem;
    margin-bottom: 1rem
}

.card-slider__discount {
    font-size: 1.3rem;
    font-weight: 700;
    background-color: black;
    padding: .25rem 1.5rem;
    border-radius: 4rem;
    color: #fff;
    text-align: center;
    align-self: baseline
}

.card-slider__size {
    position: absolute;
    bottom: 4%;
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 700;
    word-spacing: 2px
}

.card-slider__bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.card-slider__name {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700
}

@media only screen and (max-width: 37.5em) {
    .card-slider__name {
        font-size: 1.8rem
    }
}

.card-slider__price {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    word-spacing: 3px
}

.card-slider__price__label {
    color: var(--color-primary)
}

@media only screen and (max-width: 37.5em) {
    .card-slider__price {
        font-size: 1.8rem
    }
}

.card-slider__discount-price {
    text-align: center;
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    word-spacing: 4px;
    -webkit-text-decoration: 1px line-through var(--color-primary);
    text-decoration: 1px line-through var(--color-primary)
}

@media only screen and (max-width: 37.5em) {
    .card-slider__discount-price {
        font-size: 1.4rem
    }
}

.card-slider__navigation {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    position: relative
}

.card-slider__navigation::after {
    position: absolute;
    content: "";
    background-color: #000;
    height: 1px;
    width: 40%;
    right: 0;
    top: 50%
}

@media only screen and (max-width: 75em) {
    .card-slider__navigation::after {
        width: 35%
    }
}

@media only screen and (max-width: 48em) {
    .card-slider__navigation::after {
        width: 30%
    }
}

@media only screen and (max-width: 37.5em) {
    .card-slider__navigation::after {
        width: 27%
    }
}

@media only screen and (max-width: 26.5625em) {
    .card-slider__navigation::after {
        width: 20%
    }
}

@media only screen and (max-width: 20em) {
    .card-slider__navigation::after {
        width: 15%
    }
}

.card-slider__navigation::before {
    position: absolute;
    content: "";
    background-color: #000;
    height: 1px;
    width: 40%;
    left: 0;
    top: 50%
}

@media only screen and (max-width: 75em) {
    .card-slider__navigation::before {
        width: 35%
    }
}

@media only screen and (max-width: 48em) {
    .card-slider__navigation::before {
        width: 30%
    }
}

@media only screen and (max-width: 37.5em) {
    .card-slider__navigation::before {
        width: 27%
    }
}

@media only screen and (max-width: 26.5625em) {
    .card-slider__navigation::before {
        width: 20%
    }
}

@media only screen and (max-width: 20em) {
    .card-slider__navigation::before {
        width: 15%
    }
}

.card-slider__navigation--borderless::after,
.card-slider__navigation--borderless::before {
    content: none
}

.card-slider__btn {
    padding-inline: 4rem;
    border-radius: 3rem;
    border: 1px solid #000;
    outline: none;
    box-shadow: none;
    margin-inline: 1rem;
    cursor: pointer;
    z-index: 10;
    background-color: transparent
}

@media only screen and (max-width: 26.5625em) {
    .card-slider__btn {
        padding-inline: 3rem
    }
}

@media only screen and (max-width: 20em) {
    .card-slider__btn {
        padding-inline: 2rem
    }
}

.card-slider__btn span {
    font-size: 3rem;
    color: var(--color-primary)
}

.card-slider__btn--white {
    border: 1px solid #fff
}

.card-slider__btn--white span {
    color: #fff
}

.swiper-slide.swiper-slide-active .card-slider__item {
    transform: scale(0.8);
    box-shadow: .6rem .6rem 1rem rgba(0, 0, 0, 0.7);
    border: 1px solid #000
}

.swiper-slide.swiper-slide-active .card-slider__item--scale-down {
    box-shadow: .6rem .6rem 1rem rgba(0, 0, 0, 0.7);
    border: 1px solid #000
}

@media only screen and (max-width: 37.5em) {
    .special-offer-swiper .swiper-slide {
        width: 70% !important
    }
}

@media only screen and (max-width: 26.5625em) {
    .special-offer-swiper .swiper-slide {
        width: 80% !important
    }
}

@media only screen and (max-width: 20em) {
    .special-offer-swiper .swiper-slide {
        width: 157px !important
    }
}

.carousel {
    position: relative
}

.carousel .slider {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    overflow: hidden;
    position: relative
}

@media only screen and (max-width: 48em) {
    .carousel .slider {
        min-height: 60vh;
        min-height: 60svh
    }
}

@media only screen and (max-width: 37.5em) {
    .carousel .slider {
        min-height: 45vh;
        min-height: 45svh
    }
}

.carousel .slider__slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1s
}

.carousel .slider__slide>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.carousel .slider__navigation {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute
}

.carousel .slider__navigation--next {
    right: -10rem
}

.carousel .slider__navigation--next::before {
    content: "بعد";
    font-size: 2rem;
    font-weight: 700
}

.carousel .slider__navigation--prev {
    left: -7rem
}

.carousel .slider__navigation--prev::after {
    content: "قبل";
    font-size: 2rem;
    font-weight: 700
}

.carousel .slider__navigation__icon {
    width: 1.5rem;
    height: 1.5rem
}

.carousel .slider__navigation__icon--next {
    transform: rotateZ(-90deg)
}

.carousel .slider__navigation__icon--prev {
    transform: rotateZ(90deg)
}

.carousel .slider__dots {
    position: absolute;
    bottom: 50%;
    left: 5%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

.carousel .slider__dots__dot {
    border: 1.2px solid #000;
    background-color: #fff;
    opacity: .7;
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    margin-block: 1rem;
    box-sizing: content-box;
    transition: all .5s;
    margin: 1rem
}

.carousel .slider__dots__dot--active {
    background-color: var(--color-primary);
    opacity: 1;
    border: none;
    height: 1.3rem;
    width: 1.3rem
}

.carousel .slider__pagination {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media only screen and (max-width: 56.25em) {
    .carousel .slider__pagination {
        display: none
    }
}

.carousel .slider__pagination__page {
    opacity: .7;
    cursor: pointer;
    margin-right: 3.75rem;
    font-size: 2.2rem;
    font-weight: 300;
    transition: all .5s
}

.carousel .slider__pagination__page:last-child {
    margin: 0
}

.carousel .slider__pagination__page--active {
    opacity: 1;
    font-size: 4.4rem;
    font-weight: 700
}

.carousel__social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    bottom: 2%
}

.carousel__icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 2rem
}

.cart-total {
    display: flex;
    flex-direction: column
}

.cart-total__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--color-grey-dark-2);
    padding-bottom: .5rem
}

.cart-total__header h3 {
    font-size: 2rem
}

@media only screen and (max-width: 37.5em) {
    .cart-total__header h3 {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .cart-total__header h3 {
        font-size: 1.1rem;
        font-weight: 800
    }
}

@media only screen and (max-width: 20em) {
    .cart-total__header h3 {
        font-size: .875rem
    }
}

.cart-total__code form {
    display: flex;
    align-items: center;
    gap: 2rem
}

@media only screen and (max-width: 37.5em) {
    .cart-total__code form .btn-view {
        font-size: 1.3rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .cart-total__code form {
        gap: 3px
    }
}

@media only screen and (max-width: 20em) {
    .cart-total__code form .btn-view {
        font-size: 1.2rem
    }
}

.cart-total__input {
    border-radius: 10rem;
    border: 1px solid var(--color-grey-dark-3);
    font-family: inherit;
    padding: .75rem 1.5rem;
    outline: 0;
    font-size: 1.6rem
}

@media only screen and (max-width: 37.5em) {
    .cart-total__input {
        font-size: 1.1rem;
        font-weight: 700;
        padding: .75rem
    }
}

@media only screen and (max-width: 20em) {
    .cart-total__input {
        font-size: .875rem
    }
}

.cart-total__body {
    padding-block: 1rem
}

.cart-total__item {
    display: flex;
    align-items: center;
    padding-block: .5rem
}

.cart-total__item:not(:last-child) {
    border-bottom: 1px solid var(--color-grey-dark-2)
}

.cart-total__item:nth-last-child(2) {
    border-bottom: 3px solid var(--color-grey-dark-2)
}

.cart-total__item:last-child>* {
    font-size: 1.6rem;
    font-weight: 700
}

.cart-total__title {
    font-size: 1.4rem;
    font-weight: 650;
    margin-left: auto
}

.cart-total__price {
    font-size: 1.3rem;
    font-weight: 600;
    flex: 0 0 20%;
    text-align: center
}

.cart-total__price-label {
    font-size: 1.3rem;
    font-weight: 600
}

.cart-total__footer {
    text-align: center;
    margin-top: 1rem
}

.cart {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.cart__item {
    display: flex;
    align-items: center;
    padding-block: 1rem;
    flex-wrap: wrap
}

.cart__item:not(:last-child) {
    border-bottom: 2px solid var(--color-grey-dark-2)
}

.cart__info {
    display: flex;
    align-items: center;
    flex: 1
}

@media only screen and (max-width: 56.25em) {
    .cart__info {
        flex: 0 0 90%;
        margin-bottom: 1.5rem
    }
}

.cart__img {
    width: 12rem;
    height: 12rem;
    border: 1px solid;
    border-radius: 1rem
}

.cart__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: inherit
}

.cart__data {
    margin-right: 1rem
}

.cart__name {
    font-size: 2.4rem
}

@media only screen and (max-width: 56.25em) {
    .cart__name {
        font-size: 1.8rem
    }
}

.cart__name:hover>* {
    color: var(--color-primary)
}

.cart__name:visited {
    color: inherit
}

.cart__sub-data {
    color: var(--color-grey-dark-2);
    font-size: 1.24rem;
    font-weight: 600;
    word-spacing: 3px
}

@media only screen and (max-width: 56.25em) {
    .cart__sub-data {
        font-size: 1.1rem;
        word-spacing: 2px
    }
}

.cart__qty {
    display: flex;
    align-items: center;
    position: relative
}

@media only screen and (max-width: 56.25em) {
    .cart__qty {
        order: 1
    }
}

.cart__qty__input {
    font-family: inherit;
    font-size: 2rem;
    font-weight: 600;
    border: 1px solid gray;
    border-radius: 6rem;
    outline: none;
    text-align: center;
    max-width: 12rem;
    padding: .25rem
}

.cart__qty__input::-webkit-inner-spin-button,
.cart__qty__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

@media only screen and (max-width: 56.25em) {
    .cart__qty__input {
        font-size: 1.5rem;
        padding: .5rem
    }
}

.cart__qty__link {
    position: absolute
}

.cart__qty__link--left {
    left: 0
}

.cart__qty__plus {
    width: 2rem;
    height: 2rem
}

.cart__qty__minus {
    width: 2rem;
    height: 2rem
}

.cart__price {
    flex: 1;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 700
}

@media only screen and (max-width: 56.25em) {
    .cart__price {
        flex: none;
        order: 2;
        margin-right: auto;
        font-size: 1.4rem
    }
}

.cart__price__value {
    letter-spacing: 3px
}

@media only screen and (max-width: 56.25em) {
    .cart__price__value {
        letter-spacing: 2px
    }
}

.cart__operation {
    flex: 1;
    text-align: left
}

@media only screen and (max-width: 56.25em) {
    .cart__operation {
        flex: none;
        margin-right: auto
    }
}

.cart__operation__link {
    display: block
}

.cart__operation__icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: #000
}

@media only screen and (max-width: 56.25em) {
    .cart__operation__icon {
        width: 2rem;
        height: 2rem
    }
}

.cart__operation__icon:hover {
    fill: var(--color-primary)
}

.cat-menu {
    position: absolute;
    top: 14rem;
    right: 1rem;
    z-index: 650;
    background-color: #fff;
    width: 240px;
    direction: rtl;
    border-radius: 1rem;
    border: 2px solid var(--color-primary);
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, 0.75);
    display: none;
    transition: all .4s
}

@media only screen and (max-width: 37.5em) {
    .cat-menu {
        position: fixed;
        top: 0;
        right: 0;
        border-radius: 0;
        height: 100%;
        border-color: transparent transparent transparent var(--color-primary);
        flex-direction: column;
        overflow-y: auto
    }

    .cat-menu::-webkit-scrollbar {
        width: 6px
    }

    .cat-menu::-webkit-scrollbar-track {
        background: rgba(201, 196, 196, 0.7)
    }

    .cat-menu::-webkit-scrollbar-thumb {
        background: var(--color-primary)
    }

    .cat-menu::-webkit-scrollbar-button {
        display: flex;
        height: 100%
    }
}

.cat-menu--active {
    animation: show-element 300ms 1 ease-out;
    display: block
}

@media only screen and (max-width: 37.5em) {
    .cat-menu--active {
        display: flex
    }
}

.cat-menu__close {
    font-size: 3.6rem;
    margin-right: 1rem;
    color: var(--color-primary);
    cursor: pointer
}

@media only screen and (max-width: 37.5em) {
    .cat-menu__close {
        display: flex;
        justify-content: end;
        margin-left: 1rem
    }
}

.cat-menu__wrapper {
    display: flex;
    flex-direction: column;
    padding-inline: 1.25rem;
    padding-bottom: 3rem
}

@media only screen and (max-width: 37.5em) {
    .cat-menu__wrapper {
        margin-bottom: 5rem;
        padding-bottom: 0;
        gap: 1rem
    }
}

.cat-menu__item {
    position: relative;
    margin-top: .75rem
}

@media only screen and (max-width: 37.5em) {
    .cat-menu__item {
        margin-top: 0
    }
}

.cat-menu__item:nth-child(1),
.cat-menu__item:nth-last-child(1),
.cat-menu__item:nth-last-child(1),
.cat-menu__item:nth-last-child(2),
.cat-menu__item:nth-last-child(3),
.cat-menu__item:nth-last-child(4),
.cat-menu__item:nth-last-child(5) {
    display: none
}

@media only screen and (max-width: 37.5em) {

    .cat-menu__item:nth-child(1),
    .cat-menu__item:nth-last-child(1),
    .cat-menu__item:nth-last-child(1),
    .cat-menu__item:nth-last-child(2),
    .cat-menu__item:nth-last-child(3),
    .cat-menu__item:nth-last-child(4),
    .cat-menu__item:nth-last-child(5) {
        display: block
    }
}

@media only screen and (max-width: 37.5em) {
    .cat-menu__item:nth-last-child(3) .cat-menu__list-item::before {
        display: none
    }

    .cat-menu__item:nth-last-child(3) .cat-menu__list-item:last-child {
        color: var(--color-primary)
    }

    .cat-menu__item:nth-last-child(3) .cat-menu__list-item:hover .cat-menu__list-link {
        transform: skewX(0) translateX(-5px);
        color: currentColor;
        font-weight: 600
    }

    .cat-menu__item:nth-last-child(3) .cat-menu__list-link {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: .25rem
    }
}

.cat-menu__title {
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative
}

@media only screen and (max-width: 37.5em) {
    .cat-menu__title__text {
        margin-right: 2rem;
        padding-block: 6px;
        display: flex;
        align-items: center;
        flex: 1
    }
}

.cat-menu__title::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    bottom: 0px
}

.cat-menu__title__arrow {
    width: 8px;
    height: 8px;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s
}

.cat-menu__title__arrow--active {
    transform: rotateZ(180deg)
}

@media only screen and (max-width: 37.5em) {
    .cat-menu__title::before {
        position: absolute;
        content: "";
        width: 1rem;
        height: 1rem;
        background-color: var(--color-primary);
        border-radius: 10rem
    }
}

.cat-menu__list {
    background-color: var(--color-grey-light-4);
    list-style: none;
    margin-block: 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: .25rem .75rem;
    border-radius: 0 8px 8px 0;
    max-height: 0;
    display: none;
    overflow-y: auto;
    transition: all .5s
}

.cat-menu__list--show {
    display: block;
    max-height: 10rem
}

.cat-menu__list::-webkit-scrollbar {
    width: 3px
}

.cat-menu__list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px
}

.cat-menu__list::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px
}

.cat-menu__list::-webkit-scrollbar-button {
    display: flex;
    height: 100%
}

.cat-menu__list-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-block: .4rem;
    overflow: hidden
}

.cat-menu__list-item::before {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--color-primary);
    border-radius: 7rem;
    right: 0;
    top: auto;
    transition: width cubic-bezier(0.55, 0.085, 0.68, 0.53) .2s
}

.cat-menu__list-item:hover::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: auto
}

.cat-menu__list-link {
    font-size: 1.36rem;
    margin-right: 1rem;
    transition: transform ease-in-out .2s;
    font-weight: 600;
    flex: 1;
    position: relative
}

.cat-menu__list-item:hover .cat-menu__list-link {
    transform: skewX(15deg) translateX(-5px);
    color: #fff;
    font-weight: 700
}

.cat-menu__list-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor
}

.cat-menu__bottom {
    display: none
}

@media only screen and (max-width: 37.5em) {
    .cat-menu__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        margin-top: auto;
        margin-bottom: 3rem
    }
}

.cat-menu__logo {
    display: block;
    width: 18rem
}

.cat-menu__social {
    list-style: none;
    display: flex
}

.cat-menu__social__item {
    margin-inline: 3rem
}

.cat-menu__social__link {
    display: block
}

.cat-menu__social__icon {
    width: 2rem;
    height: 2rem
}

.checkbox {
    text-align: center;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.checkbox__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-size: 1.6rem;
    font-weight: 700;
    cursor: pointer
}

.checkbox__input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkbox:hover .checkbox__input~.checkbox__checkmark {
    background-color: #ccc
}

.checkbox .checkbox__input:checked~.checkbox__checkmark {
    background-color: #01cc60
}

.checkbox__checkmark {
    position: relative;
    height: 25px;
    width: 25px;
    background-color: #eee
}

.checkbox__checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

.checkbox__input:checked~.checkbox__checkmark::after {
    display: block
}

.shop-filter {
    background-color: #fff;
    direction: rtl;
    flex: 0 0 20%;
    transition: all .4s
}

.shop-filter__label {
    font-size: 3.2rem;
    text-align: center;
    position: relative
}

@media only screen and (max-width: 37.5em) {
    .shop-filter__label {
        font-size: 2.2rem
    }
}

.shop-filter__label::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    bottom: 0;
    right: 0
}

.shop-filter__wrapper {
    display: flex;
    flex-direction: column;
    padding-inline: 1.25rem;
    padding-bottom: 3rem
}

@media only screen and (max-width: 37.5em) {
    .shop-filter__wrapper {
        margin-bottom: 5rem;
        padding-bottom: 0;
        gap: 1rem
    }
}

.shop-filter__item {
    position: relative;
    margin-top: .75rem
}

@media only screen and (max-width: 37.5em) {
    .shop-filter__item {
        margin-top: 0
    }
}

.shop-filter__title {
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

@media only screen and (max-width: 37.5em) {
    .shop-filter__title {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 37.5em) {
    .shop-filter__title__text {
        padding-block: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1
    }
}

.shop-filter__title__arrow {
    display: none
}

@media only screen and (max-width: 37.5em) {
    .shop-filter__title__arrow {
        display: block;
        width: 8px;
        height: 8px;
        -o-object-fit: cover;
        object-fit: cover;
        transition: transform .3s
    }

    .shop-filter__title__arrow--active {
        transform: rotateZ(180deg)
    }
}

.shop-filter__title::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    bottom: 0px
}

.shop-filter__list {
    background-color: var(--color-grey-light-4);
    list-style: none;
    margin-block: 1rem;
    width: 100%;
    padding: .25rem .75rem;
    border-radius: 0 8px 8px 0;
    overflow-y: auto;
    max-height: 15rem;
    transition: all .5s
}

@media only screen and (max-width: 37.5em) {
    .shop-filter__list {
        max-height: 0;
        display: none
    }

    .shop-filter__list--show {
        display: block;
        max-height: 10rem
    }
}

.shop-filter__list::-webkit-scrollbar {
    width: 3px
}

.shop-filter__list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px
}

.shop-filter__list::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px
}

.shop-filter__list::-webkit-scrollbar-button {
    display: flex;
    height: 100%
}

.shop-filter__list-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-block: .4rem;
    overflow: hidden
}

.shop-filter__list-item::before {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--color-primary);
    border-radius: 7rem;
    right: 0;
    top: auto;
    transition: width cubic-bezier(0.55, 0.085, 0.68, 0.53) .2s
}

.shop-filter__list-item:hover::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: auto
}

.shop-filter__list-link {
    font-size: 1.36rem;
    margin-right: 1rem;
    transition: transform ease-in-out .2s;
    font-weight: 600;
    flex: 1;
    position: relative
}

.shop-filter__list-item:hover .shop-filter__list-link {
    transform: skewX(15deg) translateX(-5px);
    color: #fff;
    font-weight: 700
}

.form {
    display: flex;
    padding: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.form--auth {
    flex-direction: column;
    padding-inline: 0
}

.form--auth input,
.form--auth button {
    width: 100%
}

.form--auth input {
    border-radius: 1rem;
    border: 1px solid var(--color-grey-dark-2);
    font-family: inherit;
    text-align: center;
    letter-spacing: .75rem
}

.form--auth input:focus-visible {
    border: 1px solid var(--color-grey-dark-2);
    box-shadow: none
}

.form__group {
    display: flex;
    margin-bottom: 1.5rem;
    flex-direction: column;
    flex: 0 0 45%;
    margin-inline: auto
}

@media only screen and (max-width: 37.5em) {
    .form__group {
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 2.25rem
    }
}

.form__label {
    margin-left: 1rem;
    font-size: 1.4rem;
    font-weight: 600
}

.form__input {
    border-radius: 5px;
    outline: 0;
    border: 1px solid #000;
    padding: 1.5rem;
    font-family: inherit;
    transition: all ease .3s
}

.form__input:focus-visible {
    box-shadow: 0 0 .6rem var(--color-primary);
    border: none
}

.gallery__box {
    width: 33.3333333333%
}

@media only screen and (max-width: 37.5em) {
    .gallery__box {
        width: 50%
    }
}

.gallery__box:nth-child(1) a {
    text-align: center;
    right: 4%;
    top: 25%
}

.gallery__box:nth-child(2) :not(:last-child) a {
    text-align: center;
    left: 4%;
    bottom: auto;
    top: 10%
}

.gallery__box:nth-child(2) a {
    text-align: center;
    left: 4%;
    bottom: 6%
}

.gallery__box:nth-child(3) a {
    text-align: center;
    bottom: 4%;
    right: 4%
}

@media only screen and (max-width: 37.5em) {
    .gallery__box:nth-child(3) {
        width: 100%
    }
}

.gallery__item {
    position: relative;
    margin: 1rem;
    border-radius: 2rem
}

.gallery__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: .6rem .6rem 1rem rgba(0, 0, 0, 0.4)
}

.octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background-color: var(--color-primary);
    width: .2rem;
    height: .2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-shadow: 1rem 1rem 3rem #000
}

.octagon--menu {
    padding: 1.5rem;
    position: relative
}

.octagon--color {
    background-color: rgb(255, 255, 255)
}

.octagon__sign,
.octagon__label {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff
}

.octagon__sign--menu,
.octagon__label--menu {
    font-size: 1rem
}

.octagon__icon {
    position: absolute;
    fill: var(--color-primary);
    width: 2rem;
    height: 2rem
}

.octagon-slider {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative
}

.octagon-slider__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    opacity: .8;
    transform: scale(0.7);
    filter: blur(2px);
    transition: all .6s
}

.octagon-slider__item a.btn-view {
    visibility: hidden;
    transform: scale(0);
    transition: all .6s
}

@media only screen and (max-width: 37.5em) {
    .octagon-slider__item {
        transform: scale(0.5)
    }
}

.octagon-slider__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background-color: black;
    position: relative
}

.octagon-slider__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.octagon-slider__img--1 {
    -o-object-fit: contain !important;
    object-fit: contain !important
}

.octagon-slider__shape {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    position: absolute;
    top: 5px;
    left: 5px;
    width: 19rem;
    height: 19rem;
    background: var(--color-primary)
}

.octagon-slider__shape--white {
    background-color: #fff
}

@media only screen and (max-width: 56.25em) {
    .octagon-slider__shape {
        top: 4px;
        left: 4px
    }
}

.octagon-slider__line {
    width: 2px;
    height: 5rem;
    border-radius: 25rem;
    background-color: var(--color-primary);
    margin-block: 2rem
}

.octagon-slider__name {
    font-size: 1.8rem;
    font-weight: 700
}

.octagon-slider__btn {
    position: absolute;
    top: 35% !important;
    z-index: 10;
    border: none;
    border-radius: 50%;
    height: 1.75rem !important;
    width: 1.75rem !important;
    cursor: pointer
}

@media only screen and (max-width: 37.5em) {
    .octagon-slider__btn {
        height: 1.5rem !important;
        width: 1.5rem !important;
        top: 43% !important
    }
}

.octagon-slider__btn--left {
    transform: rotateZ(-90deg)
}

@media only screen and (max-width: 37.5em) {
    .octagon-slider__btn--left {
        right: 0 !important
    }
}

.octagon-slider__btn--right {
    transform: rotateZ(90deg)
}

@media only screen and (max-width: 37.5em) {
    .octagon-slider__btn--right {
        left: 0 !important
    }
}

.octagon-slider__btn--top {
    top: 55% !important
}

@media only screen and (max-width: 37.5em) {
    .octagon-slider__btn--top {
        top: 60% !important
    }
}

@media only screen and (max-width: 37.5em) {
    .swiper-slide.swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.swiper-slide.swiper-slide-active .octagon-slider__item {
    opacity: 1;
    transform: scale(1);
    filter: blur(0)
}

.swiper-slide.swiper-slide-active .octagon-slider__item a.btn-view {
    visibility: visible;
    transform: scale(1)
}

@media only screen and (max-width: 37.5em) {
    .swiper-slide.swiper-slide-active .octagon-slider__item {
        transform: scale(0.8)
    }
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none !important
}

@media only screen and (max-width: 37.5em) {
    .overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 600
    }

    .overlay__hidden {
        display: none
    }
}

.pagination__list {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none
}

.pagination__item {
    margin-left: 2.25rem
}

.pagination__link {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-grey-dark-2)
}

.pagination__link--active {
    border: 1px solid var(--color-grey-dark-2);
    border-radius: 4px;
    color: #000;
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.pagination__link--next,
.pagination__link--prev {
    position: relative;
    font-size: 1.4rem;
    color: #000
}

.pagination__link--next::after,
.pagination__link--prev::after {
    content: "";
    position: absolute;
    background-image: url(/static/assets/images/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: .75rem;
    height: .75rem;
    top: 30%
}

.pagination__link--next::after {
    transform: rotateZ(-90deg);
    right: -12px
}

.pagination__link--prev::after {
    transform: rotateZ(90deg);
    left: -12px
}

.review-form {
    display: flex;
    flex-direction: column
}

.review-form__title {
    border-bottom: 2px solid #000;
    text-align: center;
    font-size: 1.4rem;
    padding-bottom: .5rem
}

.review-form__wrapper {
    margin: 1rem
}

.review-form__form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem
}

.review-form__group {
    display: flex;
    flex-direction: column;
    flex: 1
}

.review-form__group:nth-child(3) {
    flex: 0 0 100%
}

.review-form__label {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: .5rem;
    font-weight: 600
}

.review-form__input {
    border: none;
    outline: none;
    padding: 1.5rem 3rem;
    border-radius: 1.2rem;
    font-family: inherit
}

.review-form__review-box {
    width: 100%;
    min-height: 15rem;
    border: none;
    outline: none;
    font-family: inherit;
    padding: .75rem;
    border-radius: 1.2rem;
    resize: vertical
}

.review-form__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%
}

.review-form__rating__title {
    margin-left: 3rem;
    font-size: 1.4rem;
    font-weight: 600
}

.review-form__button {
    margin: 0 auto
}

.review {
    background-color: #fff;
    margin-block: 2rem;
    border-radius: 1.3rem;
    padding: 1rem
}

.review__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid;
    padding-bottom: .5rem
}

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

.review__user__icon {
    width: 2rem;
    height: 2rem;
    fill: var(--color-primary)
}

@media only screen and (max-width: 20em) {
    .review__user__icon {
        width: 1.5rem;
        height: 1.5rem
    }
}

.review__user__name {
    font-size: 1.5rem;
    font-weight: 600;
    word-spacing: 2px;
    margin-right: .3rem
}

@media only screen and (max-width: 20em) {
    .review__user__name {
        font-size: 1.1rem
    }
}

.review__user__date {
    margin-right: 2rem;
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-weight: 500
}

@media only screen and (max-width: 20em) {
    .review__rating .product__rating__icon {
        width: 1.25rem;
        height: 1.25rem
    }
}

.review__body {
    font-size: 1.3rem;
    font-weight: 500;
    padding: 1rem;
    margin-top: .5rem
}

@media only screen and (max-width: 20em) {
    .review__body {
        font-size: 1.1rem
    }
}

.review__footer {
    margin-top: 1rem
}

.review__footer .admin__label {
    display: flex;
    align-items: center;
    margin-right: 3rem;
    position: relative
}

.review__footer .admin__label::before {
    position: absolute;
    content: "";
    width: 10rem;
    height: 1px;
    background-color: #000;
    top: 0;
    right: 0
}

.review__footer .admin__label h6 {
    font-size: 1.3rem;
    margin-right: .5rem;
    padding-top: .5rem;
    text-align: center
}

@media only screen and (max-width: 20em) {
    .review__footer .admin__label h6 {
        font-size: 1.2rem
    }
}

.review__footer .admin__icon {
    width: 1.5rem;
    height: 1.5rem
}

@media only screen and (max-width: 20em) {
    .review__footer .admin__icon {
        width: 1.25rem;
        height: 1.25rem
    }
}

.review__footer .admin__answer {
    margin-top: .3rem;
    margin-right: 4rem
}

.review__footer .admin__answer span {
    font-size: 1.3rem;
    font-weight: 500
}

@media only screen and (max-width: 20em) {
    .review__footer .admin__answer span {
        font-size: 1.1rem
    }
}

.star-rating {
    white-space: nowrap;
    display: flex;
    gap: .25rem;
    flex-direction: row-reverse
}

.star-rating [type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.star-rating__icon {
    width: 2rem;
    height: 2rem;
    fill: #bcb8b7;
    transition: .3s
}

.star-rating label:is(:hover, :has(~:hover)) .star-rating__icon {
    transform: scale(1.35);
    fill: #ebbe70;
    cursor: pointer;
    margin-right: .5rem;
    animation: jump .5s calc(.3s + (var(--i) - 1)*.15s) alternate infinite
}

.star-rating label:has(~:checked) .star-rating__icon {
    fill: #f8ab27
}

.support {
    position: fixed;
    z-index: 500;
    right: 2%;
    bottom: 5rem
}

.support__link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
    background-image: linear-gradient(to bottom right, black, black);
    position: relative
}

.support__link::after {
    content: "پشتیبانی";
    position: absolute;
    bottom: -2.7rem;
    font-size: 1.6rem;
    font-weight: 700
}

.support__icon {
    fill: #fff;
    width: 6rem;
    height: 6rem;
    padding: 1rem
}

.table {
    padding: 2rem;
    max-height: 50rem;
    overflow-y: auto
}

.table::-webkit-scrollbar {
    width: 3px;
    height: 3px
}

.table::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px
}

.table::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px
}

.table::-webkit-scrollbar-button {
    display: flex;
    height: 100%
}

.table__box {
    width: 100%;
    border-collapse: collapse
}

.table__head {
    font-size: 1.6rem;
    border-bottom: 1px solid #000;
    line-height: 3rem
}

@media only screen and (max-width: 37.5em) {
    .table__head {
        font-size: 1.3rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .table__head {
        font-size: 1.1rem
    }
}

.table__body {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 4rem
}

@media only screen and (max-width: 37.5em) {
    .table__body {
        font-size: 1.1rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .table__body {
        font-size: .875rem
    }
}

.table__body tr:hover {
    background-color: var(--color-primary);
    color: #fff
}

.table__body tr:hover .table__icon {
    fill: #fff
}

.table__body tr:hover .table__status__icon {
    fill: #fff
}

.table__icon {
    width: 1.75rem;
    height: 1.75rem
}

.table__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.table__status__icon {
    width: 1.25rem;
    height: 1.25rem
}

.table__status__icon--confirmed {
    fill: #00aa2f
}

.table__status__icon--pending {
    fill: var(--color-primary)
}

.table--horizontal-overflow {
    overflow-x: auto;
    max-height: auto
}

@media only screen and (max-width: 37.5em) {
    .table--horizontal-overflow .table__box {
        width: 70rem
    }

    .table--horizontal-overflow .table__body {
        font-size: 1.3rem
    }
}

.top-header {
    width: 100%;
    height: 4rem;
    -o-object-fit: cover;
    object-fit: cover
}

.dropdown {
    position: absolute;
    right: 3.5rem;
    top: 15%;
    z-index: 999999;
    border: 1px solid var(--color-primary);
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: .4rem .4rem .6rem rgba(0, 0, 0, 0.5);
    display: none
}

@media only screen and (max-width: 37.5em) {
    .dropdown {
        right: 30%
    }
}

@media only screen and (max-width: 20em) {
    .dropdown {
        right: 4%
    }
}

.dropdown__overlay {
    position: absolute
}

.dropdown__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    direction: rtl
}

.dropdown__link {
    display: flex;
    align-items: center;
    padding: .95rem 1.5rem;
    margin-bottom: .5rem
}

.dropdown__icon {
    width: 2rem;
    height: 2rem;
    margin-left: 1rem;
    fill: var(--color-primary)
}

.dropdown__text {
    color: #000;
    font-size: 1.6rem;
    font-weight: 600;
    transition: transform .2s
}

.dropdown__link:hover .dropdown__text {
    transform: translateX(-3px)
}

.dropdown--active {
    display: block;
    animation: show-element 300ms 1 ease-out
}

.footer>* {
    color: #fff
}

.footer__wrapper {
    display: flex;
    justify-content: space-between;
    direction: rtl
}

@media only screen and (max-width: 56.25em) {
    .footer__wrapper {
        flex-wrap: wrap;
        padding: 1rem
    }
}

.footer__box {
    margin: 2rem
}

@media only screen and (max-width: 56.25em) {
    .footer__box {
        width: 40%
    }
}

.footer__box:last-child .footer__item {
    display: flex;
    flex-direction: column;
    align-items: center
}

.footer__heading {
    font-size: 1.6rem;
    border-bottom: 1px solid #fff;
    line-height: 1.5
}

.footer__address {
    font-size: 1.4rem;
    font-weight: 400
}

.footer__phone-box {
    display: flex;
    padding: 1rem;
    align-items: center;
    justify-content: space-between
}

@media only screen and (max-width: 56.25em) {
    .footer__phone-box {
        flex-direction: column;
        align-items: start;
        padding-inline: 0;
        gap: 5px
    }
}

.footer__phone-box__item {
    font-size: 1.4rem
}

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

.footer__list__item {
    margin-right: 2rem
}

.footer__list__item::marker {
    color: var(--color-primary);
    font-size: 3rem
}

.footer__list__link {
    font-size: 1.4rem;
    font-weight: 400;
    display: flex;
    align-items: center
}

.footer__list__link--color {
    color: var(--color-primary)
}

.footer__list__icon {
    fill: #fff;
    width: 2.5rem;
    height: 2.5rem
}

.footer__list--row {
    flex-direction: row;
    gap: 2rem;
    list-style: none;
    justify-content: space-between;
    margin-block: 2rem;
    padding: 1rem
}

.footer__logo {
    width: 12rem
}

.footer__namad {
    display: flex;
    gap: 2rem
}

.footer__namad img {
    width: 8rem;
    height: 10rem
}

.footer__divider {
    margin-block: .5rem
}

.header {
    font-size: 1.4rem;
    height: 7rem;
    background-color: #eee;
    border-bottom: var(--line);
    margin: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    clip-path: polygon(1% 0, 99% 0, 100% 25%, 100% 75%, 99% 100%, 1% 100%, 0 75%, 0% 25%)
}

@media only screen and (max-width: 48em) {
    .header {
        clip-path: polygon(2% 0, 98% 0, 100% 25%, 100% 75%, 98% 100%, 2% 100%, 0 75%, 0% 25%)
    }
}

@media only screen and (max-width: 37.5em) {
    .header {
        display: none
    }
}

@media only screen and (max-width: 20em) {
    .header {
        margin: 0 1rem
    }
}

.header--mobile {
    display: none
}

@media only screen and (max-width: 37.5em) {
    .header--mobile {
        display: flex;
        clip-path: none;
        margin: 0
    }
}

.nav {
    display: flex;
    align-items: center;
    direction: rtl
}

@media only screen and (max-width: 37.5em) {
    .nav--mobile {
        display: none
    }
}

.nav__container {
    margin: 0 auto
}

.nav__list {
    list-style: none;
    display: flex;
    padding: 2rem 0;
    align-items: center;
    justify-content: center
}

.nav__item {
    position: relative
}

.nav__item:not(:last-child)::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 3px;
    background-color: #000;
    top: 0;
    left: 0;
    border-radius: 30rem
}

.nav__link {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    padding: 0 3.5rem;
    display: flex;
    align-items: center;
    position: relative
}

@media only screen and (max-width: 48em) {
    .nav__link {
        font-size: 1.75rem
    }
}

.nav__link--offer {
    color: var(--color-primary)
}

.nav__link--offer:visited {
    color: var(--color-primary) !important
}

.nav__link:hover {
    color: var(--color-primary)
}

.logo {
    display: contents
}

.logo img {
    height: 100%;
    margin-left: 2rem;
    padding: 1rem
}

@media only screen and (max-width: 37.5em) {
    .logo img {
        margin-left: 0
    }
}

@media only screen and (max-width: 20em) {
    .logo {
        margin-left: 1rem
    }
}

.search {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 37.5em) {
    .search {
        display: none
    }
}

.search--mobile {
    display: none
}

@media only screen and (max-width: 37.5em) {
    .search--mobile {
        display: flex;
        margin-block: 2rem
    }
}

.search__input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: none;
    direction: rtl;
    padding: .9rem 3.75rem;
    border-radius: 100px;
    width: 90%;
    margin-right: -3.25rem;
    transition: all .2s
}

.search__input:focus {
    outline: none;
    width: 100%
}

@media only screen and (max-width: 37.5em) {
    .search__input:focus {
        width: 90%;
        border-width: 2px
    }
}

.search__input::-webkit-input-placeholder {
    font-weight: 400
}

@media only screen and (max-width: 37.5em) {
    .search__input {
        font-size: 1.8rem;
        margin-right: -4.8rem;
        padding: 1rem 5.5rem;
        border-bottom: 1px solid var(--color-primary);
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }
}

@media only screen and (max-width: 26.5625em) {
    .search__input {
        font-size: 1.4rem;
        margin-right: -3.8rem
    }
}

.search__input:focus+.search__button {
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    padding: 1rem
}

.search__button {
    border: none;
    background-color: inherit;
    transition: all .2s
}

.search__button:focus {
    outline: none;
    transition: all .2s
}

.search__button:active {
    transform: translateY(2px)
}

@media only screen and (max-width: 37.5em) {
    .search__button:active {
        transform: translateY(0)
    }
}

@media only screen and (max-width: 37.5em) {
    .search__button {
        background-color: var(--color-primary);
        border-radius: 50%;
        display: flex;
        padding: 1rem
    }
}

.search__icon {
    height: 2rem;
    width: 2rem;
    fill: var(--color-primary)
}

@media only screen and (max-width: 37.5em) {
    .search__icon {
        fill: #fff;
        width: 2.75rem;
        height: 2.75rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .search__icon {
        width: 2rem;
        height: 2rem
    }
}

.search__input:focus+.search__button .search__icon {
    fill: #fff
}

.search--table {
    flex-direction: row-reverse
}

@media only screen and (max-width: 37.5em) {
    .search--table {
        display: flex
    }
}

.search--table .search__input {
    width: 50%;
    border: 1px solid var(--color-grey-dark-2);
    font-size: 1.3rem
}

@media only screen and (max-width: 37.5em) {
    .search--table .search__input {
        font-size: 1.3rem;
        margin-right: -3.8rem;
        padding: 1rem 5.5rem;
        border-radius: 10rem;
        width: 100%
    }
}

.search--table .search__button {
    z-index: 1
}

@media only screen and (max-width: 37.5em) {
    .search--table .search__button:active {
        transform: translateY(0)
    }
}

@media only screen and (max-width: 37.5em) {
    .search--table .search__button {
        background-color: transparent
    }
}

.search--table .search__icon {
    height: 1.5rem;
    width: 1.5rem
}

@media only screen and (max-width: 37.5em) {
    .search--table .search__icon {
        fill: var(--color-primary)
    }
}

.search--table .search__input:focus+.search__button {
    padding: .85rem
}

.user-nav {
    display: flex;
    align-items: center
}

.user-nav>*:not(:nth-child(3)) {
    margin-right: 2rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0rem 0rem 1rem #000;
    border-radius: 20rem
}

.user-nav>*:not(:nth-child(3)):nth-child(1) {
    position: relative
}

.user-nav>*:not(:nth-child(3)):nth-child(1)::before {
    content: "";
    position: absolute;
    background-color: #000;
    height: 90%;
    width: 1.5px;
    right: -10px
}

.user-nav>*:hover {
    background-color: var(--color-grey-light-2)
}

.user-nav__icon-box {
    position: relative
}

.user-nav__link {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 7rem 6rem 4rem #000
}

.user-nav__icon {
    width: 2rem;
    height: 2rem;
    fill: var(--color-primary)
}

.user-nav__user {
    margin-right: 2rem
}

.user-nav__user-name {
    color: #000;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 400;
    position: relative;
    transition: transform .2s
}

.user-nav__user-name img {
    width: .8rem;
    height: .8rem;
    margin-left: .8rem;
    fill: var(--color-primary)
}

.user-nav__user-name:visited {
    color: #000
}

.user-nav__user-name::after {
    position: absolute;
    content: "";
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    left: 0;
    bottom: 0;
    transform: scale(0);
    transition: transform .2s
}

.user-nav__user-name:hover {
    transform: translateY(-2px)
}

.user-nav__user-name:hover::after {
    width: 100%;
    transform: scale(1)
}

.user-nav__user-arrow--rotate {
    transform: rotateZ(180deg)
}

.category {
    margin-block: 3rem
}

.new-product {
    background-color: var(--color-grey-light-4)
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: center
}

.special-offer {
    background-color: var(--color-primary);
    display: flex;
    flex-direction: row-reverse
}

.special-offer__box {
    flex: 0 0 20%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 2.25rem;
    margin-right: 2rem;
    box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.8)
}

@media only screen and (max-width: 75em) {
    .special-offer__box {
        flex: 0 0 25%
    }
}

@media only screen and (max-width: 48em) {
    .special-offer__box {
        flex: 0 0 35%
    }
}

@media only screen and (max-width: 37.5em) {
    .special-offer__box {
        margin-right: 1rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .special-offer__box {
        flex: 0 0 40%
    }
}

@media only screen and (max-width: 20em) {
    .special-offer__box {
        margin-right: 0
    }
}

.special-offer__title {
    font-size: 3.2rem;
    display: flex;
    flex-direction: column;
    direction: rtl
}

@media only screen and (max-width: 37.5em) {
    .special-offer__title {
        font-size: 2.4rem
    }
}

@media only screen and (max-width: 20em) {
    .special-offer__title {
        flex-direction: row
    }
}

.special-offer__logo {
    width: 50%;
    height: auto
}

@media only screen and (max-width: 20em) {
    .special-offer__logo {
        width: 40%
    }
}

.footer {
    background-color: var(--color-black-dark-2);
    display: flex;
    flex-direction: column
}

.error {
    min-height: 51vh;
    min-height: 51svh
}

@media only screen and (max-width: 37.5em) {
    .error {
        min-height: 35vh;
        min-height: 35svh
    }
}

.error__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem
}

.error__title {
    font-size: 10rem;
    text-align: center;
    color: var(--color-primary)
}

.error__description {
    font-size: 2.4rem;
    font-weight: 500;
    direction: rtl;
    text-align: center;
    margin-bottom: 3rem
}

.about-us__banner {
    width: 100%;
    height: 100%
}

.about-us__banner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.about-us__logo {
    height: 10rem;
    display: flex;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 1rem
}

@media only screen and (max-width: 37.5em) {
    .about-us__logo {
        height: 7.5rem
    }
}

.about-us__logo img {
    width: 100%;
    height: 100%
}

.about-us__text {
    direction: rtl;
    text-align: justify;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 3rem;
    line-height: 2;
    word-spacing: 1px
}

.question {
    border: 1px solid #000;
    margin-top: 4rem;
    direction: rtl;
    margin-inline: 2rem;
    border-radius: 1rem;
    padding: 2rem
}

.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    direction: rtl;
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center
}

@media only screen and (max-width: 26.5625em) {
    .auth--login {
        margin-inline: 2rem
    }
}

.auth__box {
    border: 1px solid var(--color-primary);
    border-radius: 2rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    min-width: 42rem
}

@media only screen and (max-width: 26.5625em) {
    .auth__box {
        min-width: 37rem
    }
}

.auth__header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    position: relative
}

.auth__header img {
    width: 15rem
}

.auth__arrow {
    position: absolute;
    width: 4rem;
    height: 4rem;
    right: 0;
    top: 0
}

.auth__label {
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .5rem
}

.auth__text {
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: .75rem
}

.auth__input--error {
    border: 1px solid var(--color-primary) !important
}

.auth__error {
    color: var(--color-primary);
    align-self: normal;
    margin-right: .5rem;
    margin-top: .5rem;
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0
}

.auth__error--active {
    opacity: 1
}

.auth__resend-code {
    font-size: 1.2rem;
    margin-top: 1rem
}

.auth__footer__text {
    font-size: 1.4rem;
    font-weight: 500
}

.auth__footer__text a,
.auth__footer__text a:visited {
    color: var(--color-primary)
}

.dashboard {
    margin-inline: 2rem
}

.dashboard__wrapper {
    display: flex;
    direction: rtl
}

@media only screen and (max-width: 37.5em) {
    .dashboard__wrapper {
        flex-direction: column
    }
}

.dashboard__sidebar {
    flex: 0 0 20%
}

@media only screen and (max-width: 56.25em) {
    .dashboard__sidebar {
        flex: 0 0 25%
    }
}

.dashboard__sidebar__box {
    border: 2px solid var(--color-grey-dark-2);
    border-radius: 2rem;
    padding: 2rem 2rem
}

.dashboard__sidebar__information {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: .35rem
}

.dashboard__sidebar__user {
    font-size: 1.4rem
}

.dashboard__sidebar__phone {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-grey-dark-2)
}

.dashboard__sidebar__list {
    list-style: none;
    margin-top: 1rem
}

.dashboard__sidebar__item {
    margin-bottom: 1rem
}

.dashboard__sidebar__link {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600
}

.dashboard__sidebar__link:hover>* {
    color: var(--color-primary);
    fill: var(--color-primary)
}

.dashboard__sidebar__link:visited {
    color: #000
}

.dashboard__sidebar__link--active>* {
    color: var(--color-primary);
    fill: var(--color-primary)
}

.dashboard__sidebar__icon {
    width: 1.5rem;
    height: 1.5rem
}

.dashboard__sidebar__text {
    margin-right: .5rem
}

.dashboard__content {
    margin-right: 3rem;
    flex: 1
}

@media only screen and (max-width: 37.5em) {
    .dashboard__content {
        margin-right: 0;
        margin-block: 2.5rem
    }
}

.dashboard__content__box {
    border: 2px solid var(--color-grey-dark-2);
    border-radius: 2rem;
    padding-block: 1.5rem
}

.order-details {
    padding: 2rem;
    direction: rtl
}

@media only screen and (max-width: 37.5em) {
    .order-details {
        padding: 1rem
    }
}

.order-details__box {
    border: 2px solid #000;
    border-radius: 2rem;
    padding: 2rem;
    display: flex;
    flex-direction: column
}

@media only screen and (max-width: 37.5em) {
    .order-details__box {
        padding: 1rem
    }
}

.order-details__box .btn {
    align-self: center
}

@media only screen and (max-width: 37.5em) {
    .order-details__box .btn {
        font-size: 1.4rem;
        text-align: center
    }
}

.order-details__row {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem
}

.order-details__row:nth-child(1) .order-details__label,
.order-details__row:nth-child(2) .order-details__label {
    font-size: 1.4rem
}

.order-details__row:nth-child(1) .order-details__value,
.order-details__row:nth-child(2) .order-details__value {
    font-weight: 600
}

.order-details__row:nth-child(2)>* {
    flex: 0 0 50%
}

.order-details__row:not(:last-child) {
    border-bottom: 2px solid rgba(0, 0, 0, 0.4)
}

@media only screen and (max-width: 56.25em) {
    .order-details__row {
        flex-direction: column
    }
}

.order-details__row--block {
    display: block;
    margin: 0
}

.order-details__item {
    display: flex;
    align-items: center;
    flex: 1
}

.order-details__item:nth-child(1),
.order-details__item:nth-child(2) {
    margin-bottom: 1rem
}

@media only screen and (max-width: 56.25em) {
    .order-details__item {
        justify-content: space-between;
        margin-bottom: .5rem
    }
}

@media only screen and (max-width: 37.5em) {
    .order-details__item:nth-child(4) {
        flex-direction: column;
        align-items: flex-start;
        text-align: justify
    }
}

@media only screen and (max-width: 37.5em) {
    .order-details__item--direction {
        flex-direction: column;
        align-items: start
    }
}

.order-details__item__box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    margin-right: 3rem
}

@media only screen and (max-width: 56.25em) {
    .order-details__item__box {
        flex-direction: column
    }
}

.order-details__item__box--row {
    flex-direction: row
}

@media only screen and (max-width: 37.5em) {
    .order-details__item__box--row {
        flex-direction: column
    }
}

.order-details__label {
    color: rgba(0, 0, 0, 0.6)
}

.order-details__label--large {
    font-size: 1.6rem
}

.order-details__value {
    color: #000;
    font-size: 1.3rem;
    font-weight: 500;
    margin-right: 3rem;
    display: flex;
    align-items: center
}

.order-details__value--dot {
    position: relative;
    padding-inline: 1.5rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500
}

.order-details__value--dot::before {
    position: absolute;
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary);
    border-radius: 50%;
    right: 0
}

.order-details__value--dot::after {
    position: absolute;
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary);
    border-radius: 50%;
    left: 0
}

@media only screen and (max-width: 56.25em) {
    .order-details__value {
        margin-right: 0
    }
}

.order-details__page-link {
    color: #0081d5
}

.order-details__page-link :visited {
    color: inherit
}

.order-details__photo {
    width: 15rem;
    height: 15rem;
    border: 1px solid #000;
    border-radius: 1rem
}

.order-details__photo img {
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.order-details__information {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

@media only screen and (max-width: 56.25em) {
    .order-details__information {
        flex-direction: row;
        align-items: baseline
    }

    .order-details__information:nth-child(1) .order-details__title {
        display: none
    }
}

.order-details__title--primary {
    color: var(--color-primary)
}

.order-details__product {
    margin-top: 1.25rem;
    font-size: 1.3rem;
    font-weight: 500;
    word-spacing: 2px
}

@media only screen and (max-width: 56.25em) {
    .order-details__product {
        margin-top: .5rem;
        font-weight: 600
    }
}

.order-details__product:has(.order-details__product__link)>*:not(:last-child) {
    border-left: 2px solid var(--color-grey-dark-2)
}

@media only screen and (max-width: 56.25em) {
    .order-details__product:has(.order-details__product__link)>*:not(:last-child) {
        border: none;
        display: flex;
        flex-direction: column
    }
}

@media only screen and (max-width: 56.25em) {
    .order-details__product:has(.order-details__product__link)>* {
        margin: 0
    }
}

.order-details__product__link {
    color: inherit;
    font-weight: 700
}

.order-details__product__link :visited {
    color: inherit
}

.order-details__product__link :hover {
    color: var(--color-primary)
}

@media only screen and (max-width: 56.25em) {
    .order-details__product__link {
        font-weight: 800
    }

    .order-details__product__link span {
        margin: 0
    }
}

.order-details__product__item {
    margin-inline: 5px
}

.order-details__product--column {
    display: flex;
    flex-direction: column;
    align-items: center
}

@media only screen and (max-width: 37.5em) {
    .order-details__product--column {
        align-items: stretch
    }
}

.order-details__product--column:has(.order-details__product__link)>*:not(:last-child) {
    border-left: none
}

@media only screen and (max-width: 56.25em) {
    .order-details__product--column:has(.order-details__product__link)>*:not(:last-child) {
        flex-direction: row
    }
}

.order-details__icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 3px;
    fill: #00aa2f
}

.order-details__warning {
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 600
}

.product {
    display: flex;
    direction: rtl;
    flex-wrap: wrap;
    justify-content: space-evenly
}

@media only screen and (max-width: 37.5em) {
    .product {
        padding: 2rem;
        gap: 3rem
    }
}

.product__slider {
    align-self: center;
    flex: 0 0 30%
}

@media only screen and (max-width: 56.25em) {
    .product__slider {
        flex: 0 0 35%
    }
}

@media only screen and (max-width: 37.5em) {
    .product__slider {
        flex: 0 0 100%
    }
}

.product__details {
    display: flex;
    flex-direction: column;
    flex: 0 0 65%
}

@media only screen and (max-width: 56.25em) {
    .product__details {
        flex: 0 0 60%
    }
}

@media only screen and (max-width: 37.5em) {
    .product__details {
        flex: 0 0 100%
    }
}

.product__details .btn-link {
    align-self: center;
    text-align: center
}

@media only screen and (max-width: 37.5em) {
    .product__details .btn-link {
        width: 100%
    }
}

.product__name {
    font-size: 2.4rem;
    text-transform: uppercase;
    font-weight: 700
}

.product__sub-details span {
    font-size: 1.4rem;
    font-weight: 500
}

@media only screen and (max-width: 37.5em) {
    .product__sub-details span {
        font-weight: 600
    }
}

@media only screen and (max-width: 37.5em) {
    .product__sub-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem
    }
}

.product__rating {
    display: flex;
    align-items: center;
    margin-block: 1rem
}

@media only screen and (max-width: 37.5em) {
    .product__rating {
        margin-block: 0
    }
}

.product__rating__count {
    margin-left: 1rem;
    color: var(--color-grey-dark-3);
    font-size: 1.3rem;
    font-weight: 500
}

.product__rating__star {
    direction: ltr
}

.product__rating__icon {
    width: 1.75rem;
    height: 1.75rem;
    fill: #f8ab27
}

.product__rating__icon--inactive {
    fill: #d8d8d8
}

.product__price {
    display: flex;
    align-items: center;
    font-size: 2.4rem;
    font-weight: 700
}

@media only screen and (max-width: 37.5em) {
    .product__price {
        justify-content: center
    }
}

.product__price__value {
    letter-spacing: .25rem
}

.product__price__label {
    color: var(--color-primary);
    margin-right: .5rem
}

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

@media only screen and (max-width: 37.5em) {
    .product__color {
        text-align: center
    }
}

.product__color__label {
    font-size: 2rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-grey-dark-3)
}

.product__color__box {
    margin-top: 1rem;
    display: flex;
    align-items: center
}

@media only screen and (max-width: 37.5em) {
    .product__color__box {
        justify-content: center
    }
}

.product__color__circle {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-primary);
    border-radius: 100%;
    margin-left: 2rem;
    cursor: pointer;
    position: relative
}

.product__color__circle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.75rem;
    height: 3.75rem;
    border: 1px solid var(--color-primary);
    border-radius: 100%;
    display: none
}

.product__color__circle:hover::after {
    display: block
}

.product__color__circle:has(:checked)::after {
    display: block
}

.product__color__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

@media only screen and (max-width: 37.5em) {
    .product__size {
        text-align: center
    }
}

.product__size__label {
    font-size: 1.8rem;
    margin-top: 2rem;
    border-bottom: 1px solid var(--color-grey-dark-3)
}

.product__size__box {
    display: flex;
    flex-wrap: wrap
}

@media only screen and (max-width: 37.5em) {
    .product__size__box {
        justify-content: center
    }
}

.product__size__item {
    margin-left: 1rem;
    border: 2px solid var(--color-grey-dark-3);
    cursor: pointer;
    border-radius: 6px;
    padding: 0 1rem;
    flex: 0 0 10%;
    margin-top: 1rem
}

.product__size__item:hover {
    border-color: var(--color-primary)
}

@media only screen and (max-width: 48em) {
    .product__size__item {
        flex: 0 0 15%
    }
}

@media only screen and (max-width: 37.5em) {
    .product__size__item {
        padding: .25rem;
        flex: 0 0 20%
    }
}

.product__size__item:has(:checked) {
    border-color: var(--color-primary)
}

.product__size__value {
    font-size: 1.6rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.product__size__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.product__extra-details {
    border: 1px solid #000;
    margin-top: 4rem;
    direction: rtl;
    margin-inline: 2rem;
    border-radius: 1rem;
    padding: 2rem
}

.product .swiper {
    width: 100%;
    height: 100%
}

.product .swiper-slide {
    width: 100% !important;
    border-radius: 1.2rem
}

.product .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.product .swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.product .swiper-slide {
    background-size: cover;
    background-position: center
}

.product .mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 20px 0
}

.product .mySwiper .swiper-slide {
    width: 25% !important;
    height: 100%;
    border-radius: 1.2rem
}

.product .mySwiper .swiper-slide-thumb-active {
    border: 1px solid var(--color-primary)
}

.product .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: inherit
}

.product .swiper-scrollbar-drag {
    background-color: var(--color-primary)
}

.rule {
    margin-top: 7rem;
    direction: rtl
}

.rule__wrapper {
    border: 3px solid var(--color-primary);
    margin: 4rem 2rem;
    padding: 3rem 1rem;
    border-radius: 5rem;
    position: relative
}

.rule__wrapper .card-slider {
    flex-wrap: wrap
}

.rule__wrapper .card-slider__top {
    border-bottom: none
}

@media only screen and (max-width: 26.5625em) {
    .rule__wrapper .card-slider__color-box {
        margin-right: 0
    }
}

.rule__wrapper .card-slider>* {
    transform: scale(0.95);
    box-shadow: .2rem .2rem .4rem rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.4);
    flex: 0 1 25%;
    background-color: var(--color-primary)
}

@media only screen and (max-width: 48em) {
    .rule__wrapper .card-slider>* {
        flex: 0 1 33.3333333333%
    }
}

@media only screen and (max-width: 37.5em) {
    .rule__wrapper .card-slider>* {
        flex: 0 1 50%
    }
}

@media only screen and (max-width: 20em) {
    .rule__wrapper .card-slider>* {
        flex: 0 1 100%
    }
}

.rule__wrapper .card-slider__name,
.rule__wrapper .card-slider__price {
    font-size: 2rem;
    color: #fff
}

@media only screen and (max-width: 26.5625em) {

    .rule__wrapper .card-slider__name,
    .rule__wrapper .card-slider__price {
        font-size: 1.6rem
    }
}

.rule__wrapper .card-slider__discount-price {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    -webkit-text-decoration: 2px line-through rgba(0, 0, 0, 0.8);
    text-decoration: 2px line-through rgba(0, 0, 0, 0.8)
}

@media only screen and (max-width: 26.5625em) {
    .rule__wrapper .card-slider__discount-price {
        font-size: 1.1rem
    }
}

.rule__wrapper .card-slider__price__label {
    color: #fff
}

.rule__label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-primary);
    color: #fff;
    clip-path: polygon(3% 0, 97% 0, 100% 25%, 100% 75%, 97% 100%, 4% 100%, 0 75%, 0% 25%);
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 2.4rem
}

@media only screen and (max-width: 48em) {
    .rule__label {
        font-size: 2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .rule__label {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .rule__label {
        width: 70%
    }
}

.rule__label__off {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 800
}

.rule__item {
    padding: 4rem
}

@media only screen and (max-width: 37.5em) {
    .rule__item {
        padding: 2rem
    }
}

.rule__text {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: justify;
    line-height: 1.75;
    margin-top: .5rem
}

.search-page__wrapper {
    border: 2px solid rgba(0, 0, 0, 0.4);
    margin: 2rem;
    padding: 3rem 1rem;
    border-radius: 5rem
}

.search-page__wrapper .card-slider {
    flex-wrap: wrap;
    direction: rtl;
    justify-content: start
}

@media only screen and (max-width: 26.5625em) {
    .search-page__wrapper .card-slider__color-box {
        margin-right: 0
    }
}

.search-page__wrapper .card-slider>* {
    transform: scale(0.9);
    box-shadow: .2rem .2rem .4rem rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.4);
    flex: 0 1 25%
}

@media only screen and (max-width: 48em) {
    .search-page__wrapper .card-slider>* {
        flex: 0 1 33.3333333333%
    }
}

@media only screen and (max-width: 37.5em) {
    .search-page__wrapper .card-slider>* {
        flex: 0 1 50%
    }
}

@media only screen and (max-width: 20em) {
    .search-page__wrapper .card-slider>* {
        flex: 0 1 100%
    }
}

.search-page__wrapper .card-slider__name,
.search-page__wrapper .card-slider__price {
    font-size: 2rem
}

@media only screen and (max-width: 26.5625em) {

    .search-page__wrapper .card-slider__name,
    .search-page__wrapper .card-slider__price {
        font-size: 1.6rem
    }
}

.search-page__wrapper .card-slider__discount-price {
    font-size: 1.4rem
}

@media only screen and (max-width: 26.5625em) {
    .search-page__wrapper .card-slider__discount-price {
        font-size: 1.1rem
    }
}

.search-page__title {
    text-align: center;
    margin-block: 2rem;
    direction: rtl
}

.search-page__title h6 {
    font-size: 2.4rem;
    word-spacing: 3px
}

.search-page__not-found {
    display: flex;
    flex-direction: column;
    align-items: center
}

.search-page__not-found h3 {
    direction: rtl;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 4rem
}

.shop__wrapper {
    display: flex;
    flex-direction: row-reverse;
    border: 2px solid rgba(0, 0, 0, 0.4);
    margin: 2rem;
    padding: 3rem 1rem;
    border-radius: 5rem;
    gap: 3rem
}

@media only screen and (max-width: 37.5em) {
    .shop__wrapper {
        flex-direction: column
    }
}

.shop__wrapper .card-slider {
    flex-wrap: wrap;
    direction: rtl;
    justify-content: start
}

@media only screen and (max-width: 26.5625em) {
    .shop__wrapper .card-slider__color-box {
        margin-right: 0
    }
}

.shop__wrapper .card-slider>* {
    transform: scale(0.95);
    box-shadow: .2rem .2rem .4rem rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.4);
    flex: 0 1 33.3333333333%
}

@media only screen and (max-width: 37.5em) {
    .shop__wrapper .card-slider>* {
        flex: 0 1 50%
    }
}

@media only screen and (max-width: 20em) {
    .shop__wrapper .card-slider>* {
        flex: 0 1 100%
    }
}

.shop__wrapper .card-slider__name,
.shop__wrapper .card-slider__price {
    font-size: 2rem
}

@media only screen and (max-width: 26.5625em) {

    .shop__wrapper .card-slider__name,
    .shop__wrapper .card-slider__price {
        font-size: 1.6rem
    }
}

.shop__wrapper .card-slider__discount-price {
    font-size: 1.4rem
}

@media only screen and (max-width: 26.5625em) {
    .shop__wrapper .card-slider__discount-price {
        font-size: 1.1rem
    }
}

.shop__filter {
    background-color: #fff;
    direction: rtl;
    transition: all .4s
}

.shop__cards {
    flex: 1;
    align-self: center
}

.shop__not-found {
    display: flex;
    flex-direction: column;
    align-items: center
}

.shop__not-found h3 {
    direction: rtl;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 4rem
}

.shopping-cart {
    margin: 2rem
}

.shopping-cart__box {
    border: 2px solid #000;
    border-radius: 3rem;
    padding: 2rem;
    direction: rtl
}

@media only screen and (max-width: 20em) {
    .shopping-cart__box {
        padding: 1rem
    }
}

.shopping-cart__header {
    display: ruby-text;
    border-bottom: 2px solid var(--color-grey-dark-2);
    font-size: 1.3rem;
    line-height: 2.25
}

@media only screen and (max-width: 56.25em) {
    .shopping-cart__header {
        display: none
    }
}

.shopping-cart__title {
    flex: 1
}

.shopping-cart__body {
    padding: 1rem
}

@media only screen and (max-width: 56.25em) {
    .shopping-cart__body {
        padding: 0
    }
}

.shopping-cart__condition {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    direction: rtl;
    border-bottom: 3px dotted #000;
    padding-bottom: 1rem
}

.shopping-cart__condition h6 {
    word-spacing: 1px;
    font-size: 1.6rem
}

@media only screen and (max-width: 37.5em) {
    .shopping-cart__condition h6 {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 20em) {
    .shopping-cart__condition h6 {
        font-size: 1.2rem
    }
}

.shopping-cart__condition h6 span {
    color: var(--color-primary)
}

.shopping-cart__condition__title h3 {
    color: var(--color-primary);
    font-size: 2.2rem
}

@media only screen and (max-width: 37.5em) {
    .shopping-cart__condition__title h3 {
        font-size: 1.6rem
    }
}

.shopping-cart__form {
    display: flex;
    flex-direction: column;
    align-items: center
}

.shopping-cart__form .checkbox {
    padding: 0;
    margin-block: 2rem
}

.shopping-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-block: 4rem
}

.shopping-cart__empty__icon {
    width: 8rem;
    height: 8rem;
    fill: var(--color-primary)
}

.shopping-cart__empty h3 {
    font-size: 2.4rem
}

.offer {
    margin-top: 7rem
}

.offer__wrapper {
    border: 3px solid var(--color-primary);
    margin: 4rem 2rem;
    padding: 3rem 1rem;
    border-radius: 5rem;
    position: relative
}

.offer__wrapper .card-slider {
    flex-wrap: wrap
}

.offer__wrapper .card-slider__top {
    border-bottom: none
}

@media only screen and (max-width: 26.5625em) {
    .offer__wrapper .card-slider__color-box {
        margin-right: 0
    }
}

.offer__wrapper .card-slider>* {
    transform: scale(0.95);
    box-shadow: .2rem .2rem .4rem rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.4);
    flex: 0 1 25%;
    background-color: var(--color-primary)
}

@media only screen and (max-width: 48em) {
    .offer__wrapper .card-slider>* {
        flex: 0 1 33.3333333333%
    }
}

@media only screen and (max-width: 37.5em) {
    .offer__wrapper .card-slider>* {
        flex: 0 1 50%
    }
}

@media only screen and (max-width: 20em) {
    .offer__wrapper .card-slider>* {
        flex: 0 1 100%
    }
}

.offer__wrapper .card-slider__name,
.offer__wrapper .card-slider__price {
    font-size: 2rem;
    color: #fff
}

@media only screen and (max-width: 26.5625em) {

    .offer__wrapper .card-slider__name,
    .offer__wrapper .card-slider__price {
        font-size: 1.6rem
    }
}

.offer__wrapper .card-slider__discount-price {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    -webkit-text-decoration: 2px line-through rgba(0, 0, 0, 0.8);
    text-decoration: 2px line-through rgba(0, 0, 0, 0.8)
}

@media only screen and (max-width: 26.5625em) {
    .offer__wrapper .card-slider__discount-price {
        font-size: 1.1rem
    }
}

.offer__wrapper .card-slider__price__label {
    color: #fff
}

.offer__label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-primary);
    color: #fff;
    clip-path: polygon(3% 0, 97% 0, 100% 25%, 100% 75%, 97% 100%, 4% 100%, 0 75%, 0% 25%);
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 2.4rem
}

@media only screen and (max-width: 48em) {
    .offer__label {
        font-size: 2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .offer__label {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 26.5625em) {
    .offer__label {
        width: 70%
    }
}

.offer__label__off {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 800
}

.offer__title {
    text-align: center;
    margin-block: 2rem;
    direction: rtl
}

.offer__title h6 {
    font-size: 2.4rem;
    word-spacing: 3px
}

.offer__not-found {
    display: flex;
    flex-direction: column;
    align-items: center
}

.offer__not-found h3 {
    direction: rtl;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 4rem
}

.success-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    direction: rtl;
    gap: 2rem;
    min-height: 56vh;
    min-height: 56svh
}

@media only screen and (max-width: 37.5em) {
    .success-payment {
        min-height: auto;
        min-height: auto
    }
}

.success-payment__icon {
    fill: #01cc60;
    filter: drop-shadow(-0.4rem 0rem 1rem rgba(1, 204, 96, 0.7))
}

@media only screen and (max-width: 37.5em) {
    .success-payment__icon {
        width: 10rem;
        height: 10rem
    }
}

.success-payment__text {
    font-size: 3rem;
    font-weight: 500
}

@media only screen and (max-width: 20em) {
    .success-payment__text {
        font-size: 2rem
    }
}

/*# sourceMappingURL=main.css.map */