/* ==================== 
1. resets & defaults
2. base styles
3. layout
4. components
5. content by pages
==================== */

@font-face {
    font-family: 'Gilroy';
    src: url('/fonts/GilroyGeo/heavy.woff2') format('woff2'),
    url('/fonts/GilroyGeo/heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}


:root{
    --font-family: '63Fonts', sans-serif;
    --font-family-gilroy: 'Gilroy', sans-serif;
    --bs-font-sans-serif: var(--font-family);

    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;

    --bs-body-color-rgb: 38,38,40;
    --bs-body-color: #262628;
    --bs-secondary-color: rgba(var(--bs-body-color-rgb),.48);
    --bs-tertiary-color: #CDCDCD;

    --bs-emphasis-color: #C5A253;
    --bs-emphasis-color-rgb: 197,162,83;

    --bs-heading-color: #262628;

    --bs-primary-rgb: 193,32,47;
    --bs-primary: #C1202F;
    --bs-primary-bg-subtle: #F24858;
    --bs-primary-text-emphasis: #6A141C;

    --bs-secondary-rgb: 239,230,218;
    --bs-secondary: #EFE6DA;
    --bs-secondary-bg-subtle: #FFFBF6;
    --bs-secondary-text-emphasis: #C5A253;

    --bs-danger-rgb: 193,32,47;
    --bs-danger: #C1202F;

    --bs-light-rgb: 149,149,149;
    --bs-light: #959595;

    --bs-dark-rgb: 38,38,40;
    --bs-dark: #262628;
    --bs-dark-bg-subtle: #4C4C52;
    --bs-dark-text-emphasis: #111114;


    --btn-primary: var(--bs-primary);
    --btn-primary-hover: var(--bs-primary-bg-subtle);
    --btn-primary-active: var(--bs-primary-text-emphasis);

    --btn-secondary: var(--bs-secondary);
    --btn-secondary-hover: var(--bs-secondary-bg-subtle);
    --btn-secondary-active: var(--bs-secondary-text-emphasis);

    --btn-dark: var(--bs-dark);
    --btn-dark-hover: var(--bs-dark-bg-subtle);
    --btn-dark-active: var(--bs-dark-text-emphasis);

    --btn-default-color: var(--bs-body-color);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #CDCDCD;
    --btn-outline-disabled-color: #979798;
    --btn-outline-disabled-bg: #979798;


    --bs-border-color: #ccc;
    --bs-border-color-translucent: rgba(0,0,0,.2);
    --border-color-secondary: rgba(38,38,38,.15);

    --bs-link-color: var(--bs-dark);
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--bs-dark-text-emphasis);
    --bs-link-hover-decoration: none;

    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);

    --scrollbar-color-thumb: rgba(38,38,40,.48);
    --scrollbar-color-track: rgba(38,38,40,.1);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 6px;


    --app-header-height: 64px;
    --app-content-px: 16px;

    --container-size-1: 400px;
    --container-size-2: 484px;
    --container-size-3: 614px;
    --container-size-4: 960px;
    --container-size-5: 1200px;
    --container-size-6: 1568px;


    --fs-display-title: 2.5rem;

    --fs-h1: 2.5rem;
    --fs-h2: 2.25rem;
    --fs-h3: 2rem;
    --fs-h4: 1.75rem;
    --fs-h5: 1.5rem;
    --fs-h6: 1.25rem;

    --fs-text: var(--fs-text4);
    --fs-text1: 1.5rem;
    --fs-text2: 1.25rem;
    --fs-text3: 1.125rem;
    --fs-text4: 1rem;
    --fs-text5: 14px;
    --fs-text6: 12px;


    --form-element-size-1: 2rem;
    --form-element-size-2: 2.25rem;
    --form-element-size-3: 2.625rem;
    --form-element-size-4: 3.25rem;
    --form-element-size-5: 3.5rem;
    --form-element-size-6: 3.75rem;

    --form-control-height: var(--form-element-size-5);
    --form-control-px: 1rem;
    --form-control-py: .375rem;
    --form-control-fs: 1rem;
    --form-control-color: #000;
    --form-control-bg: var(--bs-secondary-bg-subtle);
    --form-control-border-color: var(--bs-border-color-translucent);


    --icon-size-xxs: 14px;
    --icon-size-xs: 16px;
    --icon-size-sm: 20px;
    --icon-size-md: 24px;
    --icon-size-lg: 28px;
    --icon-size-xl: 32px;
    --icon-size-xxl: 36px;
    --icon-size-3xl: 48px;

    --bs-border-radius: 0;
}

@media (min-width: 768px) {
    :root{
        --app-content-px: 1.5rem;

        --fs-display-title: 3rem;
    }
}
@media (min-width: 1200px) {
    :root{
        --app-header-height: 103px;
    }
}



/* ==================== 1. resets & defaults ==================== */
html,body,
h1,h2,h3,h4,h5,h6,
ul,ol,p,figure,
form,fieldset,input,textarea{
    margin: 0;
    padding: 0;
}

header,nav,main,article,section,aside,footer,figure{
    display: block;
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}

/* ----- */

html,body{
    width: 100%;
    height: 100%;
}

nav ul,.nav ul{list-style: none;}
a img,fieldset{border:0;}

.logo img{display: block;}
.img-container img,
.thumb img,
figure img{
    display: block;
    max-width: 100%;
}

button,
input[type=button],
input[type=submit]{
    cursor: pointer;
    outline: none !important;
}

a,.link{text-decoration: var(--bs-link-decoration);}
a:hover,a:focus,.link:hover{text-decoration: var(--bs-link-hover-decoration);}
a.is-active{cursor: default;}

.disabled{opacity: 0.5; pointer-events: none;}
.disabled-click{pointer-events: none;}

/* ----- */

.no-scroll,
.no-scroll body{
    height: 100% !important;
    overflow: hidden;
}

.item-fade{opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; z-index: -1;}
.item-fade.fade-in{opacity: 1; visibility: visible; z-index: 1;}

/* ----- */

.text-nocase{text-transform: none !important; font-feature-settings: "case" off !important;}

.highlight {background-color: #ffff00;}

b{font-weight: 500}
strong{font-weight: 700}

/* ----- */

body{
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    color: var(--bs-body-color);
    font-size: 14px;
}



/* ==================== 2. base styles ==================== */


/* ----------- fonts ----------- */
body,input,textarea,button{
    font-family: var(--font-family);
}
.text-uppercase{
    font-feature-settings: "case" on;
}
/* ----------- /fonts ----------- */


/* ----------- container ----------- */
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid{
    width: 100%;
    padding-left: var(--app-content-px);
    padding-right: var(--app-content-px);
    margin: 0 auto;
}
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl{
    --container-width: var(--container-size-4, 100%);
    max-width: calc(var(--container-width) + var(--app-content-px) * 2);
}

.container .container-xxs,
.container .container-xs,
.container .container-sm,
.container .container-md,
.container .container-lg{
    max-width: var(--container-width);
    padding-left: 0;
    padding-right: 0;
}

/*.container,
.container-md,
.t63-section[data-content-size="md"] .container{
    --container-width: calc(var(--container-size-3) + var(--app-content-px) * 2);
}*/

.container-xxs,
.t63-section[data-content-size="xxs"] .container{
    --container-width: var(--container-size-1);
}

.container-xs,
.t63-section[data-content-size="xs"] .container{
    --container-width: var(--container-size-2);
}

.container-sm,
.t63-section[data-content-size="sm"] .container{
    --container-width: var(--container-size-3);
}

/*.container-md,
.t63-section[data-content-size="md"] .container{
    --container-width: var(--container-size-4);
}*/

.container-lg,
.t63-section[data-content-size="lg"] .container{
    --container-width: var(--container-size-5);
}

.container-xl,
.t63-section[data-content-size="xl"] .container{
    --container-width: var(--container-size-6);
}

.container-fluid,
.t63-section[data-content-size="fluid"] .container{
    max-width: 100%;
}
/* ----------- /container ----------- */


/* ----------- row ----------- */
.grid-items-stretch > div{
    display: flex;
    flex-direction: column;
}
.grid-items-stretch > div > *{
    flex-grow: 1;
}
/* ----------- /row ----------- */


/* ----------- spacing ----------- */
.pt-6, .py-6, .p-6{
    padding-top: 4rem !important;
}
.pb-6, .py-6, .p-6{
    padding-bottom: 4rem !important;
}
.ps-6, .px-6, .p-6{
    padding-left: 4rem !important;
}
.pe-6, .px-6, .p-6{
    padding-right: 4rem !important;
}

.pt-7, .py-7, .p-7{
    padding-top: 5rem !important;
}
.pb-7, .py-7, .p-7{
    padding-bottom: 5rem !important;
}
.ps-7, .px-7, .p-7{
    padding-left: 5rem !important;
}
.pe-7, .px-7, .p-7{
    padding-right: 5rem !important;
}

/* margin */
.mt-6, .my-6, .m-6{
    margin-top: 4rem !important;
}
.mb-6, .my-6, .m-6{
    margin-bottom: 4rem !important;
}

.mt-7, .my-7, .m-7{
    margin-top: 5rem !important;
}
.mb-7, .my-7, .m-7{
    margin-bottom: 5rem !important;
}

@media (min-width: 576px) {
    .pt-sm-6, .py-sm-6, .p-sm-6{
        padding-top: 4rem !important;
    }
    .pb-sm-6, .py-sm-6, .p-sm-6{
        padding-bottom: 4rem !important;
    }
    .ps-sm-6, .px-sm-6, .p-sm-6{
        padding-left: 4rem !important;
    }
    .pe-sm-6, .px-sm-6, .p-sm-6{
        padding-right: 4rem !important;
    }

    .pt-sm-7, .py-sm-7, .p-sm-7{
        padding-top: 5rem !important;
    }
    .pb-sm-7, .py-sm-7, .p-sm-7{
        padding-bottom: 5rem !important;
    }
    .ps-sm-7, .px-sm-7, .p-sm-7{
        padding-left: 5rem !important;
    }
    .pe-sm-7, .px-sm-7, .p-sm-7{
        padding-right: 5rem !important;
    }

    /* margin */
    .mt-sm-6, .my-sm-6, .m-sm-6{
        margin-top: 4rem !important;
    }
    .mb-sm-6, .my-sm-6, .m-sm-6{
        margin-bottom: 4rem !important;
    }

    .mt-sm-7, .my-sm-7, .m-sm-7{
        margin-top: 5rem !important;
    }
    .mb-sm-7, .my-sm-7, .m-sm-7{
        margin-bottom: 5rem !important;
    }
}
@media (min-width: 768px) {
    .pt-md-6, .py-md-6, .p-md-6{
        padding-top: 4rem !important;
    }
    .pb-md-6, .py-md-6, .p-md-6{
        padding-bottom: 4rem !important;
    }
    .ps-md-6, .px-md-6, .p-md-6{
        padding-left: 4rem !important;
    }
    .pe-md-6, .px-md-6, .p-md-6{
        padding-right: 4rem !important;
    }

    .pt-md-7, .py-md-7, .p-md-7{
        padding-top: 5rem !important;
    }
    .pb-md-7, .py-md-7, .p-md-7{
        padding-bottom: 5rem !important;
    }
    .ps-md-7, .px-md-7, .p-md-7{
        padding-left: 5rem !important;
    }
    .pe-md-7, .px-md-7, .p-md-7{
        padding-right: 5rem !important;
    }

    /* margin */
    .mt-md-6, .my-md-6, .m-md-6{
        margin-top: 4rem !important;
    }
    .mb-md-6, .my-md-6, .m-md-6{
        margin-bottom: 4rem !important;
    }

    .mt-md-7, .my-md-7, .m-md-7{
        margin-top: 5rem !important;
    }
    .mb-md-7, .my-md-7, .m-md-7{
        margin-bottom: 5rem !important;
    }
}
@media (min-width: 992px) {
    .pt-lg-6, .py-lg-6, .p-lg-6{
        padding-top: 4rem !important;
    }
    .pb-lg-6, .py-lg-6, .p-lg-6{
        padding-bottom: 4rem !important;
    }
    .ps-lg-6, .px-lg-6, .p-lg-6{
        padding-left: 4rem !important;
    }
    .pe-lg-6, .px-lg-6, .p-lg-6{
        padding-right: 4rem !important;
    }

    .pt-lg-7, .py-lg-7, .p-lg-7{
        padding-top: 5rem !important;
    }
    .pb-lg-7, .py-lg-7, .p-lg-7{
        padding-bottom: 5rem !important;
    }
    .ps-lg-7, .px-lg-7, .p-lg-7{
        padding-left: 5rem !important;
    }
    .pe-lg-7, .px-lg-7, .p-lg-7{
        padding-right: 5rem !important;
    }

    /* margin */
    .mt-lg-6, .my-lg-6, .m-lg-6{
        margin-top: 4rem !important;
    }
    .mb-lg-6, .my-lg-6, .m-lg-6{
        margin-bottom: 4rem !important;
    }

    .mt-lg-7, .my-lg-7, .m-lg-7{
        margin-top: 5rem !important;
    }
    .mb-lg-7, .my-lg-7, .m-lg-7{
        margin-bottom: 5rem !important;
    }
}
@media (min-width: 1200px) {
    .pt-xl-6, .py-xl-6, .p-xl-6{
        padding-top: 4rem !important;
    }
    .pb-xl-6, .py-xl-6, .p-xl-6{
        padding-bottom: 4rem !important;
    }
    .ps-xl-6, .px-xl-6, .p-xl-6{
        padding-left: 4rem !important;
    }
    .pe-xl-6, .px-xl-6, .p-xl-6{
        padding-right: 4rem !important;
    }

    .pt-xl-7, .py-xl-7, .p-xl-7{
        padding-top: 5rem !important;
    }
    .pb-xl-7, .py-xl-7, .p-xl-7{
        padding-bottom: 5rem !important;
    }
    .ps-xl-7, .px-xl-7, .p-xl-7{
        padding-left: 5rem !important;
    }
    .pe-xl-7, .px-xl-7, .p-xl-7{
        padding-right: 5rem !important;
    }

    /* margin */
    .mt-xl-6, .my-xl-6, .m-xl-6{
        margin-top: 4rem !important;
    }
    .mb-xl-6, .my-xl-6, .m-xl-6{
        margin-bottom: 4rem !important;
    }

    .mt-xl-7, .my-xl-7, .m-xl-7{
        margin-top: 5rem !important;
    }
    .mb-xl-7, .my-xl-7, .m-xl-7{
        margin-bottom: 5rem !important;
    }
}
@media (min-width: 1400px) {
    .pt-xxl-6, .py-xxl-6, .p-xxl-6{
        padding-top: 4rem !important;
    }
    .pb-xxl-6, .py-xxl-6, .p-xxl-6{
        padding-bottom: 4rem !important;
    }
    .ps-xxl-6, .px-xxl-6, .p-xxl-6{
        padding-left: 4rem !important;
    }
    .pe-xxl-6, .px-xxl-6, .p-xxl-6{
        padding-right: 4rem !important;
    }

    .pt-xxl-7, .py-xxl-7, .p-xxl-7{
        padding-top: 5rem !important;
    }
    .pb-xxl-7, .py-xxl-7, .p-xxl-7{
        padding-bottom: 5rem !important;
    }
    .ps-xxl-7, .px-xxl-7, .p-xxl-7{
        padding-left: 5rem !important;
    }
    .pe-xxl-7, .px-xxl-7, .p-xxl-7{
        padding-right: 5rem !important;
    }

    /* margin */
    .mt-xxl-6, .my-xxl-6, .m-xxl-6{
        margin-top: 4rem !important;
    }
    .mb-xxl-6, .my-xxl-6, .m-xxl-6{
        margin-bottom: 4rem !important;
    }

    .mt-xxl-7, .my-xxl-7, .m-xxl-7{
        margin-top: 5rem !important;
    }
    .mb-xxl-7, .my-xxl-7, .m-xxl-7{
        margin-bottom: 5rem !important;
    }
}
@media (min-width: 1920px) {
    .pt-3xl-6, .py-3xl-6, .p-3xl-6{
        padding-top: 4rem !important;
    }
    .pb-3xl-6, .py-3xl-6, .p-3xl-6{
        padding-bottom: 4rem !important;
    }
    .ps-3xl-6, .px-3xl-6, .p-3xl-6{
        padding-left: 4rem !important;
    }
    .pe-3xl-6, .px-3xl-6, .p-3xl-6{
        padding-right: 4rem !important;
    }

    .pt-3xl-7, .py-3xl-7, .p-3xl-7{
        padding-top: 5rem !important;
    }
    .pb-3xl-7, .py-3xl-7, .p-3xl-7{
        padding-bottom: 5rem !important;
    }
    .ps-3xl-7, .px-3xl-7, .p-3xl-7{
        padding-left: 5rem !important;
    }
    .pe-3xl-7, .px-3xl-7, .p-3xl-7{
        padding-right: 5rem !important;
    }

    /* margin */
    .mt-3xl-6, .my-3xl-6, .m-3xl-6{
        margin-top: 4rem !important;
    }
    .mb-3xl-6, .my-3xl-6, .m-3xl-6{
        margin-bottom: 4rem !important;
    }

    .mt-3xl-7, .my-3xl-7, .m-3xl-7{
        margin-top: 5rem !important;
    }
    .mb-3xl-7, .my-3xl-7, .m-3xl-7{
        margin-bottom: 5rem !important;
    }
}
/* ----------- /spacing ----------- */


/* ----------- icons ----------- */
img.svg-icon{
    opacity: 0;
}
.svg-icon{
    display: flex;
    width: var(--icon-size-md);
    height: auto;
}

.i-xs{
    width: var(--icon-size-xs) !important;
}
.i-sm{
    width: var(--icon-size-sm) !important;
}
.i-md{
    width: var(--icon-size-md) !important;
}
.i-lg{
    width: var(--icon-size-lg) !important;
}
.i-xl{
    width: var(--icon-size-xl) !important;
}
.i-xxl{
    width: var(--icon-size-xxl) !important;
}
.i-3xl{
    width: var(--icon-size-3xl) !important;
}
/* ----------- /icons ----------- */


/* ----------- rotate ----------- */
.r-0::before{
    transform: rotate(0deg);
}
.r-45::before{
    transform: rotate(45deg);
}
.r-90::before{
    transform: rotate(90deg);
}
.r-180::before{
    transform: rotate(180deg);
}
.r-270::before{
    transform: rotate(270deg);
}
.r-360::before{
    transform: rotate(360deg);
}
/* ----------- /rotate ----------- */


/* ----------- colors ----------- */
.text-white{
    color: #fff !important;
}

.text-emphasis{
    color: var(--bs-emphasis-color) !important;
}
.text-light{
    color: var(--bs-light) !important;
}

a{
    color: var(--bs-link-color);
}
.desktop a:not(.btn):hover{
    color: var(--bs-link-hover-color);
}
.link-primary:focus,
.link-primary:hover{
    color: var(--bs-primary-text-emphasis) !important;
    text-decoration-color: var(--bs-primary-text-emphasis) !important;
}

.link-secondary{
    color: var(--bs-emphasis-color) !important;
    text-decoration-color: var(--bs-emphasis-color) !important;
}
.link-secondary:focus,
.link-secondary:hover{
    color: #AC8C44 !important;
    text-decoration-color: #AC8C44 !important;
}

hr{
    border-top-color: var(--bs-border-color-translucent);
    opacity: 1;
}
/* ----------- /colors ----------- */


/* ----------- separator ----------- */
hr{
    margin: 1.5rem 0;
}
.border-dashed{
    border-style: dashed;
}
/* ----------- /separator ----------- */


/* ---------- scroll ---------- */
.scrollable-container{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
body ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
body ::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}
body ::-webkit-scrollbar {
    max-width: var(--scrollbar-width-legacy);
    max-height: var(--scrollbar-width-legacy);
}
body ::-webkit-scrollbar-button {
    display: none;
}
/* ---------- /scroll ---------- */



/* ==================== 3. layout ==================== */


.app{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding-top: var(--app-header-height);
}


/* ---------- header ---------- */
.app-header{
    --header-px: 16px;
    --header-color: var(--bs-secondary);
    --header-hover-color: var(--bs-secondary-text-emphasis);
    --bs-link-color: var(--header-color);
    --bs-link-hover-color: var(--header-hover-color);

    --logo-size: 48px;
    --logo-text-size: 171px;
    --logo-gap: 6px;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--app-header-height);
    background-color: var(--bs-dark);
    padding: 0 var(--header-px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
}

.app-header .main-wrap{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-header .main-wrap .col-start,
.app-header .main-wrap .col-end{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.app-header .main-wrap .col-center{
    flex-grow: 1;
}

.app-header a:not(.btn),
.app-header button:not(.btn){
    transition: color .15s ease-in-out;
}

.app-header .logo-wrap .logo{
    width: var(--logo-size);
}
.app-header .logo-wrap .logo-text{
    display: block;
    width: 100%;
    max-width: var(--logo-text-size);
}

.app-header .icon-btn,
.app-header .btn-hamburger{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: var(--form-element-size-1);
    --btn-icon-size: var(--icon-size-md);
    --bs-btn-color: var(--header-color);
    --btn-icon-hover-color: var(--header-hover-color);
    --btn-icon-active-color: var(--header-hover-color);
}

.app-header .lang-btn{
    padding: 1px;
    margin: auto 0.375rem;
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

.app-header .btn-hamburger{
    --hamburger-line-color: var(--header-color);
    position: relative;
    z-index: 1;
}
.desktop .app-header .btn-hamburger:hover{
    --hamburger-line-color: var(--header-hover-color);
}

/* --- search --- */
.app-header .search-container{
    width: 100%;
    position: relative;
}
.app-header .search-box{
    display: flex;
    position: relative;
    z-index: 10;
}

.app-header .search-input{
    height: var(--form-element-size-1);
    padding: 0.125rem 1rem 0.15rem 2.5rem;
}
.app-header .search-input,
.app-header .search-input:focus{
    border-color: var(--form-control-bg);
}
.app-header .search-box .btn{
    flex-shrink: 0;
}

.app-header .search-results-wrap{
    --wrap-px: 1rem;
    --wrap-py: 1rem;

    display: none;
    width: 100%;
    background-color: var(--bs-secondary-bg-subtle);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
    margin-top: 2px;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
}
.app-header .search-results-wrap .body,
.app-header .search-results-wrap .foo{
    padding-left: var(--wrap-px);
    padding-right: var(--wrap-px);
}
.app-header .search-results-wrap .body{
    padding-top: 0.75rem;
}
.app-header .search-results-wrap .foo{
    padding-top: 1.125rem;
    padding-bottom: var(--wrap-py);
}
.app-header .search-results-wrap .scrollable-container{
    max-height: 390px;
}

/* search item */
.app-header .search-results-wrap .search-item{
    display: block;
    color: var(--bs-body-color);
    padding: 6px 1rem;
    position: relative;
}
.app-header .search-results-wrap .search-item::before{
    content: '';
    background-color: rgba(var(--bs-dark-rgb),.1);
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--wrap-px) * -1);
    right: calc(var(--wrap-px) * -1);
    opacity: 0;
    transition: opacity .15s ease-in-out;
}
.app-header .search-results-wrap .search-item .highlight{
    background-color: transparent;
    font-weight: bold;
}
.app-header .search-results-wrap .search-item:hover::before{
    opacity: 1;
}

/* products list item */
.app-header .search-results-wrap .products-list-item{
    --item-py: 14px;
    margin-bottom: 10px;
}
.app-header .search-results-wrap .products-list-item:last-child{
    margin-bottom: 0;
}


/* --- dropdown --- */
.app-header .dropdown-menu{
    --bs-dropdown-min-width: 420px;
}

.app-header .user-dropdown .dropdown-menu > ul{
    margin: 2.25rem 0 4.5rem;
}
.app-header .user-dropdown .dropdown-menu li{
    margin-bottom: 1.125rem;
}

/* --- basket --- */
.app-header .basket-dropdown .dropdown-menu{
    --bs-dropdown-padding-x: 1rem;
    --bs-dropdown-padding-y: 1rem;
    padding-top: 1.5rem;
}
.app-header .basket-dropdown .scrollable-container{
    max-height: 242px;
    padding-right: var(--bs-dropdown-padding-x);
    margin-right: calc(var(--bs-dropdown-padding-x) * -1);
}
.app-header .basket-item .info-wrap{
    padding-right: 0.5rem;
}


/* --- nav --- */
/*.app-header nav{
    flex-grow: 1;
    display: flex;
    padding: 0 .5rem 0 var(--logo-size);
}*/

.app-header nav > ul{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin: 0;
}
/*.app-header nav .swiper-slide{
    display: flex;
    align-items: center;
    width: auto;
}*/

.app-header nav button,
.app-sub-nav button{
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
}

.app-header .nav-item{
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--header-color);
    font-family: var(--font-family-gilroy);
    font-size: 1.125rem;
    font-weight: 900;
    font-feature-settings: "case" on;
    text-transform: uppercase;
    line-height: 1;
}
.desktop .app-header .nav-item:hover,
.app-header .nav-item.active{
    color: var(--header-hover-color);
}

.app-header .nav-item img{
    flex-shrink: 0;
    width: 2.25rem;
}

.app-sub-nav{
    display: none;
    width: 100%;
}
.app-header nav > .app-sub-nav{
    display: block;
}

.app-sub-nav li{
    display: flex;
    flex-direction: column;
}

.app-sub-nav .sub-item{
    padding: 4px 0;
    position: relative;

    color: var(--header-color);
}
.app-sub-nav button.sub-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.desktop .app-sub-nav .sub-item:hover,
.app-sub-nav .sub-item.active{
    color: var(--bs-emphasis-color);
}

.app-sub-nav ul[data-sub-level="1"] > li > .sub-item,
.app-sub-nav ul[data-sub-level="2"] > li > .sub-item{
    padding: 6px 0;

    font-family: var(--font-family-gilroy);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

.app-sub-nav ul[data-sub-level="3"] .sub-item{
    font-size: 14px;
    font-weight: 300;
}

.app-sub-nav li ul[data-sub-level="2"],
.app-sub-nav li ul[data-sub-level="3"]{
    display: none;
}

.app-sub-nav button.sub-item::after{
    flex-shrink: 0;
    align-self: flex-start;
    content: "";
    width: 16px;
    height: 16px;
    background: url(../../images/icons/chevron_emphasis.svg) center no-repeat;
    background-size: 100% auto;
    transition: 0.15s ease-in-out;
}
.app-sub-nav button.sub-item.active::after{
    transform: rotate(-180deg);
}

@media (min-width: 576px) {
    /* --- dropdown --- */
    .app-header .user-dropdown .dropdown-menu{
        margin-right: -2.25rem !important;
    }
    .app-header .basket-dropdown .dropdown-menu {
        --bs-dropdown-padding-x: 2rem;
        --bs-dropdown-padding-y: 2rem;
    }
}
@media (min-width: 768px) {
    .app-header .main-wrap{
        gap: 30px;
    }

    .app-header .lang-btn{
        margin-left: 0;
    }
    .app-header .search-close-btn{
        display: none !important;
    }

    /* --- nav --- */
    /*.app-sub-nav ul[data-sub-level="1"] > li > .sub-item,
    .app-sub-nav ul[data-sub-level="2"] > li > .sub-item{
        padding: 8px 0;
    }
    .app-sub-nav ul[data-sub-level="3"] > li > .sub-item{
        padding: 6px 0;
    }*/
}
@media (min-width: 992px) {
    /*.app-header .main-wrap{
        padding-top: 24px;
    }*/
    /*.app-header .logo{
        width: 190px;
    }*/

    /* --- search --- */
    .app-header .search-results-wrap{
        --wrap-px: 1.5rem;
        --wrap-py: 1.5rem;
    }
}
@media (min-width: 1200px) {
    .app-header {
        --header-px: 1.25rem;
        --logo-size: 65px;
        --logo-text-size: 171px;
        --logo-gap: 6px;
    }

    .app-header .main-wrap{
        flex-shrink: 0;
        padding-top: 1.5rem;
    }

    /* logo */
    .app-header .logo-wrap{
        padding-left: calc(var(--logo-size) + var(--logo-gap));
        position: relative;
    }
    .app-header .logo-wrap .logo{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }


    /* hamburger */
    .app-header .btn-hamburger{
        display: none !important;
    }

    /* --- nav --- */
    .app-header nav{
        flex-grow: 1;
        display: flex;
        padding: 0 .5rem 0 var(--logo-size);
    }
    .app-header .nav-item{
        font-size: 15px;
    }
    .app-header .nav-item img{
        width: 1.75rem;
    }

    .app-sub-nav{
        --width: 290px;
        width: var(--width);
        position: absolute;
        top: 100%;
        left: var(--left, 0);
        transform: none !important;
    }
    .app-sub-nav [data-sub-level="1"],
    .app-sub-nav [data-sub-level="2"]{
        width: 100%;
        max-height: calc(100vh - var(--app-header-height));
        background-color: var(--bs-secondary);
        box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.15);
        padding: 1rem 1.5rem;

        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-sub-nav [data-sub-level="1"] ul[data-sub-level="2"]{
        margin-left: 0.5rem;
        position: absolute;
        top: 0;
        left: 100%;
    }
    .app-sub-nav ul[data-sub-level="3"]{
        padding-bottom: 0.5rem;
        padding-left: 1rem;
    }

    .app-sub-nav .sub-item{
        color: var(--bs-body-color);
    }
    .app-sub-nav .sub-item::after{
        margin-right: -8px;
    }
    .app-sub-nav ul[data-sub-level="1"] > li > a.sub-item{
        align-self: flex-start;
    }
    .app-sub-nav ul[data-sub-level="1"] > li > .sub-item::after{
        transform: rotate(-90deg) !important;
    }
    .app-sub-nav ul[data-sub-level="1"] > li > .sub-item:not(.active)::after{
        opacity: 0.6;
    }
}
@media (min-width: 1440px) {
    .app-header {
        --header-px: 2.5rem;
    }

    /* --- nav --- */
    .app-header .nav-item{
        /*font-size: clamp(0.875rem, -0.507rem + 1.579vw, 1.25rem);*/
        font-size: clamp(0.938rem, -0.386rem + 1.471vw, 1.25rem);
    }
    .app-header .nav-item img{
        width: 2.25rem;
    }
}
@media (min-width: 1780px) {
    .app-header .nav-item{
        font-size: 1.25rem;
    }
}

@media (max-width: 1199px) {
    .app-header .main-wrap{
        flex-grow: 1;
    }

    .app-header .logo-wrap{
        display: flex;
        align-items: center;
        gap: var(--logo-gap);
    }
    .app-header .logo-wrap .logo-text{
        flex-grow: 1;
    }

    /* --- nav --- */
    .app-header nav{
        display: none;
        width: 100%;
        height: calc(100vh - var(--app-header-height));
        background-color: var(--bs-dark);
        border-top: 1px solid rgba(var(--bs-secondary-rgb),.2);
        padding: 2rem var(--header-px) 3rem;
        position: fixed;
        top: var(--app-header-height);
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-header.nav-is-open nav{
        display: block;
    }
    .app-header nav > ul {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1rem;
    }

    .app-header button.nav-item::after{
        flex-shrink: 0;
        content: "";
        width: 1.25rem;
        height: 1.25rem;
        background: url(../../images/icons/chevron_emphasis.svg) center no-repeat;
        background-size: 100% auto;
        margin-left: 0.375rem;
        transition: 0.15s ease-in-out;
    }
    .app-header button.nav-item.active::after{
        transform: rotate(-180deg);
    }

    .app-sub-nav ul{
        padding-left: 1rem;
    }
    .app-sub-nav li{
        align-items: flex-start;
    }
}
@media (max-width: 991px) {
    /*.app-header .logo{
        flex-grow: 1;
        max-width: 140px;
    }*/

    /* --- nav --- */
    /*.app-header nav{
        padding-left: 0;
        padding-right: 0;
    }
    .app-sub-nav{
        min-height: 372px;
        max-height: calc(100vh - var(--app-header-height));
        background-color: var(--bs-secondary);
        box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.25);
        padding: 0.5rem var(--app-content-px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-sub-nav li ul{
        padding-left: 0.75rem;
        padding-bottom: 0.25rem;
    }
    .app-sub-nav ul[data-sub-level="3"]{
        padding-bottom: 0.5rem;
    }*/

    /* --- search --- */
    .app-header .search-results-wrap .products-list-item .info-wrap{
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .app-header .logo-wrap .logo-text{
        display: none !important;
    }

    /* --- search --- */
    .app-header .search-container{
        display: none;
        width: 100%;
        background-color: #121212;
        padding: 1.25rem var(--app-content-px);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
    }
    .app-header .search-container::before{
        content: '';
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .app-header .search-close-btn{
        --btn-icon-size: var(--icon-size-sm);
        margin-left: 0.5rem;
        margin-right: -0.375rem;
    }

    /* --- nav --- */
    /*.app-sub-nav [data-sub-level="1"] > li > .sub-item,
    .app-sub-nav [data-sub-level="2"] > li > .sub-item{
        padding: 6px 0;
    }*/
}
@media (max-width: 575px) {
    /* --- dropdown --- */
    .app-header .dropdown-menu{
        --bs-dropdown-min-width: 100vw;
        margin-top: 10px !important;
    }
}

@media (min-height: 600px) {
    /* --- search --- */
    .mobile .app-header .search-results-wrap{
        margin-top: 0;
    }
    .mobile .app-header .search-results-wrap .scrollable-container {
        max-height: 470px;
    }

    /* --- basket --- */
    .app-header .basket-dropdown .scrollable-container{
        max-height: 284px;
    }
}
@media (min-height: 680px) {
    /* --- basket --- */
    .app-header .basket-dropdown .scrollable-container{
        max-height: 366px;
    }
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
    width: 100%;
    position: relative;
}

.page-title{
    margin-bottom: 1.5rem;

    font-size: var(--fs-h5);
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

.page-head{
    --bs-aspect-ratio: 180px;
    width: 100%;
}
@media (min-width: 576px) {
    .page-head{
        --bs-aspect-ratio: 31.25%;
    }
}
@media (min-width: 1280px) {
    .page-head{
        --bs-aspect-ratio: 400px;
    }
}

/* section */
.section{
    --section-px: 0;
    --section-py: 2.5rem;
    padding: var(--section-py) var(--section-px);
    overflow-x: hidden;
}

.section-head,
.section-title{
    margin-bottom: 2rem;
}

.section-title{
    color: var(--bs-emphasis-color);
}
.section-head .section-title{
    margin-bottom: 0;
}

.section .divider{
    margin: 3.5rem 0;
}
.section .divider:last-child{
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .section-head,
    .section-title{
        margin-bottom: 2.5rem;
    }
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer{
    --foo-color: var(--bs-secondary);
    --foo-hover-color: var(--bs-secondary-text-emphasis);

    --bs-link-color: var(--foo-color);
    --bs-link-hover-color: var(--foo-hover-color);

    flex-shrink: 0;
    background-color: var(--bs-dark);

    color: var(--foo-color);
}

.app-footer a{
    transition: color .15s ease-in-out;
}

.app-footer > .container{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.app-footer .logo-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}
.app-footer .logo-wrap > img{
    display: block;
    width: 100%;
}
.app-footer .logo{
    max-width: 38.3%;
    margin: 0 auto;
}

.app-footer .links-wrap{
    list-style: none;
    line-height: 1.75;
}

.app-footer .item-with-icon{
    --color: var(--foo-color);
    --color-hover: var(--foo-hover-color);
    --icon-size: var(--icon-size-xs);
}

.app-footer .social-media-wrap{
    --bs-gutter-x: 0.75rem;
    margin-top: 2rem;
}
.app-footer .social-media-wrap .btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: auto;
    --btn-icon-size: var(--icon-size-sm);
    --btn-icon-color: var(--foo-color);
    --btn-icon-hover-color: var(--foo-hover-color);
    --btn-icon-active-color: var(--foo-hover-color);
}

/* bottom bar */
.app-footer .bottom-bar{
    background-color: #000;
    color: #fff;
}
.app-footer .bottom-bar .container{
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-footer .createdby{
    display: flex;
    align-items: center;
    font-weight: 300;
}
.app-footer .createdby > span{
    margin-right: 10px;
}
.app-footer .createdby img{
    display: block;
    height: 15px;
}

@media (min-width: 576px) {
    .app-footer .bottom-bar .container{
        justify-content: space-between;
        min-height: 36px;
    }
}
@media (min-width: 992px) {
    .app-footer .logo-wrap{
        max-width: 256px;
    }
}

@media (max-width: 575px) {
    .app-footer{
        text-align: center;
    }
    .app-footer .logo-wrap{
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
    .app-footer .social-media-wrap{
        justify-content: center;
    }
    .app-footer .bottom-bar .container{
        flex-direction: column;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}
/* ---------- /footer ---------- */



/* ==================== 4. components ==================== */


/* ----------- hamburger ----------- */
.hamburger,
.hamburger span,
.hamburger span::before,
.hamburger span::after{
    width: 18px;
}

.hamburger{
    flex-shrink: 0;
    display: block;
    height: 14px;
    background-color: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}
.hamburger:before{
    content: "";
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: -12px;
    right: -12px;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after {
    display: block;
    height: 1px;
    background-color: var(--hamburger-line-color, #000);
    position: absolute;
    transition: transform 0.15s ease;
}
.hamburger span{
    top: 0;
}
.hamburger span::before,
.hamburger span::after {
    content: "";
    display: block;
}
.hamburger span::before {
    width: 100%;
    top: 6px;
    transition-property: transform, opacity;
}
.hamburger span::after {
    top: 12px;
}

.hamburger.is-active span,
.nav-is-open .hamburger span{
    transform: translate3d(-1px, 7px, 0) rotate(45deg);
}
.hamburger.is-active span::before,
.nav-is-open .hamburger span::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}
.hamburger.is-active span::after,
.nav-is-open .hamburger span::after {
    transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.hamburger.is-active span,
.hamburger.is-active span::before,
.hamburger.is-active span::after,
.nav-is-open .hamburger span,
.nav-is-open .hamburger span::before,
.nav-is-open .hamburger span::after{
    width: 21px;
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title {
    display: block;
    color: var(--bs-body-color);
    font-weight: bold;
}
.title *,
.display-title *{
    font-weight: inherit;
    line-height: inherit;
}

.title:not(.slide-title):not(.full-featured) *:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not([class*="display-"]) {
    font-size: inherit;
}

.title a,
.display-title a{
    color: inherit;
}

.display-title{
    display: block;
    font-family: var(--font-family-gilroy);
    font-size: var(--fs-display-title);
    font-weight: 900;
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

h1,.h1{
    font-size: var(--fs-h1);
    line-height: 1.15;
}
h2,.h2{
    font-size: var(--fs-h2);
    line-height: 1.1;
}
h3,.h3{
    font-size: var(--fs-h3);
}
h4,.h4{
    font-size: var(--fs-h4);
}
h5,.h5{
    font-size: var(--fs-h5);
}
h6,.h6{
    font-size: var(--fs-h6);
}


.text,
.text-wrap{
    --bs-link-decoration: underline;
    --bs-link-hover-decoration: none;

    color: var(--bs-body-color);
    font-size: var(--fs-text);
    font-weight: 400;
}
.text-subtle{
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.25;
}

.fs-1{
    font-size: var(--fs-text1) !important;
}
.fs-2{
    font-size: var(--fs-text2) !important;
}
.fs-3{
    font-size: var(--fs-text3) !important;
}
.fs-4{
    font-size: var(--fs-text4) !important;
}
.fs-5{
    font-size: var(--fs-text5) !important;
}
.fs-6{
    font-size: var(--fs-text6) !important;
}

html{
    font-size: 14px;
}

@media (min-width: 768px){
    html{
        font-size: 16px;
    }
    .fs-md-1{
        font-size: var(--fs-text1) !important;
    }
    .fs-md-2{
        font-size: var(--fs-text2) !important;
    }
    .fs-md-3{
        font-size: var(--fs-text3) !important;
    }
    .fs-md-4{
        font-size: var(--fs-text4) !important;
    }
    .fs-md-5{
        font-size: var(--fs-text5) !important;
    }
    .fs-md-6{
        font-size: var(--fs-text6) !important;
    }
}
@media (min-width: 992px){
    .fs-lg-1{
        font-size: var(--fs-text1) !important;
    }
    .fs-lg-2{
        font-size: var(--fs-text2) !important;
    }
    .fs-lg-3{
        font-size: var(--fs-text3) !important;
    }
    .fs-lg-4{
        font-size: var(--fs-text4) !important;
    }
    .fs-lg-5{
        font-size: var(--fs-text5) !important;
    }
    .fs-lg-6{
        font-size: var(--fs-text6) !important;
    }
}

.text-wrap:before,
.text-wrap:after {
    display: table;
    content: " ";
}
.text-wrap:after{
    clear:both;
}

.text-wrap > *{margin-bottom:16px;}
.text-wrap > *:last-child{margin-bottom:0;}
.text-wrap ul,.text-wrap ol{padding-left:24px;}
.text-wrap li + li,.text-wrap li ul,.text-wrap li ol{margin-top:0.25rem;}

.text-wrap img{
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 5px;
}
.text-wrap img[style*="float: left"]{
    margin-right: 15px;
}
.text-wrap img[style*="float: right"]{
    margin-left: 15px;
}

.text-wrap hr{
    margin: 35px 0;
}
.text-wrap hr + img,
.text-wrap hr + * img{
    margin-top: 8px;
}

.link{
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.link img{
    flex-shrink: 0;
    width: 16px;
}

button.link{
    background: none;
    border: 0;
    padding: 0;
}

.text-wrap audio,
.text-wrap video{
    display: block;
    width: 100%;
    outline: none;
}
.text-wrap video{
    height: auto;
}

.text-wrap iframe{
    display: block;
    max-width: 100%;
}

.text-wrap table {
    width: 100%;
    border: 1px solid #dee2e6;
    color: inherit;
}
.text-wrap table th,
.text-wrap table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    vertical-align: top;
}
.text-wrap table thead th {
    border-bottom: 2px solid #dee2e6;
    vertical-align: bottom;
}
.text-wrap table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.text-wrap .table-plain {
    border: 0;
}
.text-wrap .table-plain th,
.text-wrap .table-plain td {
    border: 0;
    border-top: 1px solid #dee2e6;
}
/* ---------- /title,text ---------- */


/* ---------- buttons ---------- */
.btn{
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: var(--font-family);
    --bs-btn-font-size: 1.5rem;
    --bs-btn-font-weight: bold;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 0;
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: 1;
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-color: var(--btn-default-color);

    --btn-size: var(--form-element-size-6);

    --btn-icon-size: var(--icon-size-lg);
    --btn-icon-color: var(--bs-btn-color);
    --btn-icon-hover-color: var(--bs-btn-hover-color);
    --btn-icon-active-color: var(--bs-btn-active-color);
    --btn-icon-disabled-color: var(--bs-btn-disabled-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: var(--btn-size);
    min-height: var(--btn-size);
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

.btn.size-auto{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: auto;
}

.icon-btn{
    --btn-size: 24px;
}

.btn-xxs{
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.125rem;
    --bs-btn-font-size: 0.875rem;
    --btn-size: var(--form-element-size-1);
    --btn-icon-size: var(--icon-size-sm);
}
.btn-xs{
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 1rem;
    --btn-size: var(--form-element-size-2);
    --btn-icon-size: var(--icon-size-sm);
}
.btn-sm{
    --bs-btn-padding-x: 1.375rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 1rem;
    --btn-size: var(--form-element-size-3);
    --btn-icon-size: var(--icon-size-md);
}
.btn-md{
    --bs-btn-padding-x: 1.375rem;
    --btn-size: var(--form-element-size-4);
}
.btn-lg{
    --btn-size: var(--form-element-size-5);
}
.btn-xl{
    --btn-size: var(--form-element-size-6);
}

.icon-btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    border: none;
}

.btn img,
.btn svg{
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: auto;
}
.btn svg *{
    fill: var(--btn-icon-color);
    transition: fill .15s ease-in-out;
}
.btn:hover svg *{
    fill: var(--btn-icon-hover-color);
}
.btn:active svg *,
.btn.active svg *{
    fill: var(--btn-icon-active-color);
}
.btn.disabled svg *{
    fill: var(--btn-icon-disabled-color);
}

/* white */
.btn-white{
    background-color: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.5);
}
.btn-white:hover{
    background-color: rgba(255,255,255,0.7);
}
.btn.btn-outline-white{
    border-color: #fff;
    color: #fff !important;
}
.btn.btn-outline-white:hover{
    background-color: #fff;
    border-color: #fff;
}

/* primary */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-primary);
    --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-primary-hover);
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-active);
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn-outline-primary{
    --bs-btn-color: var(--btn-primary);
    --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: var(--btn-primary-hover);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: var(--btn-primary-active);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: var(--btn-outline-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-outline-disabled-bg);
}

/* secondary */
.btn-secondary{
    --bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: var(--btn-secondary);
    --bs-btn-border-color: var(--btn-secondary);
    --bs-btn-hover-color: var(--btn-default-color);
    --bs-btn-hover-bg: var(--btn-secondary-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-secondary-active);
    --bs-btn-active-border-color: var(--btn-secondary-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn-outline-secondary{
    --bs-btn-color: var(--btn-secondary);
    --bs-btn-border-color: var(--btn-secondary);
    --bs-btn-hover-color: var(--btn-secondary-hover);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--btn-secondary-hover);
    --bs-btn-active-color: var(--btn-secondary-active);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--btn-secondary-active);
    --bs-btn-disabled-color: var(--btn-outline-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-outline-disabled-bg);
}

/* dark */
.btn-dark{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-dark);
    --bs-btn-border-color: var(--btn-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-dark-hover);
    --bs-btn-hover-border-color: var(--btn-dark-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-dark-active);
    --bs-btn-active-border-color: var(--btn-dark-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn-outline-dark{
    --bs-btn-color: var(--btn-dark);
    --bs-btn-border-color: var(--btn-dark);
    --bs-btn-hover-color: var(--btn-dark-hover);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--btn-dark-hover);
    --bs-btn-active-color: var(--btn-dark-active);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--btn-dark-active);
    --bs-btn-disabled-color: var(--btn-outline-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-outline-disabled-bg);
}


/* is loading */
.btn.is-loading{
    background-image: url("../../images/icons/spinner_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    pointer-events: none;
}
.btn.is-loading > *{
    opacity: 0;
}
/* ---------- /buttons ---------- */


/* ---------- pagination ---------- */
.pagination{
    --bs-pagination-padding-x: 0.25rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #DEDEDF;
    --bs-pagination-border-radius: 0;
    --bs-pagination-hover-color: var(--bs-body-color);
    --bs-pagination-hover-bg: #DEDEDF;
    --bs-pagination-hover-border-color: #DEDEDF;
    --bs-pagination-focus-color: var(--bs-body-color);
    --bs-pagination-focus-bg: #DEDEDF;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--btn-dark);
    --bs-pagination-active-border-color: var(--btn-dark);

    --pagination-item-size: var(--form-element-size-1);

    flex-wrap: wrap;
}
.pagination .page-item{
    flex-shrink: 0;
    margin: 4px 0;
}
.pagination .page-link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-item-size);
    height: var(--pagination-item-size);
}
/* ---------- /pagination ---------- */


/* ---------- form ---------- */
.form-group{
    margin-bottom: 1.5rem;
}

.form-label{
    display: block;
    margin-bottom: 8px;

    color: #000;
    font-size: 14px;
    font-weight: 300;
}

.form-select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control,
.form-control:focus,
.form-select,
.form-select:focus,
.virtual-select .vscomp-toggle-button,
.desktop .virtual-select .vscomp-wrapper:hover .vscomp-toggle-button,
.virtual-select .vscomp-wrapper.focused .vscomp-toggle-button,
.virtual-select.pop-comp-active .vscomp-wrapper:focus .vscomp-toggle-button{
    background-color: var(--form-control-bg);
    border-color: var(--form-control-border-color);
    box-shadow: none !important;
    color: var(--form-control-color);
    caret-color: var(--form-control-color);
}
.form-control,
.form-select,
.virtual-select .vscomp-toggle-button{
    height: var(--form-control-height);
    border-radius: 0;
    padding: var(--form-control-py) var(--form-control-px);

    font-family: var(--font-family);
    font-size: var(--form-control-fs);
}

.form-select,
.virtual-select .vscomp-toggle-button{
    --form-select-pe: 2rem;
    --chevron-size: 1rem;
    --chevron-me: 0.5rem;

    padding-right: var(--form-select-pe);
}

.form-select{
    background-image: url(../../images/icons/chevron.svg);
    background-position: right var(--chevron-me) center;
    background-size: var(--chevron-size) auto;

}

textarea.form-control{
    height: auto;
}

.form-control::placeholder{
    color: var(--bs-secondary-color);
}


/* virtual select */
.virtual-select{
    --option-height: 40px;
    --option-fs: 14px;
    --option-color: var(--form-control-color);
    --option-hover-color: var(--form-control-color);
    --option-bg-hover: rgba(var(--bs-dark-rgb),0.1);
    --option-bg-active: rgba(var(--bs-dark-rgb),0.2);
}
.virtual-select .vscomp-arrow::after{
    display: none;
}
.virtual-select .vscomp-arrow{
    width: var(--chevron-size);
    background: url(../../images/icons/chevron.svg) center no-repeat;
    background-size: 100% auto;
    margin-right: var(--chevron-me);
}

.virtual-select .pop-comp-wrapper,
.virtual-select .vscomp-dropbox{
    background-color: var(--form-control-bg);
    font-family: var(--font-family);
}

.virtual-select .vscomp-search-container{
    height: auto;
    border: 1px solid var(--form-control-border-color);
    padding: 0;
    margin: 5px;
}
.virtual-select .vscomp-search-input{
    height: 38px;
    padding: 0.25rem 0 0.25rem 0.5rem;
}

.virtual-select .vscomp-option{
    height: var(--option-height) !important;
    padding: 0 0.75rem;

    color: var(--option-color);
    font-size: var(--option-fs);
    line-height: 1.15;
}
.virtual-select .vscomp-option .vscomp-option-text{
    display: flex;
    align-items: center;
    min-height: calc(var(--option-height) - 10px);
    padding: 0.2rem 0.5rem;
    text-overflow: unset;
    white-space: normal;
}
.virtual-select .vscomp-option.focused,
.virtual-select .vscomp-option.selected{
    background-color: transparent;
}
.virtual-select .vscomp-option.focused {
    color: var(--option-hover-color);
}
.virtual-select .vscomp-option.selected {
    color: var(--option-hover-color);
}
.virtual-select .vscomp-option.focused .vscomp-option-text{
    background-color: var(--option-bg-hover);
}
.virtual-select .vscomp-option.selected .vscomp-option-text{
    background-color: var(--option-bg-active);
}


.virtual-select .vscomp-wrapper.show-as-popup.focused{
    z-index: 550 !important;
}
.virtual-select .vscomp-wrapper.show-as-popup .vscomp-dropbox {
    max-height: calc(100% - 48px);
}

.desktop .virtual-select.pop-comp-active .vscomp-toggle-button{
    z-index: 6;
}
.desktop .virtual-select.pop-comp-active .pop-comp-wrapper{
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    margin-top: -4px;
    z-index: 5 !important;
}

.virtual-select.fc-size-sm .vscomp-search-input,
.virtual-select.fc-size-xs .vscomp-search-input{
    height: 31px;
}
.virtual-select.fc-size-sm,
.virtual-select.fc-size-xs{
    --option-height: 34px;
    --option-fs: 12px;
}


/* disabled */
.form-control:disabled{
    background-color: rgba(var(--bs-dark-rgb),0.1);
    border-color: #D5CFC1;
    opacity: 1;
}


/* search */
.search-input{
    background-image: url(../../images/icons/magnifying_glass.svg);
    background-position: 8px center;
    background-repeat: no-repeat;
    background-size: 24px auto;
    padding-left: 38px;
}
.search-input::-webkit-search-cancel-button{
    appearance: none;
    background: url(../../images/icons/xmark.svg) center no-repeat;
    background-size: 100% auto;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0 -0.5rem 0 0.5rem;
}
.search-input.is-loading{
    background-image: url(../../images/icons/spinner_notch.svg);
}

/* calendar */
.calendar-input{
    background-image: url(../../images/icons/calendar.svg);
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 24px auto;
    padding-right: 38px;
}


/* themes */
.theme-light {
    --form-control-bg: #fff;
    --form-control-color: var(--bs-body-color);
}

.virtual-select.theme-light{
    --option-color: var(--bs-secondary-color);
    --option-hover-color: var(--bs-body-color);
    --option-bg-hover: transparent;
    --option-bg-active: #D9D9D9;
}

/* sizes */
.fc-size-xxs,
.fc-size-xs,
.fc-size-sm{
    --form-select-pe: 1.55rem;
    --chevron-size: 14px;
    --chevron-me: 0.375rem;
    --form-control-fs: 14px;
}
.fc-size-xxs{
    --form-control-height: var(--form-element-size-1);
    --form-control-py: 0.125rem;
    --form-control-px: 0.5rem;
    --form-control-fs: 12px;

}
.fc-size-xs{
    --form-control-height: var(--form-element-size-2);
    --form-control-py: 0.125rem;
    --form-control-px: 0.5rem;
}
.fc-size-sm{
    --form-control-height: var(--form-element-size-3);
    --form-control-px: 0.75rem;
}
.fc-size-md{
    --form-control-height: var(--form-element-size-4);
}
.fc-size-lg{
    --form-control-height: var(--form-element-size-5);
}
.fc-size-xl{
    --form-control-height: var(--form-element-size-6);
}


/* checkbox, radio */
.form-check{
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 16px;
    padding: 0;
    margin: 0;

    color: #000;
    font-size: 14px;
    line-height: 20px;
}
.form-check input,
.form-check .form-check-input{
    flex-shrink: 0;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: -50px center;
    background-size: 16px auto;
    border: 2px solid var(--bs-dark);
    margin: 0;
}
.form-check-input:active {
    filter: none;
}
.form-check-input:focus{
    box-shadow: none;
}
.form-check input[type="checkbox"]{
    width: 18px;
    height: 18px;
    background-image: url(../../images/icons/check.svg);
    border-radius: 1px;
    margin: 1px;
}
.form-check input[type="radio"]{
    width: 20px;
    height: 20px;
    background-image: url(../../images/icons/radio.svg);
    border-radius: 50%;
}

.form-check input:checked{
    background-position: center;
}


/* toggler */
.form-toggler{
    display: inline-flex;
    gap: 10px;
    position: relative;
    overflow: hidden;
    margin: 0;

    color: #000;
    font-size: 13px;
}
.form-toggler input{
    opacity: 0;
    position: absolute;
    left: -100%;
}
.form-toggler > i{
    flex-shrink: 0;
    display: flex;
    width: 44px;
    height: 26px;
    background-color: #D4D7D9;
    border-radius: 16px;
    position: relative;
    padding: 3px;
}
.form-toggler > i::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}
.form-toggler > i,
.form-toggler > i::before{
    transition: all 0.3s ease;
}
.form-toggler input:checked + i{
    background-color: var(--bs-primary);
}
.form-toggler input:checked + i::before{
    transform: translateX(18px);
}

.form-toggler span{
    margin: auto 0;
}
.form-group .form-toggler{
    margin: 9px 0;
}


/* form controls with icon-btn */
.input-with-icon-btn{
    position: relative;
}
.input-with-icon-btn .form-control{
    padding-right: var(--form-element-size-4);
}
.input-with-icon-btn .btn{
    --btn-icon-size: var(--icon-size-md);
    --btn-size: var(--form-element-size-4);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}


/* error */
.error-text,
.invalid-feedback{
    color: var(--bs-form-invalid-color);
    font-size: 14px;
    line-height: 1.25;
}

.error-text,
.invalid-feedback{
    padding: 0 1rem;
}

.error-text {
    display: none;
}
.global-error-text {
    display: block;
    margin: 1.5rem 0;

    color: var(--bs-form-invalid-color);
    font-size: 1rem;
    text-align: center;
}

.has-error .form-control:not(:focus),
.has-error .form-select:not(:focus){
    border-color: var(--bs-form-invalid-border-color);
}
.has-error .error-text,
.has-error .invalid-feedback{
    display: block;
}

.form-control.is-invalid,
.form-select.is-invalid{
    box-shadow: none !important;
}
/* ---------- /form ---------- */


/* ---------- range slider ---------- */
.noUiSlider.noUi-horizontal.noUi-target{
    height: 6px;
    background-color: rgba(var(--bs-dark-rgb),.1);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.noUiSlider.noUi-horizontal .noUi-connect {
    background: var(--bs-primary);
    border-radius: 0;
}
.noUiSlider.noUi-horizontal .noUi-handle{
    width: 22px;
    height: 22px;
    background-color: #fff;
    border: 6px solid var(--bs-primary);
    border-radius: 50%;
    box-shadow: none;
    right: -11px;
    top: -8px;
}
.noUiSlider.noUi-horizontal .noUi-handle::before,
.noUiSlider.noUi-horizontal .noUi-handle::after{
    display: none;
}

/*.noUiSlider-container .separator-col{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
}
.noUiSlider-container .separator-col hr{
    width: 16px;
    border-top-color: #000;
    margin: 0;
}*/

.noUiSlider-container .form-control{
    --form-control-px: 0.5rem;
    --form-control-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    gap: 0.25rem;
    width: 100%;
    text-align: center;
}
.noUiSlider-container .form-control input{
    width: 10px;
    height: 100%;
    border: 0;
    background-color: transparent;
    outline: none;

    color: inherit;
    font-size: inherit;
}

.noUiSlider-container .min-max-values{
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
    position: absolute;
    top: 100%;
    left: -5px;
    right: -5px;
}
/* ---------- /range slider ---------- */


/* ---------- bg-img ---------- */
.bg-img{
    display: block;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.bg-img:not(.ratio)::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.bg-img--cover{
    background-size: cover;
}
.bg-img--contain{
    background-size: contain;
}
.bg-img.fit-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/* ---------- /bg-img ---------- */


/* ---------- ratio, fit ---------- */
.ratio{
    display: block;
    overflow: hidden;
}
.ratio img,
.ratio video,
.object-fit-cover{
    object-fit: cover;
}
.object-fit-contain{
    object-fit: contain;
}
/* ---------- /ratio, fit ---------- */


/* ---------- item with icon ---------- */
.item-with-icon{
    --color: var(--bs-body-color);
    --color-hover: var(--bs-body-color);
    --color-active: var(--color-hover);
    --font-size: inherit;
    --icon-size: var(--icon-size-sm);

    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: var(--font-size);
}
a.item-with-icon:hover{
    color: var(--color-hover);
}
.item-with-icon.active{
    color: var(--color-active);
}

.item-with-icon img,
.item-with-icon svg{
    flex-shrink: 0;
    width: var(--icon-size);
    height: auto;
}
.item-with-icon svg *{
    fill: var(--color);
    transition: fill .15s ease-in-out;
}
.item-with-icon:hover svg *{
    fill: var(--color-hover);
}
.item-with-icon.active svg *{
    fill: var(--color-active);
}
/* ---------- /item with icon ---------- */


/* ---------- dropdown ---------- */
.dropdown-menu{
    --bs-dropdown-spacer: 0;
    --bs-dropdown-bg: var(--bs-secondary);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.25);
    --bs-dropdown-padding-x: 1.625rem;
    --bs-dropdown-padding-y: 1.875rem;
    --bs-dropdown-divider-margin-y: 0.85rem;

    --bs-dropdown-item-border-radius: 0;
    --bs-dropdown-link-color: #000;
    --bs-dropdown-link-hover-color: #000;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: #000;
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-item-padding-x: 0;
    --bs-dropdown-item-padding-y: 0;
    --bs-dropdown-font-size: 1rem;

    border: none;
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-menu ul{
    list-style: none;
}
.dropdown-menu li{
    display: flex;
    margin-bottom: 0.875rem;
}
.dropdown-menu .dropdown-item{
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
}
.dropdown-menu .dropdown-item img,
.dropdown-menu .dropdown-item svg{
    width: var(--icon-size-md);
}

.dropdown-menu .dropdown-item:hover{
    text-decoration: underline;
}
/* ---------- /dropdown ---------- */


/* ---------- calendar ---------- */
body .air-datepicker{
    --adp-color: var(--bs-body-color);
    --adp-background-color-hover: var(--bs-secondary-bg-subtle);
    --adp-background-color-active: var(--bs-secondary-bg-subtle);
    --adp-nav-color-secondary: var(--bs-body-color);
    --adp-day-name-color: var(--bs-emphasis-color);
    --adp-color-current-date: var(--bs-emphasis-color);
    --adp-color-other-month: #979798;
    --adp-color-disabled: #CDCDCD;
    --adp-cell-background-color-hover: var(--bs-secondary-bg-subtle);
    --adp-cell-background-color-selected: var(--bs-secondary-text-emphasis);
    --adp-cell-background-color-selected-hover: var(--bs-secondary-text-emphasis);

    --adp-font-family: var(--font-family);
    --adp-font-size: 14px;

    --adp-border-radius: 0;
    --adp-border-color-inline: var(--bs-border-color);
    --adp-padding: 7px;

    --adp-nav-height: 32px;

    --adp-day-cell-height: 32px;
    --adp-cell-border-radius: 0;

    box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.25);
}
/* ---------- /calendar ---------- */


/* ---------- slider ---------- */
.swiper:not(.swiper-initialized){
    opacity: 0;
}

.swiper{
    --swiper-btn-size: 36px;
    --swiper-btn-spacing: 16px;
}

.swiper-btn{
    --btn-size: var(--swiper-btn-size);

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--swiper-btn-size);
    height: var(--swiper-btn-size);
    position: absolute;
    top: 50%;
    z-index: 3;
    margin-top: calc(var(--swiper-btn-size) * -0.5);
}
.swiper-btn img,
.swiper-btn svg{
    display: block;
    width: 36px;
    height: auto;
}
.swiper-btn svg *{
    fill: var(--btn-secondary);
    transition: fill .15s ease-in-out;
}
.desktop .swiper-btn:hover svg *{
    fill: var(--btn-secondary-active);
}
.swiper-btn-prev{
    left: 0;
}
.swiper-btn-next{
    right: 0;
}
.swiper-button-disabled{
    opacity: .35;
    pointer-events: none;
}

.swiper .swiper-btn-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.swiper .swiper-btn-wrap .swiper-btn{
    margin: 0;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    pointer-events: auto;
}

.swiper.swiper-horizontal>.swiper-pagination-bullets{
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-color: var(--btn-secondary);
    --swiper-pagination-bullet-inactive-color: transparent;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12px;
}
.swiper-pagination-bullet{
    border: 1px solid var(--swiper-pagination-color);
}

.swiper-button-lock,
.swiper-pagination-lock{
    display: none !important;
}

/* carousel */
.carousel{
    --gap: 10px;
}

.swiper.carousel .swiper-slide{
    display: flex;
    flex-direction: column;
    height: auto;
    z-index: -1;

    -webkit-user-select: none;
    user-select: none;
}
.swiper.carousel .swiper-slide.swiper-slide-fully-visible{
    z-index: 3;
}
.swiper.carousel .swiper-slide > *{
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.swiper.carousel .swiper-btn-prev{
    left: 0;
}
.swiper.carousel .swiper-btn-next{
    right: 0;
}
.swiper.carousel .swiper-btn svg *{
    fill: var(--btn-dark);
}
.desktop .swiper.carousel .swiper-btn:hover svg *{
    fill: var(--btn-dark-active);
}

.carousel.swiper.swiper-horizontal>.swiper-pagination-bullets{
    --swiper-pagination-color: var(--btn-dark);
    --swiper-pagination-bullet-inactive-color: var(--bs-border-color-translucent);
    --swiper-pagination-bottom: auto;

    position: relative;
    padding-top: 1.75rem;
}
.swiper.carousel .swiper-pagination-bullet{
    border: none;
}

@media (min-width: 992px) {
    .swiper.swiper-horizontal>.swiper-pagination-bullets{
        --swiper-pagination-bullet-size: 12px;
        --swiper-pagination-bullet-horizontal-gap: 6px;
        --swiper-pagination-bottom: 30px;
    }
}
@media (min-width: 1020px) {
    .swiper.carousel{
        --btn-width: 2.25rem;
        padding-left: var(--btn-width);
        padding-right: var(--btn-width);
        margin-left: calc(var(--btn-width) * -1);
        margin-right: calc(var(--btn-width) * -1);
    }
    .swiper.carousel::before,
    .swiper.carousel::after{
        content: "";
        width: var(--btn-width);
        background-color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
    }
    .swiper.carousel::before{
        left: 0;
    }
    .swiper.carousel::after{
        right: 0;
    }
}
@media (min-width: 992px) and (max-width: 1649px){
    .swiper.carousel .swiper-btn-prev{
        left: 5px;
    }
    .swiper.carousel .swiper-btn-next{
        right: 5px;
    }
}

@media (max-width: 767px) {
    .swiper .swiper-btn-wrap{
        padding-left: 0;
        padding-right: 0;
    }
}
/* ---------- /slider ---------- */


/* ---------- card ---------- */
.card{
    --bs-card-bg: var(--bs-secondary);
    --bs-card-color: var(--bs-body-color);

    color: var(--bs-card-color);
}
.card.bg-secondary{
    --bs-card-border-width: 0;
}

.card .sub-title{
    display: block;
    color: var(--bs-light);
    font-size: 13px;
}
/* ---------- /card ---------- */


/* ---------- tabs ---------- */
.nav-tabs{
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--bs-heading-color);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;

    --bs-nav-link-color: var(--bs-heading-color);
    --bs-nav-link-padding-x: 1.5rem;
    --bs-nav-link-padding-y: 0.75rem;
    --bs-nav-link-font-size: 1rem;
    --bs-nav-link-font-weight: 400;
}
/* ---------- /tabs ---------- */


/* ---------- accordion ---------- */
.accordion-toggle-btn > img,
.accordion-toggle-btn > svg{
    transition: 0.15s ease-in-out;
}
.accordion-is-open .accordion-toggle-btn > img,
.accordion-is-open .accordion-toggle-btn > svg{
    transform: rotate(-180deg);
}
/* ---------- /accordion ---------- */


/* ---------- modal ---------- */
.modal-backdrop{
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.7;
}

.modal-backdrop-blur::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(8px);
}

.modal{
    --bs-modal-bg: #fff;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 0;
}
.modal-dialog{
    --bs-modal-width: 450px;
    --modal-padding-x: 1.25rem;
    --modal-padding-y: 2rem;
}
.modal-sm{
    --bs-modal-width: 300px;
    --modal-padding-x: 1.25rem;
    --modal-padding-y: 1.25rem;
}
.modal-lg{
    --bs-modal-width: 800px;
}
.modal-xl{
    --bs-modal-width: var(--container-size-4);
}

.modal-content{
    box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.25);
}

.modal .modal-close-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    padding: 8px;
}
.modal .modal-close-btn img{
    width: 16px;
    opacity: 0.48;
    transition: opacity .15s ease-in-out;
}
.modal .modal-close-btn:hover img{
    opacity: 1;
}
.modal-content > .modal-close-btn,
.modal-body > .modal-close-btn{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.modal-header{
    --bs-modal-header-padding: var(--modal-padding-x);
    padding-bottom: 24px;
    border: none;
}
.modal-body{
    --bs-modal-padding: var(--modal-padding-x);

    font-size: 14px;
}
.modal-header + .modal-body{
    padding-top: 0;
}

.modal-title{
    margin-bottom: 1.25rem;

    color: var(--bs-heading-color);
    font-size: var(--fs-h5);
    line-height: 1.25;
    font-weight: bold;
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

.auth-modal .modal-dialog {
    --bs-modal-width: 420px;
}
.auth-modal .modal-title{
    margin: -0.5rem 0 1.5rem;
}
.auth-modal .modal-close-btn{
    padding-top: 12px;
    padding-right: 12px;
}

@media (min-width: 576px) {
    .modal-dialog{
        --modal-padding-x: 2rem;
    }
}
/* ---------- /modal ---------- */


/* ---------- products ---------- */
.product-img{
    --bs-aspect-ratio: 100%;
}

.product-title{
    --bs-link-hover-decoration: underline;

    color: var(--bs-heading-color);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.25;
}
.product-title a{
    color: inherit;
    /*text-decoration: none;*/
}

.product-price-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-price{
    color: var(--bs-primary);
    font-family: var(--font-family-gilroy);
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: 0.05rem;
    line-height: 1;
}
.product-price-old{
    color: var(--bs-secondary-color);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: line-through;
    line-height: 1;
}

/* --- grid --- */
.products-grid{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}
.products-grid > div{
    display: flex;
    flex-direction: column;
}
.products-grid .products-grid-item{
    flex-grow: 1;
}

/* grid item */
.products-grid-item{
    --item-py: 0.75rem;
    --item-px: 0.75rem;
    --bs-aspect-ratio: 100%;

    display: flex;
    flex-direction: column;
    background-color: var(--bs-secondary);
    border: 1px solid var(--border-color-secondary);
    padding: var(--item-py) var(--item-px);
    position: relative;

    transition: box-shadow .15s ease-in-out;
}
.products-grid-item:hover{
    box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
}

.products-grid-item .img-wrap{
    width: 100%;
    margin: 0 auto var(--item-py);
}
.products-grid-item .img-wrap > *{
    display: block;
}

.products-grid-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.products-grid-item .product-title{
    margin-right: calc(var(--item-px) * -0.5);
    margin-bottom: auto;
}
.products-grid-item .btn-add-to-cart{
    width: 100%;
    margin-top: 0.5rem;
}

/* badge */
.products-grid-item .badge{
    --bs-badge-padding-x: 0.625em;
    --bs-badge-padding-y: 0.485em;
    --bs-badge-font-size: 1em;
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: 0;

    line-height: 1.25;
    white-space: normal;

    position: absolute;
    top: 1.5rem;
    left: 0;
    z-index: 2;
}

.products-grid-item .img-badge{
    width: 56px;
    height: auto;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

/* out of stock */
.out-of-stock .product-price{
    color: var(--bs-secondary-color);
}
.out-of-stock .btn-add-to-cart{
    --bs-btn-color: var(--btn-outline-disabled-color);
    --bs-btn-border-color: var(--btn-outline-disabled-bg);

    pointer-events: none;
}


/* --- list --- */
.products-list-item{
    --item-py: 1rem;
    --item-px: 1rem;
    --bs-aspect-ratio: 100%;

    display: flex;
    align-items: center;
    gap: 1.125rem;
    background-color: #fff;
    border: 1px solid var(--border-color-secondary);
    padding: var(--item-py) var(--item-px);
}
.products-list-item .img-wrap{
    flex-shrink: 0;
    width: 86px;
}
.products-list-item .info-wrap{
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.products-list-item .info-wrap > div{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

@media (min-width: 360px) {
    .products-list-item .info-wrap .btn-add-to-cart{
        width: 180px;
    }
}
@media (max-width: 767px) {
    .products-list-item .info-wrap{
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- carousel --- */
.swiper.products-carousel .swiper-btn{
    top: 40%;
}
/* ---------- /products ---------- */


/* ---------- product counter ---------- */
.product-counter{
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 116px;
    height: var(--form-element-size-4);
    border: 1px solid var(--border-color-secondary);
}

.product-counter button{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--form-element-size-2);
    background-color: transparent;
    border: 0;
    padding: 0;
}
.product-counter button img{
    width: 16px;
}
.product-counter input{
    width: 100%;
    background-color: transparent;
    border: 0;
    outline: none;
    padding: 1px 0 0;

    color: var(--bs-emphasis-color);
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
/* ---------- /product counter ---------- */


/* ---------- filters ---------- */
.filters-container{
    margin: 1.5rem 0 2rem;
}
.filters-container .form-group:last-child{
    margin-bottom: 0;
}
.filters-container .virtual-select{
    max-width: 100%;
}

/*.filters-container .noUiSlider-container .noUiSlider{
    width: 100%;
}*/

@media (min-width: 768px) {
    .filters-container .noUiSlider-container .noUiSlider{
        width: 200px;
    }
}
@media (min-width: 1200px) {
    .filters-container .virtual-select{
        width: 186px;
    }
}
/* ---------- /filters ---------- */


/* ---------- main slider ---------- */
.main-slider{
    --bs-aspect-ratio: 28%;
}
.main-slider .swiper-slide{
    display: flex;
    flex-direction: column;
    height: auto;
}
/*.main-slider .img-wrap::after{
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(38, 38, 40, 1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}*/
.main-slider .info-wrap{
    --padding-y: 0.75rem;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    margin: auto;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);

    color: var(--bs-secondary-bg-subtle);
    font-size: 1rem;
}
.main-slider .info-wrap > *{
    margin-right: 0.625rem;
}

/*.main-slider .info-wrap .display-title,
.main-slider .info-wrap .text-wrap,
.main-slider .info-wrap .text{
    color: inherit;
}
.main-slider .info-wrap .text-wrap,
.main-slider .info-wrap .text{
    font-size: inherit;
}*/

/*@media (min-width: 768px) {
    .main-slider .info-wrap{
        padding: 3.75rem 4.75rem;
    }
}*/
@media (min-width: 992px) {
    .main-slider .info-wrap{
        --padding-y: 1.875rem;
    }
}
@media (min-width: 1400px) {
    .main-slider{
        --slide-height: 400px;
        --bs-aspect-ratio: var(--slide-height);
    }
    .main-slider .swiper-slide{
        min-height: var(--slide-height);
    }
    .main-slider .img-wrap{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

@media (max-width: 767px) {
    .main-slider .info-wrap{
        display: none;
    }
}
/* ---------- /main slider ---------- */


/* ---------- cocktails ---------- */
.cocktails-grid-item{
    --top-spacing: var(--grid-item-top-spacing, 100px);
    display: flex;
    flex-direction: column;
    padding-top: var(--top-spacing);
}
.cocktails-grid-item .card{
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 2rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: 0;
    --bs-card-box-shadow: 0 0 14px 0 rgba(0,0,0,.15);
    --bs-card-height: 240px;

    /*box-shadow: var(--bs-card-box-shadow);*/
}
.cocktails-grid-item .card{
    flex-grow: 1;
    height: auto;
    min-height: var(--bs-card-height);
    width: 100%;
}
.cocktails-grid-item .card-body{
    display: flex;
}

.cocktails-grid-item .img-wrap{
    --bs-aspect-ratio: 200%;

    flex-shrink: 0;
    width: 150px;
    position: relative;
    margin-left: calc(-1 * var(--bs-card-spacer-x));
    margin-top: calc(-1 * var(--bs-card-spacer-y));
    margin-bottom: calc(-1 * var(--bs-card-spacer-y));
}
.cocktails-grid-item .img-wrap .ratio{
    position: absolute;
    bottom: 0;
    left: 0
}
.cocktails-grid-item .img-wrap img{
    object-fit: contain;
}

.cocktails-grid-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 12px;
    font-weight: 300;
}
.cocktails-grid-item .info-wrap .title{
    font-size: 26px;
}

@media (min-width: 370px) {
    .cocktails-grid-item .img-wrap{
        width: 160px;
    }
}
@media (min-width: 768px) {
    .cocktails-grid-item .info-wrap .title{
        font-size: 1.75rem;
    }
}
@media (min-width: 992px) {
    .cocktails-grid-item{
        --top-spacing: var(--grid-item-top-spacing, 64px);
    }
    .cocktails-grid-item .card{
        --bs-card-spacer-x: 1.5rem;
        --bs-card-spacer-y: 1.25rem;
        --bs-card-height: 160px;
    }
    .cocktails-grid-item .img-wrap{
        width: 112px;
    }
    .cocktails-grid-item .info-wrap{
        font-size: 10px;
    }
    .cocktails-grid-item .info-wrap .title{
        font-size: 1.25rem;
    }
}

.cocktails-carousel{
    --gap: 20px;
    --grid-item-top-spacing: 100px;
}
.cocktails-carousel .swiper-slide{
    display: flex;
    flex-direction: column;
}
.cocktails-carousel .swiper-slide > *{
    flex-grow: 1;
}
.cocktails-carousel .swiper-btn{
    top: calc(50% + var(--grid-item-top-spacing) * 0.5);
}
.cocktails-carousel .swiper-slide:not(.swiper-slide-visible) .cocktails-grid-item .card{
    box-shadow: none !important;
}

@media (min-width: 992px) {
    .cocktails-carousel {
        --grid-item-top-spacing: 64px;
    }
}
/* ---------- /cocktails ---------- */


/* ---------- item-2col-with-img ---------- */
.item-2col-with-img{
    --col-gap: 2.5rem;
    --img-aspect-ratio: 90.75%;
    --bg-aspect-ratio: 72.695%;

    display: flex;
    gap: var(--col-gap);
}
.item-2col-with-img > div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
.item-2col-with-img .img-wrap{
    --bs-aspect-ratio: var(--img-aspect-ratio);
}
.item-2col-with-img .img-wrap::after{
    content: "";
    width: 100%;
    background: url(../../images/bg_pattern.svg) center no-repeat;
    background-size: contain;
    padding-top: var(--bg-aspect-ratio);
    position: absolute;
    bottom: 0;
    left: 0;
}
.item-2col-with-img .img-wrap img{
    z-index: 2;
}

@media (min-width: 768px) {
    .item-2col-with-img {
        --col-gap: 1.5rem;
    }
    .item-2col-with-img > div{
        width: calc((100% - var(--col-gap)) / 2);
    }
    .item-2col-with-img .text-wrap{
        padding-top: calc(var(--img-aspect-ratio) - var(--bg-aspect-ratio));
    }
}
@media (min-width: 992px) {
    .item-2col-with-img .text-wrap{
        font-size: 1.25rem;
    }
}
@media (min-width: 1600px) {
    .item-2col-with-img .text-wrap{
        font-size: 1.625rem;
    }
}
@media (max-width: 767px) {
    .item-2col-with-img{
        flex-direction: column;
    }
}
/* ---------- /item-2col-with-img ---------- */


/* ---------- logos ---------- */
.swiper.logos-carousel{
    --item-shadow-size: 0;
}
.logos-carousel .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    /*width: 106px;
    height: 72px;*/
}
.logos-carousel .swiper-slide::before{
    content: "";
    display: block;
    padding-top: 100%;
}
.logos-carousel .swiper-slide > *{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color-secondary);
    padding: 0.75rem;
    position: absolute;
    top: 0;
    left: 0;
}
.logos-carousel .swiper-slide img{
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*@media (min-width: 1020px) {
    .swiper.logos-carousel{
        --btn-width: 2.25rem;

        !*padding: 2rem 2.5rem;*!
        padding-left: var(--btn-width);
        padding-right: var(--btn-width);
        margin-left: calc(var(--btn-width) * -1);
        margin-right: calc(var(--btn-width) * -1);
    }
    .swiper.logos-carousel::before,
    .swiper.logos-carousel::after{
        content: "";
        width: var(--btn-width);
        background-color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .swiper.logos-carousel::before{
        left: 0;
    }
    .swiper.logos-carousel::after{
        right: 0;
    }
}*/
/* ---------- /logos ---------- */


/* ---------- basket ---------- */
.basket-item{
    --bs-aspect-ratio: 100%;

    display: flex;
    padding: 14px 0 8px 4px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.basket-item .img-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    width: 98px;
    background-color: #fff;
}
.basket-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 2px 1rem;
    font-size: 15px;
}
.basket-item .product-title{
    font-weight: normal;
}
.basket-item .icon-btn{
    align-self: flex-start;
    --btn-size: 24px;
    --btn-icon-size: 16px;
}
.basket-item .icon-btn img{
    opacity: 0.48;
    transition: opacity .15s ease-in-out;
}
.basket-item .icon-btn:hover img{
    opacity: 1;
}

.basket-item .product-counter{
    width: 88px;
    height: 32px;
}
.basket-item .product-counter button{
    width: 28px;
}
.basket-item .product-counter input{
    font-size: 14px;
}
/* ---------- /basket ---------- */


/* ---------- payment method ---------- */
.form-check.payment-method{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.form-check.payment-method .logo-wrap{
    display: flex;
    justify-content: center;
    width: 72px;
}
.form-check.payment-method .logo-wrap img{
    flex-shrink: 0;
    max-width: 100%;
}
.form-check.payment-method .card{
    --bs-card-spacer-y: 0;
    --bs-card-spacer-x: 2rem;
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-height: 40px;

    flex-grow: 1;
}
.form-check.payment-method .card-body{
    display: flex;
    align-items: center;
    gap: 2.25rem;
    padding-right: 0;
}

@media (max-width: 575px) {
    .form-check.payment-method .card{
        display: none !important;
    }
}
/* ---------- /payment method ---------- */


/* ---------- team ---------- */
.team-grid{
    --bs-gutter-y: 3rem;
}

.team-grid,
.team-grid > div{
    border-bottom: 1px solid var(--bs-border-color);
}

.team-grid > div{
    display: flex;
    flex-direction: column;
    margin-bottom: -1px;
}
.team-grid .team-grid-item{
    flex-grow: 1;
}

.team-grid-item{
    max-width: 246px;
}

.team-grid-item,
.team-grid-item .info-wrap{
    display: flex;
    flex-direction: column;
}

.team-grid-item .img-wrap{
    max-width: 200px;
    border-radius: 50%;
}

.team-grid-item .info-wrap{
    flex-grow: 1;
    padding: 2rem 0 3rem;
}
.team-grid-item .title{
    font-size: 1rem;
    font-feature-settings: "case" on;
}
.team-grid-item .text{
    font-size: 14px;
    font-weight: 300;
    margin-top: 0.5rem;
}
.team-grid-item .separator{
    margin: 0.75rem 0;
}
.team-grid-item .item-with-icon{
    display: flex;
    margin-bottom: 0.375rem;
    word-break: break-all;
}
@media (min-width: 576px) and (max-width: 991px) {
    .team-grid .team-grid-item{
        margin-left: auto;
        margin-right: auto;
    }
}
/* ---------- /team ---------- */


/* ---------- toast ---------- */
.alco-toast{
    display: none;
    width: 100%;
    position: fixed;
    left: 0;
    top: var(--app-header-height);
    z-index: 1080;

    font-size: 14px;
    line-height: 1.25;
}
.alco-toast .container{
    display: flex;
    justify-content: right;
    padding-top: 2px;
}
.alco-toast .card{
    --bs-card-spacer-y: 0.5rem;
    --bs-card-spacer-x: 0.75rem;

    max-width: 400px;
}
.alco-toast .card .row{
    --bs-gutter-x: 0.75rem;
    align-items: center;
}
.alco-toast .close-btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: var(--form-element-size-1);
    --btn-icon-size: var(--icon-size-xs);

    margin-right: calc(var(--bs-card-spacer-x) * -1);
    opacity: 0.48;
    transition: opacity .15s ease-in-out;
}
.alco-toast .close-btn:hover{
    opacity: 1;
}
/* ---------- /toast ---------- */



/* ==================== 5. content by pages ==================== */


/* ---------- product details ---------- */
.product-details-container{
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.product-details-container > .row{
    --bs-gutter-x: 0;
    gap: 2rem;
}

/* --- slider --- */
.product-details-container .col-slider{
    max-width: 350px;
}

.product-slider .swiper-btn svg *,
.product-slider-nav .swiper-btn svg *{
    fill: var(--btn-dark);
}
.product-slider .swiper-btn:hover svg *,
.product-slider-nav .swiper-btn:hover svg *{
    fill: var(--btn-dark-active);
}

.product-slider,
.product-slider-nav .swiper-slide{
    border: 1px solid var(--border-color-secondary);
}
.product-slider .swiper-slide,
.product-slider-nav .swiper-slide{
    background: var(--bs-body-bg);
    padding: 0.5rem;
}

.product-slider-nav{
    margin-top: 0.5rem;
}
.product-slider-nav .swiper-slide{
    cursor: pointer;
}
.product-slider-nav .swiper-slide-thumb-active::before{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}
.product-slider-nav .swiper-slide-thumb-active,
.product-slider-nav .swiper-slide-thumb-active::before{
    border-color: var(--bs-border-color-translucent);
}

.product-details-container .brand-logo{
    --bs-aspect-ratio: 100%;
    width: 90px;
    position: absolute;
    top: 0;
    right: 0.5rem;
    z-index: 2;
}
.product-details-container .brand-logo img{
    object-fit: contain;
}


/* --- info --- */
/*.product-details-container .col-info,
.product-details-container .col-info .body,
.product-details-container .col-info .foo{
    display: flex;
    flex-direction: column;
}
.product-details-container .col-info{
    max-width: 469px;
}
.product-details-container .col-info .body{
    flex-grow: 1;
}*/
.product-details-container .product-title{
    font-size: var(--fs-h4);
    font-weight: normal;
    line-height: 1.1;
}
.product-details-container .key-value-list{
    padding: 1.5rem 0;
    margin: auto 0;
}
.product-details-container .key-value-list .row{
    --bs-gutter-y: 0.5rem;
}

/* foo */
.product-details-container .col-info .foo{
    display: flex;
    flex-direction: column;
    height: calc(92px + 0.5rem);
    border-top: 1px solid var(--border-color-secondary);
    font-size: 1rem;
}
.product-details-container .col-info .foo .row{
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1.25rem;

    align-items: flex-end;
    margin-top: auto;
}
.product-details-container .product-price{
    font-size: 1.5rem;
}

/* --- additional info --- */
.product-details-container .col-additional-info{
    width: 100%;
}
.product-details-container .col-additional-info .card{
    --bs-card-border-width: 0;
}

@media (min-width: 768px) {
    .product-details-container{
        padding-top: 4rem;
    }

    .product-details-container > .row {
        gap: 1.5rem;
    }

    .product-details-container .brand-logo{
        width: clamp(6.25rem, -0.442rem + 13.942vw, 13.5rem);
    }

    .product-details-container .col-info .foo .row {
        --bs-gutter-y: 1rem;
    }
}
@media (min-width: 992px) {
    .product-details-container{
        padding-top: 6.5rem;
    }

    /*.product-details-container > .row {
        gap: 1.75rem;
    }*/

    /*.product-details-container .col-slider{
        max-width: 398px;
    }*/

    .product-details-container .brand-logo{
        right: 1.25rem;
    }

    .product-details-container .product-title{
        font-size: var(--fs-h2);
    }

    .product-details-container .product-price-wrap{
        position: relative;
        margin-bottom: 0.5rem;
    }
    .product-details-container .product-price-old{
        margin-bottom: 0.5rem;
        position: absolute;
        bottom: 100%;
        left: 0;
    }
}
@media (min-width: 1500px) {
    /* --- additional info --- */
    .product-details-container .col-additional-info{
        width: auto;
    }
    .product-details-container .col-additional-info .card{
        --bs-card-spacer-y: 0.5rem;
        --bs-card-spacer-x: 0.5rem;
        width: 220px;
        font-size: 12px;
    }
    .product-details-container .col-additional-info .card .text-wrap{
        font-size: inherit;
    }
}
@media (min-width: 1600px) {
    .product-details-container .col-additional-info .card{
        width: 238px;
        font-size: 13px;
    }
}
/* ---------- /product details ---------- */


/* ---------- checkout ---------- */
.checkout-container{
    --main-row-gap: 2rem;

    --end-col-width: 100%;
    --start-col-width: 100%;
}

.checkout-container > .row{
    --bs-gutter-x: 0;

    gap: var(--main-row-gap);
}
.checkout-container .col-start{
    max-width: var(--start-col-width);
}
.checkout-container .col-end{
    width: var(--end-col-width);
}

.checkout-container .row .form-group:last-child{
    margin-bottom: 0;
}

.checkout-container .col-start .row{
    --bs-gutter-x: 1.375rem;
    --bs-gutter-y: 1.25rem;
}

.checkout-container .col-end,
.checkout-container .col-end .card-body{
    display: flex;
    flex-direction: column;
}
.checkout-container .col-end .card{
    --bs-card-spacer-x: 14px;
    --bs-card-spacer-y: 14px;
    flex-grow: 1;
}
.checkout-container .col-end .scrollable-container{
    max-height: 240px;
    padding-right: calc(var(--bs-card-spacer-x) * 0.5);
    margin-right: calc(var(--bs-card-spacer-x) * -0.5);
}

@media (min-width: 992px) {
    .checkout-container{
        --main-row-gap: 3rem;

        --end-col-width: 397px;
        --start-col-width: calc(100% - var(--end-col-width) - var(--main-row-gap));
    }

    .checkout-container .col-end{
        padding-top: 29px;
    }
}
/* ---------- /checkout ---------- */


/* ---------- contact ---------- */
.section-branches{
    --col-height: 372px;
    margin-bottom: 3rem;
}

.section-branches .map-container{
    width: 100%;
    height: var(--col-height);
    border-radius: 15px;
    position: relative;
}
.section-branches .map-container .map{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.section-branches .branches-card,
.section-branches .branches-card .card{
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0;
}
.section-branches .branches-card{
    --bs-card-spacer-x: 7px;
    --bs-card-spacer-y: 11px;
    --bs-card-bg: #E9E9E9;

    height: var(--col-height);
    padding: var(--bs-card-spacer-y) 0;
    position: relative;
}
.section-branches .branches-card > .card-body{
    padding-top: 0;
    padding-bottom: 0;
}

.section-branches .branches-card .card{
    --bs-card-bg: #fff;
    --bs-card-spacer-y: 13px;

    width: 100%;
    cursor: pointer;
}
.section-branches .branches-card .card:hover{
    --bs-card-bg: var(--bs-secondary-bg-subtle);
}
.section-branches .branches-card .card + .card{
    margin-top: 0.625rem;
}
.section-branches .branches-card .card hr{
    margin: 1.25rem 0;
}

/* --- info --- */
.section-contact-info{
    color: #000;
}

.section-contact-info > .row > div{
    display: flex;
    flex-direction: column;
}

.section-contact-info a{
    color: inherit;
}
.section-contact-info a:not(.link):hover{
    text-decoration: underline;
}

.section-contact-info .item-with-icon{
    --icon-size: var(--icon-size-md);

    display: flex;
}


.section-contact-info .img-wrap{
    --bs-aspect-ratio: 57%;

    flex-grow: 1;
}
/* ---------- /contact ---------- */


/* ---------- orders ---------- */
.order-card{
    --bs-card-spacer-x: 1rem;
    --bs-card-spacer-y: 1rem;
    margin-bottom: 10px;
}
.order-card .sub-title{
    margin-bottom: 0.125rem;
}
.order-card .accordion-toggle-btn{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 400;
    --btn-icon-size: var(--icon-size-xs);

    padding-right: 0.5rem;
    font-feature-settings: "case" off;
    text-transform: none;
}

.order-product-list-item{
    --bs-aspect-ratio: 100%;

    display: flex;
    gap: 1rem;
}
.order-product-list-item:not(:last-child){
    border-bottom: 1px solid var(--border-color-secondary);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
.order-product-list-item .img-wrap{
    flex-shrink: 0;
    width: 72px;
}
.order-product-list-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}
.order-product-list-item .product-title{
    font-size: 1rem;
    font-weight: normal;
}
.order-product-list-item .info-wrap .row{
    --bs-gutter-y: 0.75rem;
}

@media (min-width: 576px) {
    .order-card{
        --bs-card-spacer-x: 1.5rem;
        --bs-card-spacer-y: 1.5rem;
    }
    .order-product-list-item .img-wrap{
        width: 100px;
    }
    .order-product-list-item .info-wrap{
        justify-content: space-between;
    }
}

@media (max-width: 575px) {
    .order-card .btn-xs{
        --bs-btn-font-size: 13px;
    }
}

@media (max-width: 359px) {
    .order-card .row > *{
        width: 100%;
    }
}
/* ---------- /orders ---------- */


/* ---------- section ---------- */
/* ---------- /section ---------- */