@import "form.css";

:root {
    --gutter: 2rem;
    --wrapper: 124rem;
    --wrapper-padding: calc((100% - var(--wrapper)) / 2 - var(--gutter));
    --sidewrap: calc(var(--wrapper) + var(--wrapper-padding) * 2 + var(--gutter) * 2);

    --font-raleway: "Raleway", sans-serif;
    --color-black: #060606;
    --color-text: #393A41;
    --color-gray: #A8A8A8;
    --color-gray-dark: #3B3B3B;
    --color-gray-middle: #717171;
    --color-gray-light: #E5E7EA;
    --color-disabled: #F6F6F6;
    --color-red: #8E0C00;
    --color-red-light: #B4000C;
    --color-blue: #1E2A72;
}

/* custom scrollbar START */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color:  var(--color-black)  var(--color-disabled);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 0.3rem;
}

*::-webkit-scrollbar-track {
    background: var(--color-disabled);
}

*::-webkit-scrollbar-thumb {
    background-color:  var(--color-disabled);
    border-radius: 1rem;
    border: none;
}
/* custom scrollbar END */

body {
    font-family: var(--font-raleway);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: normal;
    color: var(--color-black);
    background: #fff;
}

section {
    --padding: 10rem;

    padding-block: var(--padding);
}

section section {
    padding-block: 0;
}

section.no-padding {
    padding-block: 0;
}

section:not(.has-bg):not(.no-padding) + section:not(.has-bg):not(.no-padding) {
    padding-top: 0;
}

.has-bg {
    background: var(--color-disabled);
}

@media screen and (max-width: 575.9px) {
    section {
        --padding: 8rem;
    }
}

@media screen and (max-width: 393.9px) {} /* for pp mokup */

/* btn START */
.btn,
input[type="submit"] {
    --btn-color: var(--color-black);

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    min-width: 27.6rem;
    min-height: 4.8rem;
    padding: 1rem 2rem;

    background: var(--btn-color);
    border: 0.1rem solid var(--btn-color);
    border-radius: 10rem;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    
    overflow: hidden;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: 0.3s ease-out;
}

.btn:hover{
    --btn-color: var(--color-gray-dark);
}

.btn path,
.btn circle,
.btn ellipse {
    stroke: currentColor;
}

.btn_l {
    min-width: 29.5rem;
    min-height: 5.6rem;
    font-size: 1.6rem;
}

.btn_s {
    min-width: 7.8rem;
    min-height: 3.2rem;
    font-size: 1.1rem;
}

.btn_gray {
    --btn-color: var(--color-gray-middle);
}

.btn_white {
    --btn-color: #fff;

    background: transparent;
}

.btn_white:hover {
    --btn-color: rgb(255 255 255 / 50%);

    background: var(--btn-color);
}

.btn_transparent {
    background: rgb(255 255 255 / 25%);
    color: var(--btn-color);
}

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

@media screen and (max-width: 575.9px) {
    .btn {
        width: 100%;
    }
}
/* btn END */



/* btn-link START */
.btn-link {
    display: block;
    width: max-content;
    max-width: 100%;
    padding: 0.4rem 1rem;
    border: 0.1rem solid var(--color-black);
    border-radius: 10rem;
    font-size: 1.6rem;
    line-height: 1.5;
    transition: 0.3s;
}

.btn-link:hover {
    background: var(--color-black);
    color: #fff;
}

.btn-link_small {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: calc(16/11);
}
/* btn-link END */



/* link START */
.link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: calc(20/15);
    transition: 0.3s;
}
/* link END */



/* dash-link START */
.dash-link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: max-content;
    max-width: 100%;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-gray-dark);
    line-height: calc(20/15);
    position: relative;
    transition: 0.3s;
}

.dash-link::before,
.dash-link::after {
    content: "";
    display: block;
    width: 2.7rem;
    height: 0.1rem;
    background: currentColor;
    transition: inherit;
}

.dash-link::after {
    width: calc(100% - 3.9rem);
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
}

.dash-link:hover {
    translate: 1rem 0;
}

.dash-link:hover::before {
    box-shadow: -0.8rem 0 0 0 currentColor;
}

.dash-link:hover::after {
    opacity: 1;
}
/* dash-link END */



/* typo START */
.text {
    line-height: 1.5;
}

.text-l {
    line-height: calc(28/18);
    font-size: 1.8rem;
}

.text-s {
    font-size: 1.4rem;
    line-height: calc(20/14);
}

.title-l span {
    font-weight: 300;
}

.title-l,
.text h1 {
    font-weight: 700;
    font-size: 7.5rem;
    line-height: calc(96/75);
}

.title,
.text h2 {
    font-weight: 700;
    font-size: 5.4rem;
    line-height: calc(61/54);
}

.title-s,
.text h3 {
    font-weight: 700;
    font-size: 2.8rem;
    line-height: calc(46/28);
}

.title-xs,
.text h4 {
    --fs: 1.6rem;
    --ls: 0.2;

    font-weight: 500;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    line-height: 1.75;
    text-transform: uppercase;
}

.text h5 {
    font-size: 1.4rem;
    color: var(--color-gray-dark);
}

.title-text {
    font-weight: 700;
    font-size: 4.2rem;
    line-height: calc(45/42);
    margin-bottom: 2.5rem;
}

.text ul,
.text ol {
    padding-left: 2.8rem;
}

.text ul li {
    display: list-item;
    list-style-type: disc;
}

.text ol li {
    display: list-item;
    list-style-type: decimal;
}

.text p a:not(.btn) {
    text-decoration: underline;
}

.text p a:not(.btn):hover {
    text-decoration: none;
}

.text iframe {
    display: block;
    aspect-ratio: 560 / 315;
    width: 81rem;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.text blockquote {
    display: block;
    padding: 4.5rem 7rem;
    background: var(--color-disabled);
    font-style: italic;
    font-size: 2.6rem;
    line-height: calc(43/26);
    letter-spacing: 0.02rem;
}

.text * + h1,
.text * + h2,
.text * + h3 {
    margin-top: 6rem;
}

.text * + h5 {
    margin-top: 1.6rem;
}

.text * + p,
.text * + ol,
.text * + ul {
    margin-top: 1.5rem;
}


.text li + li {
    margin-top: 0.6rem;
}

.text * + iframe,
.text * + p:has(iframe) {
    margin-top: 6rem;
}

.text * + blockquote {
    margin-top: 6rem;
}

@media screen and (max-width: 1024.9px) {
    .title-l {
        font-size: 5.7rem;
    }
}

@media screen and (max-width: 575.9px) {
    .text {
        line-height: 1.5;
    }

    .text-l {
        line-height: calc(28/18);
    }

    .title, 
    .text h1 {
        font-size: 4rem;
        line-height: 1.1;
    }

    .title-l {
        font-size: 4rem;
        line-height: 1.1;
        letter-spacing: 0.1rem;
    }

    .title-s,
    .text h3 {
        font-size: 2.4rem;
        line-height: 1.5;
    }

    .title-text {
        margin-bottom: 2rem;
    }

    .text blockquote {
        padding: 4rem;
        font-size: 2rem;
    }
}
/* typo END */



/* pagination START */
.pagination,
.blog-pagination .links {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    padding-top: 2rem;
}

.blog-pagination .links {
    padding-top: 7rem;
}

.pagination__item {
    border-radius: 0.2rem;
}

.pagination__item a,
.pagination__item span,
.blog-pagination .links a,
.blog-pagination .links b {
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    border: 0.1rem solid var(--color-black);
    border-radius: 0.2rem;
    font-weight: 400;
    font-size: 1.6rem;
    transition: 0.3s;
}

.pagination__item:has(.previous) a,
.pagination__item:has(.next) a,
.blog-pagination .links a.next,
.blog-pagination .links a.prev {
    font-family: monospace;
    border-width: 0;
    border-radius: 0.2rem;
    color: var(--color-gray);
}

.pagination__item.current a,
.blog-pagination .links b {
    background: var(--color-gray-dark);
    font-weight: 400;
    color: #fff;
}

.pagination__item .disabled {
    opacity: 1;
}

.pagination__item:not(.current):hover a,
.blog-pagination .links a:hover  {
    background: var(--color-gray-middle);
    border-color: var(--color-gray-middle);
    color: #fff;
}

.blog-pagination .results,
.blog-pagination .links a.frist,
.blog-pagination .links a.last {
    display: none;
}
/* pagination END */



/* global START */
.mirror {
    display: block;
    scale: -1 1;
}

.slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4rem;
    margin-bottom: 3rem;
}

.title-xs + .slider-header {
    padding-top: 1rem;
}

@media screen and (max-width: 575.9px) {
    .slider-header {
        margin-bottom: 2rem;
    }
}
/* global END */



/* header START */
.header {    
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header.scrolled {
    box-shadow: 0 0.3rem 0.3rem 0 rgb(0 0 0 / 15%);
}

.header__content {
    padding-block: 2rem;
}

.header__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 1.7rem;
}

.header__logo {
    width: 36rem;
    max-width: 100%;
    margin-inline: auto;
}

.header__items {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.header__items .header-icon {
    display: flex;
    transition: 0.3s;
}

.header__items .header-icon:hover {
    scale: 1.15;
}

.header__items .customersignin__item-text {
    display: none;
}

.header__items .bato-links-item_custom {
    display: none;
}


.header__swiss-made {
    width: 11rem;
}

.customersignin__item {
    display: flex;
    align-items: center;
    gap: 1.7rem;
}

.customersignin__icon {
    flex: 0 0 auto;
    width: 1.8rem;
    aspect-ratio: 1;
}

@media screen and (max-width: 1024.9px) {
    .header__content {
        display: flex;
        gap: 2rem;
        padding-block: 1.5rem;
    }

    .header__swiss-made,
    .header__items .bato-links-item,
    .header__items .currency-selector,
    .header__items .langs-selector {
        display: none;
    }

    .header__logo {
        flex: 1;
        width: 21rem;
        margin-left: 0;
        margin-right: auto;
    }
}

@media screen and (max-width: 575.9px) {
    .header__content {
        gap: 1rem;
    }

    .header__logo {
        flex: unset;
    }
}
/* header END */



/* footer START */
.footer {
    padding-block: 6rem;
    background: var(--color-black);
    color: #fff;
}

.footer__before {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 5rem;
    margin-bottom: 5rem;
}

.footer-partner {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.footer-logo {
    max-width: 100%;
}

.footer-partner__image {
    flex: 0 0 auto;
    width: 9.3rem;
}

.footer-partner__title,
.footer-instagram__title {
    --fs: 1rem;
    --ls: 0.2;

    max-width: 20rem;
    font-weight: 300;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    text-transform: uppercase;
    line-height: 1.7;
}

.footer-instagram {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.6rem;
    transition: 0.3s;
}

.footer-instagram:hover {
    opacity: 0.7;
}

.footer-instagram__image {
    width: 2.4rem;
}

.footer-instagram__title {
    max-width: 10rem;
}

@media screen and (max-width: 767.9px) {
    .footer__before {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo {
        width: 40rem;
        order: -1;
    }
}

@media screen and (max-width: 575.9px) {
    .footer {
        padding-block: 5rem 2rem;
    }

    .footer__before {
        gap: 4.5rem;
        margin-bottom: 3.5rem;
    }

    .footer-logo {
        width: 32rem;
    }

    .footer-partner__image {
        width: 8rem;
    }

    .footer-instagram__image {
        width: 3rem;
    }
}
/* footer END */



/* footer links START */
.footer .links {
    padding-top: 5rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.footer .links__block {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.footer .links__header {
    --fs: 1.2rem;
    --ls: 0.2;

    font-weight: 700;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) * var(--ls));
    text-transform: uppercase;
}

.footer .links__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.footer .links__item {
    font-size: 1.4rem;
    line-height: calc(20/14);
    position: relative;
}

.footer a.links__item::after {
    content: "";
    display: block;
    width: 0;
    height: 0.1rem;
    background: currentColor;
    position: absolute;
    bottom: 0;
    transition: 0.3s ease-out;
}

.footer .links__item:hover::after {
    width: 100%;
}

.footer .copyright {
    font-weight: 300;
}
/* footer links END */



/* footer links-mobile START */
.links-mobile {
    padding-top: 3rem;
}

.links-mobile-item {
    padding-block: 3.2rem;
    border-top: 0.1rem solid var(--color-gray-dark);
}

.links-mobile-item:first-child {
    border: 0;
}

.links-mobile-item__header {
    --fs: 1.6rem;
    --ls: 0.1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    font-weight: 600;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    line-height: calc(85/80);
    text-transform: uppercase;
    color: #fff;
}

.links-mobile-item__icon {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    position: relative;
    transition: 0.3s;
}

.links-mobile-item__icon::before,
.links-mobile-item__icon::after {
    content: "";
    display: block;
    width: 1rem;
    height: 0.1rem;
    background: currentColor;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: inherit;
}

.links-mobile-item__icon::after {
    rotate: 90deg;
}

.links-mobile-item.active .links-mobile-item__icon {
    rotate: 180deg;
}

.links-mobile-item.active .links-mobile-item__icon::after {
    width: 0;
}

.links-mobile-item__content {
    display: none;
}

.links-mobile-item__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-top: 2rem;
}
/* footer links-mobile END */



/* icon-modal START */
.icon-modal {
    padding: 1rem;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    pointer-events: none;
    opacity: 0;
    margin-inline: -1rem;
    transition: 0.3s;
}

.icon-modal-parent {
    position: relative;
    z-index: 5;
}

.icon-modal-parent:hover .icon-modal {
    pointer-events: auto;
    opacity: 1;
}

.icon-modal__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 0.5rem;
    white-space: nowrap;
    text-transform: uppercase;
}

.icon-modal__item:hover {
    color: var(--color-red);
}

.icon-modal__item.current {
    font-weight: 600;
    color: var(--color-red);
}
/* icon-modal END */



/* cart-widget START */
.cart-widget {
    position: relative;
}

.cart-widget__count {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding-inline: 0.3rem;
    background: var(--color-black);
    border-radius: 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    position: absolute;
    left: 60%;
    bottom: 60%;
}

.cart-widget:not(.active) .cart-widget__count {
    opacity: 0;
    pointer-events: none;
}
/* cart-widget END */



/* currency-selector START */
.currency-selector {
    padding-left: 2.5rem;
    border-left: 0.1rem solid;
    position: relative;
    z-index: 5;
    margin-left: 0.9rem;
}

.currency-selector__toggler {
    aspect-ratio: 1;
    width: 1.8rem;
    font-weight: 500;
    font-size: 2rem;
    color: var(--color-gray-middle);
}
/* currency-selector END */



/* langs-selector START */
.langs-selector__item {

}
/* langs-selector END */



/* hero START */
.hero .hero__content .breadcrumbs {
    margin: 0;
}

.hero__image {
    width: 100%;
    aspect-ratio: 1440/118;
    margin-bottom: 1.2rem;
    min-height: 6rem;
}
/* hero END */



/* under-hero START */
.under-hero {
    padding-block: 3.5rem 4rem;
}

.under-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
}

.under-hero__title {
    flex: 0 0 auto;
    --fs: 8rem;
    --ls: 0.02;

    font-weight: 700;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    line-height: calc(85/80);
}

.under-hero__content {
    width: 71.5rem;
    max-width: 100%;
}

.under-hero + .bato-imagetext-alt {
    margin-top: 2rem;
}


@media screen and (max-width: 767.9px) {
    .under-hero__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 575.9px) {
    .under-hero {
        text-align: center;
    }

    .under-hero__inner {
        align-items: center;
        gap: 1rem;
    }

    .under-hero__title {
        font-size: 5rem;
    }
}
/* under-hero END */



/* products-item START */
.products-item {
    box-sizing: unset;
    width: 100%;
    min-height: 100%;
    max-width: 29.5rem;
    text-align: center;
    background: linear-gradient(to bottom,  rgba(246,246,246,0) 0%, rgba(246,246,246,1) 100%);
    color: var(--color-black);
    margin-inline: auto;
}

.products-item__inner {
    box-sizing: unset;
    width: 100%;
    padding-block: 1.6rem;
    overflow: hidden;
}

.products-item__image {
    display: block;
    aspect-ratio: 215/330;
    width: 72%;
    margin: 0 auto 0.5rem;
    transition: 0.6s;
    mix-blend-mode: multiply;
}

.products-item:hover .products-item__image {
    scale: 1.05;
}

.products-item__title {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: calc(28/18);
}

.products-item__info {
    color: var(--color-gray-dark);
}

.products-item__price {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.75;
}

@media screen and (max-width: 575.9px) {
    .products-item__image {
        width: 80%;
    }
}
/* products-item END */



/* products-main START */
.products-main__nothing {
    padding-block: 5rem;
    text-align: center;
}
/* products-main END */



/* articles START */
.articles {
    overflow: hidden;
    padding-bottom: 3.2rem;
}

.articles .swiper {
    overflow: visible;
}

@media screen and (max-width: 1024.9px) {
    .articles .slider-nav {
        padding-top: 3rem;
    }
}

@media screen and (max-width: 575.9px) {
    .articles__slider {
        padding-top: 0.5rem;
    }
}
/* articles END */



/* articles-item START */
.articles-item {
    display: flex;
    width: 92.5rem;
    max-width: calc(100dvw - 4rem);
    height: 100%;
    background: var(--color-disabled);
}

.articles-item__image {
    flex: 0 0 auto;
    width: 55.5%;
    aspect-ratio: 504/342;
    overflow: hidden;
}

.articles-item__image img {
    transition: 0.6s ease-out;
}

.articles-item:hover .articles-item__image img {
    scale: 1.05;
}

.articles-item__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 6rem 4rem;
}

.articles-item__cats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.articles-item__cat:hover {
    background: #fff;
    color: var(--color-black);
}

.articles-item__date {
    --fs: 1.2rem;
    --ls: 0.1;

    font-weight: 300;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    text-transform: uppercase;
    color: var(--color-gray-dark);
}

.articles-item__title {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.25;
    margin-bottom: 3rem;
}

.articles-item__link {
    margin-top: auto;
}

@media screen and (max-width: 767.9px) {
    .articles-item {
        width: 32.6rem;
        flex-direction: column;
    }

    .articles-item__image {
        width: 100%;
        aspect-ratio: 326/221;
    }

    .articles-item__content {
        padding: 2rem;
        padding-bottom: 3.5rem;
    }
}

@media screen and (max-width: 575.9px) {
    .articles-item__cats {
        margin-bottom: 0.2rem;
    }

    .articles-item__title {
        margin-bottom: 6rem;
    }
}
/* articles-item END */



/* breadcrumbs START */
.breadcrumbs {
    color: var(--color-gray);
    font-size: 1.1rem;
    line-height: calc(16/11);
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.breadcrumbs__divider {
    display: block;
    aspect-ratio: 1;
    width: 0.4rem;
    background: currentColor;
    border-radius: 100%;
    opacity: 0.5;
}

.breadcrumbs__link:hover {
    text-decoration: underline;
}

.breadcrumbs__title {
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-black);
}

@media screen and (max-width: 575.9px) {
    .breadcrumbs__list {
        justify-content: center;
    }
}
/* breadcrumbs END */



/* blog START */
.blog .breadcrumbs {
    margin-bottom: 2rem;
}

.blog__image {
    aspect-ratio: 1240/522;
    margin-bottom: 1.5rem;
}

.blog-list__list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-list__list .articles-item {
    display: grid;
    height: 34.2rem;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    overflow: hidden;
}

.blog-list__list .articles-item__image {
    grid-column: span 8;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    overflow: hidden;
}

.blog-list__list .articles-item__content {
    width: 100%;
    grid-column: span 4;
}

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

    .blog-list__list .articles-item {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .blog-list__list .articles-item__image {
        height: auto;
    }

    .blog-list__list .articles-item__content {
        padding: 2rem;
    }
}

@media screen and (max-width: 767.9px) {
    .blog-list__list {
        grid-template-columns: repeat(1, 1fr);
    }

    .blog__image {
        margin-inline: -2rem;
    }
}
/* blog END */



/* blog-description START */
.blog-description {
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

.blog-description__back {
    --btn-color: var(--color-gray-middle);

    grid-column: span 1;
    width: auto;
    margin-top: 1.2rem;
}

.blog-description__content {
    grid-column: span 10;    
}

.blog-description__title {
    font-size: 4.2rem;
    line-height: calc(60/42);
    margin-bottom: 0.8rem;
}

.blog-description__panel,
.blog-description__cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.blog-description__panel {
    margin-bottom: 3rem;
}

.blog-description__date {
    --fs: 1.4rem;
    --ls: 0.05;

    font-weight: 300;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    text-transform: uppercase;
    color: var(--color-gray-dark);
}

@media screen and (max-width: 1024.9px) {
    .blog-description {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 575.9px) {
    .blog-description__title {
        font-size: 4rem;
        line-height: 1.1;
    }
}
/* blog-description END */



/* single-post START */
.single-post__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.single-post__content {
    grid-column: 2 / span 10;
}

.single-post__text {
    color: var(--color-gray-dark);
}

.single-post__footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    margin-top: 6rem;
    border: 0.1rem solid var(--color-gray);
    border-left: 0;
    border-right: 0;
}

.single-post__back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-gray-middle);
}

.single-post__back:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1024.9px) {
    .single-post__inner {
        display: block;
    }
}
/* single-post END */



/* social-share START */
.social-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.social-share__title {
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-gray-middle);
}

.social-share__list {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.social-share__link {
    transition: 0.3s;
}

.social-share__link:hover {
    opacity: 0.7;
    scale: 1.1;
}
/* social-share END */



/* page-cms START */
.page-cms-content__text {
    width: 103rem;
    max-width: 100%;
    margin-inline: auto;
}

.cms-content__text p {
    color: var(--color-gray-dark);
}
/* page-cms END */



/* category-hero START */
.category-hero {
    padding: 0;
    background: unset;
}

.category-hero__image {
    width: 100%;
    aspect-ratio: 1440/400;
    background: url(../img/logo.svg) center center no-repeat;
    background-size: 10rem auto;
    background-color: var(--color-gray-dark);
    margin-bottom: 1rem;
}

.category-hero__image .mobile {
    display: none;
}


@media screen and (max-width: 767.9px) {
    .category-hero__image .desktop {
        display: none;
    }


    .category-hero__image .mobile {
        display: block;
    }
}

@media screen and (max-width: 575.9px) {
    .category-hero__image {
        aspect-ratio: 391/273;
        margin-bottom: 1.5rem;
    }
}
/* category-hero END */



/* additional-description START */
.additional-description.has-bg {
    background: var(--color-disabled);
}

.additional-description__pretitle {
    text-align: center;
    margin-bottom: 1rem;
}

.additional-description__title {
    text-align: center;
    margin-bottom: 2.5rem;
}

.additional-description__content {
    column-count: 2;
    column-gap: var(--gutter);
}

@media screen and (max-width: 767.9px) {
    .additional-description__content {
        column-count: unset;
    }
}

@media screen and (max-width: 575.9px) {
    .additional-description {
        padding-block: 3.5rem 7rem;
    }

    .additional-description__pretitle {
        text-align: left;
        margin-bottom: 1.5rem;
    }

    .additional-description__title {
        text-align: left;
        margin-bottom: 0.8rem;
    }
}
/* additional-description END */



/* cms-content START */
.cms-content__inner {
    width: 103rem;
    max-width: 100%;
    padding-top: 2rem;
    margin-inline: auto;
}
/* cms-content END */



/* products START */
.product-list {
    padding-bottom: 10rem;
}

.product-list__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4rem 2rem;
}

@media screen and (max-width: 767.9px) {
    .product-list__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem 0;
    }
}
/* products END */



/* category-item START */
.category-item {
    --transition: 0.4s ease-out;

    display: block;
    max-width: 100%;
    width: 22.4rem;
}

.category-item__cover {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}

.category-item__image {
    aspect-ratio: 238/382;
    width: 100%;
    margin-inline: auto;
    transition: var(--transition);
}

.category-item:hover .category-item__image {
    translate: -2rem 0;
}

.category-item__bg {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transition: var(--transition);
}

.category-item:hover .category-item__bg {
    opacity: 1;
}

.category-item__btn {
    border-color: var(--color-gray-dark);
    background: var(--color-gray-dark);
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    translate: -50% 0;
    opacity: 0;
    transition: var(--transition);
}

.category-item:hover .category-item__btn {
    translate: -50% -2.5rem;
    opacity: 1;
}

.category-item__title {
    display: flex;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    white-space: nowrap;
}

.category-item__title span {
    transition: var(--transition)
}

.category-item__title .mirror {
    font-weight: 300;
    color: var(--color-gray-middle);
}

.category-item:hover .category-item__title span:not(.mirror) {
    translate: calc(-50% - 0.5rem);
}

.category-item:hover .category-item__title .mirror {
    translate: calc(50% + 0.5rem);
    opacity: 0;
}

@media screen and (max-width: 575.9px) {
    .category-item {
        width: 17.6rem;
    }

    .category-item__title {
        --fs: 1.4rem;
        --ls: 0.1;

        flex-direction: column;
        gap: 0;
        font-weight: 800;
        font-size: var(--fs);
        letter-spacing: calc(var(--fs) *var(--ls));
        line-height: 1.4;
    }

    .category-item:hover .category-item__title span:not(.mirror) {
        translate: 0 -50%;
    }

    .category-item:hover .category-item__title .mirror {
        translate: 0 50%;
        opacity: 0;
    }
}
/* category-item END */



/* custom-modal START */
@keyframes animateModal {
    0% {
        translate: 100% 0;
    }

    100% {
        translate: 0;
    }
}

.custom-modal {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 99999;
    color: var(--color-gray-middle);
    padding: 0 !important;
}

.custom-modal__overlay {
    background: #000;
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.25;
}

.custom-modal__inner {
    display: flex;
    flex-direction: column;
    width: 395px;
    max-width: 100%;
    height: 100dvh;
    padding-block: 2.4rem 1.6rem;
    background: #fff;
    margin-left: auto;
    animation-duration: 0.3s;
}

.custom-modal.in .custom-modal__inner {
    animation-name: animateModal;
}

.custom-modal__header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    padding-block: 0.8rem 1.6rem;
    border-bottom: 1px solid var(--color-gray-light);
    color: var(--color-gray-middle);
    margin-inline: 3.2rem;
    margin-bottom: 1.5rem;
}

.custom-modal__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.custom-modal__footer {
    flex: 0 0 auto;
    padding-top: 10px;
    margin-top: auto;
}

.custom-modal__list {
    flex: 1;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-black) #d3d3d3;
}

.custom-modal__hr {
    width: 100%;
    height: 1px;
    background: var(--color-gray-light);
    margin-block: 14px;
}

.custom-modal__footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-modal__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 0.1rem solid var(--color-gray-light);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2;
    color: var(--color-gray-middle);
    text-transform: calc(28/15);
}

.custom-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-inline: 8px;
}

.custom-modal__row.total {
    padding-top: 1rem;
    border-top: 0.1rem solid var(--color-gray-light);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-black);
    margin-top: 5px;
}

.custom-modal__row.shipping .custom-modal__row-value {
    font-weight: 600;
}

.custom-modal__btns {
    padding-top: 10px;
}

.custom-modal__btn {
    width: 100%;
}

.custom-modal__empty {
    padding-block: 50px;
    text-align: center;
    color: var(--color-red);
}

.modal-backdrop {
    display: none !important;
}
/* custom-modal END */



/* cart-modal START */
.cart-modal .custom-modal__footer {
    padding-inline: 2rem;
}

.custom-modal__list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* cart-modal END */



/* cart-modal-item START */
.cart-modal-item {
    display: flex;
    padding-right: 3rem;
    gap: 1.5rem;
    font-weight: 300;
    color: var(--color-gray-middle);
}

.cart-modal-item__media {
    flex: 0 0 auto;
    width: 11.5rem;
    background: linear-gradient(to bottom, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 1) 100%);
}

.cart-modal-item__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 2rem;
}

.cart-modal-item__title {
    font-weight: 600;
    font-size: 1.8rem;
    line-height: calc(28/18);
}

.cart-modal-item__title-link {
    text-overflow: ellipsis;
    color: var(--color-black);
    overflow: hidden;
}

.cart-modal-item__title-link:hover {
    color: var(--color-red);
}

.cart-modal-item__title-qty {
    flex: 0 0 auto;
}

.cart-modal-item__brand {
    --fs: 13px;
    --ls-mult: 0.1;

    font-weight: 500;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) * var(--ls-mult));  
    text-transform: uppercase;
}

.cart-modal-item__attributes {
    color: var(--color-gray-middle);
}

.cart-modal-item__remove {
    display: block;
    font-size: 1.3rem;
    color: var(--color-gray);
    margin-top: auto;
}

.cart-modal-item__remove path {
    color: currentColor;
}

.cart-modal-item__remove:hover {
    color: var(--color-red);
}


.cart-modal-item__details {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    font-size: 1.6rem;
    line-height: calc(28/16);
}

.cart-modal-item__price {
    color: var(--color-black);
}

.cart-modal-item__qty {
    font-size: 1.4rem;
    color: var(--color-gray-middle);
}

.cart-modal-item__total {
    font-weight: 600;
    color: var(--color-black);
}
/* cart-modal-item END */



/* filters-modal START */
.cart-modal:not(.in),
.filters-modal:not(.in) {
    opacity: 0;
    pointer-events: none;
}
/* filters-modal END */



/* filters START */
.filters-toggler {
    min-width: 21.6rem;
    position: fixed;
    z-index: 99;
    bottom: 2.5rem;
    left: 50%;
    translate: -50% 0;
}

.filters-wrap,
.filters,
.filters__inner {
    height: 100%;
    overflow: hidden;
}

.filters-wrap {
    display: flex;
    flex-direction: column;
}

.filters__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filter__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-inline: 4.5rem;
    padding-bottom: 4rem;
    overflow-y: auto;
}

.filters__footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-inline: 3.2rem;
}

.filters__submit {
    width: 100%;
}

.filters__reset {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    line-height: calc(20/13);
    color: var(--color-gray);
    text-decoration: underline;
    cursor: pointer;
}

.filters__reset:hover {
    text-decoration: none;
}

.filters__item-title {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.75;
    color: var(--color-gray-dark);
    margin-bottom: 1.5rem;
}

.filters__item-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.filters__item-list:has(.color) {
    flex-flow: row wrap;
    gap: 1.1rem;
}

.filters__label {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-black);
    position: relative;
    cursor: pointer;
}

.filters__label > span {
    position: static;
}

.filters__label .magnitude {
    display: none;
}

@media screen and (max-width: 575.9px) {
    .filters-toggler {
        width: 100%;
        height: 5.6rem;
        border: 0;
        border-radius: 0;
        bottom: 0;
        background: var(--color-black);
        color: #fff;
    }

    .filters-toggler:hover {
        background: var(--color-gray-dark);
        color: #fff;
    }

    .filters-toggler .btn__icon {
        display: none;
    }
}
/* filters END */



/* active-filters START */
.active-filters {
    padding: 1.5rem 3.2rem;
    margin-bottom: 2rem;
}

.active-filters.hide {
    display: none;
}

.active-filters__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}

.active-filters__title {
    font-weight: 600;
}

.active-filters__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.active-filters__item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.5rem 1rem;
    border-radius: 99rem;
    background: var(--color-gray-light);
}

.active-filters__item .close {
    color: var(--color-red);
    opacity: 1;
    transition: 0.3s;
}

.active-filters__item .close:hover {
    opacity: 0.5;
}
/* active-filters END */



/* storecluster START */

/* inherent START */
.storecluster {
    scroll-margin-top: 150px;
    position: relative;
}

.store_category {
    padding: 3px 5px;
    background: darkgray;
    color: white;
    border-radius: 3px;
    display: inline-block;
    margin: 3px 3px 3px 0;
}

.category-input {
    clear: left;
}

.slidecontainer {
    padding: 10px 0;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color-black);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color-black);
    cursor: pointer;
}

.slidecontainer.disabled {
    pointer-events: none;
}

.slidecontainer.disabled .slider::-webkit-slider-thumb {
    background: #d3d3d3 !important;
}

.slidecontainer.disabled .slider::-moz-range-thumb {
    background: #d3d3d3 !important;
}

#content > article.store-item {
    display: none;
}

.store-item .divide-left {
    border-left: 1px solid #f1f1f1;
}

.store-item .divide-left th {
    text-align: right;
}

.store-item .divide-left tr {
    height: 1.563rem;
}

.store-item-footer div:first-child {
    flex: 0 0 65%;
    -webkit-box-flex: 0;
}

.map-wrapper {
    position: relative;
}

.storecluster__inner {
    height: 67rem;
}

.storecluster__map {
    height: 100%;
}

#w3b_map {
    height: 100%;
}

#map-overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
}

#map-overlay.hidden {
    display: none;
}

.loader,
.loader:before,
.loader:after {
    background: #ffffff;
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}

.loader {
    color: #ffffff;
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    position: absolute;
    top: 0;
    content: '';
}

.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 1.5em;
}

@-webkit-keyframes
load1 {
    0%, 80%, 100% { box-shadow: 0 0; height: 4em;}
    40% { box-shadow: 0 -2em; height: 5em; }
}
@keyframes
load1 {
    0%, 80%, 100% { box-shadow: 0 0; height: 4em; }
    40% { box-shadow: 0 -2em; height: 5em; }
}

.store_tag img {
    max-height: 20px;
    padding-right: 4px;
}

h3.card-title {
    margin-bottom: 0;
}

h3.card-title a {
    margin-left: 5px;
    font-size: 1.2rem;
    position: relative;
    top: -2px;
}

.store-tags, .store-categories {
    display: none;
    margin: 3px 0;
}

.marker-cluster-large,
.marker-cluster-medium,
.marker-cluster-small {
    background-color: {$clusterColor}66
}

.marker-cluster-large div,
.marker-cluster-medium div,
.marker-cluster-small div {
    background-color: {$clusterColor}99
}

.marker-cluster span {
    color: {$clusterTextColor}
}
/* inherent END */




#main:has(.storecluster) .hero,
#main:has(.storecluster) .under-hero {
    display: none;
}

.storecluster .material-icons {
    display: none;
}

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

.storecluster__map,
.storecluster__content {
    flex: 1;
}

.storecluster__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.storecluster__list {
    flex: 1;
    overflow-y: auto;
}

.storecluster__address-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding-block: 1rem;
    padding-left: 2rem;
    background: var(--color-disabled);
    margin-bottom: 2rem;
    margin-left: -2rem;
}

.storecluster__address-inputs {
    flex: 1;
    position: relative;
}

input.storecluster__search-input {
    height: 4.8rem;
    padding-left: 5.3rem;
    border-color: var(--color-black);
    border-radius: 99rem;
    background: url(../img/icons/icon-target.svg) left 1.3rem center no-repeat #fff;
}

.storecluster__radius {
    width: 10.8rem;
    height: calc(100% - 0.2rem);
    margin: 0.1rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.storecluster__radius::before {
    content: "";
    display: block;
    width: 0.1rem;
    height: 2rem;
    background: var(--color-gray-middle);
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
}

.storecluster__radius-select {
    border: 0;
    border-radius: 99rem;
}

.storecluster__address-radios {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.storecluster__tags-radios .storecluster__tags-item:nth-child(2) {
    order: 1;
}

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

.storecluster__submit input[type='submit'] {
    min-width: 170px;
}

.storecluster__results {
    color: var(--color-gray-middle);
}

.storecluster__list {
    padding-right: 10rem;
    padding-top: 15px;
}

.storecluster-item {
    padding-bottom: 1.8rem;
    padding-inline: 2rem;
    border-bottom: 0.1rem solid var(--color-gray);
    margin-bottom: 1.8rem;
}

.storecluster-item:last-child {
    border: 0;
}

.storecluster-item__title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-gray-middle);
    margin-bottom: 0.6rem;
}

.storecluster-item__info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.storecluster-item__address {
    font-style: normal;
}

.storecluster-item__footer {
    text-align: right;
}

.storecluster-item__footer ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.storecluster-item__footer ul li {
    display: block;
    list-style: none;
}

.storecluster-item__distance {
    font-weight: 600;
}

.storecluster-item__distance a {
    display: none;
}

.IPAZAH-content-container img {
    width: 32px;
    height: auto;
}

.gm-style .gm-style-iw-d {
    padding: 20px !important;
    overflow: auto !important;
}

@media screen and (max-width: 1024.9px) {
    .storecluster__list {
        padding-right: 0;
    }
}

@media screen and (max-width: 767.9px) {
    .storecluster__inner {
        flex-direction: column;
        gap: 0;
    }

    .storecluster__map-wrapper,
    .storecluster__content {
        width: 100%;
    }

    .storecluster__inner {
        height: auto;
    }

    .storecluster__content {
        height: auto;
    }

    .storecluster__address-head {
        flex-direction: column;
        padding: 4rem 2rem;
        margin: 0;
    }

    .storecluster__address-inputs {
        width: 100%;
    }

    .storecluster__search {
        width: 100%;
    }

    .storecluster__map {
        height: auto;
    }

    #w3b_map {
        aspect-ratio: 1;
        height: auto;
    }
}

@media screen and (max-width: 575.9px) {
    .storecluster__submit,
    .storecluster__submit input[type='submit'] {
        width: 100%;
    }
}
/* storecluster END */



/* page-404-hero START */
.page-404-hero {
    text-align: center;
    position: relative;
    z-index: 1;
}

.page-404-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.page-404-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    min-height: 66.5rem;
}
/* page-404-hero END */



/* product-media START */
.hidden-trigger {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
}

.product-media__container {
    display: flex;
}

.product-media__tools {
    width: 28rem;
    max-width: 100%;
}

.product-media-slider {
    display: flex;
    flex-direction: column;
    width: 18rem;
    height: 40rem;
    gap: 0.8rem;
    margin-top: 7.5rem;
}

.product-media-slider .swiper {
    width: 100%;
    height: 100%;
}

.product-media-slider__item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 9.5rem;
    border: 0.1rem solid transparent;
    cursor: pointer;
    position: relative;
}

.swiper-slide-thumb-active .product-media-slider__item::before {
    content: "";
    width: 100%;
    height: 0.3rem;
    background: var(--color-black);
    position: absolute;
    bottom: 0;
    left: 0;
}

.product-media-slider__item {
    position: relative;
}

.product-media-slider__icon {
    width: 3.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.product-media-slider__item video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.product-media__main {
    width: 39.4rem;
    max-width: 100%;
    mix-blend-mode: multiply;
}

.product-media__main .swiper,
.product-media__main .swiper-slide {
    display: flex;
    width: 100%;
    height: 100%;
}

.product-media__main .swiper-slide {
    height: auto;
    align-items: center;
}

.product-media-slider-main__item {
    display: flex;
    align-items: center;
    position: relative;
}

.product-media__btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    padding-top: 10.5rem;
    gap: 1rem;
}

.product-media__btn {
    --fs: 1.2rem;
    --ls: 0.05;

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border: 0.1rem solid var(--color-black);
    border-radius: 10rem;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    color: var(--color-black);
    transition: 0.3s;
    cursor: pointer;
}

.product-media__btn:hover {
    background: var(--color-black);
    color: #fff;
}

.product-media__btn img {
    transition: inherit;
}

.product-media__btn:hover img {
    filter: invert(1);
}

@media screen and (max-width: 1024.9px) {
    .product-media__container {
        flex-direction: column;
        gap: 1rem;
    }

    .product-media__main {
        order: -1;
        margin-inline: auto;
    }

    .product-media__tools {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        height: auto;
        gap: 2.4rem;
    }

    .product-media__btns {
        order: -1;
        padding: 0;
    }

    .product-media__list {
        width: auto;
        height: auto;
        margin: 0;
    }
}

@media screen and (max-width: 575.9px) {
    .product-media__main {
        width: 26.5rem;
    }

    .product-media__btn {
        border-radius: 0.5rem;
    }

    .product-media-slider__item {
        width: 8rem;
    }
}
/* product-media END */



/* product-main START */
.product-main {
    padding-block: 1.5rem 4rem;
    background: var(--color-disabled);
}

.product-main .breadcrumbs {
    position: relative;
    z-index: 2;
    margin-bottom: -1.6rem;
}

.product-main__info {
    padding-top: 8.5rem;
}

.product-main__title {
    font-weight: 600;
    font-size: 6rem;
}

.product-main__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.4rem;
}

.product-main__details {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-gray-middle);
}

.product-prices {
    font-weight: 500;
    font-size: 2.4rem;
    order: 1;
    line-height: calc(28/24);
}

.product-description {
    color: var(--color-gray-dark);
    margin-bottom: 2.4rem;
}

.product-actions form {
    display: block;
}

@media screen and (max-width: 1024.9px) {
    .product-main {
        padding-block: 0 8rem;
        background: #fff;
        overflow: hidden;
    }

    .product-main__wrapper {
        padding-inline: 0;
    }

    .product-main__container {
        flex-direction: column;
    }

    .product-media-col {
        padding: 2rem;
        background: var(--color-disabled);
        padding-bottom: 3.2rem;
    }

    .product-main .breadcrumbs {
        margin-bottom: 1rem;
    }

    .product-main__info {
        max-width: 60rem;
        padding-inline: 2rem;
        padding-top: 5rem;
        margin-inline: auto;
    }

    .product-description {
        margin-bottom: 3.2rem;
    }
}
/* product-main END */



/* product-details START */

.product-details__title {
    text-align: center;
    margin-bottom: 3.2rem;
}

.product-details__tabs {
    --tab-gap: 2.2em;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3.2rem;
    gap: var(--tab-gap);
}

.product-details__tab {
    --fs: 1.6rem;
    --ls: 0.2;

    display: flex;
    align-items: center;
    gap: var(--tab-gap);
    font-weight: 500;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    text-transform: uppercase;
    line-height: calc(28/16);
    color: var(--color-gray);
    cursor: pointer;
    transition: 0.3s;
}

.product-details__tab.active {
    font-weight: 800;
    color: var(--color-black);
}

.product-details__tab:hover {
    color: var(--color-black);
}

.product-details__tab::before {
    content: "";
    display: none;
    width: 0.1rem;
    height: 1.8rem;
    background: var(--color-gray-dark);
}

.product-details__tab + .product-details__tab::before {
    display: block;
}

.product-details__block:not(.active) {
    display: none;
}

@media screen and (max-width: 575.9px) {
    .product-details__title {
        font-size: 2.8rem;
        margin-bottom: 2.8rem;
    }
}
/* product-details END */



/* product-features START */
.product-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 5rem;
}

.product-features-item {
    display: flex;
    gap: 2rem;
    padding: 0.56rem 2.2rem;
    line-height: 2;
}

.product-features-item:nth-child(4n+1),
.product-features-item:nth-child(4n+2) {
    background-color: var(--color-disabled);
}

.product-features-item__name {
    flex: 0 0 auto;
    min-width: 15rem;
    font-weight: 600;
    font-size: 1.4rem;
}

.product-features-item__value {
    font-size: 1.6rem;
}

@media screen and (max-width: 1024.9px) {
    .product-features {
        display: block;
    }

    .product-features-item:nth-child(n) {
        background: none;
    }

    .product-features-item:nth-child(odd) {
        background-color: var(--color-disabled);
    }
}

@media screen and (max-width: 575.9px) {
    .product-features-item__name {
        --fs: 1.4rem;
        --ls: 0.1;

        min-width: 11.5rem;
        font-size: var(--fs);
        letter-spacing: calc(var(--fs) *var(--ls));
        text-transform: uppercase;
    }
}
/* product-features END */



/* product-quantity START */
.product-quantity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.product-quantity .qty {
    flex: 1;
}

.product-quantity__select {
    border-radius: 10rem;
    background-color: transparent;
}

@media screen and (max-width: 575.9px) {
    .product-quantity {
        display: block;
    }

    .product-quantity .qty {
        display: none;
    }
}
/* product-quantity END */



/* product-cms-links START */
.product-cms-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    font-weight: 700;
    color: var(--color-gray-dark);
}

.product-cms-links:not(:empty) {
    padding-top: 2.2rem;
}

.product-cms-links .bato-links-item {
    gap: 1rem;
    text-decoration: underline;
}

.product-cms-links .bato-links-item:hover {
    text-decoration: none;
}

@media screen and (max-width: 575.9px) {
    .product-cms-links .bato-links-item {
        justify-content: center;
        width: 100%;
        height: 5.6rem;
        text-decoration: none;
        border: 0.1rem solid currentColor;
        border-radius: 10rem;
    }

    .product-cms-links .bato-links-item__icon {
        display: none;
    }

    .product-cms-links:not(:empty) {
        padding-top: 0.8rem;
    }
}
/* product-cms-links END */



/* instagram START */
.instagram {
    background: var(--color-disabled);
}

.instagram__pretitle {
    display: block;
    margin-bottom: 1rem;
}

.instagram__title {
    margin-bottom: 2.5rem;
}

.instagram__list {
    cursor: grab;
}

.instagram-item {
    display: block;
    aspect-ratio: 1;
    width: 30rem;
    max-width: 90vw;
    position: relative;
}

.instagram-item__icon {
    width: 2.4rem;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

@media screen and (max-width: 575.9px) {
    .instagram {
        padding-block: 5.5rem 4rem;
    }

    .instagram + .bato-categoryproducts {
        padding-top: 0;
    }
}
/* instagram END */



/* sticky-add2cart START */
.sticky-add2cart {
    width: 100%;
    padding-block: 0.3rem;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    box-shadow: 0 0.4rem 0.3rem rgb(0 0 0 / 10%)
}

.sticky-add2cart:not(.active) {
    opacity: 0;
    pointer-events: none;
}

.sticky-add2cart__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.sticky-add2cart__main {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.sticky-add2cart__image {
    flex: 0 0 auto;
    aspect-ratio: 33/55;
    height: 5.5rem;
}

.sticky-add2cart__title {
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.4rem;
    margin-bottom: 0.5rem;
}

.sticky-add2cart__attributes {
    color: var(--color-gray-dark);
}

.sticky-add2cart__block {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.sticky-add2cart__price {
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.4;
}

select.sticky-add2cart__select {
    width: 8.8rem;
    height: 4rem;
    border-radius: 10rem;
    background-position: center right 2.5rem;
    background-size: 1.4rem;
}

.sticky-add2cart__btn {
    min-width: unset;
    min-height: unset;
    width: 23rem;
    height: 4rem;
}

@media screen and (max-width: 767.9px) {
    .sticky-add2cart {
        padding: 0;
        background: var(--color-gray-dark);
        color: #fff;
    }

    .sticky-add2cart,
    .sticky-add2cart:not(.active) {
        opacity: 1;
        pointer-events: auto;
        top: auto !important;
        bottom: 0;
    }

    .sticky-add2cart__wrapper {
        padding: 0;
    }

    .sticky-add2cart__main,
    .sticky-add2cart__qty {
        display: none;
    }

    .sticky-add2cart__block {
        width: 100%;
        height: 5.6rem;
        gap: 0;
        justify-content: flex-end;
    }

    .sticky-add2cart__price {
        padding-inline: 4rem;
    }

    .sticky-add2cart__btn {
        width: 25rem;
        border-radius: 0;
        height: 100%;
    }
}
/* sticky-add2cart END */

.bato-slider-nav {
    color: white;
}

.swiper-pagination-bullet {
    background-color: white;
}