@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import "base.css?v=2";

:root {
    --frontend-color-white-0:       #FFFEFC;
    --frontend-color-white-1:       #FAF8F5;
    --frontend-color-white-2:       #F2EFEB;

    --frontend-color-gray-0:        #DEDAD6;
    --frontend-color-gray-1:        #CECBC7;

    --frontend-color-black:         #0F0E0D;

    --frontend-color-blacky:        #171614;
    --frontend-color-blacky-light:  #2d2d2a;
    --frontend-color-blacky-white: #494743;
}

*:not(i) {
    font-family: 'Poppins', sans-serif;
}

/* :: Brand Fashion :: */

.image-frame.image-frame-2x1-t {
    padding-bottom: 180%;
}

/* :: MOBILE :: */

body .header .header-body .m-menu .close-bar {
    display: none;
}
@media screen and (max-width: 1199px) {
    body.mobile-menu-open {
        overflow: hidden;
    }
    body.mobile-menu-open .header .header-body .m-menu .bar {
        display: none;
    }
    body.mobile-menu-open .header .header-body .m-menu .close-bar {
        display: unset;
    }
}


/* :: Header :: */

.header {
    z-index: 2200;

    position: sticky;
    top: 0px; left: 0px;
    width: 100%;
    height: 100px;
    background-color: #fff;
    transition: 0.2s height;

    border-bottom: 1px solid var(--color-gray-0);
}
.header.down {
    height: 50px;
}
.header .header-body .brand img {
    transition:
            0.2s width,
            0.2s height,
            0.2s max-width,
            0.2s max-height;
}
.header.down .header-body .brand img {
    max-width: 80px;
}

.header .header-body {
    display: flex;
    align-items: center;
    height: 100%;

    padding-left: 30px;
    padding-right: 30px;
}

.header .header-body .brand {
    display: flex;
}
.header .header-body .options {
    display: flex;
    margin-left: 30px;
}
.header .header-body .empty {
    flex-grow: 1;
}
.header .header-body .icons {
    display: flex;
    margin-right: 30px;
}
.header .header-body .user {
    display: flex;
}
.header .header-body .user .bttn-link-bold:first-child {
    border-right: 1px solid var(--color-whity);
}

/* cart BLOB */

.header .header-body .icons .cart-blob-holder {
    position: relative;
}
.header .header-body .icons .cart-blob-holder > .cart-blob {
    display: none;

    position: absolute;

    background-color: var(--color-warn);
    color: white;

    font-size: 0.6em;
    width: 20px;
    height: 20px;
    border-radius: 50%;

    text-align: center;
    line-height: 20px;

    font-weight: 600;

    top: 29px;
    right: 6px;
}

.header .header-body .icons .cart-blob-holder > .cart-blob.active {
    display: block;
}

/* */
.header .header-body .m-menu {
    display: none;
}
.header .header-body .user.m-user {
    display: flex;
}
.bttn-icon.m-user-icon {
    display: none;
}

@media screen and (max-width: 1199px) {
    .header {
        height: 50px;
    }
    .header .header-body .icons {
        margin-right: 0px;
    }
    .bttn-icon.m-user-icon {
        display: flex;
    }
    .header .header-body .user.m-user {
        display: none;
    }
}

@media screen and (max-width: 1199px) { /* 991px */
    .header .header-body .m-menu {
        display: block;
    }
    .header .header-body .options {
        display: none;
    }
    .header .header-body .empty {
        display: none;
    }
    .header .header-body .brand {
        flex-grow: 1;
        justify-content: flex-start;
        margin: 0px 30px;
    }
}

/* BRAND LOGO */
.header .header-body .brand {
    cursor: pointer;
}
.header .header-body .brand img {
    max-width: 120px;
    object-fit: contain;
}
@media screen and (max-width: 1199px) { /* 991px */
    .header .header-body .brand img {
        max-width: 80px;
    }
}

/* HEADER INFO */

.header .header-info {
    cursor: default;

    background-color: var(--color-gray-0);
    opacity: 1;
    transition: 0.2s opacity;
}
.header .header-info .header-info-body {
    padding: 0px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    background-color: #e63360;
}
.header .header-info .header-info-body p {
    padding: 0px;
    margin: 0px;
    font-weight: 500;
    line-height: 40px;
}
.header .header-info .header-info-body i {
    line-height: 40px;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px 10px;
    margin-right: 30px;
    cursor: pointer;
}
@media screen and (max-width: 1199px) { /* 991px */
    .header .header-info .header-info-body {
        justify-content: flex-start;
    }
    body.mobile-menu-open .header .header-info {
        pointer-events: none;
        opacity: 0;
    }
}
.header .header-info.close-info {
    pointer-events: none;
    opacity: 0;
}

/* MOBILE MENU */
.mobile-menu {
    z-index: 2000;

    background-color: white;

    display: flex;
    position: fixed;
    top: 0px; left: -100%;
    width: 100%;
    height: 100vh;

    transition:
        0.2s left;
}
@media screen and (max-width: 1199px) { /* 991px */
    body.mobile-menu-open .mobile-menu {
        left: 0px;
    }
}


/* HEADER OPTION HOVER */

.header .header-body .options .bttn-link {
    position: relative;
}

/* // FOR CSS EDITION // */
.header .header-body .options .bttn-link:hover .option-hover {
    z-index: 2300;
    opacity: 1;
    pointer-events: unset;
}
/* // FOR JS EDITION // */
.option-hover.show {
    pointer-events: unset;
    opacity: 1;
}

.option-hover {
    cursor: default;

    pointer-events: none;
    opacity: 0;

    position: absolute;

    display: flex;

    top: 100%;
    left: 0px;

    background-color: #fff;
    transition: 0.2s opacity;

    border: 1px solid var(--color-gray-0);
    transform: translateY(-1px);
}
.option-hover .sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0px;
}
.option-hover .sub a {
    cursor: pointer;

    color: #000;
    padding: 10px 30px;
}
.option-hover .sub a:hover {
    color: #000;
}
.option-hover .photo {
    width: 200px;
    height: auto;
}
.option-hover .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  MOBILE-M   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.mobile-menu {
    justify-content: flex-start;
    align-items: start;
    flex-direction: column;

    /*
    padding: 50px;
    padding-top: 100px;
    */

    background-color: var(--color-whity-dark);

    padding-top: 50px;

    overflow-y: auto;
}

.mobile-menu .cats {
    display: flex;
    flex-wrap: wrap;

    width: 100%;

    padding: 50px;
    padding-top: 50px;

    /*
    border-bottom: 1px solid var(--color-gray-0);
    */
    background-color: white;
}

.mobile-menu .cats.cats-footer {
    background-color: unset;
}

.mobile-menu .cats .cat-block {
    display: flex;
    flex-direction: column;
    width: 33.33%;
}

@media screen and (max-width: 991px) {
    .mobile-menu .cats .cat-block {
        width: 50%;
    }
}
@media screen and (max-width: 575px) {
    .mobile-menu .cats .cat-block {
        width: 100%;
    }
}

.mobile-menu .main,
.mobile-menu .sub {
    cursor: pointer;
}

.mobile-menu .main {
    color: var(--color-gray-0);
    font-weight: 600;
    font-size: 1.2em;

    padding-bottom: 20px;
    padding-top: 10px;
}
.mobile-menu .sub {
    color: var(--color-gray-0);
    font-weight: 300;
    font-size: 1em;

    padding-bottom: 20px;
    padding-left: 20px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  FOOTER   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.footer {
    background-color: var(--color-whity);
    width: 100%;
}

.footer .bottom {
    width: 100%;
    background-color: var(--color-gray-0);
    padding: 10px 0px;
}

.footer .bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: white;
}
.footer .bottom .container p {
    margin: 0px;
    padding: 0px;
    font-size: 0.8em;
}
.footer .bottom .container > div {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.footer .bottom .container > div > img {
    margin-left: 10px;
}

@media screen and (max-width: 575px) {
    .footer .bottom .container { flex-direction: column }
}


.footer .top {
    width: 100%;
    padding-bottom: 30px;
    padding-top: 40px;
}
.footer .top .container {
    display: flex;
    flex-wrap: wrap;
}
.footer .top .container .footer-block > p {
    font-weight: 500;
    font-size: 1.1em;
    margin: 0px;
    padding: 0px;
    margin-bottom: 20px;
}
.footer .top .container .footer-block > a {
    display: block;
    padding: 4px 0px;
    color: black;
    font-weight: 300;
}


.footer .top .container .footer-block {
    padding-top: 60px;
    width: 25%;
}
.footer .top .container .footer-block .logo {
    width: 100%;
}

.footer .top .container .footer-block .logo.brand {
    padding: 0px 30px;
    padding-right: 60px;
}

.footer .top .container .footer-block .logo.l0 {
    margin: 20px 0px;
    padding: 0px 20px;
}

@media screen and (max-width: 991px) {
    .footer .top .container .footer-block {
        text-align: center;
    }

    .footer .top .container .footer-block {
        width: 50%;
    }

    .footer .top .container .footer-block.o0 {order: 2}
    .footer .top .container .footer-block.o1 {order: 0}
    .footer .top .container .footer-block.o2 {order: 1}
    .footer .top .container .footer-block.o3 {order: 3}

    .footer .top .container .footer-block .logo.brand {
        padding: 0px 30px;
    }

    .footer .top .container .footer-block .logo.l0 {
        padding: 0px 30px;
        padding-right: 60px;
    }
}

@media screen and (max-width: 767px) {
    .footer .top .container .footer-block {
        width: 100%;
    }
    .footer .top .container .footer-block.o0 {order: 3}
    .footer .top .container .footer-block.o1 {order: 0}
    .footer .top .container .footer-block.o2 {order: 1}
    .footer .top .container .footer-block.o3 {order: 2}

    .footer .top .container .footer-block .logo.l0 {
        margin-top: 60px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  SUBSCRIBE  ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.subscribe {
    width: 100%;
    background-color: var(--color-whity-dark);
}
.subscribe .container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    padding: 40px 0px;

}
.subscribe .container .text p,h3 {
    margin: 0px; padding: 0px;
}
.subscribe .container .text p {
    margin-bottom: 36px;
}
.subscribe .container .text h3 {
    font-weight: 600;
    font-size: 2.6em;
}
.subscribe .container .text {
    width: 25%;
}

.subscribe .content {
    width: 75%;
    display: flex;
    flex-wrap: wrap;

    margin-top: 60px;
}
.subscribe .content .input-filed {
    width: 700px;
    margin-right: 10px;
}
.subscribe .content .input-check {
    margin-top: 10px;
    width: 75%;
}

@media screen and (max-width: 1599px) {
    .subscribe .container .text h3 {
        font-weight: 600;
        font-size: 2.2em;
    }
}

@media screen and (max-width: 1199px) {
    .subscribe .container .text h3 {
        font-weight: 600;
        font-size: 1.8em;
    }
    .subscribe .content .input-filed {
        width: 500px;
    }
}

@media screen and (max-width: 991px) {
    .subscribe .content .input-filed {
        flex-grow: 1;
        width: auto;
        margin-right: 0px;
    }
    .subscribe .content .input-check {
        width: 100%;
    }
    .subscribe .content {
        margin-top: 10px;
        width: 100%;
    }
    .subscribe .container .text {
        width: 100%;
    }
    .subscribe .container .text p {
        margin-bottom: 10px;
    }

    .subscribe .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  TITLE  ] # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.title {}
.title > p {
    padding: 0px;
    margin: 0px;
}
.title > p:first-child {
    font-size: 1.4em;
    font-weight: 600;
}

.title > p:last-child {
    margin-bottom: 10px;
}

.title.center > p {
    width: 100%;
    text-align: center;
}

.title.small > p:first-child { font-size: 1.1em; }

@media screen and (max-width: 575px) {
    .title {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # [  product-recommender  ] # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

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

.product-recommender > div {
    cursor: pointer;
}
.product-recommender > div img {
    transform: scale(1);
    transition: 1s transform;
}
.product-recommender > div:hover img {
    transform: scale(1.05);
}

@media screen and (max-width: 991px) {
    .product-recommender {
        grid-template-columns: repeat(2, 1fr);
    }
}

.product-recommender > div > .image-frame {
    margin-bottom: 10px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  product-scope  ] # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

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

/*
@media screen and (max-width: 991px) {
    .product-scope {
        grid-template-columns: repeat(2, 1fr);
    }
}
*/

.product-scope > div > .image-frame {
    margin-bottom: 10px;
}

.product-scope .product-tile {
    padding: 5px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  product-list ] # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.product-list > .product-tile {
    width: calc(25% - 5px);
}

@media screen and (max-width: 991px) {
    .product-list > .product-tile {
        width: calc(50% - 5px);
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  product-tile   ] # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.product-tile {
    position: relative;
}

.product-tile img {
    transform: scale(1);
    transition: 1s transform;
}

/*
.product-tile:hover img {
    transform: scale(1.05);
}
*/
.product-tile .hover_a { display: unset; }
.product-tile .hover_b { display: none; }
.product-tile:hover .hover_a { display: none; }
.product-tile:hover .hover_b { display: unset; }



.product-tile .product-text > p,
.product-tile .product-text .name > p {
    margin: 0px; padding: 0px;
    word-break: break-word;
}
.product-tile .product-text {
    display: flex;
    flex-wrap: wrap;

    margin-top: 5px;
}
.product-tile .product-text .price-a {
    font-weight: 500;
    margin-right: 10px;
}
.product-tile .product-text .price-b {
    margin-right: 10px;
    text-decoration: line-through;
}
.product-tile .product-text .discount {
    padding-left: 14px;
    padding-right: 14px;
    background-color: var(--color-warn);
    color: white;
}
.product-tile .product-text .name {
    width: 100%;
    display: flex;
}
.product-tile .product-text .name p:first-child {
    font-weight: 600;
    margin-right: 5px;

    padding-right: 5px;
    border-right: 1px solid var(--color-gray-2);
}
.product-tile .product-text .name p:last-child {

    border-right: unset;
}

.product-tile .open-handler {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: calc(100% - 50px);
    top: 50px; left: 0px;
}
.product-tile .like-handler {
    cursor: pointer;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px; right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-tile .like-handler:hover i {
    color: var(--color-warn);
}
.product-tile .like-handler i {
    font-size: 1.4em;
}

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

    .product-tile .product-text .price-a {font-size: 1em;}
    .product-tile .product-text .price-b {font-size: 0.8em;}
    .product-tile .product-text .discount {font-size: 1em;}

    .product-tile .product-text .name p:first-child {font-size: 0.8em;}
    .product-tile .product-text .name p:last-child {font-size: 0.8em;}
}

@media screen and (max-width: 575px) {
    .product-tile .product-text {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  INFO-BLOCK   ] # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.info-block {
    background-color: #2b2b2b;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    width: 100%;

    padding: 30px;
}
.info-block > p {
    color: white;
}
.info-block .top {
    font-size: 0.9em;
    font-weight: 300;
    width: 100%;
}
.info-block .gap {
    flex-grow: 1;
}
.info-block .content {
    font-size: 2.4em;
    font-weight: 600;
    padding: 9px;
}
.info-block .bttn-holder {
    padding-bottom: 20px;
}

@media screen and (max-width: 1599px) {
    .info-block .content {
        font-size: 2em;
    }
}

@media screen and (max-width: 1199px) {
    .info-block .content {
        font-size: 1.8em;
        padding: 9px;
    }
}

@media screen and (max-width: 575px) {
    .info-block .top {
        text-align: center;
    }
    .info-block {
        padding-left: 0px;
        padding-right: 0px;
    }
}


/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  INFO-KEP   ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.info-kep {
    display: flex;
    flex-wrap: wrap;
}
.info-kep > div:first-child {
    width: 25%;
}
.info-kep > div:last-child {
    width: 75%;
}

@media screen and (max-width: 991px) {
    .info-kep > div:first-child {
        width: 50%;
    }
    .info-kep > div:last-child {
        width: 50%;
    }
}
@media screen and (max-width: 767px) {
    .info-kep > div:first-child {
        width: 100%;
    }
    .info-kep > div:last-child {
        width: 100%;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  SWITCH-BOX   ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.switch-box .container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
}

@media screen and (max-width: 991px) {
    .switch-box .container {
        grid-template-columns: repeat(2, 1fr);
    }
    .switch-box .container .product-tile .image-frame {
        padding-bottom: 200%;
    }

    .switch-box .container > div:nth-child(1) {order: 1;}
    .switch-box .container > div:nth-child(2) {order: 2;}
    .switch-box .container > div:nth-child(3) {order: 4;}
    .switch-box .container > div:nth-child(4) {order: 3;}

    .switch-box.no-swap .container > div:nth-child(3),
    .switch-box.no-swap .container > div:nth-child(4) {
        display: none;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  BLOG-BOX   ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.blog-box .container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
}

@media screen and (max-width: 991px) {
    .blog-box .container {
        grid-template-columns: repeat(2, 1fr);
    }
    .blog-box .container .product-tile .image-frame {
        padding-bottom: 200%;
    }

    .blog-box .container > div:nth-child(1) {order: 1;}
    .blog-box .container > div:nth-child(2) {order: 2;}
    .blog-box .container > div:nth-child(3) {order: 4;}
    .blog-box .container > div:nth-child(4) {order: 3;}

    .blog-box .container > div:nth-child(3),
    .blog-box .container > div:nth-child(4) {
        display: none;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  BLOG-TILE   ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.blog-tile {
    cursor: pointer;
}
.blog-tile .title {
    padding: 20px;
    padding-bottom: 0px;
    font-weight: 600;
}
.blog-tile .lead {
    padding: 20px;
    padding-top: 10px;
    font-size: 0.8em;
    line-height: 1.8em;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  BREAD - C  ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.bread-crumb {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    color: #8c8c8c;
    font-weight: 300;
}
.bread-crumb > i {
    line-height: 30px;
    transform: translateY(-2px);
}
.bread-crumb > p:first-child {
    padding-left: 0px;
}
.bread-crumb > p {
    line-height: 30px;
    cursor: pointer;
    padding: 0px 10px ; margin: 0px;

    transition: 0.2s color;
}
.bread-crumb > p:hover {
    color: #2b2b2b;
}

@media screen and (max-width: 575px) {
    .bread-crumb {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* ~ BreadCrumb 2 ~ */

.bread-crumb-2 {
    width: 100%;
}
.bread-crumb-2 > a {
    line-height: 23px;
    font-weight: 300;
    color: gray;
}
.bread-crumb-2 > a > img {
    opacity: 1;
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 10px;
    object-fit: contain;
    transform: translateY(4px);
    cursor: pointer;
    transition:
           0.3s opacity;
}

.bread-crumb-2 > a:hover {
    color: #2b2b2b;;
    text-decoration: unset;
}
.bread-crumb-2 > a:hover > img {
    opacity: 0.65;
}

.bread-crumb-2 > i {
    color: gray;
    padding: 0px 10px;
}

.bread-crumb-2 .icon {
    display: inline-flex;
    white-space: nowrap;
    align-items: baseline;
}

@media screen and (max-width: 991px) {
    .bread-crumb-2 {
        font-size: 0.8em;
    }
    .bread-crumb-2 > a > img {
        width: 16px; height: 16px;
        margin-right: 6px;
        transform: translateY(2px);
    }
    .bread-crumb-2 > i {
        padding: 0px 6px;
    }
}
@media screen and (max-width: 575px) {
    .bread-crumb-2 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  BRAND-SELECTOR   ] # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.brand-selector .brand-page {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.brand-button {
    background-color: var(--color-whity);
    border: unset;
    display: inline-block;
    width: 100%;
    margin: 0px 0px;
    padding: 40px 0px;
    font-weight: 600;
}

@media screen and (max-width: 991px) {
    .brand-selector .brand-page {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
slick-prev slick-arrow
slick-next slick-arrow
*/

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  PRODUCT  ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.product-layout {
    display: flex;
    flex-wrap: wrap;
}
.product-layout p {
    margin: 0px; padding: 0px;
}
.product-layout .block-photo,
.product-layout .block-content,
.product-layout .block-details {
    width: 33.33%;
}

/* block-content */

.product-layout .block-content {
    background-color: var(--color-whity);
    overflow: hidden;
    padding: 20px;
}

.product-layout .block-content h1 {
    font-size: 2em;
}
.product-layout .block-content .meta {
    display: flex;
    align-items: center;
}
.product-layout .block-content .meta .stock {
    background-color: var(--color-gray-0);
    color: white;
    padding: 2px 16px;
    margin: 0px;
    margin-right: 10px;
}
.product-layout .block-content .meta .stock.off {
    background-color: var(--color-warn);
}
.product-layout .block-content .option-attr {
    margin-top: 50px; /* ATTR */
    margin-bottom: 20px;
}
.product-layout .block-content .option-attr > p {
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 10px;
}
.product-layout .block-content .option-attr .option-list {
    display: flex;
}
.product-layout .block-content .option-attr .option-list .option {
    cursor: pointer;
    width: auto;
    min-width: 40px;
    padding-left: 5px; padding-right: 5px;
    height: 40px;
    outline: 1px solid var(--color-gray-0);
    outline-offset: -1px;
    display: flex; justify-content: center; align-items: center;
    margin-right: 10px;

    transition: 0.2s opacity;
}
.product-layout .block-content .option-attr .option-list .option.unavailable {
    opacity: 0.3 !important;
    pointer-events: none !important;
    background-image: url("/web/photo/unavailable.svg");
}
.product-layout .block-content .option-attr .option-list .option.selected {
    background-color: var(--color-gray-0);;
    color: white;
}

.product-layout .block-content .option-attr .option-list .option:hover {
    background-color: var(--color-gray-0);;
    color: white;
}

.product-layout .block-content .quantity-and-price {
    display: flex;
    margin-top: 50px; /* ATTR */
}
.product-layout .block-content .quantity-and-price > div:first-child {
    width: 50%;
}
.product-layout .block-content .quantity-and-price > div:last-child {
    width: 50%;
}

.product-layout .block-content .quantity-and-price .quantity-attr > p:first-child {
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 10px;

    width: 100%;
}

.product-layout .block-content .quantity-and-price .quantity-attr .product-amount-frame {
    display: flex;
    width: 100%;
    max-width: 120px;
    height: 40px;
    justify-content: center;
    align-items: center;
}
.product-layout .block-content .quantity-and-price .quantity-attr .product-amount-frame > p {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-gray-0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-layout .block-content .quantity-and-price .quantity-attr .product-amount-frame .amount_display {
    border-left: unset;
    border-right: unset;
}
.product-layout .block-content .quantity-and-price .quantity-attr .product-amount-frame .amount_minus,
.product-layout .block-content .quantity-and-price .quantity-attr .product-amount-frame .amount_plus {
    cursor: pointer;
}

.product-layout .block-content .quantity-and-price > div:last-child {}
.product-layout .block-content .quantity-and-price > div:last-child .price-a {
    font-weight: 600;
    font-size: 2em;
}
.product-layout .block-content .quantity-and-price > div:last-child .price-b {
    font-weight: 400;
    font-size: 0.9em;
}
.product-layout .block-content .quantity-and-price > div:last-child .price-b b {
    text-decoration: line-through;
}
.product-layout .block-content .quantity-and-price > div:last-child .price-b span {
    text-decoration: unset;
    background-color: var(--color-warn);
    color: white;
    padding: 0px 10px;
    margin-left: 5px;
}
.product-layout .block-content .quantity-and-price > div:last-child .price-vat {
    font-weight: 300;
}

.product-layout .block-content .product-buttons {
    width: 100%; display: flex; justify-content: center;
    margin-top: 80px;
}
.product-layout .block-content .product-buttons .product-button {}
.product-layout .block-content .product-buttons .product-button .add-to-cart {
    padding: 0px 26px;
    background-color: var(--color-warn);
    color: white;
}
.product-layout .block-content .product-buttons .product-button .add-to-cart:hover {
    background-color: #ff3d7f;
    color: white;
}


/* block-details */

.product-layout .block-details {
    background-color: var(--color-whity-dark);
    overflow: auto;
    padding: 20px;
    padding-bottom: 40px;
}
.product-layout .block-details .brand {
    cursor: pointer;
    width: 140px;
    height: 60px;
    object-fit: contain;
}
.product-layout .block-details .detail-block {
    margin-top: 40px;
}
.product-layout .block-details .detail-block .title {
    font-weight: 800;
    margin-bottom: 10px;
}
.product-layout .block-details .detail-block .content {
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1.8em;
    font-size: 0.9em;
}
.product-layout .block-details .detail-block .button-holder {
    width: 100%;
    display: flex; justify-content: center;
}

/* block-photo */

.product-layout .block-photo {}
.product-layout .block-photo {}

/* product layout mobile */

.product-layout { max-height: 799.9px; }
.product-layout .block-photo { max-height: 799.9px; }
.product-layout .block-content { max-height: 799.9px; }
.product-layout .block-details { max-height: 799.9px; }

@media screen and (max-width: 1599px) {
    .product-layout { max-height: 759.9px; }
    .product-layout .block-photo { max-height: 759.9px; }
    .product-layout .block-content { max-height: 759.9px; }
    .product-layout .block-details { max-height: 759.9px; }
}

@media screen and (max-width: 1199px) {
    .product-layout { max-height: unset }
    .product-layout .block-photo { max-height: unset }
    .product-layout .block-content { max-height: unset }
    .product-layout .block-details { max-height: unset }

    .product-layout .block-photo { width: 50% }
    .product-layout .block-content { width: 50% }
    .product-layout .block-details { width: 100% }
}
@media screen and (max-width: 767px) {
    .product-layout .block-photo { width: 100% }
    .product-layout .block-content { width: 100% }
    .product-layout .block-details { width: 100% }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # [  product-photo-slider   ] # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.product-photo-slider {
    width: 100%;
}
.product-photo-slider .image-frame {
    padding: unset;
    height: 799.9px;
}
@media screen and (max-width: 1599px) {
    .product-photo-slider .image-frame { height: 759.9px }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  PRODUCTS   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.products-header {
    display: flex; align-items: center;
    justify-content: space-between;

    /*
    padding: 10px;
    background-color: var(--color-whity-dark);
    */
}

.products-header.sticky {
    position: fixed;
    width: 100%;
    left: 0px;
    top: 100px;

    z-index: 10;

    flex-direction: column;
    align-items: flex-start;

}
.products-header.sticky > .bttn {
    margin-top: 10px;
    order: 1;
}
.products-header.sticky .filter-block {
    background-color: var(--filter-color-black);
    padding-left: 14px;

    order: 0;
}
.products-header.sticky .filter-block > p {
    color: white;
}

@media screen and (max-width: 575px) {
    .products-header {
        padding-right:10px; padding-left: 10px;
    }
}

.products-header .filter-block {
    display: flex;
    align-items: center;
}
.products-header .filter-block > p {
    margin: 0px;
    padding: 0px;
    margin-right: 10px;
}
.products-header .filter-block .input-select {
    width: 160px;
}

.products-layout {
    margin-top: 20px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 10px;
}

@media screen and (max-width: 1199px) { .products-layout { grid-template-columns: repeat(3, 1fr) } }
@media screen and (max-width: 767px) { .products-layout { grid-template-columns: repeat(2, 1fr) } }

.products-layout .not-found {
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;

    color: var(--color-gray-0);

    margin-top: 80px;
    margin-bottom: 40px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # [  HEADER-SLIDER  ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.head-slid {
    height: 780px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;

    justify-content: center;
    align-items: center;
    text-align: center;
}
.head-slid img {
    pointer-events: none;
    position: absolute;
    object-fit: contain;
}
.head-slid .content {
    z-index: 1000;

    display: flex;
    justify-content: center;

    height: 460px;
    width: 100%;
}
.head-slid .content .body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
}

.head-slid .content .body p,
.head-slid .content .body h1,
.head-slid .content .body h2 {
    color: white;
}

.head-slid .content .body p {
    font-size: 1.2em;
}
.head-slid .content .body h1,
.head-slid .content .body h2 {
    font-size: 2.8em;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: start;

    text-shadow: 2px 2px 10px rgb(0 0 0 / 18%);
}

.head-slid > .slider-pag {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.head-slid > .slider-pag > p {
    margin: 0px;
    width: 18px; height: 18px;
    border-radius: 9px;
    border: 2px solid white;
    margin: 12px 4px;
    cursor: pointer;
}
.head-slid > .slider-pag > p.active {
    background-color: white;
}

@media screen and (max-width: 991px) {
    .head-slid .content .body h1,
    .head-slid .content .body h2 {
        text-align: center;
    }
    .head-slid .content .body {
        align-content: center;
        align-items: center;
    }
}


@media screen and (max-width: 575px) {
    .head-slid .content .body {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # [  BLOG   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.blog-list-menu {
    display: flex;
}
.blog-list-menu .blog-categories {
    display: flex;
}
.blog-list-menu .blog-categories p {
    margin-left: 10px;
}

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

@media screen and (max-width: 1199px) {
    .blog-list-frame {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

@media screen and (max-width: 1199px) {
    .related-blog-post {
        grid-template-columns: repeat(2, 1fr);
    }
}

.blog-post-layout .blog-info i {
    margin-right: 10px;
}
.blog-post-layout .blog-info {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.blog-post-layout .blog-title {
    margin-bottom: 40px;
}

.blog-post-layout .blog-lead {
    margin: 30px 0px;
}

.blog-post-layout .without-image {
    display: flex;
    justify-content: space-between;
}
.blog-post-layout .without-image .blog-title {
    margin-bottom: 10px;
}

@media screen and (max-width: 1199px) {
    .blog-post-layout .without-image {
        flex-direction: column;
    }
    .blog-post-layout .blog-info {
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 575px) {
    .blog-post-layout {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  PAGINATOR  ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.paginator-container {
    width: 100%;
    display: flex;
    justify-content: center;
}
.paginator-container .paginator {
    display: flex;
    align-items: center;
}
.paginator-container .paginator > p {
    cursor: pointer;
    padding: 10px 16px;
    height: 40px;
}

.paginator-container .paginator > p:hover {
    background-color: var(--color-gray-0);
    color: white;
}

.paginator-container .paginator > p.selected {
    background-color: var(--color-gray-0);
    color: white;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  BUTTON   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.bttn-icon {
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.3em;
}

.bttn-link {
    padding: 12px;
    border: unset;
    background-color: unset;
    height: 50px;
    margin: 0px;

    transition:
        0.2s background-color,
        0.2s color;
}

.bttn-link:hover {
    background-color: var(--color-gray-0);
    color: white;
}

.bttn-link-bold {
    padding: 6px 12px;
    border: unset;
    background-color: unset;
    font-weight: 600;
}

.bttn {
    height: 40px;
    padding: 0px 16px;
    font-weight: 500;
    border: unset;
    outline: 1px solid #00000000;
    outline-offset: -1px;
    color: var(--color-gray-0);
    background-color: white;
    transition:
        0.2s color,
        0.2s background-color;
}
.bttn:hover {
    color: white;
    background-color: var(--color-gray-0);
}
.bttn.black {
    color: white;
    background-color: var(--color-gray-0);
}

.bttn.black:hover {
    color: var(--color-gray-0);
    background-color: white;
}

@media screen and (max-width: 767px) {
    .bttn {
        font-size: 0.9em;
    }
}

.bttn.outline {
    background-color: #00000000;
    outline: 1px solid black;
    outline-offset: -1px;
}
.bttn:hover.outline {
    /* color: var(--color-gray-1);
    outline-color: var(--color-gray-1); */
    color: black;
    background-color: #fff;
}

.bttn.small {
    height: 26px;
    padding: 0px 10px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  INPUT - FIELD  ] # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.input-filed {
    width: 100%;
    height: 40px;
}
.input-filed input {
    width: 100%;
    height: 100%;
    border: unset;

    padding-left: 10px;

    outline: 1px solid #00000000;
    outline-offset: -1px;

    transition: 0.2s outline-color;
}
.input-filed input:focus {
    outline-color: var(--color-gray-0);
}
.input-filed.icon { position: relative; }
.input-filed.icon input {
    padding-left: 40px;
}
.input-filed.icon > i {
    position: absolute;
    top: 0px;
    left: 15px;
    line-height: 40px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  INPUT - CHECK  ] # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.input-check {
    display: flex;
}
.input-check > input {
    cursor: pointer;
    margin: 0px 10px;
    margin-top: 5px;
}
.input-check > p {
    font-size: 0.8em;
}
.input-check > p > b {
    cursor: pointer;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # [  INPUT - SELECTOR   ] # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.input-select {
    position: relative;
    width: 100%;
    height: 40px;
}
.input-select select {
    cursor: pointer !important;

    width: 100%;
    height: 40px;

    padding: 0px 10px;

    border: unset;

    outline: 1px solid var(--color-gray-0);
    outline-offset: -1px;

    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';

    transition: 0.2s outline-color;
}
.input-select > i {
    position: absolute;
    line-height: 40px;
    top: 0px;
    right: 10px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # [  STATIC PAGE  ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # [  FIX   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.bttn.add-to-cart {
    position: relative;
}
.bttn.add-to-cart p {
    display: inline-block;
    margin: 0px;
}
.bttn.add-to-cart .spinner-border {
    display: none;
    margin-bottom: 3px;
}

.bttn.add-to-cart.loading {
    pointer-events: none;
}
.bttn.add-to-cart.loading .spinner-border {
    position: absolute;
    display: inline-block;
    left: 50%;
    top: 31%;
}
.bttn.add-to-cart.loading > p {
    opacity: 0;
}