/* 
// SECTION BASE
*/
:root {
    --color-main: #FF4F04;
    --color-new: #A4EC3E;
    --color-sale: #F0F287;
    --color-top: #FFD1F5;
    --color-sale-value: #FF4F04;
    --color-online: #A4EC3E;
    --color-completed: #F0F287;
}

.sale {
    color: var(--color-sale);
}

.price {
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

*:focus {
    outline: none;
}

.tc {
    text-align: center;
}

.tr {
    text-align: right;
}

.text {
    color: #151515;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.text.hero {
    font-size: 1.25rem;
}

a.back {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    padding-left: 2.560rem;
}

a.back::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1.125rem);
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/arrow-right-lined.svg);
    transform: rotate(-180deg);
}

.mt2 {
    margin-top: 2rem;
}

.accordion-button,
.accordion-button.collapsed {
    background: none !important;
    color: var(--color-main);
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.accordion-button {
    color: var(--color-main) !important;
}

.accordion-button.collapsed {
    color: #151515 !important;
}

body {
    font-family: "Istok Web";
    background-color: #151515;
}

main {
    min-height: 80vh;
    background-color: #FFFFFF;
}

input:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0 1000px #f0f0f0 inset !important;
    /* změna pozadí */
    -webkit-text-fill-color: #333 !important;
    /* změna barvy textu */
    transition: background-color 5000s ease-in-out 0s;
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
}


.scrollbox {
    scrollbar-width: thin;
    scrollbar-color: var(--color-main) #f1f1f1;
}

.scrollbox::-webkit-scrollbar {
    width: 8;
}

.scrollbox::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scrollbox::-webkit-scrollbar-thumb {
    background-color: var(--color-main);
    border-radius: 4px;
    border: 2px solid #f1f1f1;
}

.scrollbox::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-main);
}

.scrollbox::-webkit-scrollbar-thumb {
    background-color: var(--color-main);
    border-radius: 4px;
}

/* !SECTION */

/* 
// SECTION H
*/
h1 {
    position: relative;
    margin: 0;
    padding: 0;
    color: #151515;
    font-family: "Noto Sans";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

h1.done::after {
    content: "";
    position: absolute;
    right: -2.5rem;
    top: calc(50% - 0.750rem);
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/done.svg);
}

h2.color {
    position: relative;
    display: block;
    padding-top: 1.69rem;
    padding-bottom: 3.75rem;
    text-align: center;

    color: #151515;
    font-family: "Noto Sans";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

h2.color::before {
    content: "";
    position: absolute;
    left: calc(50% - 3.1875rem);
    top: 0;
    display: block;
    width: 6.375rem;
    height: 0.375rem;
    flex-shrink: 0;
    background-color: var(--color-new);
}

h2.color.top::before {
    background-color: var(--color-top);
}

h2.color.new::before {
    background-color: var(--color-new);
}

h2.color.small {
    font-size: 1.5rem;
    font-weight: 600;
}

h2.color.small::before {
    background-color: #151515;
}

h2.accordion-header {
    background: none;
}

h2.blog {
    margin-bottom: 1.44rem;
    color: #151515;
    font-family: 'Anton', sans-serif;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

h2.order {
    margin: 0;
    padding: 0;

    color: #151515;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

h3 {
    margin: 0;
    padding: 0;
}

h3.product {
    color: #151515;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

h3.footer {
    color: #FFF;
    font-family: "Noto Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

h3.underline {
    position: relative;
    padding-top: 1.69rem;
    color: #151515;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

h3.underline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 7.5rem;
    height: 0.375rem;
    background-color: #000;
}

h3.order {
    margin: 0;
    padding: 0 0 1rem 0;
    color: #151515;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    border-bottom: 1px solid #F0F0F0;
}

h3.order span {
    color: #FF4F04;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

h3.order-detail {
    padding-bottom: 2rem;
    color: #000;
    font-family: "Noto Sans";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

h4 {
    margin: 0;
    padding: 0;
}

h4.footer {
    color: #FFF;
    font-family: "Istok Web";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

h4.newsletter {
    padding-bottom: 1.69rem;
    color: #FFF;
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 991.98px) {
    h3.footer {
        display: block;
        line-height: 1.25rem;
        height: 2.5rem;
    }
}

/* !SECTION */

/*
// SECTION HEADER
*/
header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 4.3125rem;
    padding: 0 2.31rem;
    background: var(--color-main);
}

header.mini {
    height: 3.3125rem;
}

header.mini .tool {
    height: 3.3125rem;
}

header>div {
    position: relative;
    flex-grow: 1;
}

header>div:first-child {}

header>div:nth-child(2) {
    flex-grow: 2;
}

header>div:last-child {
    display: flex;
    flex-grow: 2;
    justify-content: flex-end;
    gap: 1.69rem;
}

header .logo {
    display: block;
    width: 6.9375rem;
    height: 1.75rem;

    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/logo.png);

    font-size: 0;
}

header .search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 32.5rem;
    height: 2.5rem;
    padding: 0 0.56rem;
    flex-shrink: 0;
    border: none;
    border-radius: 0.125rem;
    background: #FFF;
}

header .input-search {
    max-width: 90%;
    height: 2.5rem;
    border: none;
    border-radius: 0.125rem;
    flex-grow: 1;
}

header .input-search:-webkit-autofill {
    box-shadow: none !important;
    -webkit-text-fill-color: inherit !important;
}

header .button-search {
    position: absolute;
    right: 0.56rem;
    top: calc(50% - 0.6875rem);
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    border: none;
    background: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-search.svg);
    font-size: 0;
}

header #search-results {
    display: none;
    position: absolute;
    left: 0;
    top: calc(2.5rem - 0.125rem);
    width: 100%;
    min-height: 24rem;
    padding: 1.5rem 0.56rem;
    background-color: #FFFFFF;
    z-index: 999;
    border-radius: 0 0 0.125rem 0.125rem;
    box-shadow: 0 23px 34.3px -1px rgba(0, 0, 0, 0.25);
}

header #search-results h3 {
    padding-bottom: 1.5rem;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

header #search-results .items {
    display: table;
    width: 100%;
}

header #search-results .items>div {
    display: table-row;
    transition: background-color .25s ease;
}

header #search-results .items>div>div {
    display: table-cell;
    vertical-align: middle;
    padding: .5rem;
    border-radius: 0.125rem;
    cursor: pointer;
}

header #search-results .items>div:hover {
    background-color: #EAEAEA;
}

header #search-results .items>div>div:first-child img {
    display: block;
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    aspect-ratio: 1/1;
    border-radius: 0.125rem;
}

header #search-results .items>div>div:nth-child(2) {
    padding-left: 1rem;
    padding-right: 1rem;
}

header #search-results .items>div>div:last-child {
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: right;
}

header #search-results .items a {
    text-decoration: none;
    color: inherit;
    font-weight: 400;
}

header #search-results .meta-categories {
    padding-bottom: 1.5rem;
    padding-left: 6rem;
}

header #search-results .meta-categories a {
    text-decoration: none;
    color: inherit;
    font-weight: 700;
}

header .tool {
    display: block;
    width: 1.875rem;
    height: 4.3125rem;
    flex-shrink: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.875rem 1.875rem;
}

header .tool-login {
    background-image: url(../gfx/header-tool-login.svg);
}

header .tool-favorite {
    background-image: url(../gfx/header-tool-favorite.svg);
}

header .tool-cart {
    background-image: url(../gfx/header-tool-cart.svg);
}

header .tool-search {
    background-image: url(../gfx/header-tool-search.svg);
}

header .tool-search,
header .hamburger {
    display: none;
}

header .tool-user {
    position: relative;
    display: flex;
    align-items: center;
    color: #FFF;
    font-family: "Noto Sans";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-decoration: none;
}

header .tool-user>span.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.62rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #D74203;


    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.5rem 1.5rem;
    background-image: url(../gfx/avatar.svg);
    font-size: 0;
}

header .help {
    color: #FFF;
    font-family: "Noto Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

header .help a {
    padding: 0 1rem;
    color: #FFF;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}

header .help a>span {
    font-weight: 400;
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    header .search-box {
        width: 18rem !important;
    }
    header #search-results {
        min-height: 18rem;
    }
    header .help a {
        display: block;
        padding: 0;
    }
}

@media (max-width: 1499.98px) {
    header .search-box {
        width: 26rem;
    }
    header .help {
        font-size: 0.875rem;
        padding-left: 1rem;
    }
}

@media (max-width: 991.98px) {

    header.mini .help {
        font-size: 0.875rem;
        padding-left: 0;
    }

    header.mini .help a {
        display: block;
        padding: 0;
        font-size: 0.875rem;
    }

    header.mini .help span {
        display: none;
    }

    header.mini .tool-login {
        display: block;
    }

    header .tool-user>span.mail {
        display: none;
    }

    header .tool-user>span.avatar {
        margin-right: 0;
    }
}

@media (max-width: 575.98px) {
    header .help {
        display: none;
    }
}

nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 3.6875rem;
    padding: 0 2.31rem;
    background: #000;
}

nav>div:last-child {
    display: flex;
    justify-content: flex-end;
    flex-grow: 2;
}

menu {
    display: flex;
    gap: 1.81rem;
    margin: 0;
    padding: 0;
}

menu a {
    display: flex;
    align-items: center;
    height: 3.6875rem;
    color: #FFF;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    transition: color .25s;
}

menu a:hover {
    color: #808080;
}

nav .switch-country {
    display: flex;
    align-items: center;
    height: 3.6875rem;
    cursor: pointer;
    color: #FFF;
    font-family: "Istok Web";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

nav .switch-country>div {
    position: relative;
    padding-left: 1.44rem;
    padding-right: 1rem;
}

nav .switch-country>div>span {
    color: #808080;
}

nav .switch-country>div::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.5rem);
    display: block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/earth.svg);
}

nav .switch-country>div::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 0.5rem);
    display: block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/arrow-down-small.svg);
}

@media (max-width: 991.98px) {
    body {
        position: relative;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1002;
        padding: 0 1rem;
    }

    header>div:nth-child(2) {
        flex-grow: 0;
    }

    header>div:nth-child(3) {
        gap: 1.25rem;
    }

    header .tool {
        display: block;
        width: 1.5rem;
        height: 4.3125rem;
        flex-shrink: 0;
        font-size: 0;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1.5rem 1.5rem;
    }

    header .tool-favorite {
        display: none
    }

    header .tool-search {
        display: block;
    }

    header .hamburger {
        display: block;
        width: 2.5rem;
        border-left: 1px solid #FF834E;
        background-image: url(../gfx/hamburger-menu.svg);
        background-position: center right;
    }

    header .hamburger.active {
        background-image: url(../gfx/hamburger-menu-active.svg);
    }

    main {
        padding-top: 4.3125rem;
    }

    nav {
        display: none;
        position: fixed;
        top: 4.125rem;
        left: 0;
        z-index: 1002;
        min-height: 80vh;
    }

    nav menu {
        flex-direction: column;
        gap: 0;
        padding-top: 2.5rem;
    }

    nav menu>a {
        border-bottom: 1px solid #808080;
    }

    nav.mini {
        top: 3.3125rem;
    }

    header .logo {
        display: block;
        width: 4rem;
        height: 1rem;
        padding-right: .5rem;
        flex-shrink: 0;

        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../gfx/logo.png);

        font-size: 0;
    }

    header .search-form-box {
        display: none;
        position: absolute;
        width: 100%;
        top: 4.3125rem;
        left: 0;
        z-index: 9999;
        background-color: #000;
    }

    header .search-box {
        position: relative;
        display: block;
        width: 100%;
        height: 3.5rem;
        padding: 0.5rem;
        position: relative;
        background-color: #000;
        z-index: 9999;
    }

    header .input-search {
        position: relative;
        display: block;
        width: 100%;
        max-width: unset;
        padding: 0 2rem 0 1rem;
        background-color: #fff;
    }

    header .button-search {
        position: absolute;
        right: 1.5rem;
        top: calc(50% - 0.6875rem);
        display: block;
        width: 1.375rem;
        height: 1.375rem;
        border: none;
        background: none;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../gfx/icon-search.svg);
        font-size: 0;
    }

    header #search-results {
        display: none;
        top: 3.5rem;
        max-height: 80vh;
        overflow-y: auto;
    }

}

/*!SECTION */

/*
//SECTION SLIDER
*/
#slider {
    height: 36rem;
    padding: 2.38rem 0;
    background-color: #000;
    background-size: cover;
    background-position: 0% 100%;
    background-image: url(../img/background.png);
}

#slider .slider-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 32.24rem;
    padding: 0;
    border-radius: 0.125rem;
    /*background: rgba(21, 21, 21, 0.45);*/
}

#slider .slide-products {
    display: flex;
    gap: 0.69rem;
    padding-bottom: 1rem;

    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

#slider .slide {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.87rem;
    height: 100%;
}

#slider .slide .slide-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.69rem;
    border-left: 1px solid #FFF;

    color: #FFF;
    font-family: "Noto Sans";
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

#slider .slide .slide-text span {
    display: block;
    color: #FFF;
    font-family: "Noto Sans";
    font-size: 3.125rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

#slider .slide .slide-text span.free-bonus {
    position: relative;
    margin-top: 3.5rem;
    padding-left: 1.94rem;

    color: #F0F287;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

#slider .slide .slide-text span.free-bonus::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.625rem);
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/plus-sale.svg);
}

#slider .slide h3 {
    margin: 0;
    padding: 0;
    color: #FFF;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#slider .slide-products>div {
    flex: 1 0 22%;
    box-sizing: border-box;
    max-width: 25%;
    padding-bottom: 1rem;
    scroll-snap-align: start;
}

#slider .slide-products>div a {
    text-decoration: none;
}

#slider .slide-products>div .slide-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    background-color: #fff;
    border-radius: 0.125rem;
}

#slider .slide-products>div img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.125rem;
}

#slider .slide-products>div .price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 0.5rem;
    margin-bottom: 0.87rem;
    padding-top: 0.69rem;
}

#slider .slide-products>div .price-info>div:first-child {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

#slider .slide-products>div price {
    color: #FFF;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#slider .slide-products>div price.before {
    font-size: 1rem;
    text-decoration-line: line-through;
}

#slider .slide-products>div sale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5625rem;
    height: 2.375rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/sale-sticker.svg);

    color: #000;
    font-family: "Istok Web";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#slider .slider-controls {
    display: flex;
    width: 100%;
    height: 3.81rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.69rem;
    padding: 0.69rem 0;
    border-top: 1px solid #505050;
}

#slider .slider-controls .prev button,
#slider .slider-controls .next button {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0;

    background: none;
    border: none;
    background-repeat: no-repeat;
    background-size: contain;
}

#slider .slider-controls .prev button {
    background-image: url(../gfx/arrow-left-white.svg);
}

#slider .slider-controls .next button {
    background-image: url(../gfx/arrow-right-white.svg);
}

#slider .slider-controls .links {
    display: flex;
    gap: 1.81rem;
}

#slider .slider-controls .links a {
    position: relative;
    display: flex;
    height: 3.81rem;
    align-items: center;
    gap: 0.69rem;
    color: #FFF;
    text-align: center;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

#slider .slider-controls .links a>span {
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

#slider .slider-controls .links a.active {
    font-weight: 700;
}

#slider .slider-controls .links a.active::before {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 0.1875rem;
    background-color: #FFF;
}

@media (max-width: 991.98px) {
    #slider {
        height: unset;
        min-height: 34rem;
        padding: 2.38rem 0;
        background-color: #000;
        background-size: cover;
        background-position: 50% 100%;
        background-image: url(../img/background.png);
    }

    #slider .slider-box {
        display: flex;
        justify-content: center;
        min-height: 30.24rem;
        padding: 1rem .33rem;
        border-radius: 0.125rem;
        background: none;
    }

    #slider .slide-products>div {
        flex: 1 0 40%;
        box-sizing: border-box;
        max-width: 50%;
        padding-bottom: 1rem;
        scroll-snap-align: start;
    }
}

@media (max-width: 575.98px) {
    #slider .slider-controls {
        display: none;
    }
}

/*!SECTION */

/*
//SECTION BANNERS
*/
#banners {
    margin-top: 2.94rem;
}

#banners .banners {
    display: flex;
    gap: 1rem;
    height: auto;
    overflow: hidden;
}

#banners .banners>div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#banners .aside-1 {
    flex-basis: 58%;
}

#banners .aside-2 {
    flex-basis: 42%;
    gap: 1rem;
}

#banners .banner-big {
    flex: 1;
}

#banners .banner-small {
    flex: 1;
}

#banners .banner-small:last-child {
    flex-grow: 10;
}

#banners .banner {
    border-radius: 0.125rem;
}

#banners .banner a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

#banners .banner img {
    position: relative;
    display: block;
    object-fit: cover;
    object-position: 100% 0%;
    width: 100%;
    height: 100%;
    border-radius: 0.125rem;
}

@media (max-width: 991.98px) {
    #banners .banners {
        flex-direction: column;
    }
}

/*!SECTION */

/* 
// SECTION ADVANTAGES
*/
#advantages {
    display: flex;
    gap: 3.69rem;
    align-items: center;
    justify-content: center;
    padding: 9rem 0;
}

#advantages>div {
    position: relative;
    padding-left: 4.875rem;

    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#advantages>div::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1.9375rem);
    display: block;
    width: 3.875rem;
    height: 3.875rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

#advantages>div.advantage-1::before {
    background-image: url(../gfx/advantage-1.svg);
}

#advantages>div.advantage-2::before {
    background-image: url(../gfx/advantage-2.svg);
}

#advantages>div.advantage-3::before {
    background-image: url(../gfx/advantage-3.svg);
}

#advantages>div.advantage-4::before {
    background-image: url(../gfx/advantage-4.svg);
}

@media (max-width: 991.98px) {
    #advantages {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4.69rem 1.69rem;
        padding: 6.5rem 1rem;
    }

    #advantages>div {
        flex: 1 0 calc(50% - 1.69rem);
        padding-left: 0;
        font-size: 0.875rem;
        text-align: center;
    }

    #advantages>div::before {
        content: "";
        position: absolute;
        top: -2.69rem;
        left: calc(50% - 1rem);
        display: block;
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

/*!SECTION */

/*
// SECTION SECTION
*/
.section {
    padding-bottom: 8rem;
}

.section.about {
    padding-top: 9rem;
    background: #F8F8F8;
}

.section.evaluation {
    padding-top: 9rem;
    padding-bottom: 18rem;
    background-color: #FFFFFF;
}

@media (max-width: 991.98px) {
    .section {
        padding-bottom: 4rem;
    }

    .section.about {
        padding-top: 5rem;
    }

    .section.evaluation {
        padding-top: 5rem;

    }

}

.section .view-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 6.19rem;
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.section .view-more a {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.section .view-more a::after {
    content: "";
    position: absolute;
    right: -2.560rem;
    top: calc(50% - 1.125rem);
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/arrow-right-lined.svg);
}

@media (max-width: 991.98px) {
    .section .view-more {
        padding-left: 6.19rem;
        justify-content: center;
    }
}

/*!SECTION */

/*
// SECTION PRODUCTS
*/
.products {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.products>.product {
    margin: 0;
    padding: 0 0 5rem 0;
    flex-basis: calc(25% - 1rem);
    flex-grow: 0;
}

.products .product div {
    position: relative;
}

.products .product h3 {
    display: block;
    height: 2.5rem;
    line-height: 1.25rem;
}

.products .product a {
    display: block;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.products .product img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1/1;
    user-select: none;
}

.products .product .tag {
    position: absolute;
    top: -2rem;
}

.products .product div.price {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 1rem;
    height: 3.570rem;
    line-height: 1.25rem;
}

.products .price {
    color: #090909;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.products .price .before {
    display: block;

    color: #151515;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: line-through;
}

span.sale-value {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.69rem 1.69rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../gfx/sale-value.svg);
    background-position: center center;
    font-family: "Noto Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    color: var(--color-sale-value);
}

@media (max-width: 991.98px) {
    .products .product {
        flex-basis: 45%;
        padding: 0 0 2.5rem 0;
    }
}

/* !SECTION */

/*
// SECTION TAGS
*/
.tag {
    display: inline-block;
    z-index: 100;
    padding: 0 0.69rem 0 1rem;
    color: #090909;
    font-family: "Istok Web";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    background-repeat: no-repeat;
    background-size: auto 116%;
}

.tag.new {
    background-image: url('../gfx/tag-new.svg');
}

.tag.outlet {
    background-image: url('../gfx/tag-sale.svg');
}

/* !SECTION */

/*
// SECTION ABOUT 
*/
.about-content {
    position: relative;
    padding-top: 4rem;
}

@media (max-width: 991.98px) {
    .about-content>div {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

.about-content::before {
    content: "";
    position: absolute;
    left: calc(50% - 3.1875rem);
    top: 0;
    display: block;
    width: 6.375rem;
    height: 0.375rem;
    flex-shrink: 0;
    background-color: var(--color-main);
}

.about-item a {
    color: inherit;
    text-decoration: none;
}

.about-item img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/2;
    margin-bottom: 1rem;
}

.about-item div {
    color: #151515;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* !SECTION */

/*
// SECTION FOOTER
*/
footer {
    position: relative;
    padding-top: 9rem;
    padding-bottom: 2.25rem;
    background-color: #151515;
}

footer .footer-info {
    padding-top: 2.19rem;
}

footer .footer-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .footer-info ul li a {
    font-family: "Istok Web";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.125rem;
    color: #FFFFFF;
    text-decoration: none;
    transition: color .25s;
}

footer .footer-info ul li a:hover {
    color: #808080;
}

footer .online-status {
    position: relative;
    padding-left: 1.62rem;
    color: var(--color-online);
    font-family: "Noto Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer .online-status::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.5rem);
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #505050;
}

footer .online-status.online::before {
    background-color: var(--color-online);
}

footer .contacts {
    margin: 1rem 0;

    color: #FFF;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

footer .contacts>div {
    padding: 0.45rem 0;
}

footer .contacts>div>span {
    color: #FFF;
    font-family: "Istok Web";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer .contacts a {
    color: inherit;
    text-decoration: none;
}

footer .networks {
    display: flex;
    gap: 1.19rem;
    margin-top: 2.5rem;
}

footer .networks>a {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

footer .networks>a.facebook {
    background-image: url(../gfx/network-facebook.svg);
}

footer .networks>a.instagram {
    background-image: url(../gfx/network-instagram.svg);
}

footer .networks>a.pinterest {
    background-image: url(../gfx/network-pinterest.svg);
}

footer .networks>a.youtube {
    background-image: url(../gfx/network-youtube.svg);
}

footer .countries {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding-top: 1.25rem;
}

footer .countries>a {
    position: relative;
    display: block;
    padding-left: 2rem;
    color: #FFF;
    font-family: "Istok Web";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}

footer .countries>a::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.5625rem);
    display: block;
    width: 1.625rem;
    height: 1.125rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

footer .countries>a.czech-republic::before {
    background-image: url(../gfx/flag-cz.svg);
}

footer .countries>a.italy::before {
    background-image: url(../gfx/flag-it.svg);
}

footer .payment-methods {
    padding-top: 3rem;
}

footer .copyright {
    margin-top: 3rem;
    color: #FFF;
    font-family: "Istok Web";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;

    opacity: 0.65;
}

footer .copyright a {
    color: #FFF;
    text-decoration: underline;
}

footer.mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 2.31rem;
}

footer.mini .copyright {
    margin: 0;
    padding: 0;
}

footer.mini .payment-methods {
    padding: 0;
}

footer.mini .payment-methods img {
    height: 2rem;
}

@media (max-width: 991.98px) {
    footer.mini {
        flex-direction: column;
    }
}

#newsletter {
    position: absolute;
    top: -9rem;
    display: block;
    width: 100%;
}

#newsletter .newsletter-out {
    background-color: #FF4F04;
}

#newsletter .newsletter-in {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2.12rem 0;
}

#newsletter .newsletter-in .text {
    color: #FFF;
    font-family: "Istok Web";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#newsletter .newsletter-in input.form-control {
    height: 2.5rem;
    background: #FFF;
    border: none;
    border-radius: 0;
}

#newsletter .newsletter-in .form-check-label {
    display: block;
    margin: 0 0 0 0.44rem;
    padding: 0;
    color: #FFF;
    font-family: "Istok Web";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#newsletter .newsletter-in .form-check-input {
    position: relative;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    border: 1px solid #FFF;
}

#newsletter .newsletter-in .form-check-input:checked::after {
    content: "";
    position: absolute;
    left: calc(50% - 0.375rem);
    top: calc(50% - 0.375rem);
    display: block;
    width: .75rem;
    height: .75rem;
    background-color: #FFF;
}

#newsletter .newsletter-in .form-check {
    display: flex;
    align-items: center;
    margin: 0.75rem 0 0 0;
    padding: 0;
}

#newsletter .newsletter-in .form-check-label a {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
}

#newsletter .newsletter-form {
    display: flex;
    min-width: 25rem;
    align-items: center;
}

#newsletter .newsletter-form>div:first-child {
    flex-grow: 1;
}

@media (max-width: 991.98px) {
    #newsletter .newsletter-in {
        flex-direction: column;
    }

    #newsletter .newsletter-form {
        min-width: unset
    }

    footer {
        padding-top: 16.5rem;
        padding-bottom: 5.25rem;
    }

    footer.catalog {
        padding-top: 5.25rem;
    }

    footer .payment-methods {
        text-align: center;
    }

    footer .networks {
        padding-bottom: 5.5rem;
        justify-content: center;
    }

    footer .contacts,
    footer .online-status-box {
        display: flex;
        justify-content: center;
    }

    footer .contacts {
        flex-direction: column;
        text-align: center;
    }

    footer h3.contact {
        text-align: center;
    }

}

/* !SECTION */

/*
// SECTION BUTTONS
*/
.button {
    position: relative;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    padding-left: 1.63rem;
    padding-right: 1.63rem;
    color: #FFF;
    background: none;
    background-color: var(--color-main);
    border: none;
    border-radius: 0.125rem;

    color: #FFF;
    text-align: center;

    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.button.black {
    border-radius: 0;
    background: #000;
}

.button.small {
    font-size: 0.8125rem;
}

.button.secondary {
    color: #151515;
    border: 2px solid #505050;
    background-color: #FFF;
}

.button.add-to-cart {
    height: 6.875rem;
}

.button.add-to-cart::before {
    content: "";
    position: absolute;
    left: 1.69rem;
    top: calc(50% - 1.125rem);
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/cart-white.svg);
}

.button.add-to-cart[disabled] {
    background-color: #D9D9D9;
}

.button.order {
    height: 6.875rem;
}

.button.send::before {
    content: "";
    position: absolute;
    left: 1.69rem;
    top: calc(50% - 1.125rem);
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/plane.svg);
}

.button.send>span {
    display: block;
    padding-top: 0.5rem;
    font-size: smaller;
}

.button.save {
    height: 6.875rem;
}

/* !SECTION */

/*
// SECTION CATALOG
*/
#catalog {
    padding: 3.75rem 0;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 2.75rem;
    padding-bottom: 3.69rem;
}

.breadcrumbs-items {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.breadcrumbs-items a {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-decoration: none;
    transition: color .25s;
}

.breadcrumbs-items a:hover {
    color: var(--color-main);
}

.breadcrumbs h1 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: 2.75rem;
    gap: 1rem;
}

.breadcrumbs h1>a,
.breadcrumbs h1>a:visited {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs h1>a {
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-right: 1rem;
    display: inline-block;
    border-right: 1px solid #000;
}

.breadcrumbs.order h1>a {
    border-right: none;
}

.breadcrumbs.last h1>a {
    border-right: 0;
}

.breadcrumbs.order h1.done {
    font-size: 1.25rem;
}

.breadcrumbs.order h1.done::after {
    right: -1rem;
}

.breadcrumbs.order {
    gap: 1.69rem;
}

.breadcrumbs.order h1 {
    padding-right: 0;
    border: none;
}

.breadcrumbs.order-summary h1.done::after {
    right: -2rem;
}

.submenu {
    display: flex;
    /*gap: 1.25rem;*/
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    margin-bottom: 4.75rem;
}

.submenu a {
    position: relative;
    display: inline-block;
    padding-left: 2.565rem;
    padding-right: 2.565rem;
    color: #000;
    font-family: "Noto Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-decoration: none;
}

.submenu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1.375rem);
    display: block;
    width: 0.0625rem;
    height: 2.75rem;
    flex-shrink: 0;
    background-color: #000;
}

.submenu a:first-child {
    padding-left: 0;
}

.submenu a:first-child::before {
    display: none;
}

.submenu>div {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

.submenu a.logout {
    padding-left: 2rem;
    padding-right: 0;
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: right;

    background-repeat: no-repeat;
    background-image: url(../gfx/logout.svg);
    background-position: left center;
    background-size: 1.5rem 1.5rem;
}


.submenu a.logout::before {
    display: none;
}

.order-steps {
    display: flex;
    gap: 1.69rem;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.order-steps a {
    position: relative;
    display: inline-block;
    padding-left: 4.565rem;

    color: #000;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-decoration: none;
}

.order-steps a:not([href]), .order-steps a:not([href]):hover {
    color: #CDCDCD;
}

.order-steps a::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.03125rem);
    display: block;
    width: 2.875rem;
    height: 0.0625rem;
    flex-shrink: 0;
    background-color: #000;
}

.order-steps a.active {
    color: #151515;
    font-family: "Noto Sans";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.order-steps a.done {
    padding-right: 1rem;
}

.order-steps a.done::after {
    content: "";
    position: absolute;
    right: -1rem;
    top: calc(50% - 0.750rem);
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/done.svg);
}


@media (max-width: 991.98px) {
    .breadcrumbs {
        display: block;
        padding-bottom: 1.5rem;
    }

    .breadcrumbs-items {
        display: flex;
        gap: 0.69rem 1.25rem;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
    }

    .breadcrumbs-items a {
        font-size: 1rem;
    }

    .breadcrumbs .order-steps {
        width: 100%;
        flex-direction: column;
    }

    .breadcrumbs .order-steps a {
        display: block;
        width: 100%;
        font-size: 1rem;
    }

    .breadcrumbs .order-steps a.active {
        font-size: 1rem;
    }

    .breadcrumbs.order h1.done::after,
    .order-steps a.done::after {
        right: 0;
    }
}

.filter-box {
    display: flex;
    justify-content: space-between;
    padding: 0 0 2.69rem 0;
}

.filters-switch {
    display: none;
}

.filters {
    display: flex;
    gap: 0.69rem;
}

.dropdown {
    position: relative;
    background: #FFF;
    cursor: pointer;
}

.dropdown-title {
    position: relative;
    padding: 0.5rem 2.5rem 0.5rem 0.5rem;
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background-color: none;
    z-index: 1000;
    user-select: none;
}

.dropdown-title::after {
    content: "";
    position: absolute;
    right: 1.12rem;
    top: calc(50% - 0.28125rem);
    display: block;
    width: 0.75rem;
    height: 0.5625rem;

    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/caret-down.svg);
}

.dropdown-options {
    display: none;
    position: absolute;
    top: 1.85rem;
    width: 17.0625rem;
    max-height: 26rem;
    padding: 3rem 1.5rem 0.75rem 1.5rem;
    background: #FFF;
    box-shadow: 0px -1px 34.3px 0px rgba(0, 0, 0, 0.25);
    z-index: 999;
}

.dropdown-options-values {
    overflow-y: auto;
    max-height: 18rem;
}

.dropdown.open .dropdown-options {
    display: block;
}

.dropdown.open .dropdown-title {
    background-color: #FFFFFF;
}

.dropdown.open .dropdown-title::after {
    background-image: url(../gfx/caret-up.svg);
}

.dropdown-options .form-check {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #F7F7F7;
}

.dropdown-options .form-check-input {
    border: none;
    border-radius: 0;
    background-color: #D9D9D9;
}

.dropdown-options .form-check-input:checked {
    background-color: var(--color-main);
}

.dropdown-options .form-check-label {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.dropdown-options .form-check-label>span {
    font-size: 0.8125rem;
}

.dropdown-options .dropdown-options-value a {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}

.dropdown-options .dropdown-options-value a:hover {
    text-decoration: underline;
}

.dropdown-options .dropdown-options-value a.active {
    font-weight: 900;
}

.dropdown-buttons {
    display: flex;
    gap: 0.25rem;
    padding-top: 1rem;
}

@media (max-width: 991.98px) {
    .filter-box .filters {
        display: none;
    }

    .filters-switch {
        display: block;
    }

    .filters-switch>a {
        position: relative;
        display: inline-block;
        min-height: 1.375rem;
        padding-left: 1.815rem;
        color: #000;
        font-family: "Noto Sans";
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-decoration: none;
    }

    .filters-switch>a::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(50% - 0.6875rem);
        display: block;
        width: 1.375rem;
        height: 1.375rem;
        flex-shrink: 0;
        aspect-ratio: 1/1;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../gfx/filter.svg);
    }

    .filter-box {
        display: flex;
        align-items: center;
        padding-bottom: 0;
    }
}

.sorting {
    display: flex;
    gap: 0.69rem;
    align-items: center;
}

.sorting .number-of-products {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.products-pagination {
    display: flex;
    justify-content: flex-end;
}

.products-pagination>div {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 6px solid var(--color-main);
}

.products-pagination .page {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.products-pagination .pages {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.products-pagination .pages>span {
    font-weight: 300;
}

.products-pagination .next,
.products-pagination .prev {
    color: #151515;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.products-pagination .next a,
.products-pagination .prev a {
    position: relative;
    display: inline-block;
    padding-right: 1.37rem;
    text-decoration: none;
    color: inherit;
}

.products-pagination .prev a {
    padding-left: 1.37rem;
    padding-right: 0;
}

.products-pagination .next a::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 0.5rem);
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/arrow-next.svg);
}

.products-pagination .prev a::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.5rem);
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/arrow-prev.svg);
}

@media (max-width: 991.98px) {
    #catalog {
        padding: 1.5rem 0;
    }

    .products-pagination {
        width: 100%;
        justify-content: center;
    }

    .products-pagination>div {
        width: 100%;
        justify-content: space-between;
    }

    .products-pagination .next,
    .products-pagination .prev {
        font-size: 1rem;
        flex-grow: 1;
    }

    .products-pagination .next {
        text-align: right;
    }

    .products-pagination .page {
        text-align: center;
    }
}

/* !SECTION */

/*
// SECTION DETAIL
*/
#detail {
    padding: 3.75rem 0;
}

.product-photos {
    display: flex;
}

.product-photos .strip {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 12.125rem;
    max-height: 46.250rem;
    overflow-y: scroll;
}

.product-photos .strip a {
    display: block;
    width: 8.125rem;
    height: 8.125rem;
    border-radius: 0.125rem;
    border: 1px solid #FFF;
}

.product-photos .strip a.active {
    border: 1px solid #CDCDCD;
}

.product-photos .strip a:hover {
    border: 1px solid #EAEAEA;
}

.product-photos .strip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-photos .photo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
    width: 100%;
}

.product-photos .photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photo-controls {
    position: absolute;
    z-index: 100;
    top: calc(50% - 1rem);
    display: block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
}

.photo-controls.prev {
    left: 0;
    background-image: url(../gfx/arrow-left.svg);
}

.photo-controls.next {
    right: 0;
    background-image: url(../gfx/arrow-right.svg);
}

@media (max-width: 991.98px) {
    #detail {
        padding: 1.5rem 0;
    }

    .product-photos .strip {
        display: none;
    }

    .photo-controls {
        display: none;
    }
}

.product-code {
    margin-top: 0.69rem;
    margin-bottom: 1rem;
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    /* 175% */
}

.product-code>span {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.75rem;
    /* 175% */
}

.short-description {
    color: #000;
    font-family: "Istok Web";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    /* 140% */
}

.product-price {
    padding: 3rem 0;
}

.product-price-sale {
    display: flex;
    gap: 0.69rem;
    align-items: center;
}

.product-price-sale>span {
    display: inline-block;
}

.product-price-sale>span.before {
    text-decoration: line-through;
}

.product-price .price {
    color: #151515;
    font-family: "Noto Sans";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

@media (max-width: 991.98px) {
    .product-price {
        padding: 1.5rem 0;
    }
}

.product-variants-title {
    padding-bottom: 1rem;
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.product-variants .variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.product-variants .variants>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 0.125rem;
    border: 1px solid #000;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;

    color: #000;
    font-family: "Noto Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.product-variants .variants>div.disabled {
    color: #808080;
    border: 1px solid #CDCDCD;
    background-repeat: none;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/disable-cross.svg);
    opacity: .5;
}

.product-variants .variants>div.active {
    background-color: var(--color-main);
    color: #FFF;
    border: 1px solid var(--color-main);
}

.product-availability {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    color: #151515;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-availability>div {
    position: relative;
    display: flex;
    align-items: center;
    height: 2rem;
    padding-left: 2.44rem;
}

.product-availability>div::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1rem);
    display: block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.product-availability>div.delivery-date::before {
    background-image: url(../gfx/clock.svg);
}

.product-availability>div.return-option::before {
    background-image: url(../gfx/exchange.svg);
}

.product-meta,
.product-rating {
    padding-top: 6.75rem;
}

.product-description,
.product-description p {
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.625rem;
}

.product-description table {
    width: 100%;
    border: none;
}

.product-description table td {
    padding: 0.5rem;
}

.product-description table tr:nth-child(even) td {
    background-color: #F7F7F7
}

.product-description ul {
    list-style: square;
}

.product-description img {
    display: none;
}

.score {
    margin-top: 1rem;
    color: #FF4F04;
    font-family: "Noto Sans";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 1.69rem;
    margin-top: 2rem;
}

.reviews>div {
    position: relative;
    padding-left: 2.88rem;
}

.reviews>div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 2.188rem;
    height: 1.5625rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/avatar.svg);
}

.reviews .name {
    color: #000;
    font-family: "Noto Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.reviews .name span {
    color: #D9D9D9;
    font-family: "Noto Sans";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.reviews .review {
    color: #000;
    font-family: "Istok Web";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.reviews .stars {
    display: flex;
    gap: 0.125rem;
    margin: 0.5rem 0;
}

.reviews .stars star {
    font-size: 0;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/star.svg);
}

.similar-products {
    padding-top: 4.87rem;
}

.similar-products .products {
    padding-top: 3.81rem;
}

.similar-products .products>.product {
    flex-basis: 45%;
    padding-bottom: 0;
}

.accordion-body {
    padding-bottom: 2rem;
}

.parameters {
    width: 100%;
}

.parameters tr>td {
    padding: 0.5rem 1rem;
}

.parameters tr>td:last-child {
    width: 66%;
    font-weight: bold;
}

.parameters tr:nth-child(even) > td {
    background-color: #F7F7F7;
}

.delivery-options {
    width: 100%;
}

.delivery-options tr>td {
    padding: 0.5rem 1rem;
}

.delivery-options tr>td:first-child {
    position: relative;
    padding-left: 5rem;
    font-weight: bold;
}

.delivery-options tr>td:first-child > span {
    display: block;
    font-weight: normal;
    font-size: 0.875rem;
}

.delivery-options tr>td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.750rem);
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    width: 4rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.delivery-options tr.GLS>td:first-child::before {
    background-image: url(../gfx/logo-gls.svg);
}
.delivery-options tr.PACKETA_PICKUP>td:first-child::before, 
.delivery-options tr.PACKETA_HD>td:first-child::before {
    background-image: url(../gfx/logo-packeta.svg);
}


.delivery-options tr>td:last-child {
    text-align: right;
}

.product-brand {
    width: 6rem;
    height: 4rem;
    padding-top: 2rem;
    margin-bottom: 4rem;
}

.product-brand img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.product-tags {
    position: relative;
}

.form-contact h2 {
    margin-bottom: 2rem;
    font-size: 1rem;
}

.form-contact .error, .form-contact .form-contact-box-success { 
    display: none;
}

.form-contact.success .form-contact-box {
    display: none;
}

.form-contact.success .form-contact-box-success {
    display: block;
}

#detail .add-to-fav {
    position: absolute;
    top: -1.25rem;
    right: 0;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: none;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/favorite.svg);
}

#detail .add-to-fav.active {
    background-image: url(../gfx/favorite-a.svg);
}

/* !SECTION */

/*
// SECTION CART
*/
#cart {
    padding: 3.75rem 0;
}

@media (max-width: 991.98px) {
    #cart {
        padding: 1.5rem 0 8rem 0;
    }
}

.cart-items {
    margin-bottom: 3rem;
    padding-top: 2.94rem;
}

.cart-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1.81rem 0;
    border-bottom: 1px solid #F0F0F0;
}

.cart-item a,
.cart-item a :visited {
    text-decoration: none;
    color: inherit;
}

.cart-item .item-amount {
    width: 2rem;
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.cart-item .item-image {
    flex-shrink: 0;
}

.cart-item .item-image img {
    width: 3.875rem;
    height: 3.875rem;
    flex-shrink: 0;
    object-fit: contain;
    aspect-ratio: 1/1;
}

.cart-item .item-title {
    flex-grow: 1;
    padding: 0 1rem;
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

.cart-item .item-title>span {
    display: block;
    font-weight: 700;
}

.cart-item .qty {
    display: flex;
    align-items: center;
}

.cart-item .qty a.minus,
.cart-item .qty a.plus {
    display: block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.cart-item .qty a.minus {
    background-image: url(../gfx/minus.svg);
}

.cart-item .qty a.plus {
    background-image: url(../gfx/plus.svg);
}

.cart-item .qty .amount {
    display: inline-block;
    padding: 0 1rem;
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    user-select: none;
}

.cart-item .item-total {
    min-width: 8rem;
    padding: 0 1rem;
    color: #090909;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: right;
}

.cart-item .remove {
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/remove.svg);
}

@media (max-width: 991.98px) {
    .cart-item {
        flex-wrap: wrap;
    }

    .cart-item .item-amount {
        width: 10%;
    }

    .cart-item .item-image {
        width: 20%;
    }

    .cart-item .item-title {
        width: 60%;
    }

    .cart-item .item-total {
        flex-grow: 1;
    }
}

.discount-code {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 32rem;
    padding: 1.37rem 1rem;
    border-radius: 0.125rem;
    background: #F7F7F7;
}

.discount-code>div:first-child {
    flex-grow: 1;
}

.discount-code input {
    height: 2.5rem;
    border-radius: 0;
    border: none;
}

.resume-box {
    position: sticky;
    position: -webkit-sticky;
    top: 1rem;
    margin-top: 2.94rem;
    padding: 3rem;
    border-radius: 0.125rem;
    background: #F7F7F7;
    z-index: 200;
}

.resume-box .resume-items {
    margin-bottom: 5rem;
}

.resume-box .resume-items>div {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
    border-bottom: 1px solid #FFF;
}

.resume-box .resume-items>div:last-child {
    text-align: right;
}

.resume-box .resume-items .totals .totals-value {
    font-size: 1.5rem;
    color: #090909;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.resume-box .resume-items .totals span {
    display: block;
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.resume-box .resume-items .totals-text {
    color: #000;

    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.resume-items .item-total {
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-right: 0;
    text-align: right;
}

.resume-box .payment-delivery {
    flex-direction: column;
    gap: 1.25rem;
}

.resume-box .payment-delivery>div {
    display: flex;
    justify-content: space-between;
}

.resume-box .payment-delivery-title {
    color: #090909;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.resume-box .payment-delivery-price {
    color: #090909;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 991.98px) {
    .panel-resume {
        margin-top: 2.5rem;
    }

    .panel-resume h2.order {
        text-align: center;
    }

    .resume-box {
        padding: 1rem;
    }
}


.order-options {
    padding-top: 2.31rem;
    padding-bottom: 6.38rem;
}

.order-options .form-check {
    display: flex;
    align-items: center;
    min-height: 3.875rem;
    padding-left: 2.5rem;
    user-select: none;
}

.order-options .form-check .label {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: 100%;
}

.order-options .form-check .label .form-check-label>span {
    display: block;
    font-weight: normal;
}

.order-options .form-check .label .delivery-info {
    padding-left: 1rem;
    font-size: 0.875rem;
}

.order-options .form-check .img {
    flex-grow: 0;
    flex-shrink: 0;
    width: 4rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.order-options .form-check .price {
    flex-grow: 0;
    flex-shrink: 0;
    width: 6rem;
    padding-left: .5rem;
    padding-right: 1rem;

    color: #090909;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: right !important;
}

.order-options .form-check.active {
    background-color: #FAFAFA;
    border-radius: 0.125rem;
}

.order-options .form-check-label {
    margin-left: 1rem;
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.order-options .form-check-input[type=radio] {
    position: relative;
    width: 1.875rem;
    height: 1.875rem;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border: 2px solid #D9D9D9;
}

.order-options .form-check-input[type=radio]:checked {
    border: 2px solid var(--color-main);
    background: none;
}

.order-options .form-check-input[type=radio]:checked::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.625rem);
    left: calc(50% - 0.625rem);
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-main);
    border-radius: 50%;
}

.order-options .form-check-input[type=checkbox] {
    width: 1.875rem;
    height: 1.875rem;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: 0.125rem;
    border: 1px solid #D9D9D9;
}

.order-options .form-check-input[type=checkbox]:checked {
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.order-options .form-check[data-rel="DPD"] .img {
    background-image: url(../gfx/logo-dpd.png);
}

.order-options .form-check[data-rel="GLS"] .img {
    background-image: url(../gfx/logo-gls.svg);
}

.order-options .form-check[data-rel="PACKETA_PICKUP"] .img {
    background-image: url(../gfx/logo-packeta.svg);
}

.order-options .form-check[data-rel="PACKETA_HD"] .img {
    background-image: url(../gfx/logo-packeta.svg);
}

.order-options .form-check[data-rel="card"] .img {
    background-image: url(../gfx/payment-card.svg);
}

.order-options .form-check[data-rel="bank"] .img {
    background-image: url(../gfx/payment-qr.svg);
}

.order-options .form-check[data-rel="cod"] .img {
    background-image: url(../gfx/payment-money.svg);
}

@media (max-width: 991.98px) {
    .order-options .form-check-label {
        font-size: 0.875rem;
    }
}

.form-row {
    margin: 0 0 1.19rem 0;
    padding: 0;
}

.form-label {
    margin: 0 0 0.25rem 0;
    padding: 0;
    color: #000;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.form-row input, .form-row textarea {
    position: relative !important;
    height: 4rem;
    padding-left: 6rem;
    border-radius: 0.125rem;
    border: 1px solid #D9D9D9;
    font-family: "Istok Web";
    color: #505050 !important;
}

.form-row input.is-valid, .form-row textarea.is-valid {
    background-color: #F7F7F7;
    border-color: #F7F7F7;
}

.form-row textarea {
    height: unset;
    padding-top: 2rem;
    padding-bottom: 2rem: 
}

.form-row select {
    position: relative;
    height: 4rem;
    padding-left: 6rem;
    border-radius: 0.125rem;
    border: 1px solid #D9D9D9;
    font-family: "Istok Web";
}

.form-row .input-group {
    position: relative;
}

.form-row .input-group::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.750rem);
    left: 0.56rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    z-index: 100;
    background-size: contain;
    background-repeat: no-repeat;
}

.form-row .input-group.mail::before {
    background-image: url(../gfx/form-mail.svg);
}

.form-row .input-group.phone::before {
    background-image: url(../gfx/form-phone.svg);
}

.form-row .input-group.name::before {
    background-image: url(../gfx/form-user.svg);
}

.form-row .input-group.address::before {
    background-image: url(../gfx/form-address.svg);
}

.form-row .input-group.country::before {
    background-image: url(../gfx/form-country.svg);
}

.form-row .input-group.password::before {
    background-image: url(../gfx/form-password.svg);
}

.form-row .input-group.message::before {
    background-image: url(../gfx/form-message.svg);
}

.form-row .input-group.select::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.375rem);
    right: 0.56rem;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    z-index: 100;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../gfx/arrow-down-small-black.svg);
}

.consent {
    padding-top: 1.63rem;
    color: #000;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.consent a {
    color: inherit;
    text-decoration: underline;
}

.order-resume dl dt {
    margin: 2.62rem 0 1rem 0;
    padding: 0;
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.order-resume dl dd {
    position: relative;
    padding-left: 2.5rem;
    min-height: 1.5rem;
    color: #FF4F04;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.order-resume dl dd::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1.5em;
    height: 1.5rem;
    flex-shrink: 0;
    z-index: 100;
    background-size: contain;
    background-repeat: no-repeat;
}

.order-resume dl dd.document::before {
    background-image: url(../gfx/form-document.svg);
}

.order-resume dl dd.mail::before {
    background-image: url(../gfx/form-mail.svg);
}

.order-resume dl dd.phone::before {
    background-image: url(../gfx/form-phone.svg);
}

.order-resume dl dd.address::before {
    background-image: url(../gfx/form-address.svg);
}

.payment-info {
    width: 100%;
    max-width: 22rem;
    padding: 3rem 2.69rem;
    border-radius: 0.125rem;
    background: #FF4F04;
    text-align: center;
    color: #FFF;
}

.payment-info h3 {
    margin-bottom: 0.69rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.payment-info .text {
    color: #FFF;
}

.payment-info .price {
    font-size: 1.25rem;
}

.payment-info .qr {
    margin: 2rem 0 1.5rem 0;
    padding: 0.69rem;
    flex-shrink: 0;
    border-radius: 0.125rem;
    border: 1px solid #FFF;
}

.payment-info .qr>img {
    width: 14.8125rem;
    height: 14.8125rem;
    object-fit: contain;
}

/* !SECTION */

/*
// SECTION CUSTOMER
*/
#customer {
    padding: 3.75rem 0 9rem 0;
}

table.orders {
    width: 100%;
}

table.orders thead tr {
    height: 3.5rem;
    border-radius: 0.125rem;
    background: #F7F7F7;
}

table.orders thead tr td {
    color: #000;
    font-family: "Noto Sans";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

table.orders tbody tr {
    height: 3.5rem;
}

table.orders tbody tr td {
    border-bottom: 1px solid #F0F0F0;
}

table.orders tr td {
    padding-left: 2rem;
    padding-right: 2rem;
    vertical-align: middle;
    color: #000;
    font-family: "Istok Web";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 991.98px) {
    table.orders tr td {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }
}

.status {
    display: inline-block;
    padding: 0.56rem 1.25rem;
    color: #000;
    font-family: "Noto Sans";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background-color: var(--color-completed);
}

@media (max-width: 991.98px) {
    .status {
        padding: 0.56rem 0.69rem;
    }
}

a.more-action {
    display: inline-block;
    position: relative;
    margin: 0;
    top: -0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/more.svg);
    font-size: 0;
}

#customer .form-check {
    padding-left: 1.5rem;
}

#customer #settings-confirm-password {
    display: none;
}

#customer .resume-box {
    margin-top: 1rem;
}

#customer .resume-box .resume-items {
    margin-bottom: 0;
}

#customer .order-delivery-addresses {
    display: flex;
    gap: 2.5rem;
    padding-top: 2.5rem;
}

#customer address {
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#customer .order-meta h3.order-detail {
    padding-bottom: 0;
}

#customer .order-meta {
    display: flex;
    justify-content: space-between;
}

#customer .order-meta>div {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#customer .order-no {
    color: #000;
    font-family: "Noto Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* !SECTION */


/*
// SECTION DIALOG
*/
.dialog {
    min-width: 37.5rem;
    max-width: 50rem;
}

.dialog h2 {
    position: relative;
    display: block;
    padding-top: 2.69rem;
    padding-bottom: 2.5rem;
    text-align: center;

    color: #151515;
    font-family: "Noto Sans";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.dialog h2.h-logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 3.59375rem);
    display: block;
    width: 7.1875rem;
    height: 1.75rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/logo-black.png);
}

.dialog h3 {
    font-family: "Noto Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.dialog .dialog-cart-item h4 {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.dialog .dialog-cart-item .price {
    font-family: "Noto Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.dialog .buttons-box {
    padding-top: 1.5rem;
}

@media (max-width: 991.98px) {
    .dialog {
        width: 100vw;
        min-width: unset;
    }

    .dialog .buttons-box a.back {
        display: none;
    }
}

.dialog .lost-password {
    display: block;
    padding-top: 1rem;
    color: #CDCDCD;
}

.dialog .separator {
    position: relative;
    display: flex;
    height: 0.125rem;
    margin-bottom: 1rem;
}

.dialog .separator::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 4rem;
    height: 0.125rem;
    background-color: var(--color-main);
}

.dialog .login-conditions {
    color: #CDCDCD;
}

/* !SECTION */

/*
// SECTION PAGE
*/
.page-content {
    padding-bottom: 8rem;
}

.page-content h1.blog {
    position: relative;
    display: block;
    padding-top: 3.69rem;
    padding-bottom: 3.75rem;
    text-align: center;

    color: #151515;
    font-family: 'Anton', sans-serif;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.page-content h2 {
    position: relative;
    display: block;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    text-align: center;

    color: #151515;
    font-family: "Noto Sans";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.page-content h3 {
    padding: 0.69rem 0;
    color: #151515;
    font-family: "Noto Sans";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

.page-content a {
    color: var(--color-main);
    text-decoration: underline;
}

.page-content .whatsapp a {
    text-decoration: none;
    color: #000;
}

/* !SECTION */

/* Kontejner s vlastním scrollbarem */
.scrollable {
    overflow: auto;
    /* nebo overflow-y: auto; */

    /* Firefox */
    scrollbar-width: thin;
    /* thin / auto / none */
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
    /* iOS momentum scroll */
    scroll-behavior: smooth;
}

/* Zvýraznění na hover (Firefox) */
.scrollable:hover {
    scrollbar-color: rgba(0, 0, 0, 0.45) transparent;
}

/* WebKit (Chrome, Edge, Safari, Opera) */
.scrollable::-webkit-scrollbar {
    width: 6px;
    /* šířka svislého scrollbar */
    height: 6px;
    /* výška vodorovného scrollbar */
    background: transparent;
}

.scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.45);
    /* jemně viditelný */
    border-radius: 999px;
    /* plně zaoblený */
    border: 2px solid transparent;
    /* prostor kolem palce */
    background-clip: padding-box;
    /* zachová průhledné okraje */
}

.scrollable:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.45);
    /* výraznější na hover */
    background-color: rgba(255, 255, 255, 0.75);
}