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


:root{
    --font-family: 'Mark Geo', sans-serif;
    --bs-font-sans-serif: var(--font-family);

    --bs-body-font-size: 14px;

    --bs-body-bg: #EFF1F5;
    --bs-body-bg-rgb: 239, 241, 245;

    --bs-body-color-rgb: 20,16,35;
    --bs-body-color: #141023;
    --bs-secondary-color: #4A4862;
    --bs-secondary-color-rgb: 74,72,98;
    --bs-tertiary-color: #5D6A82;
    --quaternary-color: #6B6A80;
    /*--quinary-color: ;*/

    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0,0,0;

    --bs-heading-color: #121212;


    --bs-primary-rgb: 87,68,154;
    --bs-primary: #57449A;
    --bs-primary-bg-subtle: #F2F0F7;
    --bs-primary-text-emphasis: #4A3A83;

    /*--bs-secondary-rgb: 65,70,81;*/
    --bs-secondary-rgb: 113,118,128;
    --bs-secondary: #717680;
    --bs-secondary-bg-subtle: #DDE1EA;
    --bs-secondary-text-emphasis: #414651;

    --bs-success-rgb: 14,204,0;
    --bs-success: #0ECC00;
    --bs-success-bg-subtle: #DEFFDB;
    --bs-success-text-emphasis: #00A63E;

    --bs-danger-rgb: 240,91,74;
    --bs-danger: #F05B4A;
    --bs-danger-bg-subtle: #FDEFED;
    --bs-danger-text-emphasis: #D80027;

    --bs-warning-rgb: 255,207,59;
    --bs-warning: #FFCF3B;
    --bs-warning-bg-subtle: #FFF4D1;
    --bs-warning-text-emphasis: #FFC30A;

    --bs-info-rgb: 44,125,255;
    --bs-info: #2C7DFF;
    --bs-info-bg-subtle: #E5EFFF;

    --bs-light-rgb: 239,241,245;
    --bs-light: #EFF1F5;
    --bs-light-bg-subtle: #F6F7F8;

    --bs-dark-rgb: 28,27,46;
    --bs-dark: #1C1B2E;
    --bs-dark-bg-subtle: #323146;
    --bs-dark-text-emphasis: #16181D;
    /*--dark-text-subtle: #4A4862;*/

    --color-muted: #8C929C;


    --btn-primary: var(--bs-primary);
    --btn-primary-hover: #705CB7;
    --btn-primary-active: var(--bs-primary-text-emphasis);
    --btn-primary-disabled-color: #8B8B8B;
    --btn-primary-disabled-bg: #DFDFDF;

    --btn-secondary: var(--bs-light-bg-subtle);
    --btn-secondary-hover: #E8EBED;
    --btn-secondary-active: #DDE0E4;
    --btn-secondary-disabled-color: rgba(0,0,0,.1);
    --btn-secondary-disabled-bg: rgba(var(--bs-light-rgb),.8);

    --btn-success: var(--bs-success);
    --btn-success-hover: #3ED734;
    --btn-success-active: var(--bs-success-text-emphasis);
    --btn-success-disabled-color: #8B8B8B;
    --btn-success-disabled-bg: #DFDFDF;

    --btn-danger: rgba(var(--bs-danger-rgb),.1);
    --btn-danger-hover: rgba(var(--bs-danger-rgb),.055);
    --btn-danger-active: rgba(var(--bs-danger-rgb),.2);
    --btn-danger-disabled-color: #8B8B8B;
    --btn-danger-disabled-bg: #DFDFDF;

    --btn-warning: #FFE217;
    --btn-warning-hover: var(--bs-warning-bg-subtle);
    --btn-warning-active: var(--bs-warning);
    --btn-warning-disabled-color: #8B8B8B;
    --btn-warning-disabled-bg: #DFDFDF;

    --btn-light: rgba(var(--bs-light-rgb),.8);
    --btn-light-hover: var(--bs-light);
    --btn-light-active: #E3E6ED;
    --btn-light-subtle: var(--bs-light-bg-subtle);
    --btn-light-subtle-hover: #E8EBED;
    --btn-light-subtle-active: #DDE0E4;
    --btn-light-disabled-color: rgba(0,0,0,.2);
    --btn-light-disabled-bg: #F6F7F9;

    /*--btn-white: #fff;
    --btn-white-hover: #fff;
    --btn-white-active: #fff;
    --btn-white-subtle: rgba(255,255,255,.15);
    --btn-white-subtle-hover: rgba(255,255,255,.15);
    --btn-white-subtle-active: rgba(255,255,255,.15);
    --btn-white-disabled-color: rgba(0,0,0,.1);
    --btn-white-disabled-bg: rgba(var(--bs-light-rgb),.8);*/

    --btn-disabled-color: #8B8B8B;
    --btn-disabled-bg: #DFDFDF;


    --bs-border-color: var(--bs-light);
    /*--bs-border-color-translucent: rgba(9, 30, 66, 0.14);*/

    --bs-link-color-rgb: 0,0,0;
    --bs-link-color: #000;
    --bs-link-hover-color-rgb: 0,0,0;
    --bs-link-hover-color: #000;
    --bs-link-decoration: none;


    --app-header-height: 68px;
    --app-bottom-bar-height: 3.625rem;
    --app-content-px: 16px;
    --app-content-py: 1.25rem;
    --app-page-spacing-top: 1.125rem;
    --app-page-spacing-bottom: 2.5rem;


    --container-size-1: 400px;
    --container-size-2: 640px;
    --container-size-3: 960px;
    --container-size-4: 1248px;
    --container-size-5: 1400px;


    --fs-h1: 2rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1.125rem;
    --fs-h6: 1rem;

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


    --form-control-height: var(--element-size-5);
    --form-control-px: 1rem;
    --form-control-py: .375rem;
    --form-control-border-radius: 1rem;
    --form-control-fs: 1rem;
    --form-label-color: #414958;
    --form-control-color: #5A6772;
    --form-control-hover-color: var(--form-control-color);
    --form-control-active-color: #000;
    --form-control-bg: #FCFCFD;
    --form-control-hover-bg: var(--form-control-bg);
    --form-control-active-bg: var(--form-control-bg);
    --form-control-border-color: #E6E9EF;
    --form-control-hover-border-color: var(--form-control-border-color);
    --form-control-active-border-color: rgba(var(--bs-primary-rgb),.7);
    --form-control-placeholder-color: var(--bs-secondary);
    --form-control-shadow: 0 1px 2px 0 rgba(10,13,18,.05);
    --form-control-hover-shadow: 0 4px 12px 0 rgba(10,13,18,.09);
    --form-control-active-shadow: var(--form-control-shadow);

    --bs-form-valid-color: var(--bs-success);
    --bs-form-valid-border-color: var(--bs-success);
    --bs-form-invalid-color: var(--bs-danger-text-emphasis);
    --bs-form-invalid-border-color: rgba(216,0,39,.93);


    --element-size-1: 1.75rem;
    --element-size-2: 2rem;
    --element-size-3: 2.25rem;
    --element-size-4: 2.75rem;
    --element-size-5: 3rem;
    --element-size-6: 3.25rem;

    /*

    --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;*/

    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 1.5rem;
    --bs-border-radius-2xl: 2rem;
}

@media (min-width: 768px) {
    :root{
        --app-content-px: 1.25rem;
        --app-page-spacing-top: 1.25rem;
    }
}
@media (min-width: 992px) {
    :root{
        --app-header-height: 92px;
        --app-bottom-bar-height: 0rem;
        --app-content-py: 1.75rem;

        --app-page-spacing-top: 1.5rem;
        --app-page-spacing-bottom: 3.5rem;
    }
}
@media (min-width: 1400px) {
    :root{
        --app-content-py: 2.25rem;

        --app-page-spacing-top: 2rem;
        --app-page-spacing-bottom: 5rem;
    }
}



/* ==================== 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,a:hover,a:focus{text-decoration: var(--bs-link-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;}

.highlight {background-color: #ffff00;}

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

/* ----- */

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



/* ==================== 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-5, 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-4) + 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 ----------- */
/*.g-1, .gx-1 {
	--bs-gutter-x: 0.25rem;
}
.g-1, .gy-1 {
	--bs-gutter-y: 0.25rem;
}

.g-2, .gx-2 {
	--bs-gutter-x: 0.5rem;
}
.g-2, .gy-2 {
	--bs-gutter-y: 0.5rem;
}

.g-3, .gx-3 {
	--bs-gutter-x: 1rem;
}
.g-3, .gy-3 {
	--bs-gutter-y: 1rem;
}

.g-4, .gx-4 {
	--bs-gutter-x: 1.5rem;
}
.g-4, .gy-4 {
	--bs-gutter-y: 1.5rem;
}

.g-5, .gx-5 {
	--bs-gutter-x: 3rem;
}
.g-5, .gy-5 {
	--bs-gutter-y: 3rem;
}*/
.grid-items-stretch > div{
    display: flex;
    flex-direction: column;
}
.grid-items-stretch > div > *{
    flex-grow: 1;
}
/* ----------- /row ----------- */


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

.i-xxs{
    --icon-size: 0.875rem;
}
.i-xs{
    --icon-size: 1rem;
}
.i-sm{
    --icon-size: 1.25rem;
}
.i-md{
    --icon-size: 1.5rem;
}
.i-lg{
    --icon-size: 1.75rem;
}
.i-xl{
    --icon-size: 2rem;
}
.i-xxl{
    --icon-size: 2.25rem;
}


/*.i-bullet{
    width: 0.5rem;
    background-color: var(--bs-primary);
    border-radius: 50%;
}
.i-bullet::before{
    content: "";
    display: block;
    padding-top: 100%;
}*/
/* ----------- /icons ----------- */


/* ----------- element sizes ----------- */
/* 1 */
.w-1,
.size-1{
    width: var(--element-size-1);
}
.h-1,
.size-1{
    height: var(--element-size-1);
}
/* 2 */
.w-2,
.size-2{
    width: var(--element-size-2);
}
.h-2,
.size-2{
    height: var(--element-size-2);
}
/* 3 */
.w-3,
.size-3{
    width: var(--element-size-3);
}
.h-3,
.size-3{
    height: var(--element-size-3);
}
/* 4 */
.w-4,
.size-4{
    width: var(--element-size-4);
}
.h-4,
.size-4{
    height: var(--element-size-4);
}
/* 5 */
.w-5,
.size-5{
    width: var(--element-size-5);
}
.h-5,
.size-5{
    height: var(--element-size-5);
}
/* ----------- /element sizes ----------- */


/* ----------- 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 ----------- */


/* ---------- anchor, links ---------- */
a{
    color: RGBA(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: var(--bs-link-decoration);
    -webkit-text-decoration-color: RGBA(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1));
    text-decoration-color: RGBA(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1));
}
a:focus,
a:hover{
    color: RGBA(var(--bs-link-hover-color-rgb), var(--bs-link-opacity, 1));
    -webkit-text-decoration-color: RGBA(var(--bs-link-hover-color-rgb),var(--bs-link-underline-opacity,1));
    text-decoration-color: RGBA(var(--bs-link-hover-color-rgb), var(--bs-link-underline-opacity, 1));
}
.link{
    font-weight: 500;
}
.link:hover{
    --bs-link-decoration: underline;
}
button.link{
    background: none;
    border: 0;
    padding: 0;
}

.link-primary:hover,
.link-primary:focus{
    color: RGBA(var(--bs-link-hover-color-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-link-hover-color-rgb),var(--bs-link-underline-opacity,1))!important;
    text-decoration-color: RGBA(var(--bs-link-hover-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}


/* colors */
.link-primary:hover,
.link-primary:focus{
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
}

.link-tertiary,
.link-tertiary:hover,
.link-tertiary:focus{
    --bs-link-color-rgb: 108,122,147;
    --bs-link-hover-color-rgb: 0,0,0;
}
.link-tertiary:hover,
.link-tertiary:focus{
    --bs-link-opacity: 0.7;
    --bs-link-decoration: none;
}
/* ---------- /anchor, links ---------- */


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

}
.text-body-quaternary{
    color: var(--quaternary-color) !important;
}
.text-danger{
    color: var(--bs-danger-text-emphasis) !important;
}

/*.text-dark-subtle{
    color: var(--dark-text-subtle) !important;
}*/

.text-muted{
    color: var(--color-muted) !important;
}

/*.text-primary{
	color: var(--bs-primary) !important;
}
.text-secondary{
	color: var(--color-secondary) !important;
}
.text-light{
	color: var(--color-default-light) !important;
}

.bg-primary{
	background-color: var(--bs-primary) !important;
}
.bg-light{
	background-color: var(--color-light) !important;
}
.bg-dark{
	background-color: var(--color-dark) !important;
}*/
/* ----------- /colors ----------- */


/* ---------- scroll ---------- */
/*.os-scrollbar{
    --scrollbar-width: 4px;
    --scrollbar-color: var(--bs-light-bg-subtle);
    --scrollbar-handle-color: var(--bs-secondary);
    --spacing-right: 5px;
}
.os-scrollbar.os-scrollbar-vertical{
    background-color: var(--scrollbar-color) !important;
    width: var(--scrollbar-width) !important;
    padding: 0 !important;
    right: var(--spacing-right);
}
.os-scrollbar-handle{
    background-color: var(--scrollbar-handle-color) !important;
    border-radius: 4px !important;
}
.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
    top: var(--scrollbar-top,0) !important;
    bottom: var(--scrollbar-bottom,0) !important;
}*/

.app .os-scrollbar {
    --os-size: calc(var(--os-handle-width) + var(--os-padding-perpendicular) * 2);
    --os-padding-perpendicular: 4px;
    --os-padding-axis: 4px;
    --os-handle-width: 0.5rem;
    --os-handle-border-radius: var(--os-size);
    --os-handle-bg: #E8EBED;
    --os-handle-bg-hover: #DDE0E4;
    --os-handle-bg-active: #DDE0E4;
}
.card .os-scrollbar{
    --os-padding-axis: var(--bs-card-border-radius);
}

.desktop .scrollable-container{
    overflow: hidden !important;
}
.mobile .scrollable-container,
.tablet .scrollable-container{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/* ---------- /scroll ---------- */


/* ----------- multiline truncate ----------- */
.line-clamp-1,
.line-clamp-2,
.line-clamp-3,
.line-clamp-4,
.line-clamp-5{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.line-clamp-1{
    -webkit-line-clamp:1;
}
.line-clamp-2{
    -webkit-line-clamp: 2;
}
.line-clamp-3{
    -webkit-line-clamp: 3;
}
.line-clamp-4{
    -webkit-line-clamp: 4;
}
.line-clamp-5{
    -webkit-line-clamp: 5;
}
/* ----------- /multiline truncate ----------- */



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


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


/* ---------- header ---------- */
.app-header{
    --header-py: 0.75rem;
    --items-gap: 0.25rem;
    --logo-width: 2rem;
    --header-btn-height: var(--element-size-4);

    width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 32px 0 rgba(0,0,0,.03);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
}

.app-header .header-btn{
    --btn-size: var(--header-btn-height);
    --btn-gap: 0.25rem;
    --bs-btn-font-weight: 500;

    .badge-count{
        --bs-badge-padding-x: 0.125rem;
        --bs-badge-padding-y: 0;
        --bs-badge-border-radius: 50%;
        --bs-badge-color: #fff;
        --bs-badge-font-size: 8px;
        --badge-size: 0.75rem;
        --badge-bg: var(--bs-primary);
        --badge-line-height: 1;

        position: absolute;
        top: auto;
        bottom: 0;
        right: 0;

        transform: translate(1px,1px);
        transition: background-color .15s ease-in-out, color .15s ease-in-out;
    }
}
.app-header .header-btn.active,
.app-header .header-btn.show{
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;

    --btn-icon-active-color:  #fff;

    .badge-count{
        --bs-badge-color: #000;
        --badge-bg: #fff;
    }
}

.app-header .container,
.app-header .container > div{
    display: flex;
    align-items: center;
    gap: var(--items-gap);
}

.app-header .container{
    height: var(--app-header-height);
    padding-top: var(--header-py);
    padding-bottom: var(--header-py);
}
.app-header .col-start,
.app-header .col-end{
    order: 2;
}
.app-header .col-center{
    order: 1;
}

.app-header .col-start .header-btn{
    --bs-btn-padding-x: 0.875rem;
}
.app-header .col-start .header-btn img + span:last-child{
    padding-right: 0.5rem;
}

.app-header .col-end{
    justify-content: flex-end;
}
.app-header .col-end .header-btn{
    --bs-btn-padding-x: 0.75rem;

    flex-shrink: 0;
}
.app-header .col-end .header-btn.icon-btn{
    --bs-btn-padding-x: 0.5rem;
}
.app-header .col-end .header-btn img + span:last-child{
    padding-right: 0.25rem;
}

/* dropdown */
.app-header .dropdown-menu{
    --bs-dropdown-border-radius: 2.5rem;
    --bs-dropdown-padding-x: 1rem;
    --bs-dropdown-padding-y: 1rem;
}
.app-header .dropdown-menu-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.125rem;
}
.app-header .dropdown-menu-head > div{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.app-header .dropdown-menu-head .title{
    color: #000;
    font-size: 1.25rem;
}
.app-header .dropdown-menu > .scrollable-container{
    max-height: calc(100vh - var(--app-header-height) - (var(--bs-dropdown-padding-y) * 2) - 20px );
    padding-right: var(--bs-dropdown-padding-x);
    margin-right: calc(var(--bs-dropdown-padding-x) * -1);
}


/* logo */
.app-header .logo-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-header .logo-wrap img{
    flex-shrink: 0;
}
.app-header .dropdown-item.active{
    --bs-dropdown-link-active-color: #121212;
    --bs-dropdown-link-active-bg: var(--btn-light-subtle);
    pointer-events: none;
}

/* --- nav (categories) --- */
.app-header .nav-dropdown .dropdown-menu{
    --bs-dropdown-spacer: calc( (var(--app-header-height) - var(--header-btn-height)) * 0.5 - 0.25rem);
    --bs-dropdown-min-width: 396px;
    --bs-dropdown-border-width: 1px;
    --bs-dropdown-border-color: #E6E9EF;
    --bs-dropdown-box-shadow: 0 24px 64px 0 rgba(0,0,0,.12);
    --bs-dropdown-border-radius: 2.5rem;

    padding: 0;
}
.app-header .nav-dropdown .dropdown-menu.show{
    display: flex;
}

/* wrap */
.app-header .nav-dropdown .nav-wrap{
    --nav-level-1-width: var(--bs-dropdown-min-width);
    --nav-level-2-width: 306px;
    --nav-level-3-width: 186px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.app-header .nav-dropdown .nav-wrap[data-nav-level="1"],
.app-header .nav-dropdown .nav-wrap[data-nav-level="2"]::before{
    border-color: var(--bs-light);
    border-style: solid;
    box-shadow: 2px 0 16px 0 rgba(0,0,0,.05);
    border-radius: var(--bs-dropdown-border-radius);
}
.app-header .nav-dropdown .nav-wrap[data-nav-level="1"]{
    width: var(--nav-level-1-width);
    border-width: 2px;
    z-index: 2;
}
.app-header .nav-dropdown .nav-wrap[data-nav-level="2"]{
    width: var(--nav-level-2-width);
}
.app-header .nav-dropdown .nav-wrap[data-nav-level="2"]::before{
    content: "";
    height: 100%;
    border-width: 1px;

    position: absolute;
    top: 0;
    left: calc(var(--nav-level-1-width) * -1);
    right: 0;
    z-index: -1;
}
.app-header .nav-dropdown .nav-wrap[data-nav-level="3"]{
    width: var(--nav-level-3-width);
}

/* scroll */
.app-header .nav-dropdown .scrollable-container{
    max-height: calc(100vh - var(--app-header-height) - 20px);

    padding: 0.75rem;
}
.app-header .nav-dropdown .os-scrollbar{
    --os-handle-width: 6px;
    --os-padding-perpendicular: 2px;
    --os-padding-axis: 2rem;
}
.app-header .nav-dropdown .os-scrollbar-vertical{
    right: auto !important;
    left: 0 !important;
}

/* nav */
.app-header .nav-dropdown > .btn > span{
    padding: 0 .5rem 0 .25rem;
}
.app-header .nav-dropdown ul{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.app-header .nav-dropdown li ul{
    display: none !important;
}
/*.app-header .nav-dropdown .nav-item{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background-color: transparent;
    border: none;
    border-radius: 50px;
    padding: 0.75rem;

    color: #1F1F1F;
    font-size: 1.125rem;
    font-weight: 500;
}
.app-header .nav-dropdown .nav-item > img{
    flex-shrink: 0;
    width: 20px;
}
.app-header .nav-dropdown .nav-item > img.i-chevron{
    width: 24px;
    margin-left: auto;
}
.app-header .nav-dropdown .nav-item:hover{
    background-color: var(--bs-light-bg-subtle);
}
.app-header .nav-dropdown .nav-item:active,
.app-header .nav-dropdown .nav-item.active{
    background-color: rgba(var(--bs-primary-rgb),.13);
}*/
.app-header .nav-dropdown .nav-item{
    --nav-item-fs: 1.125rem;
    --nav-item-chevron-size: 1.5rem;
    letter-spacing: -0.5px;
}

/* --- search --- */
.app-header .search-box{
    width: 100%;
    position: relative;
}
.app-header .search-input{
    --form-control-height: var(--header-btn-height);
    --form-control-px: 0.5rem;
    --form-control-border-radius: 22px;
    --form-control-bg: var(--btn-light-subtle);
    --form-control-hover-bg: var(--form-control-bg);
    --form-control-active-bg: var(--form-control-bg);
    --form-control-border-color: var(--btn-light-subtle);
    --form-control-fs: 0.875rem;

    width: 100%;
    padding-right: 30px;
}
.app-header .search-box .btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --icon-size: 1.375rem;
}


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

.app-header .loyalty-card{
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
}
.app-header .loyalty-card .d-sm-block{
    display: none !important;
}
.app-header .loyalty-card .btn-next{
    display: flex;
}

/* --- user --- */
.app-header .user-dropdown .dropdown-menu{
    --bs-dropdown-min-width: 398px;
    /*max-width: var(--bs-dropdown-min-width);*/
}
.app-header .user-dropdown .dropdown-menu.show{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.app-header .user-dropdown .btn-user-card{
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.5rem;
    padding-right: calc(var(--bs-btn-padding-x) + 0.25rem);
}
.app-header .user-dropdown .user-nav{
    background-color: var(--btn-light-subtle);
    border-radius: 2rem;
    padding: 0.5rem;
}
.app-header .user-dropdown .user-nav .btn{
    --bs-btn-padding-x: 0.875rem;
    --btn-gap: 0.75rem;
    --icon-size: 16px;

    --bs-btn-color: var(--bs-secondary-text-emphasis);

    display: flex;
    justify-content: flex-start;
    width: 100%;
}

/* --- compare --- */
.app-header .compare-dropdown .dropdown-menu{
    --bs-dropdown-spacer: calc( (var(--app-header-height) - var(--header-btn-height)) * 0.5 + 0.5rem);
    --bs-dropdown-min-width: 590px;
    --bs-dropdown-padding-x: 1.5rem;
    --bs-dropdown-padding-y: 1.5rem;

    max-width: var(--bs-dropdown-min-width);
}
.app-header .compare-dropdown .dropdown-menu-head .btn{
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-weight: bold;
}
.app-header .compare-dropdown .products-grid{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
.app-header .compare-dropdown .products-grid-item{
    --item-spacing: 1rem;
}
.app-header .compare-dropdown .btn-add-new-item{
    min-height: 385px;
}

/* --- basket --- */
.app-header .basket-dropdown .dropdown-menu{
    --bs-dropdown-spacer: calc( (var(--app-header-height) - var(--header-btn-height)) * 0.5 + 0.5rem);
    --bs-dropdown-min-width: 368px;

    max-width: var(--bs-dropdown-min-width);
}
.app-header .basket-item-card{
    --basket-item-mb: 0.75rem;
}
.app-header .card-order-summary{
    --card-body-gap-vertiacl: 1rem;

    --product-price-font-size: 1.625rem;
    --product-price-old-font-size: 0.875rem;

    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .app-header {
        --items-gap: 0.5rem;
        --logo-width: 190px;
    }
}
@media (min-width: 992px) {
    .app-header .col-start,
    .app-header .col-end{
        flex-grow: 1;
        width: calc((100% - var(--logo-width) - var(--items-gap) * 2) * 0.5);
    }
    /*.app-header .col-center{
        order: 2;
    }*/
    .app-header .col-end .btn-catalog,
    .app-header .btn-search-toggle:not(.show){
        display: none !important;
    }

    /* --- search --- */
    .app-header .search-box{
        width: 200px;
    }
    .app-header .search-box .btn{
        --bs-btn-padding-x: 0;
        --bs-btn-padding-y: 0;
        --bs-btn-border-width: 0;

        --btn-size: 2.5rem;
        --icon-size: 1.25rem;

        background-color: transparent !important;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }
}
@media (min-width: 1280px) {
    .app-header .col-center{
        order: 2;
    }

    /* nav */
    .app-header .nav-dropdown > .btn > span{
        padding-right: 3rem;
    }
}

@media (max-width: 767px), (min-width: 992px) and (max-width: 1079px){
    .app-header .logo-wrap img:last-child{
        display: none;
    }
}

@media (max-width: 991px) {
    .app-header .col-start,
    .app-header .col-end > .btn:not(.btn-catalog),
    .app-header .col-end > .dropdown:not(.nav-secondary-dropdown):not(.user-dropdown),
    .app-header .col-end .user-dropdown [data-bs-toggle="dropdown"]{
        display: none !important;
    }
    .app-header .col-end{
        margin-left: auto;
    }

    /* --- search --- */
    .app-header .search-box{
        display: none;
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }
    .app-header .search-box.show{
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0 var(--app-content-px);
    }

    /* --- user --- */
    .app-header .user-dropdown{


        position: absolute;
    }
    .app-header .user-dropdown .dropdown-menu{
        --bs-dropdown-spacer: 0rem;
        --bs-dropdown-bg: var(--bs-body-bg);
        --bs-dropdown-border-radius: 0rem;
        --bs-dropdown-box-shadow: none;

        width: 100%;
        min-width: auto;
        position: fixed;
        top: var(--app-header-height);
        bottom: var(--app-bottom-bar-height);
        left: 0;

        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-header .user-dropdown .btn-user-card{
        --bs-btn-color: #000;
        --bs-btn-bg: #fff;
        --bs-btn-hover-color: var(--bs-btn-color);
        --bs-btn-hover-bg: var(--bs-light-bg-subtle);
        --bs-btn-active-color: var(--bs-btn-color);
        --bs-btn-active-bg: var(--bs-btn-bg);

        --i-wrap-bg: var(--bs-light-bg-subtle);
    }
    .app-header .user-dropdown .user-nav{
        background-color: #fff;
    }
    .app-header .user-dropdown .user-nav .btn{
        --bs-btn-bg: #fff;
        --bs-btn-hover-bg: var(--btn-light-subtle);
        --bs-btn-active-bg: var(--btn-light-subtle-hover);
        --bs-btn-border-width: 0;
    }
}
@media (max-width: 1399px) {
    .app-header .col-end > .btn-auth{
        --bs-btn-padding-x: 0;
        --bs-btn-padding-y: 0;
    }
    .app-header .col-end > .btn-auth > span{
        display: none !important;
    }
}
/* ---------- /header ---------- */


/* ---------- search results ---------- */
.app-search-results-container{
    /*display: flex;
    flex-direction: column;*/
    display: none;
    width: 100%;
    background-color: #fff;

    position: fixed;
    top: var(--app-header-height);
    bottom: var(--app-bottom-bar-height);
    left: 0;
    z-index: 299;
}

.app-search-results-container > div{
    width: 100%;
    height: 100%;
    padding: 0.5rem 0;
    position: absolute;
    top: 0;
    left: 0;
}

.app-search-results-container .container{
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
/*.app-search-results-container .container,
.app-search-results-container .card{
    height: 100%;
}*/

.app-search-results-container .card{
    --bs-card-spacer-y: 0;
    --bs-card-spacer-x: 0;
    --bs-card-border-radius: 0;
    --bs-card-bg: transparent;

    flex-grow: 1;
}
/*.app-search-results-container .card .os-scrollbar {
    --os-padding-axis: 2px;
    --os-handle-width: 0.25rem;
}*/
.app-search-results-container .card-head{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.125rem;
}
.app-search-results-container .card-head .title{
    color: #000;
    font-size: 1.25rem;
}
.app-search-results-container .card-head .btn{
    --bs-btn-font-weight: 500;
}

@media (min-width: 992px) {
    .app-search-results-container{
        background-color: var(--bs-body-bg);
        bottom: 0;
    }
    .app-search-results-container .card{
        --bs-card-spacer-y: 1rem;
        --bs-card-spacer-x: 1rem;
        --bs-card-border-radius: 1.5rem;
        --bs-card-bg: #F6F7F9;
        --bs-card-box-shadow: 0 4px 32px 0 rgba(0,0,0,.03);
    }
    /*.app-search-results-container .card .os-scrollbar {
        --os-padding-axis: 28px;
    }*/
    .app-search-results-container .card-head .btn{
        --bs-btn-padding-x: 2rem;
        --bs-btn-font-weight: bold;
    }
}
@media (min-width: 1200px) {
    .app-search-results-container{
        background-color: var(--bs-body-bg);
    }
    .app-search-results-container .card{
        --bs-card-spacer-y: 1.5rem;
        --bs-card-spacer-x: 1.5rem;
        --bs-card-border-radius: 2rem;
    }
}

@media (max-width: 991px) {
    .app-search-results-container .card-body{
        padding-right: var(--app-content-px);
        margin-right: calc(var(--app-content-px) * -1);
    }
    .app-search-results-container .card-head .btn{
        --bs-btn-color: #000;
        --bs-btn-bg: var(--btn-light-subtle);
        --bs-btn-border-color: var(--btn-light-subtle);
        --bs-btn-hover-color: var(--bs-btn-color);
        --bs-btn-hover-bg: var(--btn-light-subtle-hover);
        --bs-btn-hover-border-color: var(--btn-light-subtle-hover);
        --bs-btn-active-color: var(--bs-btn-color);
        --bs-btn-active-bg: var(--btn-light-subtle-active);
        --bs-btn-active-border-color: var(--btn-light-subtle-active);
        --bs-btn-disabled-color: var(--btn-light-disabled-color);
        --bs-btn-disabled-bg: var(--btn-light-disabled-bg);
        --bs-btn-disabled-border-color: var(--btn-light-disabled-bg);
    }

    /* not found */
    .app-search-results-container .wrap-404 svg *{
        fill: #F4F5F9;
    }
}
/* ---------- search results ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
    width: 100%;
    /*padding-top: 2rem;
    padding-bottom: calc(var(--app-page-spacing-bottom) * 1.25);*/
    /*padding-bottom: calc(var(--app-bottom-bar-height) + var(--app-page-spacing-bottom));*/
    padding-top: var(--app-page-spacing-top);
    padding-bottom: var(--app-page-spacing-bottom);
    position: relative;
}
.page-title{
    margin-bottom: clamp(1rem, 0.308rem + 1.923vw, 1.5rem);
    font-size: clamp(1.5rem, 0.808rem + 1.923vw, 2rem);
}

/* --- section --- */
.section{
    --section-py: var(--app-content-py);
    --section-heder-mb: 1.5rem;

    --section-title-fs: 1.125rem;
    --section-title-icon-size: 1.5rem;
    --section-title-wrap-gap: 0.5rem;

    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
    /*margin-bottom: var(--app-page-spacing-bottom);*/
}
.app-page > .section:first-child{
    padding-top: 0;
}
.section-head,
.section-title{
    margin-bottom: var(--section-heder-mb);
}
.section-head .section-title{
    --section-heder-mb: 0;
}
.section-title{
    font-size: var(--section-title-fs, var(--fs-h2));
}
.section-head .title-wrap{
    display: flex;
    align-items: center;
    gap: var(--section-title-wrap-gap);
}
.section-head .title-wrap img{
    flex-shrink: 0;
    width: var(--section-title-icon-size);
}
.section-head .btn{
    --bs-btn-padding-x: 1.25rem;
}

.card .section-head,
.section-head.d-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* --- page with aside --- */
.page-with-aside .row-main{
    --bs-gutter-x: 1rem;
}

@media (min-width: 768px) {
    /* --- section --- */
    .section{
        --section-title-fs: 1.25rem;
    }
}
@media (min-width: 992px) {
    /* --- section --- */
    .section{
        --section-title-fs: 1.5rem;
        --section-title-wrap-gap: 0.625rem;
        --section-title-icon-size: 1.75rem;
    }
    .section-head .btn{
        --bs-btn-padding-x: 2rem;
    }

    /* --- page with aside --- */
    .page-with-aside .col-aside{
        --aside-inner-width: clamp(18.125rem, -1.375rem + 26vw, 23rem);

        width: calc(var(--aside-inner-width) + var(--bs-gutter-x));
    }
}
@media (min-width: 1200px) {
    /* --- section --- */
    .section{
        --section-title-fs: 1.75rem;
    }
}

@media (max-width: 991px) {
    .page-with-aside .col-aside{
        display: none;
    }
}
@media (max-width: 767px) {
    .card .section-title{
        --section-title-fs: 1rem;
        --section-title-icon-size: 2rem;
        --section-title-wrap-gap: 0.75rem;
    }

    .mob-fullwidth{
        width: auto;
        margin-left: calc(var(--app-content-px) * -1);
        margin-right: calc(var(--app-content-px) * -1);
    }
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer{
    flex-shrink: 0;
    background-color: #fff;
    overflow: hidden;

    position: relative;
    z-index: 5;

    color: #5D6A82;
    font-size: 1rem;
}
.app-page.hide-footer ~ .app-footer{
    display: none !important;
}

.app-footer a{
    color: inherit;
}


/* --- main wrap --- */
.app-footer .main-wrap{
    --row-gutter-y: 2rem;
    --spacing-top: 2rem;
    --spacing-bottom: 0;
    --col-content-max-width: 100%;
    --col-content-max-width-lg: 100%;

    padding-top: var(--spacing-top);
    padding-bottom: var(--spacing-bottom);
}
.app-footer .main-wrap > .row{
    --bs-gutter-y: var(--row-gutter-y);
    justify-content: space-between;
}


/* logo */
.app-footer .logo-wrap{
    display: flex;
    max-width: 208px;
}
.app-footer .logo-wrap img{
    width: 100%;
}

.app-footer .foo-title{
    margin-bottom: 1rem;

    color: #000;
    font-size: 1.125rem;
}
.app-footer nav ul{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.app-footer nav a{
    font-size: 14px;
    font-weight: 600;
    transition: color .15s ease-in-out;
}
.app-footer nav a:hover{
    color: #141023;
}

/* contact */
.app-footer .col-contact{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.app-footer .col-contact .foo-title{
    font-size: 14px;
    margin-bottom: 0;
}
.app-footer .col-contact .btn-card{
    max-width: var(--col-content-max-width-lg);
}

/* su*/
.app-footer .subscription-wrap{
    --form-control-height: var(--element-size-4);
    max-width: var(--col-content-max-width);
}
.app-footer .subscription-wrap .btn{
    --icon-size: 16px;
}


/* --- bottom bar --- */
.app-footer .bottom-bar{
    padding: 1.25rem 0 1.75rem;

    color: #6A7282;
    font-size: 12px;
}
.app-footer .bottom-bar .container{
    --container-width: var(--container-size-4);
}
.app-footer .dev-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}
.app-footer .dev-wrap img{
    display: block;
    height: 14px;
}

@media (min-width: 768px) {
    /* bg */
    .app-footer::before,
    .app-footer::after{
        content: "";
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% auto;
        position: absolute;
        z-index: -1;
    }
    .app-footer::before{
        width: 200px;
        height: 282px;
        background-image: url(../../images/bg/foo_bg_1.svg);
        left: 44px;
        bottom: -80px;
    }
    .app-footer::after{
        width: 240px;
        height: 410px;
        background-image: url(../../images/bg/foo_bg_2.svg);
        right: 0;
        top: 44px;
    }

    /* --- main wrap --- */
    .app-footer .main-wrap {
        --row-gutter-y: 3.5rem;
        --spacing-top: 3.5rem;
        --spacing-bottom: 1.5rem;
        --col-content-max-width: 288px;
        --col-content-max-width-lg: 342px;
    }
    /* --- bottom bar --- */
    .app-footer .bottom-bar{
        padding: 1.25rem 0;
    }
}
@media (min-width: 1200px) {
    /* bg */
    .app-footer::after{
        top: auto;
        bottom: 43px;
    }

    /* --- main wrap --- */
    .app-footer .main-wrap{
        --spacing-top: 5.875rem;
        --spacing-bottom: 1.75rem;
    }
    .app-footer .main-wrap .col-contact{
        max-width: calc(var(--col-content-max-width-lg) + var(--bs-gutter-x));
    }
}
@media (min-width: 1400px) {
    /* --- main wrap --- */
    .app-footer .main-wrap > .row > div:not(.col-contact){
        max-width: calc(var(--col-content-max-width) + var(--bs-gutter-x));
    }
}
@media (min-width: 1800px) {
    /* bg */
    .app-footer::before {
        bottom: 56px;
    }
}

/*@media (max-width: 991px) {
    .app-footer{
        padding-bottom: var(--app-bottom-bar-height);
    }
}*/
@media (max-width: 767px) {
    /* --- bottom bar --- */
    .app-footer .bottom-bar{
        text-align: center;
    }
}
/* ---------- /footer ---------- */


/* ----------- bottom bar ----------- */
.app-bottom-bar{
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid rgba(0,0,0,.12);
    padding: 0 var(--app-content-px);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 350;
}
.app-bottom-bar ul{
    list-style: none;
    display: flex;
    width: 100%;
    max-width: 400px;
}
.app-bottom-bar li{
    width: 25%;
}
.app-bottom-bar .nav-item{
    --nav-item-px: 0;
    --nav-item-py: 0;
    --nav-item-gap: 0;
    --nav-item-border-radius: 0;

    --nav-item-icon-size: 1.5rem;

    --nav-item-fs: 12px;
    --nav-item-fw: 600;

    --nav-item-color: var(--bs-tertiary-color);
    --nav-item-active-color: var(--bs-primary);
    --nav-item-bg: transparent;
    --nav-item-hover-bg: var(--nav-item-active-bg);
    --nav-item-active-bg: var(--nav-item-active-bg);


    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: var(--app-bottom-bar-height);

    transition: color .1s ease-in-out;
}
.app-bottom-bar .nav-item.active{
    color: var(--nav-item-active-color);
}

.app-bottom-bar .nav-item img,
.app-bottom-bar .nav-item svg{
    flex-shrink: 0;
    width: var(--nav-item-icon-size);
    height: auto;
}

.app-bottom-bar .nav-item svg *{
    transition: fill .1s ease-in-out,stroke .1s ease-in-out;
}

.app-bottom-bar .nav-item .position-relative{
    display: flex;
}
.app-bottom-bar .nav-item .badge-count{
    --bs-badge-padding-x: 0.125rem;
    --bs-badge-padding-y: 0;
    --bs-badge-border-radius: 50%;
    --bs-badge-color: #fff;
    --bs-badge-font-size: 8px;
    --badge-size: 0.75rem;
    --badge-bg: var(--bs-primary);
    --badge-line-height: 1;

    position: absolute;
    bottom: 0;
    right: 0;

    transform: translate(25%,25%);
}
.app-bottom-bar .nav-item.active .active__i-fill *{
    fill: var(--nav-item-active-color);
}
.app-bottom-bar .nav-item.active .active__i-stroke *{
    stroke: var(--nav-item-active-color);
}

@media (min-width: 992px) {
    .app-bottom-bar{
        display: none !important;
    }
}
/* ----------- /bottom bar ----------- */


/* ----------- app nav modal ----------- */
.app-nav-modal.fade .modal-dialog{
    transform: translate(0, 100px);
    transition: transform .15s ease-in-out;
}
.app-nav-modal.fade.show .modal-dialog{
    transform: none;
}

.app-nav-modal .modal-dialog{
    --bs-modal-margin: 1.25rem;
    --bs-modal-width: 100%;
    --bs-modal-padding: 0.75rem;

    height: calc(100% - var(--bs-modal-margin));
    margin: var(--bs-modal-margin) 0 0;
}
.app-nav-modal .modal-content{
    height: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.app-nav-modal .modal-header{
    gap: 0.625rem;
    padding: var(--bs-modal-padding) 1rem;
}
.app-nav-modal .modal-header .modal-title{
    font-size: 1.125rem;
}
.app-nav-modal .modal-header .btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: 2.5rem;
}
/*.app-nav-modal .modal-close-btn{
    background-color: var(--bs-light-bg-subtle);
    border-radius: 50%;
}*/

.app-nav-modal .modal-body{
    padding-top: 0;
}
.app-nav-modal nav ul{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.app-nav-modal nav li{
    width: calc((100% - 0.5rem) * 0.5);
}
.app-nav-modal nav li.active{
    width: 100%;
}

.app-nav-modal nav li:not(.active) > ul,
.app-nav-modal nav li.active > .nav-item{
    display: none;
}

.app-nav-modal .nav-item{
    --nav-item-px: 1rem;
    --nav-item-py: 1rem;
    --nav-item-border-radius: 1rem;

    --nav-item-fs: 0.875rem;
    --nav-item-fw: 400;
    --nav-item-color: #000;
    --nav-item-bg: var(--btn-light-subtle);
    --nav-item-hover-bg: var(--btn-light-subtle-hover);
    --nav-item-active-bg: var(--btn-light-subtle-active);

    --nav-item-icon-size: 1.75rem;
    --nav-item-img-size: 8rem;

    align-items: flex-start;
    height: var(--nav-item-img-size);
    position: relative;
    overflow: hidden;

    text-align: left;
}
.app-nav-modal .nav-item .nav-img{
    width: auto;
    height: var(--nav-item-img-size);
    position: absolute;
    top: 0;
    right: 0;
}
.app-nav-modal li li .nav-item{
    background-image: var(--nav-icon-url);
    background-position: bottom var(--nav-item-py) right var(--nav-item-px);
    background-repeat: no-repeat;
    background-size: var(--nav-item-icon-size) auto;
}
.app-nav-modal nav .nav-item > span{
    max-width: 70%;
}

.app-nav-modal nav > ul > li:nth-child(odd):last-child{
    width: 100%;
}
/* ----------- /app nav modal ----------- */


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


/* ----------- nav item ----------- */
.nav-item{
    --nav-item-px: 0.75rem;
    --nav-item-py: 0.75rem;
    --nav-item-gap: 0.75rem;
    --nav-item-border-radius: 50px;

    --nav-item-icon-size: 1.25rem;
    --nav-item-chevron-size: 1.25rem;

    --nav-item-fs: 0.875rem;
    --nav-item-fw: 500;

    --nav-item-color: #1F1F1F;

    --nav-item-bg: transparent;
    --nav-item-hover-bg: var(--bs-light-bg-subtle);
    --nav-item-active-bg: rgba(var(--bs-primary-rgb),.13);

    display: flex;
    align-items: center;
    gap: var(--nav-item-gap);
    width: 100%;
    background-color: var(--nav-item-bg);
    border: none;
    border-radius: var(--nav-item-border-radius);
    padding: var(--nav-item-py) var(--nav-item-px);

    color: var(--nav-item-color);
    font-size: var(--nav-item-fs);
    font-weight: var(--nav-item-fw);
}

.nav-item img{
    flex-shrink: 0;
}
.nav-item > img.i-nav{
    width: var(--nav-item-icon-size);
}
.nav-item > img.i-chevron{
    width: var(--nav-item-chevron-size);
    margin-left: auto;
}

.nav-item:hover{
    background-color: var(--nav-item-hover-bg);
}
.nav-item:active,
.nav-item.active{
    background-color: var(--nav-item-active-bg);
}
/* ----------- /nav item ----------- */


/* ----------- nav item card ----------- */
.nav-item-card{
    --nav-item-px: 1rem;
    --nav-item-py: 1rem;
    --nav-item-gap: 0.625rem;
    --nav-item-border-radius: 1.5rem;

    --nav-item-icon-size: 2.25rem;

    --nav-item-info-pe: 0.125rem;
    --nav-item-info-wrap-gap: 0.25rem;

    --nav-item-text-fs: 13px;
    --nav-item-title-fs: 14px;

    --nav-item-color: #000;
    --nav-item-bg: #fff;
    --nav-item-hover-bg: var(--btn-light-subtle-hover);
    --nav-item-active-bg: var(--btn-light-subtle-active);

    display: flex;
    align-items: center;
    gap: var(--nav-item-gap);
    width: 100%;
    min-height: auto;
    background-color: var(--nav-item-bg);
    border-radius: var(--nav-item-border-radius);
    padding: var(--nav-item-py) var(--nav-item-px);

    color: var(--nav-item-color);
    font-size: var(--nav-item-text-fs);

    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out;
}
.nav-item-card:hover{
    background-color: var(--nav-item-hover-bg);
}
.nav-item-card:active,
.nav-item-card.active{
    background-color: var(--nav-item-active-bg);
}

.nav-item-card > div{
    display: flex;
    flex-direction: column;
    gap: var(--nav-item-info-wrap-gap);
    padding-right: var(--nav-item-info-pe);
}
.nav-item-card .title{
    color: inherit;
    font-size: var(--nav-item-title-fs);
    line-height: 1.35;
}
.nav-item-card .text{
    color: inherit;
    font-size: inherit;
}

.nav-item-card > img{
    flex-shrink: 0;
    width: var(--nav-item-icon-size);
    height: auto;
}

@media (min-width: 768px) {
    .nav-item-card{
        --nav-item-px: clamp(1rem, 0.825rem + 0.485vw, 1.25rem);
        --nav-item-py: clamp(1rem, 0.65rem + 0.971vw, 1.5rem);
        --nav-item-gap: clamp(0.625rem, 0.363rem + 0.728vw, 1rem);
        --nav-item-border-radius: clamp(1.5rem, 1.15rem + 0.971vw, 2rem);

        --nav-item-icon-size: clamp(2.25rem, 1.464rem + 2.184vw, 3.375rem);

        --nav-item-info-pe: clamp(0.125rem, -0.137rem + 0.728vw, 0.5rem);
        --nav-item-info-wrap-gap: 0.375rem;

        --nav-item-text-fs: 0.875rem;
        --nav-item-title-fs: 1rem;
    }
}
@media (min-width: 1400px) {
    .nav-item-card{
        --nav-item-text-fs: 1rem;
        --nav-item-title-fs: 1.125rem;
    }
}


/* slider */
.nav-cards-carousel{
    --slide-width: 252px;
}
.nav-cards-carousel .swiper-slide{
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: var(--slide-width);
    height: auto;
}
.nav-cards-carousel .nav-item-card{
    flex-grow: 1;
}

@media (max-width: 767px) {
    .swiper.nav-cards-carousel{
        width: auto;
        margin-left: calc(var(--app-content-px) * -1);
        margin-right: calc(var(--app-content-px) * -1);
    }
    .nav-cards-carousel .swiper-slide:first-child,
    .nav-cards-carousel .swiper-slide:last-child{
        width: calc(var(--slide-width) + var(--app-content-px));
    }
    .nav-cards-carousel .swiper-slide:first-child{
        padding-left: var(--app-content-px);
    }
    .nav-cards-carousel .swiper-slide:last-child{
        padding-right: var(--app-content-px);
    }
}
/* ----------- /nav item card ----------- */


/* ----------- breadcrumbs ----------- */
.breadcrumbs{
    padding: 1.5rem 0;
}
.breadcrumbs ol,
.breadcrumbs li{
    display: flex;
    align-items: center;
}
.breadcrumbs ol{
    list-style: none;
    /*flex-wrap: wrap;*/
    overflow: hidden;

    color: var(--bs-tertiary-color);
    font-size: 14px;
}
.breadcrumbs li:not(:last-child)::after{
    content: "";
    width: 14px;
    height: 14px;
    background: url(../../images/icons/chevron-right_thin_light.svg) center no-repeat;
    background-size: 100% auto;
    margin: auto 6px;
}
.breadcrumbs a{
    color: inherit;
    white-space: nowrap;
    transition: color .15s ease-in-out;
}
.breadcrumbs a:hover{
    color: rgba(0,0,0,.8);
}

.section-head .breadcrumbs{
    padding: 0;
}

@media (min-width: 992px) {
    .breadcrumbs ~ .app-page{
        --app-page-spacing-top: 0;
    }
}
@media (max-width: 991px) {
    .breadcrumbs{
        display: none;
    }
}
/* ----------- /breadcrumbs ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title {
    display: block;
    color: var(--bs-heading-color);
    font-weight: bold;
}
.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{
    color: inherit;
}

h1{
    font-size: var(--fs-h1);
}
h2{
    font-size: var(--fs-h2);
}
h3{
    font-size: var(--fs-h3);
}
h4{
    font-size: var(--fs-h4);
}
h5{
    font-size: var(--fs-h5);
}
h6{
    font-size: var(--fs-h6);
}

.h1{font-size: var(--fs-h1) !important;}
.h2{font-size: var(--fs-h2) !important;}
.h3{font-size: var(--fs-h3) !important;}
.h4{font-size: var(--fs-h4) !important;}
.h5{font-size: var(--fs-h5) !important;}
.h6{font-size: var(--fs-h6) !important;}

.text,
.text-wrap{
    color: var(--bs-emphasis-color);
    font-size: var(--fs-text);
    font-weight: 400;
}

.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: 16px;
}

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

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

.text-wrap ul{
    list-style: none;
    padding: 0;
}

.text-wrap ul > li{
    background: url(../../images/icons/check_priamry.svg) 0 center no-repeat;
    background-size: 14px auto;
    padding-left: 22px;
}
.text-wrap .ul-2col{
    --bs-gutter-x: 0;
    --gap: 0.75rem;

    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.text-wrap .ul-2col > li{
    flex-grow: 1;
    width: 100%;
    margin-top: 0;
}
@media (min-width: 992px) {
    .text-wrap .ul-2col > li{
        width: calc((100% - var(--gap))/2);
    }
}

.text-wrap img{
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}
.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;
}

.text-wrap a:not(.btn){
    --bs-link-decoration: underline;
}
.text-wrap a:not(.btn):hover{
    --bs-link-decoration: none;
}

.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 {
    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;
}*/

@media (min-width: 992px) {
    .text-wrap > *{margin-bottom: 1.5rem;}
}
/* ---------- /title,text ---------- */


/* ---------- buttons ---------- */
.btn{
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: var(--font-family);
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: calc(var(--btn-size) / 2);
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: 1;
    --bs-btn-color: #141023;
    --bs-btn-active-border-color: transparent;

    --btn-size: var(--element-size-4);
    --btn-gap: 0.5rem;

    --icon-size: 24px;
    --btn-icon-color: var(--bs-btn-color);
    --btn-icon-hover-color: var(--bs-btn-color);
    --btn-icon-active-color: var(--bs-btn-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-width: var(--btn-size);
    min-height: var(--btn-size);
    box-shadow: var(--bs-btn-box-shadow);
}
.btn:not(:hover):not(:active):not(.active):not(.is-active):not(.selected):not(.show):focus{
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn-shadow{
    --bs-btn-box-shadow: 0 0 24px 0 rgba(224,228,235,1);
}

.btn-xs{
    --bs-btn-padding-x: 0.75rem;
    --btn-size: var(--element-size-2);
    --icon-size: 16px;
    --bs-btn-font-size: 12px;
}
.btn-sm{
    --bs-btn-padding-x: 0.75rem;
    --btn-size: var(--element-size-3);
    --icon-size: 1.25rem;
    --bs-btn-font-size: 14px;
}
.btn-lg{
    --bs-btn-padding-x: 1.5rem;
    --btn-size: var(--element-size-5);
}
.btn-xl{
    --bs-btn-padding-x: 2rem;
    --btn-size: var(--element-size-6);
}

.btn img,
.btn svg{
    flex-shrink: 0;
    width: var(--icon-size);
    height: auto;
}

.btn img + span:last-child{
    padding-right: 0.25rem;
}
.btn svg *{
    transition: fill .1s ease-in-out,stroke .1s ease-in-out;
}

.btn > i{
    display: flex;
    position: relative;
}

/*.btn .badge-count{
    --bs-badge-padding-x: 0.125rem;
    --bs-badge-padding-y: 0;
    --bs-badge-border-radius: 50%;
    --bs-badge-color: #fff;
    --bs-badge-font-size: 8px;
    --badge-size: 0.75rem;
    --badge-bg: var(--bs-primary);
    --badge-line-height: 1;

    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;

    transform: translate(0px,0px);
}*/

/*.btn .svg-icon *{
    stroke: var(--btn-icon-color);
    transition: fill .1s ease-in-out,stroke .1s ease-in-out;
}
.btn:hover .svg-icon *{
    stroke: var(--btn-icon-hover-color, var(--btn-icon-color));
}
.btn.active .svg-icon *,
.btn.show .svg-icon *{
    stroke: var(--btn-icon-active-color, var(--btn-icon-color));
}*/

/*

.btn .svg-icon-fill *{
    stroke: none !important;
    fill: var(--btn-icon-color);
    transition: fill .1s ease-in-out;
}
.btn:hover .svg-icon-fill *{
    fill: var(--btn-icon-hover-color, var(--btn-icon-color));
}
.btn.active .svg-icon-fill *,
.btn.show .svg-icon-fill *{
    fill: var(--btn-icon-active-color, var(--btn-icon-color));
}*/
.btn.active .active__i-fill *,
.btn.show .active__i-fill *{
    fill: var(--btn-icon-active-color);
}
.btn.active .active__i-stroke *,
.btn.show .active__i-stroke *{
    stroke: var(--btn-icon-active-color);
}


/* white */
.btn-white{
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: rgba(0,0,0,.04);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-light-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-bg);
    --bs-btn-active-border-color: rgba(0,0,0,.1);
    /*--bs-btn-disabled-color: var(--btn-white-disabled-color);
    --bs-btn-disabled-bg: var(--btn-white-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-white-disabled-bg);*/
    --bs-btn-border-width: 1px;
}
/*.btn-white-subtle{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-white-subtle);
    --bs-btn-border-color: var(--btn-white-subtle);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--btn-white-subtle-hover);
    --bs-btn-hover-border-color: var(--btn-white-subtle-hover);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--btn-white-subtle-active);
    --bs-btn-active-border-color: var(--btn-white-subtle-active);
    --bs-btn-disabled-color: var(--btn-white-disabled-color);
    --bs-btn-disabled-bg: var(--btn-white-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-white-disabled-bg);
    --bs-btn-border-width: 0;
}*/

/* 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-primary-disabled-color);
    --bs-btn-disabled-bg: var(--btn-primary-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-primary-disabled-bg);
}
.btn-primary-subtle{
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: rgba(var(--bs-primary-rgb),.1);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb),.2);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb),.05);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--btn-primary-disabled-color);
    --bs-btn-disabled-bg: var(--btn-primary-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-primary-disabled-bg);
    --bs-btn-border-width: 0;
}
/*.btn-outline-primary{
	--bs-btn-color: 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-primary-disabled);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--btn-primary-disabled);
}*/

/* secondary */
.btn-secondary {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--btn-secondary);
    --bs-btn-border-color: var(--btn-secondary);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--btn-secondary-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-hover);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--btn-secondary-active);
    --bs-btn-active-border-color: var(--btn-secondary-active);
    --bs-btn-disabled-color: var(--btn-secondary-disabled-color);
    --bs-btn-disabled-bg: var(--btn-secondary-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-secondary-disabled-bg);
}
.btn-outline-secondary{
    --bs-btn-color: #414958;
    --bs-btn-bg: #FCFCFD;
    --bs-btn-border-color: #E6E9EF;
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--btn-secondary);
    --bs-btn-hover-border-color: #E6E9EF;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--btn-secondary-hover);
    --bs-btn-active-border-color: var(--btn-secondary-active);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}

.btn.btn-secondary.selected{
    color: #000;
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-warning);
    outline: 1px solid var(--bs-warning);
    outline-offset: -2px
}

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

/* danger */
.btn-danger{
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-bg: var(--btn-danger);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-bg: var(--btn-danger-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-bg: var(--btn-danger-active);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--btn-danger-disabled-color);
    --bs-btn-disabled-bg: var(--btn-danger-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-danger-disabled-bg);
}

/* warning */
.btn-warning{
    --bs-btn-color: #000;
    --bs-btn-bg: var(--btn-warning);
    --bs-btn-border-color: var(--btn-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--btn-warning-hover);
    --bs-btn-hover-border-color: var(--btn-warning-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--btn-warning-active);
    --bs-btn-active-border-color: var(--btn-warning-active);
    --bs-btn-disabled-color: var(--btn-warning-disabled-color);
    --bs-btn-disabled-bg: var(--btn-warning-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-warning-disabled-bg);
}

/* light */
.btn-light{
    --bs-btn-color: #000;
    --bs-btn-bg: var(--btn-light);
    --bs-btn-border-color: var(--btn-light);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--btn-light-hover);
    --bs-btn-hover-border-color: var(--btn-light-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--btn-light-active);
    --bs-btn-active-border-color: var(--btn-light-active);
    --bs-btn-disabled-color: var(--btn-light-disabled-color);
    --bs-btn-disabled-bg: var(--btn-light-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-light-disabled-bg);
}
.btn-light-subtle{
    --bs-btn-color: #000;
    --bs-btn-bg: var(--btn-light-subtle);
    --bs-btn-border-color: var(--btn-light-subtle);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--btn-light-subtle-hover);
    --bs-btn-hover-border-color: var(--btn-light-subtle-hover);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--btn-light-subtle-active);
    --bs-btn-active-border-color: var(--btn-light-subtle-active);
    --bs-btn-disabled-color: var(--btn-light-disabled-color);
    --bs-btn-disabled-bg: var(--btn-light-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-light-disabled-bg);
}

.btn.btn-light-subtle.selected{
    color: #000;
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-warning);
    outline: 1px solid var(--bs-warning);
    outline-offset: -2px
}

/* active warning */
.btn.active-warning{
    color: #000 !important;
    background-color: #FFF9E5 !important;
    border-color: var(--bs-warning) !important;
}


/* cancel */
.btn-cancel{
    --bs-btn-color: var(--bs-tertiary-color);
    --bs-btn-hover-color: #000;
    --bs-btn-active-color: #000;
}


/* user */
.btn-user-card{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-border-width: 0;

    --btn-size: 4.5rem;
    --btn-gap: 0.75rem;

    --i-wrap-size: 3.5rem;
    --i-wrap-bg: #fff;

    display: flex;
    justify-content: flex-start;
    text-align: left;
}
.btn-user-card .i-wrap{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--i-wrap-size);
    height: var(--i-wrap-size);
    background-color: var(--i-wrap-bg);
    border-radius: 50%;
    transition: background-color 0.15s ease-in-out;
}
.btn-user-card > span{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;

    color: var(--bs-tertiary-color);
    font-size: 14px;
    font-weight: 400;
}
.btn-user-card > span > *{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.btn-user-card > span > b{
    color: #000;
    font-size: 1.125rem;
    font-weight: 500;
}

.btn-user-card.btn-white{
    --i-wrap-bg: var(--bs-light-bg-subtle);
}
.btn-user-card.btn-white:hover:not(:active){
    --i-wrap-bg: #fff;
}

/* favorites */
.btn-favorites{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
}
.btn-favorites:not(.is-active) svg *{
    fill: none;
    transition: none;
}

/* add-new item*/
.btn-add-new-item{
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 1.25rem;
    --bs-btn-border-width: 3px;
    --bs-btn-font-size: 1rem;

    --btn-gap: 1.25rem;

    --bs-btn-color: #7183A7;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: rgba(233,236,242,.3);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: rgba(233,236,242,.4);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-bg);
    --bs-btn-active-border-color: rgba(233,236,242,.6);

    flex-direction: column;
}
.btn-add-new-item .i-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--btn-light-subtle);
    border-radius: 50%;
    transition: background-color 0.15s ease-in-out;
}
.btn-add-new-item .i-wrap img{
    width: 1.5rem;
}
.btn-add-new-item:hover .i-wrap{
    background-color: var(--btn-light-subtle-hover);
}
.btn-add-new-item:active .i-wrap{
    background-color: var(--btn-light-subtle-active);
}

/* 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;
}

/* btn cart & btn compare */
.btn-compare,
.btn-cart{
    --check-icon-opacity: 0;
    position: relative;
}
.btn-compare > i,
.btn-cart > i{
    position: relative;
}
.btn-cart > i,
.btn-compare > i::after{
    opacity: var(--check-icon-opacity);
}
.btn-compare > i::after,
.btn-cart > i::after{
    content: "";
    width: 12px;
    height: 12px;
    background: url(../../images/icons/check_solid_primary.svg) no-repeat center;
    background-size: 100% auto;
    position: absolute;
    bottom: var(--check-icon-pos);
    right: var(--check-icon-pos);
}
.btn-compare.is-active,
.btn-cart.is-active{
    --check-icon-opacity: 1;
}
.dropdown .btn-compare.is-active{
    pointer-events: none;
}
.btn-compare{
    --check-icon-pos: -3px;
}
.btn-cart{
    --check-icon-pos: -1px;
}
.btn-cart > i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn-cart.is-active > img{
    opacity: 0;
}
.btn-compare.disabled,
.btn-cart.disabled{
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-opacity: 0.5;
}
.btn-compare.is-loading,
.btn-cart.is-loading{
    background-image: url(../../images/icons/spinner-notch.svg);
    background-size: 1.25rem auto;
}
/* ---------- /buttons ---------- */


/* ---------- pagination ---------- */
.pagination{
    --bs-pagination-padding-x: 0.25rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 14px;
    --bs-pagination-color: var(--bs-secondary-color);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: var(--bs-secondary-bg-subtle);
    --bs-pagination-border-radius: 0.625rem;
    --bs-pagination-hover-color: var(--bs-dark-bg-subtle);
    --bs-pagination-hover-bg: #fff;
    --bs-pagination-hover-border-color: var(--bs-dark-bg-subtle);
    --bs-pagination-focus-color: var(--bs-pagination-color);
    --bs-pagination-focus-bg: var(--bs-pagination-bg);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--bs-dark-bg-subtle);
    --bs-pagination-active-border-color: var(--bs-dark-bg-subtle);
    --bs-pagination-disabled-color: var(--bs-pagination-color);
    --bs-pagination-disabled-bg: var(--bs-pagination-bg);
    --bs-pagination-disabled-border-color: var(--bs-pagination-border-color);

    --pagination-item-size: var(--element-size-3);

    justify-content: center;
    gap: 0.375rem;
    margin: 2rem 0;
}
.pagination .page-item{
    flex-shrink: 0;
}
.pagination .page-link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-item-size);
    height: var(--pagination-item-size);
    border-radius: var(--bs-pagination-border-radius);
    font-weight: 500;
}
.pagination .page-link > span{
    padding: 0 0.5rem;
}
/* ---------- /pagination ---------- */


/* ---------- social buttons ---------- */
.btn-social{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --btn-size: 42px;

    --bs-btn-bg: rgba(var(--bs-primary-rgb),.15);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb),.1);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb),.25);
}
/* ---------- /social buttons ---------- */


/* ---------- badge ---------- */
.badge{
    --bs-badge-padding-x: 1rem;
    --bs-badge-padding-y: 0.375rem;
    --bs-badge-font-size: 14px;
    --bs-badge-font-weight: 500;
    --bs-badge-color: #141023;
    --bs-badge-border-radius: 50px;
    --badge-border-width: 0px;
    --badge-border-color: #E6E9EF;

    --badge-bg: transparent;
    --badge-size: var(--element-size-4);
    --badge-gap: 0.5rem;
    --badge-line-height: 1.5;

    display: inline-flex;
    align-items: center;
    gap: var(--badge-gap);
    min-width: var(--badge-size);
    min-height: var(--badge-size);
    border: var(--badge-border-width) solid var(--badge-border-color);
    background-color: var(--badge-bg);
    line-height: var(--badge-line-height);
}

/* sizes */
.badge-xs{
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-font-size: 12px;
    --badge-size: var(--element-size-2);
    --badge-gap: 0.375rem;
}
.badge-sm{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-font-size: 14px;
    --badge-size: var(--element-size-3);
    --badge-gap: 0.375rem;
}
.badge-lg {
    --bs-badge-padding-x: 1.5rem;
    --badge-size: var(--element-size-5);
}

/* colors */
.badge-outline-white{
    --bs-badge-color: #000;
    --badge-border-width: 1px;
}
.badge-primary-subtle{
    --bs-badge-color: var(--bs-primary);
    --badge-bg: rgba(var(--bs-primary-rgb),.12);
}
.badge-success-subtle{
    --bs-badge-color: #000;
    --badge-bg: var(--bs-success-bg-subtle);
}
.badge-danger-subtle{
    --bs-badge-color: #000;
    --badge-bg: var(--bs-danger-bg-subtle);
}
.badge-warning-subtle{
    --bs-badge-color: #000;
    --badge-bg: var(--bs-warning-bg-subtle);
}
.badge-info-subtle{
    --bs-badge-color: #000;
    --badge-bg: var(--bs-info-bg-subtle);
}
.badge-light-subtle{
    --bs-badge-color: var(--bs-tertiary-color);
    --badge-bg: var(--bs-light-bg-subtle);
}


/* --- count --- */
.badge-count{
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-padding-y: 0;
    --badge-size: 1.875rem;

    justify-content: center;
    text-align: center;
}

/* --- points --- */
.badge-points{
    --bs-badge-padding-x: 0.375rem;
    --bs-badge-padding-y: 0.25rem;
    --bs-badge-font-size: 12px;
    --bs-badge-color: #000;

    --badge-bg: #fff;
    --badge-size: auto;
    --badge-gap: 0.375rem;

    padding-right: calc(var(--bs-badge-padding-x) + 0.375rem);
}
.badge-points > img{
    flex-shrink: 0;
    width: 1.5rem;
}
/* ---------- /badge ---------- */


/* ---------- form ---------- */
.form-group{
    margin-bottom: 1.5rem;
}
.row .form-group:last-child{
    margin-bottom: 0;
}

.form-label{
    margin-bottom: 0.5rem;

    color: var(--form-label-color);
    font-size: 14px;
    font-weight: 400;
}

.form-control,
.ts-wrapper .form-select{
    height: var(--form-control-height);
    background-color: var(--form-control-bg);
    border-color: var(--form-control-border-color);
    border-radius: var(--form-control-border-radius);
    box-shadow: var(--form-control-shadow);
    padding: var(--form-control-py) var(--form-control-px);

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

.ts-wrapper .form-select{
    --ts-pr-min: 40px;

    background-image: url(../../images/icons/chevron_light.svg);
    background-repeat: no-repeat;
    background-position: center right 12px;
    background-size: 24px auto;
    padding-right: var(--ts-pr-min);
}

textarea.form-control{
    height: auto;
}

.form-control:hover,
.ts-wrapper:hover .form-select{
    color: var(--form-control-hover-color);
    background-color: var(--form-control-hover-bg);
    border-color: var(--form-control-hover-border-color);
    box-shadow: var(--form-control-hover-shadow);
}
.form-control:focus,
.ts-wrapper.dropdown-active .form-select{
    color: var(--form-control-active-color);
    background-color: var(--form-control-active-bg);
    border-color: var(--form-control-active-border-color);
    box-shadow: var(--form-control-active-shadow);
    outline: 1px solid var(--form-control-active-border-color);
}

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

.form-control[readonly],
.form-control[disabled]{
    --form-control-hover-color: var(--form-control-color);
    --form-control-hover-bg: var(--form-control-bg);
    --form-control-hover-border-color: var(--form-control-border-color);
    --form-control-hover-shadow: var(--form-control-shadow);

    --form-control-active-color: var(--form-control-color);
    --form-control-active-bg: var(--form-control-bg);
    --form-control-active-border-color: var(--form-control-border-color);
    --form-control-active-shadow: var(--form-control-shadow);
}
.form-control[disabled]{
    --form-control-bg: var(--bs-light-bg-subtle);
    background-color: var(--form-control-bg);
}


/* search */
.search-input{
    background-image: url(../../images/icons/magnifying-glass.svg);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 24px auto;
    padding-left: 44px;
}
.search-input::-webkit-search-cancel-button{
    appearance: none;
    /*background: url('../../images/icons/xmark.svg') center no-repeat;
    background-size: 100% auto;
    width: 20px;
    height: 20px;
    cursor: pointer;*/
}
.search-input.is-loading{
    background-image: url(../../images/icons/spinner-notch.svg);
}

/* date */
.date-input{
    background-image: url(../../images/icons/calendar_light.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 24px auto;
    padding-right: 44px;
}


/* select */
body .ts-wrapper {
    min-height: var(--form-control-height);
}

body .ts-dropdown{
    --option-color: #141023;
    --option-hover-color: var(--form-control-active-color);
    --option-active-color: var(--form-control-active-color);
    --option-bg: var(--form-control-bg);
    --option-hover-bg: var(--bs-light-bg-subtle);
    --option-active-bg: rgba(var(--bs-primary-rgb), 0.1);

    border: 1px solid var(--form-control-border-color);
    border-radius: 1rem;
    box-shadow: var(--form-control-hover-shadow);
    margin-top: 0.5rem;
    overflow: hidden;

    color: var(--option-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.25;
}
.ts-wrapper .form-select{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.ts-wrapper .form-select .item{
    cursor: default;
}
.ts-wrapper .ts-dropdown .create,
.ts-wrapper .ts-dropdown .no-results,
.ts-wrapper .ts-dropdown .optgroup-header,
.ts-wrapper .ts-dropdown .option{
    padding: 0.625rem var(--form-control-px);
}
.ts-wrapper .ts-dropdown .option:last-child{
    padding-bottom: 1rem;
}
.ts-wrapper .ts-dropdown .option{
    background-color: var(--option-bg);
}
.ts-wrapper .ts-dropdown .option:hover{
    background-color: var(--option-hover-bg);
    color: var(--option-hover-color);
}
.ts-wrapper .ts-dropdown .active {
    background-color: var(--option-bg);
    color: var(--option-color);
}
.ts-wrapper .ts-dropdown .selected {
    background-color: var(--option-active-bg);
    color: var(--option-active-color);
}
.ts-wrapper .ts-dropdown .option[aria-disabled="true"]{
    background-color: var(--option-bg);
}

.ts-wrapper.multi .form-select{
    --tag-px: 0.5rem;
    --tag-py: 0.125rem;

    gap: 0.5rem;
    overflow: hidden;
}
.ts-wrapper.multi .form-select .item,
.ts-wrapper.multi .form-select .ts-extra{
    flex: 0 0 auto;
    border: 1px solid #E0E3EB;
    border-radius: 0.5rem;
    padding: var(--tag-py) var(--tag-px);

    color: #141023;
    font-size: 12px;
    line-height: 21px;
    pointer-events: none;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .form-select .item {
    padding-right: var(--tag-px) !important;
}
.ts-wrapper.multi .form-select .item .remove{
    display: none !important;
}
.ts-wrapper.multi .form-select .ts-extra {
    flex: 0 0 auto;
    white-space: nowrap;
}


/* --- form controls with icon-btn --- */
.input-with-icon-btn{
    position: relative;
}
.input-with-icon-btn .form-control{
    padding-right: 40px;
}
.input-with-icon-btn .btn{
    --btn-size: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}


/* --- checkbox, radio --- */
.form-check{
    --form-check-input-size: 16px;
    --form-check-input-bg: transparent;
    --form-check-active-input-bg: var(--bs-warning);
    --form-check-input-border-width: 2px;
    --form-check-input-border-color: #C4C9D4;
    --form-check-active-input-border-color: var(--bs-warning);
    --form-check-color: #66728A;
    --form-check-active-color: #141023;
    --form-check-font-size: 14px;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--form-check-input-size);
    padding: 0;
    margin: 0;

    color: var(--form-control-color);
    font-size: var(--form-check-font-size);
    font-weight: 500;
    line-height: 1.25;
}
.form-check-reverse{
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.form-check .form-check-input,
.form-check .form-check-label{
    margin: 0;
}
.form-check-label{
    color: var(--form-check-color);
    font-size: var(--form-check-font-size);
}
.form-check-input{
    flex-shrink: 0;
    width: var(--form-check-input-size);
    height: var(--form-check-input-size);
    background: var(--form-check-input-bg) var(--form-check-input-bg-image) -50px center no-repeat;
    border: var(--form-check-input-border-width) solid var(--form-check-input-border-color);
    background-size: 16px auto;
}
.form-check-input:focus{
    border-color: var(--form-check-input-border-color);
}
.form-check-input[type="checkbox"]{
    --form-check-input-bg-image: url(../../images/icons/check-tick.svg);
    --bs-border-radius: 4px;
}
.form-check-input[type="radio"]{
    --form-check-input-bg-image: url(../../images/icons/check-radio.svg);
    --bs-border-radius: 50%;
}
.form-check-input:focus,
.form-check-input:active{
    box-shadow: none;
    filter: none;
}
.form-check-input:checked{
    background-color: var(--form-check-active-input-bg);
    border-color: var(--form-check-active-input-border-color);
    background-position: center;
}
.form-check-input:checked ~ .form-check-label{
    color: var(--form-check-active-color);
}
.form-check a,
.form-check a:hover,
.form-check .link{
    color: var(--form-check-active-color);
    text-decoration: underline;
}
.form-check a:hover,
.form-check .link:hover{
    text-decoration: none;
}
.form-check button.link{
    text-align: left;
}

.form-check-primary{
    --form-check-active-input-bg: var(--bs-primary);
    --form-check-active-input-border-color: var(--bs-primary);
    --form-check-color: #414958;
}
.form-check-primary .form-check-input[type="checkbox"]{
    --form-check-input-bg-image: url(../../images/icons/check-tick_white.svg);
}
.form-check-primary .form-check-input[type="radio"]{
    --form-check-input-bg-image: url(../../images/icons/check-radio_white.svg);
}

/* btn */
.form-check-btn{
    display: flex;
    border-radius: 50px;
    padding: 0.5rem 0.75rem;
}
.form-check-btn,
.form-check-btn input{
    cursor: pointer;
}

/* btn */
.form-check-btn-card{
    --card-spacer-y: 0.75rem;
    --card-spacer-x: 1rem;
    --card-border-radius: 1.25rem;
    --card-items-gap: 0.75rem;

    display: flex;
    align-items: center;
    gap: var(--card-items-gap);
    border-radius: var(--card-border-radius);
    padding: var(--card-spacer-y) var(--card-spacer-x);

    position: relative;
    z-index: 1;

    color: #171717;
    font-size: 12px;
    font-weight: 500;
}
.form-check-btn-card .wrap::before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--form-control-bg);
    border: 1px solid var(--form-control-border-color);
    box-shadow: 0 1px 2px 0 rgba(10,13,18,.05);
    border-radius: var(--card-border-radius);

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    transition: box-shadow 0.15s ease-in-out;
}
label.form-check-btn-card{
    cursor: pointer;
}
label.form-check-btn-card:hover .wrap::before{
    box-shadow: 0 2px 8px 0 rgba(10,13,18,.08);
}
.form-check-btn-card input:checked ~ .wrap::before{
    border-width: 3px;
    border-color: var(--bs-warning);
}

.form-check-btn-card > img{
    flex-shrink: 0;
    max-height: 1.75rem;
}

.form-check-btn-card > i{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #E5E5E5;
    border-radius: 0.625rem;
}
.form-check-btn-card > i img{
    width: 1.25rem;
}

.form-check-btn-card .wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem
}

.form-check-btn-card input{
    position: absolute;
    right: 100%;
    opacity: 0;
}

.form-check-btn-card .title{
    color: inherit;
    font-size: 14px;
    font-weight: inherit;
}
.form-check-btn-card .text-description{
    color: #737373;
}
.form-check-btn-list{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


/* list */
.form-check-list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.form-check-list .form-check{
    margin: 0;
}


/* form check btn group */
.form-check-btn-group{
    display: flex;
    gap: 0.25rem;
    border: 1px solid var(--form-control-border-color);
    border-radius: 50px;
    box-shadow: 0 1px 2px 0 rgba(10,13,18,.05);
    padding: 2px;
}
.form-check-btn-group label{
    position: relative;
    overflow: hidden;

    color: var(--form-control-placeholder-color);
    font-size: 1rem;
    cursor: pointer;
}
.form-check-btn-group label input{
    opacity: 0;
    position: absolute;
    right: 100%;
}
.form-check-btn-group label > span{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--element-size-4);
    border-radius: 22px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.form-check-btn-group label input:checked + span{
    background-color: var(--bs-primary);
    color: #fff;
}


/* --- toggler --- */
.form-toggler{
    --width: 29px;
    --height: 16px;
    --padding: 2px;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    margin: 0;

    color: var(--bs-secondary);
    font-size: 14px;
}
.form-toggler input{
    opacity: 0;
    position: absolute;
    left: -100%;
}
.form-toggler > i{
    flex-shrink: 0;
    display: flex;
    width: var(--width);
    height: var(--height);
    background-color: #C4C9D4;
    border-radius: var(--height);
    position: relative;
    padding: var(--padding);
}
.form-toggler > i::before{
    content: "";
    display: block;
    width: calc(var(--height) - var(--padding) * 2);
    height: calc(var(--height) - var(--padding) * 2);
    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-warning);
}
.form-toggler input:checked ~ i::before{
    transform: translateX(calc(var(--width) - var(--height) - var(--padding) + 1px));
}

.form-toggler.size-lg{
    --width: 34px;
    --height: 20px;
}


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

.error-text {
    display: none;
}
.global-error-text {
    display: block;
    margin-bottom: 1.25rem;
    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,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-group.has-error .form-control,
.form-group.has-error .form-select{
    background-image: none;
}
/* ---------- /form ---------- */


/* ---------- otp ---------- */
.otp-form-group{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 2rem 0;
    text-align: center;
}

.otp-inputs-group{
    display: flex;
}
.otp-inputs-group .form-label{
    display: block;
    margin-bottom: 1rem;
    font-weight: normal;
    text-align: center;
}
.otp-inputs-group input::-webkit-outer-spin-button,
.otp-inputs-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.otp-inputs-group input[type=number] {
    -moz-appearance: textfield;
}
.otp-inputs-group .form-control{
    --form-control-height: 4.5rem;
    --form-control-px: 0;
    --form-control-py: 0;
    --form-control-fs: 2rem;

    --form-control-active-color: var(--bs-primary);
    --form-control-active-bg: rgba(var(--bs-primary-rgb),.05);
    --form-control-active-border-color: var(--bs-primary);

    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    text-align: center;
}
.otp-inputs-group .form-control:first-child{
    border-top-left-radius: var(--form-control-border-radius);
    border-bottom-left-radius: var(--form-control-border-radius);
}
.otp-inputs-group .form-control:last-child{
    border-top-right-radius: var(--form-control-border-radius);
    border-bottom-right-radius: var(--form-control-border-radius);
}
.otp-inputs-group .form-control + .form-control:not(:focus){
    border-left-color: transparent;
}

.otp-form-group.has-error .form-control{
    background-color: rgba(var(--bs-danger-rgb),.12);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}


/*.otp-form-group .valid-feedback,
.otp-form-group .invalid-feedback{
    font-size: 14px;
    line-height: 1.25;
}
.otp-form-group:not(.has-error) .valid-feedback{
    display: block;
}*/
/* ---------- /otp ---------- */


/* ---------- range slider ---------- */
.noUiSlider.noUi-horizontal.noUi-target{
    height: 0.5rem;
    background-color: var(--bs-light);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0.5rem;
    position: relative;
}
.noUiSlider.noUi-horizontal.noUi-target::before,
.noUiSlider.noUi-horizontal.noUi-target::after{
    content: "";
    width: 1rem;
    height: 100%;
    background-color: inherit;
    border-radius: 1rem;
    position: absolute;
    top: 0;
}
.noUiSlider.noUi-horizontal.noUi-target::before{
    left: -0.5rem;
}
.noUiSlider.noUi-horizontal.noUi-target::after{
    right: -0.5rem;
}
.noUiSlider.noUi-horizontal .noUi-connect {
    background: var(--bs-dark-bg-subtle);
    border-radius: 0;
}
.noUiSlider.noUi-horizontal .noUi-handle{
    width: 1rem;
    height: 1rem;
    background-color: #fff;
    border: 2px solid var(--bs-dark-bg-subtle);
    border-radius: 50%;
    box-shadow: none;
    right: -0.5rem;
    top: -0.25rem;
}
.noUiSlider.noUi-horizontal .noUi-handle::before,
.noUiSlider.noUi-horizontal .noUi-handle::after{
    display: none;
}

.noUiSlider-container .row{
    --bs-gutter-x: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.noUiSlider-container .col-separator{
    display: flex;
    align-items: center;
    justify-content: center;
}
.noUiSlider-container .col-separator hr{
    width: 10px;
    border-top: 2px solid #C4C8D4;
    margin: 0;
}

.noUiSlider-container .col-input{
    width: 42%;
}
.noUiSlider-container .form-control{
    --form-control-height: 34px;
    --form-control-px: 0.5rem;
    --form-control-border-radius: 0.625rem;
    --form-control-fs: 0.875rem;

    --form-control-color: var(--bs-dark);
    --form-control-hover-color: var(--form-control-color);
    --form-control-bg: var(--bs-light-bg-subtle);
    --form-control-hover-bg: var(--form-control-bg);
    --form-control-active-bg: var(--form-control-bg);
    --form-control-border-color: #E9ECF1;

    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;
    text-align: right;
}

/*.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,
.products-grid-item .img-wrap img,
.products-list-item .img-wrap img,
.product-wrap .img-wrap img,
.product-slider .ratio img,
.product-slider-nav .ratio img{
    object-fit: contain;
}
/* ---------- /ratio, fit ---------- */


/* ---------- dropdown ---------- */
/*.btn[data-bs-toggle="dropdown"]{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn[data-bs-toggle="dropdown"]::after{
    flex-shrink: 0;
    content: "";
    width: 15px;
    height: 15px;
    background: url(../../images/icons/chevron.svg) center no-repeat;
    background-size: 100% auto;
    transition: transform 0.15s cubic-bezier(0,0,.2,1);
}
.btn[data-bs-toggle="dropdown"][aria-expanded="true"]::after{
    transform: rotate(180deg);
}
*/

[data-bs-toggle="dropdown"] .i-toggle{
    transition: transform 0.15s cubic-bezier(0,0,.2,1);
}
[data-bs-toggle="dropdown"].show .i-toggle{
    transform: rotate(-180deg);
}

.dropdown-menu{
    --bs-dropdown-spacer: 0.375rem;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-color: #E6E9EF;
    --bs-dropdown-border-radius: 1rem;
    --bs-dropdown-padding-x: 0.75rem;
    --bs-dropdown-padding-y: 0.75rem;
    --bs-dropdown-box-shadow:
            0 4px 32px 0 rgba(0,0,0,.15),
            0 24px 64px 0 rgba(0,0,0,.12),
            0 12px 16px -4px rgba(10,13,18,.08),
            0 4px 6px -2px rgba(10,13,18,.03),
            0 2px 2px -1px rgba(10,13,18,.04);

    --bs-dropdown-item-border-radius: calc(var(--dropdown-item-size) / 2);
    --bs-dropdown-link-color: var(--bs-secondary-text-emphasis);
    --bs-dropdown-link-bg: var(--btn-light-subtle);
    --bs-dropdown-link-hover-color: var(--bs-secondary-text-emphasis);
    --bs-dropdown-link-hover-bg: var(--btn-light-subtle-hover);
    --bs-dropdown-link-active-color: #121212;
    --bs-dropdown-link-active-bg: var(--btn-light-subtle-active);
    --bs-dropdown-item-padding-x: 1.125rem;
    --bs-dropdown-item-padding-y: 0.75rem;
    --bs-dropdown-font-size: 14px;

    --dropdown-item-size: 48px;
    --dropdown-item-gap: 0.5rem;

    --dropdown-icon-size: 24px;

    box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-menu ul{
    list-style: none;
}
.dropdown-item{
    display: flex;
    align-items: center;
    gap: var(--dropdown-item-gap);
    min-height: var(--dropdown-item-size);
    background-color: var(--bs-dropdown-link-bg);
    font-weight: 500;
}
div.dropdown-item{
    --bs-dropdown-link-hover-color: var(--bs-dropdown-link-color);
    --bs-dropdown-link-hover-bg: var(--bs-dropdown-link-bg);
    --bs-dropdown-link-active-color: var(--bs-dropdown-link-color);
    --bs-dropdown-link-active-bg: var(--bs-dropdown-link-bg);
}

.dropdown-item img,
.dropdown-item svg{
    flex-shrink: 0;
    width: var(--dropdown-icon-size);
    height: auto;
}

nav.dropdown-menu ul,
.dropdown-menu nav ul{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dropdown-item + .dropdown-item{
    margin-top: 0.5rem;
}

/*@media (min-width: 992px) {
    .dropdown-menu{
        --bs-dropdown-padding-x: 1rem;
        --bs-dropdown-padding-y: 1rem;
    }
}*/

/* --- dropdown popover --- */
.popover-dropdown-menu,
.dropdown-popover .dropdown-menu{
    --bs-dropdown-padding-x: 0.75rem;
    --bs-dropdown-padding-y: 0.75rem;
    --bs-dropdown-min-width: 208px;
    --bs-dropdown-border-width: 1px;
    --bs-dropdown-border-color: #F0F0F0;
    --bs-dropdown-box-shadow:
            0 1px 1px 0 rgba(0,0,0,.03),
            0 3px 3px -1px rgba(0,0,0,.03),
            0 -10px 20px -12px rgba(0,0,0,.03),
            0 0 32px -16px rgba(0,0,0,.03);
    --bs-dropdown-border-radius: 1rem;

    width: var(--bs-dropdown-min-width);
}
.popover-dropdown-menu[data-popper-placement="bottom-start"],
.popover-dropdown-menu[data-popper-placement="bottom-end"],
.dropdown-popover:not(.dropup) .dropdown-menu{
    border-top-width: 0;
    margin-top: var(--bs-dropdown-spacer) !important;
}
.popover-dropdown-menu[data-popper-placement="top-start"],
.popover-dropdown-menu[data-popper-placement="top-end"],
.dropdown-popover.dropup .dropdown-menu{
    border-bottom-width: 0;
    margin-bottom: var(--bs-dropdown-spacer) !important;
}
@media (min-width: 768px) {
    .popover-dropdown-menu,
    .dropdown-popover .dropdown-menu {
        --bs-dropdown-min-width: 280px;
    }
}
/* ---------- /dropdown popover ---------- */


/* ---------- dropdown select ---------- */
.dropdown-select{
    --dropdown-menu-width: 100%;
}
.dropdown-select [data-bs-toggle="dropdown"]{
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-secondary-color);

    width: var(--dropdown-menu-width);
}
.dropdown-select [data-bs-toggle="dropdown"] .i-chevron{
    width: 20px;
    margin-left: auto;
}

.dropdown-select .dropdown-menu{
    --bs-dropdown-spacer: 0.5rem;
    --bs-dropdown-padding-x: 1rem;
    --bs-dropdown-padding-y: 1rem;
    --bs-dropdown-border-radius: 1.625rem;

    --bs-dropdown-item-padding-x: 0rem;
    --bs-dropdown-item-padding-y: 0rem;
    --bs-dropdown-link-color: rgba(var(--bs-secondary-color-rgb),.8);
    --bs-dropdown-link-hover-color: var(--bs-secondary-color);
    --bs-dropdown-link-active-color: var(--bs-secondary-color);
    --bs-dropdown-link-bg: transparent;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-bg: transparent;

    --dropdown-item-size: auto;

    width: var(--dropdown-menu-width);
}

.dropdown-select ul{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dropdown-select .dropdown-item::after{
    flex-shrink: 0;
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background: url(../../images/icons/check_solid_primary.svg) center no-repeat;
    background-size: 100% auto;
    margin-left: auto;
    opacity: 0;
}
.dropdown-select .dropdown-item.active::after{
    opacity: 1;
}

@media (min-width: 576px) {
    .dropdown-select{
        --dropdown-menu-width: 270px;
    }
}
/* ---------- /dropdown select ---------- */


/* ---------- calendar ---------- */
body .air-datepicker{
    --adp-width: 312px;
    --adp-background-color: #fff;
    --adp-background-color-hover: var(--bs-light-bg-subtle);
    --adp-border-radius: 1rem;
    --adp-padding: 0.75rem;

    --adp-color: var(--bs-secondary-text-emphasis);
    --adp-font-family: var(--font-family);
    --adp-font-size: 14px;

    --adp-nav-height: 2rem;
    --adp-nav-color-secondary: var(--bs-secondary);
    --adp-nav-action-size: 2rem;
    --adp-nav-arrow-color: #B1BACE;

    --adp-color-current-date: var(--bs-primary);
    --adp-day-cell-height: 2.5rem;
    --adp-cell-border-radius: 50%;
    --adp-color-other-month: #B1BACE;
    --adp-color-other-month-hover: var(--bs-tertiary-color);
    --adp-color-disabled: var(--bs-secondary-bg-subtle);
    --adp-cell-background-color-hover: var(--adp-background-color-hover);
    --adp-cell-background-color-selected: var(--bs-primary);
    --adp-cell-background-color-selected-hover: var(--bs-primary);


    border: none;
    box-shadow: var(--form-control-hover-shadow) !important;
    font-weight: 500;
}

.air-datepicker-global-container{
    z-index: 1500;
}

.air-datepicker--pointer{
    display: none !important;
}

.air-datepicker .air-datepicker-nav--action path {
    stroke: var(--bs-secondary);
}

.air-datepicker .air-datepicker--content{
    padding-top: 0;
    padding-bottom: 1rem;
}
.air-datepicker .air-datepicker-body--day-name{
    color: inherit;
    font-size: inherit;
}
.air-datepicker .air-datepicker-cell.-disabled-{
    pointer-events: none;
}
.air-datepicker .air-datepicker-cell.-month-,
.air-datepicker .air-datepicker-cell.-year-{
    border-radius: 0.25rem;
}
/* ---------- /calendar ---------- */


/* ---------- item with icon ---------- */
.item-with-icon{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-with-icon .title{
    color: var(--bs-dark);
    font-weight: bold;
}
.item-with-icon .text{
    color: var(--bs-tertiary-color);
    font-size: 12px;
}

.item-with-icon > i{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ---------- /item with icon ---------- */


/* ---------- table ---------- */
.table{
    --bs-table-color: inherit;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: inherit;
    --bs-table-striped-bg: transparent;

    --td-px: 0.5rem;
    --td-py: 0.625rem;
}

.table-striped{
    --bs-border-width: 0;
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: #fff;
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-striped-bg: #F8F9FB;

    --tr-border-radius: 0.75rem;
    --td-px: 0.75rem;
}
.table-striped td:first-child{
    border-top-left-radius: var(--tr-border-radius);
    border-bottom-left-radius: var(--tr-border-radius);
}
.table-striped td:last-child{
    border-top-right-radius: var(--tr-border-radius);
    border-bottom-right-radius: var(--tr-border-radius);
}

.table>:not(caption)>*>* {
    padding: var(--td-py) var(--td-px);
}

@media (min-width: 768px) {
    .table{
        --td-px: 0.75rem;
        --td-py: 0.75rem;
    }
    .table-striped{
        --td-px: 1rem;
    }
}
/* ---------- /table ---------- */


/* ---------- card ---------- */
.card{
    /*--bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;*/
    --bs-card-bg: #fff;
    --bs-card-border-color: var(--bs-card-bg);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 1.5rem;
    --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - (var(--bs-border-width)));
    --bs-card-box-shadow: none;

    --bs-card-title-color: var(--bs-heading-color);

    --card-border-radius-lg: clamp(1.5rem, 1.15rem + 0.971vw, 2rem);
    --card-border-radius-xl: clamp(1.5rem, 0.801rem + 1.942vw, 2.5rem);

    /*--bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;*/
    /*--bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;*/

    box-shadow: var(--bs-card-box-shadow);
}
.card-rounded-lg{
    --bs-card-border-radius: var(--card-border-radius-lg);
}
.card-rounded-xl{
    --bs-card-border-radius: var(--card-border-radius-xl);
}

.card-shadow{
    --bs-card-box-shadow: 0 16px 30px 0 rgba(0,0,0,.02);
}
.card-shadow-lg{
    --bs-card-box-shadow: 0 4px 32px rgba(0,0,0,.08);
}

/* --- btn card --- */
.btn-card{
    --bs-card-spacer-y: 0.75rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-border-width: 1px;
    --bs-card-border-radius: 1.25rem;

    --bs-card-bg: #FCFCFD;
    --bs-card-border-color: #E6E9EF;
    --bs-card-box-shadow: 0 1px 2px 0 rgba(10,13,18,.05);

    --bs-card-color: #737373;
    --bs-card-title-color: #171717;
    --bs-card-title-spacer-y: 0.125rem;
}
a.btn-card:hover,
button.btn-card:hover{
    --bs-card-box-shadow: 0 4px 12px 0 rgba(10,13,18,.09);
}
.btn-card .card-body{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.btn-card .card-body > img{
    flex-shrink: 0;
    width: 1.5rem;
}
.btn-card .card-body > div{
    flex-grow: 1;
    font-size: 12px;
    font-weight: 500;
}
.btn-card .card-title{
    display: block;
    font-size: 14px;
    font-weight: inherit;
}
.btn-card .i-wrap{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: rgba(0,0,0,.1);
    border-radius: 50%;
    transition: background-color 0.15s ease-in-out;
}
.btn-card .i-wrap img{
    width: 1.5rem;
}
a.btn-card:hover .i-wrap,
button.btn-card:hover .i-wrap{
    background-color: rgba(0,0,0,.05);
}
a.btn-card:active .i-wrap,
button.btn-card:active .i-wrap{
    background-color: rgba(0,0,0,.13);
}


/* --- radius --- */
.card-rounded-1{
    border-radius: 0.5rem;
}
.card-rounded-2{
    border-radius: 1rem;
}
.card-rounded-3{
    border-radius: 1.5rem;
}
.card-rounded-4{
    border-radius: 2rem;
}
.card-rounded-5{
    border-radius: 2.5rem;
}


/* --- spacing --- */

/* 1 */
.card-p-1,
.card-px-1{
    --bs-card-spacer-x: 0.5rem;
}
.card-p-1,
.card-py-1{
    --bs-card-spacer-y: 0.5rem;
}
/* 2 */
.card-p-2,
.card-px-2{
    --bs-card-spacer-x: 0.75rem;
}
.card-p-2,
.card-py-2{
    --bs-card-spacer-y: 0.75rem;
}
/* 3 */
.card-p-3,
.card-px-3{
    --bs-card-spacer-x: 1rem;
}
.card-p-3,
.card-py-3{
    --bs-card-spacer-y: 1rem;
}
/* 4 */
.card-p-4,
.card-px-4{
    --bs-card-spacer-x: 1.25rem;
}
.card-p-4,
.card-py-4{
    --bs-card-spacer-y: 1.25rem;
}
/* 5 */
.card-p-5,
.card-px-5{
    --bs-card-spacer-x: 1.5rem;
}
.card-p-5,
.card-py-5{
    --bs-card-spacer-y: 1.5rem;
}
/* 6 */
.card-p-6,
.card-px-6{
    --bs-card-spacer-x: 2rem;
}
.card-p-6,
.card-py-6{
    --bs-card-spacer-y: 2rem;
}
/* 7 */
.card-p-7,
.card-px-7{
    --bs-card-spacer-x: 2.5rem;
}
.card-p-7,
.card-py-7{
    --bs-card-spacer-y: 2.5rem;
}

@media (min-width: 992px) {
    /* --- radius --- */
    .card-rounded-lg-1{
        border-radius: 0.5rem;
    }
    .card-rounded-lg-2{
        border-radius: 1rem;
    }
    .card-rounded-lg-3{
        border-radius: 1.5rem;
    }
    .card-rounded-lg-4{
        border-radius: 2rem;
    }
    .card-rounded-lg-5{
        border-radius: 2.5rem;
    }


    /* --- spacing --- */

    /* 1 */
    .card-p-lg-1,
    .card-px-lg-1{
        --bs-card-spacer-x: 0.5rem;
    }
    .card-p-lg-1,
    .card-py-lg-1{
        --bs-card-spacer-y: 0.5rem;
    }
    /* 2 */
    .card-p-lg-2,
    .card-px-lg-2{
        --bs-card-spacer-x: 0.75rem;
    }
    .card-p-lg-2,
    .card-py-lg-2{
        --bs-card-spacer-y: 0.75rem;
    }
    /* 3 */
    .card-p-lg-3,
    .card-px-lg-3{
        --bs-card-spacer-x: 1rem;
    }
    .card-p-lg-3,
    .card-py-lg-3{
        --bs-card-spacer-y: 1rem;
    }
    /* 4 */
    .card-p-lg-4,
    .card-px-lg-4{
        --bs-card-spacer-x: 1.25rem;
    }
    .card-p-lg-4,
    .card-py-lg-4{
        --bs-card-spacer-y: 1.25rem;
    }
    /* 5 */
    .card-p-lg-5,
    .card-px-lg-5{
        --bs-card-spacer-x: 1.5rem;
    }
    .card-p-lg-5,
    .card-py-lg-5{
        --bs-card-spacer-y: 1.5rem;
    }
    /* 6 */
    .card-p-lg-6,
    .card-px-lg-6{
        --bs-card-spacer-x: 2rem;
    }
    .card-p-lg-6,
    .card-py-lg-6{
        --bs-card-spacer-y: 2rem;
    }
    /* 7 */
    .card-p-lg-7,
    .card-px-lg-7{
        --bs-card-spacer-x: 2.5rem;
    }
    .card-p-lg-7,
    .card-py-lg-7{
        --bs-card-spacer-y: 2.5rem;
    }
}
@media (min-width: 1200px) {
    /* --- radius --- */
    .card-rounded-xl-1{
        border-radius: 0.5rem;
    }
    .card-rounded-xl-2{
        border-radius: 1rem;
    }
    .card-rounded-xl-3{
        border-radius: 1.5rem;
    }
    .card-rounded-xl-4{
        border-radius: 2rem;
    }
    .card-rounded-xl-5{
        border-radius: 2.5rem;
    }


    /* --- spacing --- */

    /* 1 */
    .card-p-xl-1,
    .card-px-xl-1{
        --bs-card-spacer-x: 0.5rem;
    }
    .card-p-xl-1,
    .card-py-xl-1{
        --bs-card-spacer-y: 0.5rem;
    }
    /* 2 */
    .card-p-xl-2,
    .card-px-xl-2{
        --bs-card-spacer-x: 0.75rem;
    }
    .card-p-xl-2,
    .card-py-xl-2{
        --bs-card-spacer-y: 0.75rem;
    }
    /* 3 */
    .card-p-xl-3,
    .card-px-xl-3{
        --bs-card-spacer-x: 1rem;
    }
    .card-p-xl-3,
    .card-py-xl-3{
        --bs-card-spacer-y: 1rem;
    }
    /* 4 */
    .card-p-xl-4,
    .card-px-xl-4{
        --bs-card-spacer-x: 1.25rem;
    }
    .card-p-xl-4,
    .card-py-xl-4{
        --bs-card-spacer-y: 1.25rem;
    }
    /* 5 */
    .card-p-xl-5,
    .card-px-xl-5{
        --bs-card-spacer-x: 1.5rem;
    }
    .card-p-xl-5,
    .card-py-xl-5{
        --bs-card-spacer-y: 1.5rem;
    }
    /* 6 */
    .card-p-xl-6,
    .card-px-xl-6{
        --bs-card-spacer-x: 2rem;
    }
    .card-p-xl-6,
    .card-py-xl-6{
        --bs-card-spacer-y: 2rem;
    }
    /* 7 */
    .card-p-xl-7,
    .card-px-xl-7{
        --bs-card-spacer-x: 2.5rem;
    }
    .card-p-xl-7,
    .card-py-xl-7{
        --bs-card-spacer-y: 2.5rem;
    }
}


/* --- ---- */
@media (max-width: 767px) {
    .card.card-md{
        --bs-card-spacer-y: 0rem !important;
        --bs-card-spacer-x: 0rem !important;
        --bs-card-bg: transparent !important;
        --bs-card-border-width: 0 !important;
        --bs-card-border-radius: 0rem !important;
    }
}
@media (max-width: 991px) {
    .card.card-lg{
        --bs-card-spacer-y: 0rem !important;
        --bs-card-spacer-x: 0rem !important;
        --bs-card-bg: transparent !important;
        --bs-card-border-width: 0 !important;
        --bs-card-border-radius: 0rem !important;
    }
}
/* ---------- /card ---------- */


/* ---------- tabs ---------- */
.nav-tabs{
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: #F1F2F4;
    --bs-nav-tabs-border-radius: 0;

    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--bs-dark);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: var(--bs-warning);

    --bs-nav-link-color: var(--bs-tertiary-color);
    --bs-nav-link-hover-color: var(--bs-nav-tabs-link-active-color);
    --bs-nav-link-padding-x: 1.75rem;
    --bs-nav-link-padding-y: 0.75rem;
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-font-weight: 400;

    display: flex;
    flex-wrap: wrap;
    min-height: 3.25rem;

}
.nav-tabs .nav-link{
    --bs-nav-tabs-border-width: 0;
    position: relative;
}
.nav-tabs .nav-link::after{
    content: "";
    width: 100%;
    border-bottom: 2px solid var(--bs-nav-tabs-link-active-bg);
    position: absolute;
    bottom: 0;
    left: 0;
}
.nav-tabs .nav-link.active::after{
    border-bottom-color: var(--bs-nav-tabs-link-active-border-color);
}

.tab-content .text-wrap{
    margin-bottom: 1.5rem;
    color: var(--bs-secondary-color);
    font-size: 14px;
}
.tab-content .text-wrap h1,
.tab-content .text-wrap h2,
.tab-content .text-wrap h3,
.tab-content .text-wrap h4,
.tab-content .text-wrap h5,
.tab-content .text-wrap h6{
    color: var(--bs-dark);
    font-weight: 600;
}

.tab-content .table{
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .tab-content.card-body{
        --bs-card-spacer-y: 1.5rem;
        --bs-card-spacer-x: 1.5rem;
    }
}
@media (min-width: 1200px) {
    .tab-content.card-body{
        --bs-card-spacer-y: 2rem;
        --bs-card-spacer-x: 2rem;
    }
}
/* ---------- /tabs ---------- */


/* ---------- accordion ---------- */
.i-accordion-toggle{
    margin-left: auto;
    transition: transform 0.2s ease-in-out;
}
.accordion-is-open .i-accordion-toggle{
    transform: rotate(-180deg);
}
/* ---------- /accordion ---------- */


/* ---------- modal ---------- */
.modal-backdrop{
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.25;
}
.modal{
    --bs-modal-bg: #fff;
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 2rem;

    --bs-modal-header-border-width: 0;

    --bs-modal-footer-border-width: 0;
    /*--bs-modal-footer-gap: 0rem;*/

    --modal-close-btn-spacing: 0.875rem;
}
.modal-dialog{
    --bs-modal-width: 474px;
    --bs-modal-padding: clamp(1.5rem, 0.808rem + 1.923vw, 2rem);

    --modal-padding-x: var(--bs-modal-padding);
    --modal-padding-y: var(--bs-modal-padding);
}
.modal-sm{
    --bs-modal-width: 364px;
}
.modal-lg{
    --bs-modal-width: 574px;
    --bs-modal-padding: clamp(1.5rem, 0.115rem + 3.846vw, 2.5rem);

    --modal-close-btn-spacing: 1rem;
}
.modal-xl{
    --bs-modal-width: 880px;
    --bs-modal-padding: clamp(1.5rem, -0.577rem + 5.769vw, 3rem);
    --bs-modal-border-radius: clamp(2rem, 1.308rem + 1.923vw, 2.5rem);

    --modal-close-btn-spacing: 1.25rem;
}

.modal-close-btn:not(.btn){
    --icon-size: 1.5rem;
    display: flex;
    background-color: transparent;
    border: 0;
    padding: 0;
}
.modal-close-btn:not(.btn) img{
    width: var(--icon-size);
    height: auto;
}

.modal-content > .modal-close-btn{
    position: absolute;
    top: var(--modal-close-btn-spacing);
    right: var(--modal-close-btn-spacing);
    z-index: 2;
}

.modal-header .modal-close-btn{
    margin-left: auto;
}

.modal-title{
    color: #000;
    font-size: var(--fs-h3);
    font-weight: bold;
}

.modal-header{
    padding-bottom: 0;
}
.modal-body{
    padding: var(--modal-padding-y) var(--modal-padding-x);
}
.modal-footer{
    /*flex-direction: column;
    align-items: flex-start;*/
    padding-top: 1.5rem;
}

.modal-body .os-scrollbar {
    --os-size: calc(var(--os-handle-width) + var(--os-padding-perpendicular) * 2);
    --os-padding-perpendicular: 4px;
    --os-padding-axis: 0;
    --os-handle-width: 0.5rem;
    --os-handle-border-radius: var(--os-size);
    --os-handle-bg: #E8EBED;
    --os-handle-bg-hover: #DDE0E4;
    --os-handle-bg-active: #DDE0E4;
}
.modal-close-btn + .modal-body .os-scrollbar-vertical,
.modal-body:first-child .os-scrollbar-vertical{
    padding-top: var(--modal-padding-y);
}
.modal-body:last-child .os-scrollbar-vertical{
    padding-bottom: var(--modal-padding-y);
}


.modal-alert-with-product .modal-dialog{
    --bs-modal-width: 520px;
}
.modal-alert-with-product .products-grid-item{
    max-width: 260px;
    margin: 0 auto;
}


@media (min-width: 768px) {
    .modal-footer .btn{
        --bs-btn-padding-x: 2rem;
        --bs-btn-font-weight: 700;
        --btn-gap: 0.125rem;
    }
    .modal-footer .btn-back > * {
        opacity: 0.67;
    }
}
/* ---------- /modal ---------- */


/* ---------- swiper slider ---------- */
.swiper{
    --swiper-btn-rgba: var(--bs-white-rgb);

    --swiper-pagination-bullet-horizontal-gap: 0.5rem;
    --swiper-pagination-bullet-width: 0.75rem;
    --swiper-pagination-bullet-height: 0.75rem;
    --swiper-pagination-bullet-border-radius: 0.5rem;
    --swiper-pagination-color: rgba(var(--swiper-btn-rgba),1);
    --swiper-pagination-bullet-inactive-color: rgba(var(--swiper-btn-rgba),.14);
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-inactive-opacity: 1;

    z-index: 1;
}

/* btn */
.btn-swiper{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: 2rem;

    --bs-btn-color: #000;
    --bs-btn-bg: rgba(var(--swiper-btn-rgba),.8);
    --bs-btn-border-color: rgba(var(--swiper-btn-rgba),.2);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: rgba(var(--swiper-btn-rgba),1);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: rgba(0,0,0,.4);
    --bs-btn-active-bg: rgba(var(--swiper-btn-rgba),1);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
    --bs-btn-disabled-color: rgba(0,0,0,.25);
    --bs-btn-disabled-bg: rgba(var(--swiper-btn-rgba),.14);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);

    --bs-btn-box-shadow: 0 0 60px 0 rgba(0,0,0,.16);

    backdrop-filter: blur(8px);
}
.btn-swiper svg *{
    fill: var(--bs-btn-color);
    transition: fill .1s ease-in-out,stroke .1s ease-in-out;
}
.btn-swiper:hover svg *{
    fill: var(--bs-btn-hover-color);
}
.btn-swiper:active svg *,
.btn-swiper.active svg *{
    fill: var(--bs-btn-active-color);
}
.btn-swiper.swiper-button-disabled{
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    pointer-events: none;
}
.btn-swiper.swiper-button-disabled svg *{
    fill: var(--bs-btn-disabled-color);
}

/* pagination */
.swiper .swiper-pagination{
    display: flex;
    gap: var(--swiper-pagination-bullet-horizontal-gap);
}
.swiper .swiper-pagination-bullet {
    border: 1px solid rgba(255,255,255,.2);
    margin: 0 !important;

    transition: width .15s ease-in-out,background-color .15s ease-in-out;
}
.swiper .swiper-pagination-bullet-active {
    --swiper-pagination-bullet-width: 2rem;
}

/* --- controls wrap --- */
.swiper-controls-wrap{
    --swiper-btn-pos-y: auto;
    --swiper-btn-pos-x: auto;
    --swiper-pagination-bottom: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding-top: 0.75rem;
}
.swiper-controls-wrap .btn-swiper,
.swiper-controls-wrap .swiper-pagination{
    position: relative;
    transform: none;
}
.swiper-controls-wrap .swiper-pagination{
    width: auto !important;
}

@media (min-width: 576px) {
    .swiper-controls-wrap{
        justify-content: center;
        padding: 0 0 1rem;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 5;
    }
}
@media (max-width: 575px) {
    .swiper-controls-wrap .swiper-pagination-bullet{
        box-shadow: 0 0 8px 0 rgba(0,0,0,.07);
    }
}


/* --- carousel --- */
.swiper.carousel{
    --btn-pos-x: -0.5rem;
    overflow: visible;
}
.carousel .btn-swiper{
    --bs-btn-box-shadow: 0 0 56px 0 rgba(0,0,0,.25);

    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
}
.carousel .btn-swiper-prev{
    left: var(--btn-pos-x);
}
.carousel .btn-swiper-next{
    right: var(--btn-pos-x);
}

/* --- card --- */
.card-carousel{
    --bs-card-border-radius: clamp(1.125rem, 0.164rem + 2.67vw, 2.5rem);

    width: 100%;
    overflow: hidden;
}
.card-carousel .swiper.carousel{
    --overlay-gradient-width: 200px;
    --btn-pos-x: calc(var(--bs-card-spacer-x) - 0.5rem);

    /*padding: 0 var(--bs-card-spacer-x);*/
    margin: 0 calc(var(--bs-card-spacer-x) * -1);
}

.card-carousel .btn-swiper.swiper-button-disabled{
    display: none;
}
.card-carousel .swiper.carousel .swiper-slide:first-child,
.card-carousel .swiper.carousel .swiper-slide:last-child{
    width: calc(var(--slide-width) + var(--bs-card-spacer-x));
}
.card-carousel .swiper.carousel .swiper-slide:first-child{
    padding-left: var(--bs-card-spacer-x);
}
.card-carousel .swiper.carousel .swiper-slide:last-child{
    padding-right: var(--bs-card-spacer-x);
}

@media (min-width: 768px) {
    .card-carousel{
        --bs-card-spacer-y: clamp(1rem, -0.823rem + 3.797vw, 2.5rem);
        --bs-card-spacer-x: clamp(1rem, -0.823rem + 3.797vw, 2.5rem);
    }
    .card-carousel .swiper:not(.is-end)::after{
        content: "";
        width: var(--overlay-gradient-width);
        height: 100%;
        background: #fff;
        background: linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        pointer-events: none;
    }
}

@media (max-width: 767px) {
    .card-carousel{
        width: auto;
        margin-left: calc(var(--app-content-px) * -1);
        margin-right: calc(var(--app-content-px) * -1);
    }
    .card-carousel .swiper.carousel{
        margin-bottom: 0.5rem;
    }
}
/* ---------- /swiper slider ---------- */


/* ---------- categories ---------- */
.categories-grid-item{
    --bg: var(--btn-light-subtle);
    --hover-bg: var(--btn-light-subtle-hover);
    --active-bg: var(--btn-light-subtle-active);
    --color: #000;

    --border-radius: 1rem;
    --text-fs: 12px;
    --title-fs: 14px;

    --info-wrap-width: 100%;
    --info-wrap-px: 1rem;
    --info-wrap-py: 1rem;
    --info-wrap-gap: 0.375rem;

    --img-height: 8rem;

    display: flex;
    width: 100%;
    height: var(--img-height);
    background-color: var(--bg);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;

    color: var(--color);
    font-size: var(--text-fs);

    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out;
}
.categories-grid-item .info-wrap{
    display: flex;
    flex-direction: column;
    gap: var(--info-wrap-gap);
    width: var(--info-wrap-width);
    padding: var(--info-wrap-py) var(--info-wrap-px);
    position: relative;
    z-index: 2;
}
.categories-grid-item .title{
    color: inherit;
    font-size: var(--title-fs);
    line-height: 1.35;
}
.categories-grid-item .text{
    display: none;
    color: inherit;
    font-size: inherit;
}
.categories-grid-item > img{
    flex-shrink: 0;
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.categories-grid-item:hover{
    background-color: var(--hover-bg);
}
.categories-grid-item:active,
.categories-grid-item.active{
    background-color: var(--active-bg);
}

/* container */
.categories-grid-container{
    --row-gutter: 0.5rem;

    container-type: inline-size;
    container-name: categories-grid;
}
.categories-grid-container > .row{
    --bs-gutter-x: var(--row-gutter);
    --bs-gutter-y: var(--row-gutter);
}

@container categories-grid (min-width: calc(576px - 32px)){
    .categories-grid-container {
        --row-gutter: 1rem;
    }

    .categories-grid-item{
        --bg: #fff;

        --border-radius: clamp(1rem, 0.301rem + 1.942vw, 2rem);
        --text-fs: clamp(0.75rem, 0.575rem + 0.485vw, 1rem);
        --title-fs: clamp(0.875rem, 0.613rem + 0.728vw, 1.25rem);

        --info-wrap-width: 70%;
        --info-wrap-px: clamp(1rem, 0.301rem + 1.942vw, 2rem);
        --info-wrap-py: clamp(1rem, 0.301rem + 1.942vw, 2rem);
        --info-wrap-gap: clamp(0.375rem, 0.113rem + 0.728vw, 0.75rem);

        --img-height: clamp(8rem, 6.864rem + 3.155vw, 9.625rem)
    }
    .categories-grid-item .text{
        display: block;
    }
}

@container categories-grid (max-width: calc(575px - 32px)) {
    .categories-grid-container > .row > div:nth-child(odd):last-child{
        width: 100%;
    }
}
/* ---------- /categories ---------- */


/* ---------- main slider ---------- */
.section-main-slider{
    overflow: hidden;
}
.main-slider{
    --slide-min-height: 200px;
    --slide-content-width: 100%;
    --slide-content-px: 1.25rem;
    --slide-content-py: 1.25rem;
    --slide-border-radius: 1.75rem;
    --slide-title-fs: 1.5rem;
    --slide-text-fs: 12px;
    /*--bs-aspect-ratio: 500px;*/
}

.main-slider .swiper-slide{
    border-radius: var(--slide-border-radius);
    padding: var(--slide-content-py) var(--slide-content-px);
    overflow: hidden;
}
.main-slider .swiper-slide{
    display: flex;
    min-height: var(--slide-min-height);
}
.main-slider .swiper-slide > figure{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.main-slider .slide-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: var(--slide-content-width);
    /*max-width: calc(540px + var(--slide-content-px) * 2);
    padding: var(--slide-content-py) var(--slide-content-px);*/
    position: relative;
    z-index: 2;
}
.main-slider .slide-content .title{
    color: #fff;
    font-size: var(--slide-title-fs);
    font-weight: bold;
}
.main-slider .slide-content .text{
    color: #fff;
    font-size: var(--slide-text-fs);
    margin-top: 0.75rem;
}
.main-slider .slide-content .btn-wrap{
    padding-top: 1.5rem;
    margin-top: auto;
}
.main-slider .slide-content .btn-wrap .row{
    --bs-gutter-x: 0.75rem;
}
.main-slider .slide-content .btn{
    --bs-btn-padding-x: 1.5rem;
}

.main-slider .btn{
    --bs-btn-border-width: 0;
}
.main-slider .btn-light-subtle{
    --btn-light-subtle: rgba(var(--bs-light-rgb),.24);
    --btn-light-subtle-hover: rgba(var(--bs-light-rgb),.5);
    --btn-light-subtle-active: rgba(227,230,237,.5);
}

@media (min-width: 576px) {
    .main-slider{
        --slide-min-height: clamp(21.25rem, -3.064rem + 39.216vw, 31.25rem);
        --slide-content-width: 380px;
        --slide-content-px: clamp(1.25rem, -0.498rem + 4.854vw, 3.75rem);
        --slide-content-py: clamp(1.25rem, -0.498rem + 4.854vw, 3.75rem);
        --slide-border-radius: 2.5rem;
        --slide-title-fs: 2.5rem;
        --slide-text-fs: 0.875rem;
    }
    .main-slider .swiper-slide{
        padding-bottom: 4rem;
    }
    .main-slider .slide-content .btn-wrap{
        margin-top: 0;
    }
    .main-slider {
        border-radius: var(--slide-border-radius);
    }
}
@media (min-width: 992px) {
    .main-slider{
        --slide-content-width: clamp(25rem, 3.725rem + 34.314vw, 33.75rem);
        --slide-title-fs: clamp(3rem, 0.569rem + 3.922vw, 4rem);
        --slide-text-fs: 1rem;
    }
}
@media (max-width: 767px) {
    .section-main-slider{
        width: auto;
        margin-left: calc(var(--app-content-px) * -1);
        margin-right: calc(var(--app-content-px) * -1);
    }
    .section-main-slider .swiper{
        padding: 0 var(--app-content-px);
    }
}
/*@media (max-width: 575px) {
    .section-main-slider,
    .main-slider{
        overflow: visible !important;
    }
}*/
/* ---------- /main slider ---------- */


/* ---------- brands ---------- */
.logos-grid{
    --bs-gutter-x: 0.625rem;
    --bs-gutter-y: 0.625rem;
}
.logos-grid-item{
    --item-height: 143px;
    --item-padding: 1.5rem;
    --item-border-radius: 1.5rem;

    --item-bg: #fff;
    --item-hover-bg: rgba(255,255,255,0.5);
    --item-active-bg: rgba(255,255,255,0.7);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--item-height);
    background-color: var(--item-bg);
    border-radius: var(--item-border-radius);
    padding: var(--item-padding);
    transition: background-color 0.15s ease-in-out;
}
.logos-grid-item > img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.logos-grid-item:hover{
    background-color: var(--item-hover-bg);
}
.logos-grid-item:active{
    background-color: var(--item-active-bg);
}
@media (min-width: 768px) {
    .logos-grid{
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: 1.25rem;
    }
}

/* carousel */
.logos-carousel{
    --slide-width: 102px;
}
.logos-carousel .swiper-slide{
    width: var(--slide-width);
}

.logos-carousel .logos-grid-item{
    --item-padding: 0.75rem;
    --item-border-radius: 0.875rem;

    --item-bg: rgba(var(--bs-light-rgb),.8);
    --item-hover-bg: var(--bs-light);
    --item-active-bg: #E3E6ED;

    height: calc(var(--slide-width) * 0.805);
    max-height: var(--item-height);
}

@media (min-width: 576px) {
    .logos-carousel{
        --slide-width: clamp(6.375rem, 1.99rem + 12.179vw, 11.125rem);
    }
    .logos-carousel .logos-grid-item{
        --item-padding: clamp(0.75rem, 0.058rem + 1.923vw, 1.5rem);
        --item-border-radius: clamp(0.875rem, 0.298rem + 1.603vw, 1.5rem);
    }
}
/* ---------- /brands ---------- */


/* ---------- media ---------- */
.media-item,
.media-grid-item{
    --bs-card-spacer-x: 1rem;
    --bs-card-spacer-y: 1rem;
}

.media-item .img-wrap,
.media-grid-item .img-wrap{
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}
.media-item .img-wrap img,
.media-grid-item .img-wrap img{
    transition: transform .15s ease-in-out;
}
.media-item a.img-wrap:hover img,
.media-grid-item a.img-wrap:hover img{
    transform: scale(1.025);
}

.media-item .badge,
.media-grid-item .badge{
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-font-size: 12px;
    --bs-badge-font-weight: bold;
    --badge-size: var(--element-size-2);
}

.media-item .card-body,
.media-grid-item .card-body{
    padding-top: 0.5rem;
    padding-bottom: calc(var(--bs-card-spacer-y) + 0.75rem);
}
.media-item .title,
.media-grid-item .title{
    font-size: 1rem;
}
.media-item .title a:hover,
.media-grid-item .title a:hover{
    text-decoration: underline;
}
.media-item .text-wrap,
.media-grid-item .text{
    color: rgba(18,18,18,.4);
    font-size: 1rem;
    font-weight: 500;
}


/* --- item --- */
.media-item{
    --bs-card-border-width: 2px;
    --bs-card-box-shadow: 0 16px 30px 0 rgba(0,0,0,.02);
}
.media-item .img-wrap{
    aspect-ratio: 1400/818;
    clip-path: shape(from 0% 0%,hline to 100%,vline to 89.32%,line to 77.74% 99.48%,curve to 74.72% 99.95% with 76.76% 99.94%/75.73% 100.09%,line to 0% 89.32%,vline to 0%,close);
    width: calc(100% - 2px);
}


/* --- grid --- */
.media-items-grid{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}
.media-items-grid > div{
    display: flex;
    flex-direction: column;
}
.media-items-grid .media-grid-item{
    flex-grow: 1;
}

/* item */
.media-grid-item{
    --bs-card-border-width: 1px;
    --bs-card-box-shadow: 0 16px 30px 0 rgba(0,0,0,.02);
}

.media-grid-item .img-wrap {
    aspect-ratio: 453/272;
    clip-path: shape(from 0% 0%,hline to 100%,vline to 86.17%,line to 83.49% 96.81%,curve to 69.96% 99.69% with 79.18% 99.58%/74.54% 100.57%,line to 0% 86.17%,vline to 0%,close);
}
.media-grid-item .card-body{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.media-grid-item .row{
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
}
.media-grid-item .title{
    margin-top: 0.25rem;
}
.media-grid-item .text{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (min-width: 576px) {
    .media-item,
    .media-grid-item{
        --bs-card-spacer-x: 1.5rem;
        --bs-card-spacer-y: 1.5rem;
    }

    .media-item .title{
        font-size: 1.25rem;
    }

    .media-grid-item .text{
        -webkit-line-clamp: 3;
    }
}
@media (min-width: 768px) {
    .media-item .title{
        font-size: clamp(1.25rem, -0.083rem + 2.778vw, 2rem);
    }
    .media-grid-item .title{
        font-size: 1.125rem;
    }
}
@media (min-width: 1200px) {
    article .media-item{
        --bs-card-spacer-x: 2rem;
        --bs-card-spacer-y: 2rem;
    }
}
/* ---------- /media ---------- */


/* ---------- products ---------- */
.product-price-wrap{
    display: flex;
    align-items: center;
    gap: 0 0.5rem;
}
.product-price,
.product-price-old{
    line-height: 1;
    white-space: nowrap;
}
.product-price{
    color: var(--product-price-color, #141023);
    font-size: var(--product-price-font-size, 1.125rem);
    font-weight: bold;
}
.product-price-old{
    color: var(--product-price-old-color, var(--bs-tertiary-color));
    font-size: var(--product-price-old-font-size, 0.875rem);
    text-decoration: line-through;
}

.product-title{
    color: var(--product-title-color, #141023);
    font-size: var(--product-title-font-size, 1rem);
    font-weight: var(--product-title-font-weight, 400);
}
.product-title a{
    color: inherit;
}
.product-title a:hover{
    text-decoration: underline;
}


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

.products-grid-item{
    --item-spacing: 0.625rem;
    --item-bg: #fff;
    --item-border-color: rgba(233,236,242,.3);
    --item-border-width: 2px;
    --item-border-radius: 1rem;
    --item-img-aspect-ratio: 100%;
    --item-img-border-radius: 0.375rem;

    --product-title-color: #141023;
    --product-title-font-size: 0.75rem;

    --product-price-color: #141023;
    --product-price-font-size: 0.75rem;
    --product-price-old-color: var(--bs-tertiary-color);
    --product-price-old-font-size: 0.625rem;

    --foo-min-height: 1.875rem;
    --foo-spacing-x: 0.5rem;
    --foo-spacing-y: 0.25rem;

    display: flex;
    flex-direction: column;
    background-color: var(--item-bg);
    border-radius: var(--item-border-radius);
    outline: var(--item-border-width) solid var(--item-border-color);
    padding: var(--item-spacing);
    position: relative;
}
/*.card .products-grid-item{
    --item-border-color: #F8F9FB;
}*/

/* btn compare, btn cart*/
.products-grid-item .btn-compare,
.products-grid-item .btn-cart{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;

    /*--check-icon-opacity: 0;*/
}
/*.products-grid-item .btn-compare > i,
.products-grid-item .btn-cart > i{
    position: relative;
}
.products-grid-item .btn-compare > i::after,
.products-grid-item .btn-cart > i::after{
    content: "";
    width: 12px;
    height: 12px;
    background: url(../../images/icons/check_solid_primary.svg) no-repeat center;
    background-size: 100% auto;
    opacity: var(--check-icon-opacity);
    position: absolute;
    bottom: var(--check-icon-pos);
    right: var(--check-icon-pos);
}
.products-grid-item .btn-compare.is-active,
.products-grid-item .btn-cart.is-active{
    --check-icon-opacity: 1;
}
.products-grid-item .btn-compare{
    --check-icon-pos: -3px;
}
.products-grid-item .btn-cart{
    --check-icon-pos: -1px;
}
.products-grid-item .btn-compare.disabled,
.products-grid-item .btn-cart.disabled{
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-opacity: 0.5;
}*/

/* head row */
.products-grid-item > .row{
    --bs-gutter-x: 0.5rem;

    min-height: var(--element-size-2);
    margin-bottom: 0.75rem;
}
.products-grid-item .badge{
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.5rem;
    --badge-size: var(--element-size-2);
    --badge-line-height: 1;

    vertical-align: top;
}
.products-grid-item .logo-badge{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.25rem;
}
.products-grid-item .logo-badge img{
    max-width: 100px;
    max-height: 24px;
    object-fit: contain;
}

/* btn remove */
.products-grid-item > .btn-remove{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;

    position: absolute;
    top: var(--item-spacing);
    right: var(--item-spacing);
    z-index: 2;
}

/* --- */
.products-grid-item .img-wrap,
.products-grid-item .product-title{
    margin-bottom: 1.25rem;
}

.products-grid-item .img-wrap{
    --bs-aspect-ratio: var(--item-img-aspect-ratio);

    width: 100%;
    border-radius: var(--item-img-border-radius);
    overflow: hidden;
}

.products-grid-item .product-title{
    /*color: var(--product-title-color);
    font-size: var(--product-title-font-size);
    font-weight: normal;*/

    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.products-grid-item .foo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--foo-min-height);
    background-color: var(--bs-light-bg-subtle);
    border-radius: 50px;
    padding: var(--foo-spacing-y) var(--foo-spacing-x);
    margin-top: auto;

    font-size: 14px;
    line-height: 1;
}

.products-grid-item .product-price-wrap{
    flex-wrap: wrap;
}

.products-grid-item .foo .btn-cart{
    margin-top: calc(var(--foo-spacing-y) * -1);
    margin-bottom: calc(var(--foo-spacing-y) * -1);
    margin-right: calc(var(--foo-spacing-x) * -0.75);
}

@media (min-width: 768px) {
    .products-grid{
        --bs-gutter-x: 0.875rem;
        --bs-gutter-y: 0.875rem;
    }

    .products-grid-item {
        --item-border-width: 3px;
        --item-border-radius: 2rem;
        --item-img-border-radius: 0.75rem;
        --item-spacing: 1.25rem;

        --product-title-font-size: 1rem;
        --product-price-font-size: 1.125rem;
        --product-price-old-font-size: 0.875rem;

        --foo-min-height: 2.75rem;
        --foo-spacing-x: 1rem;
        --foo-spacing-y: 0.5rem;
    }
}
@media (max-width: 575px) {
    .products-grid-item > .row {
        --bs-gutter-x: 0.25rem;
    }
    .products-grid-item .btn-favorites{
        --btn-size: var(--element-size-2);
        --icon-size: 1rem;
    }
    .products-grid-item .logo-badge{
        --bs-badge-padding-x: 0.625rem;
    }
    .products-grid-item .logo-badge img {
        max-width: 54px;
    }
}
@media (max-width: 374px) {
    .products-grid-item .logo-badge{
        --bs-badge-padding-x: 0.375rem;
    }
    .products-grid-item .logo-badge img {
        max-width: 50px;
    }
}

/* list */
.products-list-item{
    display: flex;
    align-items: center;
    /*gap: 0.75rem;*/
    border: 1px solid var(--bs-light);
    border-radius: 1.125rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
}
.products-list-item .img-wrap{
    --bs-aspect-ratio: 100%;

    flex-shrink: 0;
    width: 3.5rem;
    border-radius: 0.625rem;
    margin-right: 0.75rem;
}
.products-list-item .product-title{
    --product-title-font-size: 0.875rem;
    --product-title-font-weight: 500;

    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding-right: 0.375rem;
}
.products-list-item .info-wrap:last-child .product-title{
    padding-right: 0;
}
a.products-list-item:hover .product-title{
    text-decoration: underline;
}

.products-list-item .badge-count{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.5rem;
    --bs-badge-border-radius: 0.75rem;
    --bs-badge-color: #000;
    --badge-size: 2.5rem;
    --badge-bg: #F3F4F7;

    flex-shrink: 0;
}
/* ---------- /products ---------- */


/* ---------- products carousel ---------- */
.products-carousel{
    --slide-width: 224px;
}
.products-carousel .swiper-slide{
    display: flex;
    flex-direction: column;
    width: var(--slide-width);
    height: auto;
}
.products-carousel .products-grid-item{
    flex-grow: 1;
}

@media (min-width: 768px) {
    .products-carousel{
        --slide-width: clamp(14rem, 5.949rem + 16.772vw, 20.625rem);
    }
}
/* ---------- /products carousel ---------- */


/* ---------- tags ---------- */
.tag{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1.5rem;
    padding: 0.625rem 1rem;

    color: #141023;
    font-size: 14px;
    line-height: 1.2;
}
.tag .btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 0.25rem;
    --btn-size: 1.125rem;
    --icon-size: 1rem;

    --bs-btn-bg: #DFE3EC;
    --bs-btn-hover-bg: #D4DAE9;
    --bs-btn-active-bg: #CFD6E5;
}
.tag .btn:hover{
    opacity: 0.8;
}

/* --- slider --- */
.tags-slider::after{
    content: "";
    width: 6.25rem;
    height: 100%;
    background: #FFF;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}
.tags-slider .swiper-slide{
    display: flex;
    width: auto;
    padding-right: 0.75rem;
}
.tags-slider .swiper-slide .tag{
    min-height: 2.5rem;
}
.tags-slider .swiper-slide:last-child{
    padding-right: 4rem;
}
/* ---------- /tags ---------- */


/* ---------- filters ---------- */

/* --- top filter --- */
.top-filters-card{
    --bs-card-spacer-y: 0.75rem;
    --bs-card-spacer-x: 0.75rem;

    margin-bottom: 1rem;
}

.top-filters-card .row{
    --bs-gutter-x: 0;
    gap: var(--bs-card-spacer-x);
    margin-left: calc(var(--bs-card-spacer-x) * -1);
}

.top-filters-card .col-slider{
    overflow: hidden;
}
.top-filters-card .tags-slider{
    padding-left: var(--bs-card-spacer-x);
}

.top-filters-card .btn-remove{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: 2.5rem;
}

/* sort */
.sorting-dropdown{
    --form-control-height: var(--element-size-3);
    --form-control-border-radius: 0.625rem;
    --form-control-color: var(--bs-secondary-color);
    --form-control-hover-color: var(--bs-secondary-color);
    --form-control-bg: var(--bs-light);
    --form-control-hover-bg: var(--form-control-bg);
    --form-control-active-bg: var(--form-control-bg);
    --form-control-border-color: var(--bs-light);
    --form-control-fs: 14px;

    min-width: 212px;
}
.sorting-dropdown .form-select{
    background-image: url(../../images/icons/chevron_thin_dark_subtle.svg);
    background-position: center right 8px;
    background-size: 16px auto;
    padding-left: 1.875rem;
    padding-right: 1.75rem;

    font-weight: 500;
}
.sorting-dropdown .form-select::before{
    content: "";
    width: 2rem;
    height: 100%;
    background: url(../../images/icons/arrow-up-arrow-down_dark_subtle.svg) center no-repeat;
    background-size: 16px auto;
    position: absolute;
    top: 0;
    left: 0;
}
.sorting-dropdown .ts-dropdown{
    --option-hover-bg: var(--bs-light-bg-subtle);
    --option-active-bg: rgba(var(--bs-primary-rgb),.13);
    border-radius: 0.5rem;
}


/* --- main filters --- */
.filters-card{
    --bs-card-spacer-x: 0.75rem;
    --bs-card-spacer-y: 0.75rem;
}
.filters-card .card-section{
    border-bottom: 1px solid var(--bs-light);
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    margin: 0 calc(var(--bs-card-spacer-x) * -1);
}
.filters-card .card-section:first-child{
    margin-top: calc(var(--bs-card-spacer-y) * -1);
}
.filters-card .card-section:last-child{
    margin-bottom: calc(var(--bs-card-spacer-y) * -1);
}

.filters-card .card-section-head{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.filters-card .card-section-head > img{
    flex-shrink: 0;
    width: 20px;
}
.filters-card .card-section-head .title{
    color: var(--bs-dark);
    font-size: 14px;
    font-weight: 600;
}
/*.filters-card .card-section-head .i-accordion-toggle{
    margin-left: auto;
}*/
.filters-card .card-section-body{
    padding-top: 1rem;
}

.filters-card .form-check-list .form-check{
    display: flex;
    width: 100%;
}
.filters-card .form-check-list .form-check .count{
    color: var(--quaternary-color);
    margin-left: auto;
}

/* nav */

/*.filters-card .nav-item{
    --nav-item-px: 0.75rem;
    --nav-item-py: 0.75rem;
    --nav-item-gap: 0.75rem;
    --nav-item-border-radius: 50px;

    --nav-item-icon-size: 1.25rem;
    --nav-item-chevron-size: 1.25rem;

    --nav-item-fs: 0.875rem;
    --nav-item-fw: 500;

    --nav-item-color: #1F1F1F;

    --nav-item-bg: transparent;
    --nav-item-hover-bg: var(--bs-light-bg-subtle);
    --nav-item-active-bg: rgba(var(--bs-primary-rgb),.13);

    display: flex;
    align-items: center;
    gap: var(--nav-item-gap);
    width: 100%;
    background-color: var(--nav-item-bg);
    border: none;
    border-radius: var(--nav-item-border-radius);
    padding: var(--nav-item-py) var(--nav-item-px);

    color: var(--nav-item-color);
    font-size: var(--nav-item-fs);
    font-weight: var(--nav-item-fw);
}

.filters-card .nav-item img{
    flex-shrink: 0;
}
.filters-card .nav-item > img.i-nav{
    width: var(--nav-item-icon-size);
}
.filters-card .nav-item > img.i-chevron{
    width: var(--nav-item-chevron-size);
    margin-left: auto;
}

.filters-card .nav-item:hover{
    background-color: var(--nav-item-hover-bg);
}
.filters-card .nav-item:active,
.filters-card .nav-item.active{
    background-color: var(--nav-item-active-bg);
}*/

@media (min-width: 576px) {
    /* --- main filters --- */
    .filters-card{
        --bs-card-spacer-x: 1.25rem;
        --bs-card-spacer-y: 1.25rem;
    }
}
@media (min-width: 992px) {
    .filters-card .nav-categories .nav-item{
        width: auto;
        margin: 0 calc(var(--nav-item-px) * -1);
    }
}
@media (min-width: 1400px) {
    /* --- main filters --- */
    .filters-card{
        --bs-card-spacer-x: 1.5rem;
        --bs-card-spacer-y: 1.5rem;
    }
}

@media (max-width: 991px) {
    .filters-card .nav-categories > ul{
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .filters-card .nav-categories > ul > li{
        width: calc((100% - 0.5rem) * 0.5);
    }
    .filters-card .nav-categories .nav-item{
        --nav-item-px: clamp(1rem, -0.038rem + 2.885vw, 1.75rem);
        --nav-item-py: clamp(1rem, -0.038rem + 2.885vw, 1.75rem);
        --nav-item-border-radius: clamp(1rem, -0.038rem + 2.885vw, 1.75rem);

        --nav-item-fs: clamp(1rem, 0.827rem + 0.481vw, 1.125rem);
        --nav-item-fw: 400;
        --nav-item-color: #000;
        --nav-item-bg: var(--btn-light-subtle);
        --nav-item-hover-bg: var(--btn-light-subtle-hover);
        --nav-item-active-bg: var(--btn-light-subtle-active);

        --nav-item-img-size: clamp(8rem, 6.962rem + 2.885vw, 8.75rem);

        align-items: flex-start;
        height: var(--nav-item-img-size);
        position: relative;
        overflow: hidden;
    }
    .filters-card .nav-categories .nav-item .i-nav,
    .filters-card .nav-categories .nav-item .i-chevron{
        display: none;
    }
    .filters-card .nav-categories .nav-item > span{
        max-width: 70%;
    }
    .filters-card .nav-item::after{
        content: "";
        width: var(--nav-item-img-size);
        height: var(--nav-item-img-size);
        background: var(--category-img-url) center no-repeat;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        right: 0;
    }
}
@media (max-width: 575px) {
    .filters-card .nav-categories .nav-item{
        --nav-item-px: 1rem;
        --nav-item-py: 1rem;
        --nav-item-border-radius: 1rem;

        --nav-item-fs: 0.875rem;

        --nav-item-img-size: 8rem;
    }
    .filters-card .nav-categories .nav-item > span{
        max-width: 100%;
    }
}
/* ---------- /filters ---------- */


/* ---------- payment logos ---------- */
.payment-logos-wrap{
    display: flex;
    gap: 0.375rem;
}
.payment-logos-wrap .badge{
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-padding-y: 0.25rem;
    --bs-badge-border-radius: 1rem;
    --badge-bg: #fff;

    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 4rem;
    border: 1px solid rgba(0,0,0,.07);
}
.payment-logos-wrap .badge img{
    max-width: 100%;
}
/* ---------- /payment logos ---------- */


/* ---------- payment info card ---------- */
.card-payment-info{
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-border-radius: var(--card-border-radius-xl);
}
.card-payment-info .payment-logos-wrap{
    align-items: center;
}
.card-payment-info .payment-logos-wrap .badge{
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-font-size: 1.125rem;
    --bs-badge-font-weight: 500;
    --bs-badge-color: #000;
    --bs-badge-border-radius: 0.75rem;
    --badge-bg: #fff;
    --badge-size: 2.875rem;
    --badge-gap: 0.375rem;
    --badge-line-height: 1.5;

    /*flex-grow: unset;*/
    border-color: #E1E6EA;
    max-width: 100%;
    font-feature-settings: "case" on;
    text-transform: uppercase;
}
.card-payment-info .payment-logos-wrap .badge > img{
    height: 2.125rem;
    object-fit: contain;
}

.card-payment-info .payment-logos-wrap .item{
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
    text-align: center;
}
.card-payment-info .payment-logos-wrap .item .title{
    color: var(--bs-dark);
    font-size: 1.25rem;
    font-weight: bold;
}
.card-payment-info .payment-logos-wrap .item .text{
    color: var(--quaternary-color);
    font-size: 12px;
}

@media (min-width: 576px) {
    .card-payment-info .payment-logos-wrap .badge{
        flex-grow: unset;
    }
}
@media (min-width: 768px) {
    .card-payment-info{
        --bs-card-spacer-x: 1.5rem;
        --bs-card-spacer-y: 1.5rem;
    }
    .card-payment-info .payment-logos-wrap{
        gap: 1rem;
    }
    .card-payment-info .payment-logos-wrap .item{
        margin-left: 0.5rem;
    }
    .card-payment-info .payment-logos-wrap .item .title{
        font-size: 1.5rem;
    }
}
@media (min-width: 1200px) {
    .card-payment-info{
        --bs-card-spacer-x: 2rem;
    }
}
@media (min-width: 1400px) {
    .card-payment-info{
        --bs-card-spacer-x: 2.5rem;
    }
}

@media (max-width: 576px) {
    .card-payment-info .payment-logos-wrap{
        justify-content: space-between;
    }
    .card-payment-info .payment-logos-wrap .badge > span{
        display: none;
    }
}
/* ---------- /payment info card ---------- */


/* ---------- video ---------- */
.video-container{
    --bs-aspect-ratio: 45.715%;

    width: 100%;
    border-radius: clamp(1.5rem, 0.801rem + 1.942vw, 2.5rem);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.video-container .overlay-wrap,
.video-container .overlay-wrap > div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.video-container .overlay-wrap .ratio::before{
    background-color: rgb(0,0,0,.4);
    position: relative;
    z-index: 2;
    transition: background-color .15s ease-in-out;
}
.video-container .overlay-wrap > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 0.075rem + 0.485vw, 0.5rem);
    padding-top: 2%;
    z-index: 3;

    color: #fff;
    font-size: 0.875rem;
    text-align: center;
}
.video-container .overlay-wrap > div img{
    width: clamp(2.5rem, 0.927rem + 4.369vw, 4.75rem);
    margin-bottom: clamp(0.25rem, -0.274rem + 1.456vw, 1rem);
}
.video-container .overlay-wrap .title{
    color: inherit;
    font-size: clamp(1.125rem, 0.601rem + 1.456vw, 1.875rem);
    font-weight: normal;
}

.video-container .overlay-wrap:hover .ratio::before{
    background-color: rgb(0,0,0,.3);
}
.video-container .overlay-wrap:active .ratio::before{
    background-color: rgb(0,0,0,.5);
}

.video-container.is-loading{
    pointer-events: none;
}
.video-container.is-loading .overlay-wrap::after{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../../images/icons/spinner-notch_white.svg) center no-repeat;
    background-size: 2.5rem auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}
.video-container.is-loading .overlay-wrap > div{
    opacity: 0;
}

@media (min-width: 768px) {
    .video-container .overlay-wrap > div{
        font-size: 1rem;
        font-feature-settings: "case" on;
        text-transform: uppercase;
    }
}
/* ---------- /video ---------- */


/* ---------- product counter ---------- */
.product-counter{
    --counter-width: 6.25rem;
    --counter-height: 2rem;
    --counter-spacing-x: 0.25rem;
    --counter-bg: var(--bs-light-bg-subtle);
    --counter-btn-size: 1.625rem;
    --counter-btn-icon-size: 1.125rem;

    display: flex;
    align-items: stretch;
    gap: var(--counter-spacing-x);
    width: var(--counter-width);
    height: var(--counter-height);
    background-color: var(--counter-bg);
    border-radius: calc(var(--counter-height) * 0.5);
    padding: 0 var(--counter-spacing-x);
}

.product-counter button{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--counter-btn-size);
    background-color: transparent;
    border: 0;
    padding: 0;
}

.product-counter button img{
    width: var(--counter-btn-icon-size);
}
.product-counter input{
    width: 100%;
    background-color: transparent;
    border: 0;
    outline: none;

    color: var(--bs-tertiary-color);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
/* ---------- /product counter ---------- */


/* ---------- basket item ---------- */
.basket-item-card{
    --bs-card-spacer-x: 0.875rem;
    --bs-card-spacer-y: 0.875rem;

    --product-title-font-size: 14px;
    --product-title-font-weight: 500;
    --product-img-width: 3.5rem;
    --product-price-font-size: 1rem;
    --product-price-old-font-size: 15px;

    --basket-item-mb: 0.75rem;

    margin-bottom: var(--basket-item-mb);
}
.basket-item-card .card-body{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.basket-item-card .badge{
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.5rem;
    --badge-size: var(--element-size-2);
    --badge-line-height: 1;

    --bs-badge-color: var(--bs-tertiary-color);
    --badge-bg: var(--bs-light-bg-subtle);
}
.basket-item-card .logo-badge{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.25rem;
}
.basket-item-card .logo-badge img{
    max-width: 100px;
    max-height: 24px;
    object-fit: contain;
}

.basket-item-card .btn-remove{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: var(--element-size-2);
    --icon-size: 1.25rem;

    --bs-btn-color: #000;
    --bs-btn-bg: var(--btn-light-subtle);
    --bs-btn-border-color: var(--btn-light-subtle);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--btn-light-subtle-hover);
    --bs-btn-hover-border-color: var(--btn-light-subtle-hover);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--btn-light-subtle-active);
    --bs-btn-active-border-color: var(--btn-light-subtle-active);
}

.basket-item-card .product-wrap{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.basket-item-card .img-wrap{
    --bs-aspect-ratio: 100%;
    flex-shrink: 0;
    width: var(--product-img-width);
    border-radius: 0.625rem;
    overflow: hidden;
}
.basket-item-card .product-title{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card:not(.card-md) .basket-item-card{
    --bs-card-bg: var(--bs-light-bg-subtle);
}
.card:not(.card-md) .basket-item-card .badge{
    --bs-badge-color: #fff;
    --badge-bg: #fff;
}
.card:not(.card-md) .basket-item-card .btn-remove{
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: rgba(0,0,0,.04);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-light-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-bg);
    --bs-btn-active-border-color: rgba(0,0,0,.1);
}

.card:not(.card-md) .basket-item-card .product-counter{
    --counter-bg: #fff;
}

@media (min-width: 768px) {
    .basket-item-card{
        --bs-card-spacer-x: 1rem;
        --bs-card-spacer-y: 1rem;

        --basket-item-mb: 1.5rem;
    }
    .card-md .basket-item-card{
        --bs-card-bg: var(--bs-light-bg-subtle);
    }
    .card-md .basket-item-card .badge{
        --bs-badge-color: #fff;
        --badge-bg: #fff;
    }
    .card-md .basket-item-card .btn-remove{
        --bs-btn-color: #000;
        --bs-btn-bg: #fff;
        --bs-btn-border-color: rgba(0,0,0,.04);
        --bs-btn-hover-color: var(--bs-btn-color);
        --bs-btn-hover-bg: var(--bs-light-bg-subtle);
        --bs-btn-hover-border-color: var(--bs-btn-border-color);
        --bs-btn-active-color: var(--bs-btn-color);
        --bs-btn-active-bg: var(--bs-btn-bg);
        --bs-btn-active-border-color: rgba(0,0,0,.1);
    }

    .card-md .basket-item-card .product-counter{
        --counter-bg: #fff;
    }
}
/*@media (min-width: 992px) {
    .card-lg .basket-item-card{
        --bs-card-bg: var(--bs-light-bg-subtle);
    }
    .card-lg .basket-item-card .badge{
        --bs-badge-color: #fff;
        --badge-bg: #fff;
    }
    .card-lg .basket-item-card .btn-remove{
        --bs-btn-color: #000;
        --bs-btn-bg: #fff;
        --bs-btn-border-color: rgba(0,0,0,.04);
        --bs-btn-hover-color: var(--bs-btn-color);
        --bs-btn-hover-bg: var(--bs-light-bg-subtle);
        --bs-btn-hover-border-color: var(--bs-btn-border-color);
        --bs-btn-active-color: var(--bs-btn-color);
        --bs-btn-active-bg: var(--bs-btn-bg);
        --bs-btn-active-border-color: rgba(0,0,0,.1);
    }

    .card-lg .basket-item-card .product-counter{
        --counter-bg: #fff;
    }
}*/
/* ---------- /basket item ---------- */


/* ---------- order summary ---------- */
.card-order-summary{
    --bs-card-spacer-x: 1rem;
    --bs-card-spacer-y: 1rem;
    --bs-card-bg: rgba(var(--bs-primary-rgb),.08);
    --card-body-gap-vertiacl: 1rem;

    --product-price-color: var(--bs-dark);
    --product-price-font-size: 1.625rem;
    --product-price-old-color: rgba(var(--bs-dark-rgb),.3);
    --product-price-old-font-size: 0.875rem;
}
.card-order-summary .card-body{
    display: flex;
    flex-direction: column;
    gap: var(--card-body-gap-vertiacl);
}
.card-order-summary .row:not([class*="gx-"]){
    --bs-gutter-x: 0.75rem;
}
.card-order-summary .row:not([class*="gy-"]){
    --bs-gutter-y: 0.75rem;
}
.card-order-summary .product-price sup{
    font-size: var(--product-price-old-font-size);
    margin-top: 2px;
}

@media (min-width: 768px) {
    .card-order-summary{
        --card-body-gap-vertiacl: 1.75rem;

        --product-price-font-size: 2rem;
        --product-price-old-font-size: 1.125rem;
    }
}
/* ---------- /order summary ---------- */


/* ---------- not found ---------- */
.wrap-404{
    --max-width: 420px;
    --icon-color: #fff;
    --icon-color-dark: #F4F5F9;

    width: 100%;
    padding: 4.5rem 0;
    margin: auto;

    color: var(--bs-tertiary-color);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}
.wrap-404 > div{
    max-width: var(--max-width);
    position: relative;
    margin: auto;
}
.wrap-404 .title{
    margin-bottom: 0.375rem;

    color: #000;
    font-size: 1.5rem;
    font-weight: 600;
}
.wrap-404 .text-wrap{
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;

    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.wrap-404 svg *{
    fill: var(--icon-color);
}
.card .wrap-404 svg *{
    fill: var(--icon-color-dark);
}
.wrap-404 .img-1{
    transform: translate(0px,-100px);
    position: absolute;
    top: 0;
    left: 0;
}
.wrap-404 .img-2{
    width: 58px;
    transform: translate(0px,80px);
    position: absolute;
    bottom: 0;
    right: 0;
}

.title-404{
    display: block;

    color: var(--bs-danger);
    font-size: 122px;
    font-weight: bold;
    line-height: 1;
}
.wrap-404 .title-404 ~ div svg *{
    fill: rgba(var(--bs-danger-rgb),.15);
}

@media (min-width: 768px) {
    .wrap-404 {
        --max-width: 640px;
    }
    .wrap-404 .title{
        margin-bottom: 0.75rem;
        font-size: 2rem;
    }
    .wrap-404 .img-1{
        transform: translate(0px,-44px);
    }
    .wrap-404 .img-2{
        width: auto;
        transform: translate(-20px,72px);
    }
    .title-404{
        font-size: 152px;
    }
}

@media (max-width: 992px) {
    .card-lg .wrap-404 svg *{
        fill: var(--icon-color-dark);
    }
}
@media (max-width: 767px) {
    .card-md .wrap-404 svg *{
        fill: var(--icon-color-dark);
    }

    .wrap-404 .title-404 ~ div .img-1{
        transform: translate(0px,-170px);
    }
}
/* ---------- /not found ---------- */


/* ---------- wizard ---------- */
.app-page.wizard{
    --app-page-spacing-top: 6.25rem;
    --app-page-spacing-bottom: var(--app-page-spacing-top);
}

.card-wizard > .card-body{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.card-wizard .card-title{
    margin-bottom: 0;

    color: #000;
    font-size: var(--fs-h4);
}

/* --- progress --- */
.wizard-progress-wrap{
    --brogress-bullet-size: 2rem;
    --brogress-bar-height: 0.75rem;

    --brogress-bullet-bg: #F5F5F5;
    --brogress-bullet-color: #A1A1A1;
    --brogress-bar-bg: #FFF3CE;

    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 0 1.25rem 1.75rem;
    position: relative;
}
.wizard-progress-wrap li{
    display: flex;
    position: relative;
    pointer-events: none;
}
.wizard-progress-wrap li:not(:last-child){
    flex-grow: 1;
}

.wizard-progress-wrap li:not(:last-child)::before,
.wizard-progress-wrap li:not(:last-child)::after{
    content: "";
    width: 100%;
    height: var(--brogress-bar-height);
    background-color: var(--brogress-bar-bg);
    position: absolute;
    top: calc( (var(--brogress-bullet-size) - var(--brogress-bar-height)) * 0.5);
    left: calc( (var(--brogress-bullet-size) - var(--brogress-bar-height)) * 0.5);
}

.wizard-progress-wrap li:not(:last-child)::after{
    --brogress-bar-bg: #FFDC70;
    transition: width 0.15s ease-in-out;
}
.wizard-progress-wrap li:not(:last-child):not(.past)::after{
    width: 0;
}

.wizard-progress-wrap .item{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    position: relative;
    z-index: 2;

    font-size: 14px;
}
.wizard-progress-wrap .item > i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--brogress-bullet-size);
    height: var(--brogress-bullet-size);
    background-color: var(--brogress-bullet-bg);
    border-radius: 50%;
    margin: 0 auto;

    color: var(--brogress-bullet-color);
    font-weight: 600;
    font-style: normal;

    transition: all .15s ease-in-out;
}
.wizard-progress-wrap .item > span{
    padding-top: 0.5rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    color: #171717;
    white-space: nowrap;
}

/* active, past */
.wizard-progress-wrap li.active,
.wizard-progress-wrap li.past{
    --brogress-bullet-color: #000;
    --brogress-bullet-bg: var(--bs-warning);
}
.wizard-progress-wrap li.active .item > i{
    transition-delay: .15s;
}
/*.wizard-progress-wrap li.past{
    --brogress-bar-bg: #FFDC70;
}*/

/* --- pre/next btn --- */
.wizard-btn-wrap .row{
    --bs-gutter-x: 0.75rem;
}
.wizard-btn-wrap .btn{
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-weight: 700;
    --btn-gap: 0.125rem;

    width: 100%;
    white-space: nowrap;
}
.wizard-btn-wrap .btn-prev > *{
    opacity: 0.67;
}
.wizard-btn-wrap .btn-prev.disabled img{
    opacity: 0.2;
}

/* branch */
.btn-branch .badge{
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .app-page.wizard{
        --app-page-spacing-top: 2.25rem;
        --app-page-spacing-bottom: 2.5rem;
    }

    /* card */
    .card-wizard{
        --bs-card-spacer-x: 2rem;
        --bs-card-spacer-y: 2rem;
    }

    /* --- pre/next btn --- */
    .wizard-btn-wrap{
        margin-top: var(--bs-card-spacer-y);
    }
}

@media (max-width: 767px) {
    /* card */
    .card-wizard .card-title{
        display: none;
    }

    /* --- */
    .wizard-progress-wrap,
    .wizard-btn-wrap{
        width: 100%;
        background-color: #fff;
        padding: 0.625rem var(--app-content-px);

        position: fixed;
        left: 0;
        z-index: 150;
    }

    /* --- progress --- */
    .wizard-progress-wrap{
        padding: 0 var(--app-content-px) 0.75rem;
        top: var(--app-header-height);
        margin: 0;
    }
    .wizard-progress-wrap .item > span{
        background-color: #fff;
        box-shadow: 0 4px 21px 0 rgba(0,0,0,.14);
        border-radius: 1rem;
        padding: 0.75rem;
        margin-top: 0.75rem;

        color: #000;
        font-weight: bold;

        transition: opacity 0.15s ease-in-out;
    }
    .wizard-progress-wrap .item > span::before{
        content: "";
        width: 1rem;
        height: 0.5rem;
        background-color: #fff;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    .wizard-progress-wrap li:not(.active) .item > span{
        opacity: 0;
    }

    .wizard-progress-wrap li:first-child .item > span,
    .wizard-progress-wrap li:first-child .item > span::before,
    .wizard-progress-wrap li:last-child .item > span,
    .wizard-progress-wrap li:last-child .item > span::before{
        transform: none;
    }

    .wizard-progress-wrap li:first-child .item > span{
        left: -0.5rem;
    }
    .wizard-progress-wrap li:first-child .item > span::before{
        left: 1rem;
    }

    .wizard-progress-wrap li:last-child .item > span{
        left: auto;
        right: -0.5rem;
    }
    .wizard-progress-wrap li:last-child .item > span::before{
        left: auto;
        right: 1rem;
    }

    /* --- pre/next btn --- */
    .wizard-btn-wrap{
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        box-shadow: 0 -4px 24px 0 rgba(0,0,0,.07);
        padding: 0.625rem var(--app-content-px);

        bottom: var(--app-bottom-bar-height);

    }
}
@media (max-width: 575px) {
    /* branch */
    .btn-branch{
        --badge-height: 2.5rem;

        padding-bottom: calc(var(--badge-height) + var(--card-items-gap) + var(--card-spacer-y));
    }
    .btn-branch .badge{
        --bs-badge-font-size: 12px;
        --badge-size: var(--badge-height);

        justify-content: center;
        position: absolute;
        bottom: var(--card-spacer-y);
        left: var(--bs-badge-padding-x);
        right: var(--bs-badge-padding-x);
    }
}
/* ---------- /wizard ---------- */


/* ---------- packages ---------- */
.package-info-item{
    --gap: 0.625rem;
    --icon-size: 1.75rem;

    --color: #000;
    --font-size: 0.875rem;
    --font-weight: 500;

    --title-font-size: 1rem;
    --title-font-weight: 600;

    display: flex;
    align-items: center;
    gap: var(--gap);

    color: var(--color);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: 1.25;
}
.package-info-item > img{
    flex-shrink: 0;
    width: var(--icon-size);
    height: auto;
}
.package-info-item > div{
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.package-info-item .title{
    color: var(--color);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: inherit;
}

/* --- list --- */
.packages-list{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.package-card{
    --bs-card-spacer-y: 0.75rem;
    --bs-card-spacer-x: 0.75rem;
    --bs-card-bg: var(--bs-light);
    --bs-card-border-width: 0.125rem;
    --bs-card-color: var(--bs-secondary-text-emphasis);
    --card-font-size: 12px;

    &.selected{
        --bs-card-bg: #fff;
        --bs-card-border-color: var(--bs-primary);
    }
}
.package-card .card-body{
    display: flex;
    justify-content: space-between;
}

.package-card .text-1{
    font-size: 13px;
    font-weight: 600;
    opacity: .8;
}
.package-card .text-2{
    font-size: 12px;
    font-weight: 500;
    opacity: .5;
}

@media (min-width: 576px) {
    .package-card .text-1{
        font-size: 14px;
    }
}
/* ---------- /packages ---------- */


/* ---------- loyalty card ---------- */
.loyalty-card{
    container-name: loyalty-card;
    container-type: inline-size;

    --bs-card-spacer-x: clamp(1.25rem, 0.673rem + 1.603vw, 1.875rem);
    --bs-card-spacer-y: clamp(1.25rem, 0.673rem + 1.603vw, 1.875rem);
    --bs-card-bg: #F5F5F5;
    --bs-card-border-width: 0;
    --bs-card-border-color: #fff;

    --box-shadow-rgba-1: 255,255,255,.10;
    --box-shadow-rgba-2: 0,0,0,.08;
    --bs-card-box-shadow: inset 0px 24px 54px 0px rgba(var(--box-shadow-rgba-1)),
    inset 0px 3px 35px 0px rgba(var(--box-shadow-rgba-2));

    --bs-card-border-radius: var(--card-border-radius-xl);
    --bs-card-color: #000;

    --card-font-size: 11px;
    --card-line-height: 1;

    --card-body-gap-vertical: 0.75rem;

    background: linear-gradient(180deg,rgba(245,245,245,1) 0%, rgba(247,247,247,1) 100%);
    position: relative;
}

.loyalty-card[data-package="basic"]{
    outline: 6px solid var(--bs-card-border-color);
    outline-offset: -6px;
}
.loyalty-card[data-package="silver"]{
    --bs-card-color: #fff;
    --bs-card-bg: #5A5A59;
    --box-shadow-rgba-2: 102,102,102,1;

    background: linear-gradient(180deg,rgba(90,90,89,1) 0%, rgba(141,141,139,1) 100%);
}
.loyalty-card[data-package="gold"]{
    --bs-card-color: #fff;
    --bs-card-bg: #FF690C;
    --box-shadow-rgba-2: 255,128,0,.9;

    background: linear-gradient(180deg,rgba(255,105,12,1) 0%, rgba(255,149,0,1) 100%);
}
.loyalty-card[data-package="platinum"]{
    --bs-card-color: #fff;
    --bs-card-bg: #0187C1;
    --box-shadow-rgba-2: 77,201,254,.9;

    background: linear-gradient(180deg,rgba(1,135,193,1) 0%, rgba(72,199,254,1) 100%);
}

.loyalty-card[data-package="silver"],
.loyalty-card[data-package="gold"],
.loyalty-card[data-package="platinum"]{
    &::before{
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(0,0,0,.15) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
}

/* --- */
.loyalty-card .card-body{
    display: flex;
    flex-direction: column;
    gap: var(--card-body-gap-vertical);

    font-size: var(--card-font-size);
    font-weight: 500;
    line-height: var(--card-line-height);
}

.loyalty-card .package-info-item{
    --icon-size: 3.125rem;
    --title-font-size: 1.5rem;
    --title-font-weight: bold;

    margin-bottom: 0.5rem;
}
.loyalty-card .package-info-item > img{
    border-radius: 50%;
    box-shadow: 0 4px 5px 0 rgba(255, 255, 255, 0.2);
}
.loyalty-card .package-info-item > div{
    gap: 0.25rem;
    text-shadow: 0 4px 5px rgba(255, 255, 255, 0.2);
}

.loyalty-card .btn-white{
    --bs-btn-hover-bg: rgba(255,255,255,0.9);
}
.loyalty-card .btn-next{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: 2rem;
    --bs-btn-box-shadow: 0 4px 5px rgba(255, 255, 255, 0.2);

    display: none;
    backdrop-filter: blur(8px);
    position: absolute;
    top: var(--bs-card-spacer-y);
    right: var(--bs-card-spacer-x);
}

/* progress */
.loyalty-card .progress{
    --bs-progress-height: 1.25rem;
    --bs-progress-bg: rgba(0,0,0,.04);
    --bs-progress-border-radius: var(--bs-progress-height);
    --bs-progress-box-shadow: none;
    --bs-progress-bar-bg: var(--bs-primary);

    --bs-progress-bar-color: #fff;
    --bs-progress-font-size: 0.75rem;
    line-height: 1;
}
.loyalty-card .progress-bar{
    border-radius: var(--bs-progress-border-radius);
}
.loyalty-card[data-package="basic"] .progress{
    --bs-progress-height: 1.25rem;
    --bs-progress-bg: rgba(0,0,0,.04);
    --bs-progress-border-radius: var(--bs-progress-height);
    --bs-progress-box-shadow: none;
    --bs-progress-bar-bg: var(--bs-primary);

    --bs-progress-bar-color: #fff;
    --bs-progress-font-size: 11px;
}

/* --- */
.loyalty-card[data-package="silver"],
.loyalty-card[data-package="gold"],
.loyalty-card[data-package="platinum"]{
    .package-info-item{
        --color: #fff;
    }

    .progress {
        --bs-progress-bg: rgba(255,255,255,.3);
        --bs-progress-bar-bg: #fff;
    }
}
.loyalty-card[data-package="platinum"] .progress{
    --bs-progress-height: 1.875rem;

    align-items: center;
    padding: 0 1rem 2px;
}

@container loyalty-card (min-width: 576px) {
    .loyalty-card .card-body{
        --card-font-size: 14px;
        --card-line-height: 1.5;
    }
}

@container loyalty-card (max-width: 575px) {
    .loyalty-card[data-package="platinum"] .progress{
        position: relative;
        overflow: visible;
        margin-top: 1.5rem;
    }
    .loyalty-card[data-package="platinum"] .progress > div:last-child{
        margin-bottom: 0.75rem;
        position: absolute;
        bottom: 100%;
        left: 0;
    }
}
/* ---------- /loyalty card ---------- */


/* ---------- list ---------- */
.items-list{
    --bullet-size: 0.5rem;
    --bullet-color: var(--bs-primary);
    --gap: 0.625rem;

    --color: #000;
    --font-size: 0.875rem;

    --card-padding-x: 0rem;
    --card-padding-y: 0rem;

    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    color: var(--color);
    font-size: var(--font-size);
}
.items-list li{
    padding: var(--card-padding-y) var(--card-padding-x);
    padding-left: calc(var(--bullet-size) + var(--gap) + var(--card-padding-x));
    position: relative;
}
.items-list li::before{
    content: "";
    width: var(--bullet-size);
    height: var(--bullet-size);
    background-color: var(--bullet-color);
    border-radius: 50%;

    position: absolute;
    left: var(--card-padding-x);
    top: calc(7px + var(--card-padding-y));
}

.items-list li.list-card{
    --card-padding-x: 1rem;
    --card-padding-y: 1rem;
    --color: var(--bs-secondary-text-emphasis);

    background-color: var(--bs-light);
    border-radius: 1rem;
}
/* ---------- /list ---------- */



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


/* ---------- auth ---------- */
.page-auth{
    --auth-page-px: 0px;
    --auth-page-py: var(--auth-page-px);
    padding: var(--auth-page-py) var(--auth-page-px);
}

.page-auth > .card{
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-border-radius: 1.25rem;
}

/* --- head card --- */
.page-auth .head-card{
    --bs-card-bg: var(--bs-primary);
}
.page-auth .head-card > .card-body{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-auth .head-card .logo{
    width: 100%;
    max-width: 164px;
}

.page-auth .btn-back{
    --btn-pos: 0.75rem;
    --btn-gap: 0.375rem;

    position: absolute;
    top: var(--btn-pos);
    left: var(--btn-pos);
    z-index: 2;
}


/* --- form card --- */
.page-auth .form-card{
    --bs-card-bg: #fff;
    --bs-card-border-color: #DADEE6;
}
.page-auth .form-card > .card-body,
.page-auth .form-card [data-overlayscrollbars-viewport]{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* form */
.page-auth .form-card .card{
    --max-width: 436px;

    --bs-card-spacer-y: 0rem;
    --bs-card-spacer-x: 0rem;
    --bs-card-border-width: 0px;
    --bs-card-border-color: transparent;
    --bs-card-title-spacer-y: 0.75rem;

    width: 100%;
    max-width: calc(var(--max-width) + var(--bs-card-spacer-x) * 2 + var(--bs-card-border-width) * 2);
    margin: auto;
}
.page-auth .form-card .card.w-lg{
    --max-width: 512px;
}


.page-auth .form-card .row{
    --bs-gutter-x: 0.75rem ;
}
/*.page-auth .form-card .row .form-group:last-child{
    margin-bottom: 0;
}*/

.page-auth .form-card .card-title{
    font-size: 2rem;
    font-weight: bold;
}
/*.page-auth .form-card .link{
    font-weight: 500;
}*/

@media (min-width: 992px) {
    .page-auth{
        --auth-page-px: 1rem;

        display: flex;
        gap: var(--auth-page-px);
    }

    .page-auth > .card {
        --bs-card-spacer-y: 2.25rem;

        width: calc(50% - var(--auth-page-px) / 2);
    }

    /* --- head card --- */
    .page-auth .head-card .logo{
        width: 80%;
        max-width: 430px;
    }

    /* --- form card --- */
    .page-auth .form-card > .card-body{
        max-height: calc(100vh - var(--auth-page-px) * 2 - var(--bs-card-border-width) * 2);
        overflow: hidden;
    }
}
@media (min-width: 1600px) {
    .page-auth{
        --auth-page-px: 1.25rem;
    }

    .page-auth .form-card .card{
        --bs-card-spacer-y: 2.25rem;
        --bs-card-spacer-x: 2.5rem;
        --bs-card-border-width: 1px;
        --bs-card-border-color: rgba(0,0,0,.03);
        --bs-card-box-shadow: 0 24px 64px 0 rgba(0,0,0,.06);
    }
}
@media (min-width: 1920px) {
    .page-auth{
        --auth-page-px: 1.5rem;
    }
}

@media (max-width: 991px) {
    .page-auth{
        background-color: #fff;
    }
    .page-auth > .card{
        --bs-card-border-width: 0;
        --bs-card-border-radius: 0;
    }

    /* --- head card --- */
    .page-auth .head-card{
        height: 96px;
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
    }
    .page-auth .head-card .logo{
        margin-top: auto;
    }

    .page-auth .btn-back{
        --btn-pos: 0.5rem;
        --btn-gap: 0;
        --btn-size: auto;

        background: none;
        border: none;
        padding: 0;

        color: #fff;
        font-size: 13px;
    }
}
/* ---------- /auth ---------- */


/* ---------- products ---------- */
.page-products .row-main{
    --bs-gutter-x: 1rem;
}

.page-products .btn-filters{
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-border-width: 0;
    --bs-btn-color: var(--bs-secondary-color);

    --btn-size: 2.5rem;
    --btn-gap: 0.625rem;
    --icon-size: 1rem;

    --bs-btn-bg: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-active-bg: #fff;
}
.page-products .btn-filters .i-chevron{
    --icon-size: 0.875rem;
    margin-left: -0.125rem;
    transition: transform .15s ease-in-out;
}
.page-products .btn-filters.active .i-chevron{
    transform: rotate(-180deg);
}


.page-products .filters-card .card-title{
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 600;
}
.page-products .filters-card .tags-wrap{
    border-bottom: none;
    padding: 0.5rem 0 1rem;
}
.page-products .filters-card .sorting-dropdown-wrap{
    margin-top: 1rem;
}
.page-products .filters-card .sorting-dropdown {
    --bs-border-width: 0;

    --form-control-height: var(--element-size-3);
    --form-control-border-radius: 0;
    --form-control-color: var(--bs-secondary-color);
    --form-control-hover-color: var(--bs-secondary-color);
    --form-control-bg: transparent;
    --form-control-hover-bg: transparent;
    --form-control-active-bg: transparent;
    --form-control-border-color: transparent;
    --form-control-active-border-color: transparent;
    --form-control-fs: 14px;

    min-width: auto;
}
.page-products .filters-card .sorting-dropdown .form-select{
    background-image: url(../../images/icons/chevron_thin_quaternary.svg);
    background-position: right center;
    background-size: 1.25rem auto;
    box-shadow: none;
    padding-left: 1.5rem;
    padding-right: 0.875rem;
}
.page-products .filters-card .sorting-dropdown .form-select::before{
    width: 1.125rem;
}
.page-products .filters-card .ts-dropdown{
    margin-top: 0.25rem;
}

@media (min-width: 768px) {
    .page-products .filters-card .tags-wrap,
    .page-products .filters-card .sorting-dropdown-wrap{
        display: none;
    }
    .page-products .filters-card .tags-wrap + .card-section{
        margin-top: calc(var(--bs-card-spacer-x) * -1);
    }
}
@media (min-width: 992px) {
    .page-products .col-aside{
        --aside-inner-width: clamp(18.125rem, -1.375rem + 26vw, 23rem);

        width: calc(var(--aside-inner-width) + var(--bs-gutter-x));
    }
}
@media (max-width: 991px) {
    .page-products .col-aside{
        display: none;
    }
}
@media (max-width: 767px) {
    .page-products .top-filters-card{
        display: none;
    }
}
/* ---------- /products ---------- */


/* ---------- product details ---------- */
.product-details-container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}
.product-details-container .row-main{
    --bs-gutter-x: 0;
    gap: 0.75rem;
}

.product-details-container .btn{
    font-weight: 500;
}


/* --- slider --- */
.product-details-container .col-slider{
    --col-width: 100%;

    --slider-size: var(--slider-width, 100%);
    --slider-border-radius: 0;

    --slider-nav-mt: 0.5rem;
    --slider-nav-visible-slides-count: 4.75;
    --slider-nav-gap: 0.375rem;
    --slider-nav-item-size: calc( (var(--slider-size) - ( var(--slider-nav-gap) * (var(--slider-nav-visible-slides-count) - 1) )) / var(--slider-nav-visible-slides-count));
    --slider-nav-item-border-width: 1px;
    --slider-nav-item-border-radius: 0.875rem;

    align-self: flex-start;
    width: var(--col-width);
    position: relative;
    /*overflow: hidden;*/
}

/* wrap */
.product-details-container .product-slider-wrap{
    --controls-spacing: 1rem;

    order: 2;
    /*width: calc(100% - var(--slider-nav-width));*/
    position: relative;
}

/*.product-details-container .product-slider-wrap > .row,*/
.product-details-container .product-slider-wrap > .btn-fullscreen,
.product-details-container .product-slider-wrap > .badge-counter{
    position: absolute;
    z-index: 2;
}

.product-details-container .product-slider-wrap > .row{
    --bs-gutter-x: 0;
    gap: 0.75rem;
    width: 100%;
    padding: var(--controls-spacing);
}
.product-details-container .product-slider-wrap > .btn-fullscreen,
.product-details-container .product-slider-wrap > .badge-counter{
    right: var(--controls-spacing);
}
.product-details-container .product-slider-wrap > .btn-fullscreen{
    top: var(--controls-spacing);
}
.product-details-container .product-slider-wrap > .badge-counter{
    bottom: var(--controls-spacing);
}

/*.product-details-container .product-slider-wrap .dropdown-menu{
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--bs-dropdown-spacer);
}*/
.product-details-container .product-slider-wrap .btn-compare{
    --bs-btn-color: var(--bs-tertiary-color);
}

/* slider */
.product-details-container .product-slider{
    --bs-aspect-ratio: 98.4275%;
    border-radius: var(--slider-border-radius);
    margin: 0;
}

/* slider nav */
.product-details-container .product-slider-nav{
    --bs-aspect-ratio: 100%;

    margin: var(--slider-nav-mt) 0 0;
}
.product-details-container .product-slider-nav .swiper-slide{
    width: var(--slider-nav-item-size);
    height: var(--slider-nav-item-size);

    overflow: hidden;
    cursor: pointer;
}
.product-details-container .product-slider-nav .swiper-slide > *{
    border: var(--slider-nav-item-border-width) solid rgba(0,0,0,.07);
    border-radius: var(--slider-nav-item-border-radius);
}
.product-details-container .product-slider-nav .swiper-slide-thumb-active > *{
    --slider-nav-item-border-width: 2px;
    border-color: var(--bs-warning);
}
/*.product-details-container .product-slider-nav .swiper-slide-thumb-active:after{
    content: '';
    width: 100%;
    height: 100%;
    border: 2px solid var(--bs-warning);
    border-radius: calc(var(--slider-nav-item-border-radius) - 1px);
    position: absolute;
    top: 0;
    left: 0;
}*/
/*.product-details-container .product-slider-nav .swiper-slide > *{
    border-radius: calc(var(--slider-nav-item-border-radius) - 1px);
}*/

/* slide overlay gradient */
.product-details-container .product-slider-nav:not(.is-end)::after{
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
/*.product-details-container .product-slider-nav .hidden-slides-counter{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.product-details-container .product-slider-nav.is-end .hidden-slides-counter{
    display: none !important;
}
.product-details-container .product-slider-nav .hidden-slides-counter > span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    height: 70%;
    background-color: #fff;
    border: 1px solid #F4F4F4;
    border-radius: 50%;

    color: var(--bs-dark);
    font-size: 70%;
    font-weight: bold;
}*/


/* --- info --- */
.product-details-container .col-info{
    display: flex;
    flex-direction: column;
}
.product-details-container .col-info > .card{
    --bs-card-spacer-x: 0.75rem;
    --bs-card-spacer-y: 0.75rem;

    --items-gap-vertiacl: 1.5rem;
}
.product-details-container .col-info .card-body{
    display: flex;
    flex-direction: column;
    gap: var(--items-gap-vertiacl);
}
.product-details-container .col-info .row{
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

/* head */
.product-details-container .col-info .head .row{
    --bs-gutter-y: 0;
}
.product-details-container .col-info .logo-badge{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.25rem;
    --badge-size: var(--element-size-3);
}
.product-details-container .col-info .logo-badge img{
    max-width: 100px;
    max-height: 28px;
    object-fit: contain;
}

.product-details-container .locations-dropdown .dropdown-menu{
    --bs-dropdown-min-width: 360px;
    --bs-dropdown-padding-x: 0.75rem;
    --bs-dropdown-item-border-radius: 0.75rem;
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-font-size: 12px;
    --dropdown-item-size: auto;
}
.product-details-container .locations-dropdown .dropdown-item{
    white-space: normal;
}

/* title */
.product-details-container .product-title{
    --product-title-color: var(--bs-dark);
    --product-title-font-size: 1rem;
    --product-title-font-weight: 600;
}

/*  shopping card */
.product-details-container .card-shopping{
    --bs-card-spacer-x: 1rem;
    --bs-card-spacer-y: 1rem;
    --bs-card-bg: rgba(var(--bs-primary-rgb),.08);

    --product-price-color: var(--bs-dark);
    --product-price-font-size: 2rem;
    --product-price-old-color: rgba(var(--bs-dark-rgb),.3);
    --product-price-old-font-size: 1.125rem;

    margin-top: auto;
}
/*.product-details-container .card-shopping .card-body{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}*/

.product-details-container .card-shopping .product-price sup{
    font-size: var(--product-price-old-font-size);
    margin-top: 2px;
}

.product-details-container .card-shopping .btn{
    font-weight: bold;
}

@media (min-width: 768px) {
    /* --- slider --- */
    .product-details-container .col-slider{
        --slider-nav-item-border-width: 0;
        --slider-border-radius: 1.5rem;

        --slider-nav-mt: 0.75rem;
        --slider-nav-gap: 0.625rem;

        --slider-nav-item-border-radius: 1rem;
    }

    /* wrap */
    .product-details-container .product-slider-wrap > .row,
    .product-details-container .product-slider-wrap > .btn-fullscreen{
        position: absolute;
        z-index: 2;
    }
    .product-details-container .product-slider-wrap > .row{
        bottom: 0;
        left: 0;
    }
    .product-details-container .product-slider-wrap .dropdown-menu{
        border-top-width: 1px;
        border-bottom-width: 0;
        margin-top: 0;
        margin-bottom: var(--bs-dropdown-spacer);
        top: auto;
        bottom: 100%;
    }

    /* --- info --- */
    .product-details-container .col-info .card{
        --bs-card-spacer-x: 1.25rem;
        --bs-card-spacer-y: 1.25rem;
    }
    .product-details-container .product-title{
        --product-title-font-size: 1.25rem;
    }
}
@media (min-width: 992px) {
    /* --- slider --- */
    .product-details-container .col-slider{
        --col-width: 48%;
    }
    /* wrap */
    .product-details-container .product-slider-wrap {
        --controls-spacing: 1.25rem;
    }

    /* --- info --- */
    .product-details-container .col-info .card{
        --bs-card-spacer-x: 1rem;
        --bs-card-spacer-y: 1rem;

        --items-gap-vertiacl: 2rem;
    }
}
@media (min-width: 1200px) {
    .product-details-container .card{
        --bs-card-border-radius: 2rem;
    }
    /* --- slider --- */
    .product-details-container .col-slider{
        --col-width: 54%;

        --slider-size: var(--slider-height, 100%);
        --slider-border-radius: 2rem;

        --slider-nav-mt: 0rem;
        --slider-nav-visible-slides-count: 5.75;
        --slider-nav-width: calc(var(--slider-nav-item-size) + 15px);
        --slider-nav-height: 100%;
        /*--slider-nav-item-size: 100px;*/
        --slider-nav-item-border-radius: 1.25rem;

        max-width: 750px;
        padding-left: var(--slider-nav-width);
    }
    .product-details-container .product-slider-nav{
        width: var(--slider-nav-width);
        height: var(--slider-nav-height);
        position: absolute;
        top: 0;
        left: 0;
    }
    .product-details-container .product-slider-nav .swiper-slide{
        height: var(--slider-nav-item-size);
    }

    /* slide overlay gradient */
    .product-details-container .product-slider-nav::after{
        width: var(--slider-nav-item-size);
        height: calc(var(--slider-nav-item-size) * 0.75);
        background: #EFF1F5;
        background: linear-gradient(180deg,rgba(239,241,245,0) 0%, rgba(239,241,245,1) 100%);
        bottom: 0;
        left: 0;
    }


    /* --- info --- */
    .product-details-container .col-info .card{
        --bs-card-spacer-x: 1.25rem;
        --bs-card-spacer-y: 1.5rem;
    }
    .product-details-container .col-info > .card{
        flex-grow: 1;
    }
    .product-details-container .product-title{
        --product-title-font-size: 1.375rem;
    }
}
@media (min-width: 1400px) {
    /* --- slider --- */
    .product-details-container .col-slider{
        --slider-nav-item-size: 100px;
    }

    /* --- info --- */
    .product-details-container .col-info .card{
        --bs-card-spacer-x: 1.5rem;
    }
    .product-details-container .product-title{
        --product-title-font-size: 1.5rem;
    }
}

@media (max-width: 1199px) {
    /* slide overlay gradient */
    .product-details-container .product-slider-nav::after{
        width: calc(var(--slider-nav-item-size) * 0.75);
        height: var(--slider-nav-item-size);
        background: #fff;
        background: linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        top: 0;
        right: 0;
    }
}
@media (max-width: 767px) {
    .product-details-container{
        width: auto;
        margin-left: calc(var(--app-content-px) * -1);
        margin-right: calc(var(--app-content-px) * -1);
    }
    .product-details-container .row-main{
        padding-top: 3.25rem;
        position: relative;
    }

    /* --- slider --- */
    .product-details-container .col-slider{
        background-color: #fff;
        border-radius: 1.5rem;
        padding-bottom: 1rem;
    }
    .product-details-container .product-slider-nav .swiper-slide:first-child,
    .product-details-container .product-slider-nav .swiper-slide:last-child{
        width: calc(var(--slider-nav-item-size) + var(--app-content-px));
    }
    .product-details-container .product-slider-nav .swiper-slide:first-child{
        padding-left: var(--app-content-px);
    }
    .product-details-container .product-slider-nav .swiper-slide:last-child{
        padding-right: var(--app-content-px);
    }

    .product-details-container .product-slider-wrap .dropdown-menu{
        right: 0;
        left: auto;
    }

    /* --- info --- */
    .product-details-container .col-info > .card{
        --bs-card-spacer-x: 1.5rem;
        --bs-card-spacer-y: 1.5rem;
        --card-negative-margin: calc(var(--bs-card-spacer-x) * -0.5);
        position: inherit;
    }

    /* head */
    .product-details-container .col-info .head{
        width: 100%;
        padding: 0 var(--app-content-px);
        position: absolute;
        top: 0;
        left: 0;
    }
    .product-details-container .col-info .head .badge{
        --badge-bg: #fff;
    }
    .product-details-container .col-info .head .btn{
        --bs-btn-bg: #fff;
    }
    .product-details-container .locations-dropdown > .btn{
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-border-width: 0;
        --btn-gap: 0.25rem;
    }
    .product-details-container .locations-dropdown .dropdown-menu{
        --bs-dropdown-min-width: 280px;
        max-width: var(--bs-dropdown-min-width);
    }

    /* --- */
    .product-details-container .col-info .card-shopping{
        width: auto;
        margin-left: var(--card-negative-margin);
        margin-right: var(--card-negative-margin);
    }
}
@media (max-width: 767px), (min-width: 992px) and (max-width: 1359px) {
    .product-details-container .locations-dropdown > .btn > span{
        display: none !important;
    }
}


/* --- specifications --- */
.table-specifications{
    font-size: 12px;
}
.table-specifications td{
    vertical-align: middle;
}
.table-specifications td:first-child{
    width: 46%;
    color: var(--bs-tertiary-color);
}

@media (min-width: 768px) {
    .table-specifications{
        font-size: 14px;
    }
}
@media (min-width: 992px) {
    .table-specifications td:first-child{
        width: 240px;
    }
}
/* ---------- /product details ---------- */


/* ---------- account ---------- */


/* --- aside --- */
.page-account nav.col-aside{
    /*--aside-inner-width: 322px;*/
    --aside-inner-width: clamp(18.125rem, 6.125rem + 16vw, 20.125rem);
}
.page-account nav.col-aside > ul{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.page-account nav.col-aside .btn{
    --bs-btn-border-radius: 1.25rem;

    width: 100%;
    justify-content: flex-start;
    text-align: left;
}
.page-account nav.col-aside .aside-nav-item{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 500;

    --btn-size: 3.375rem;
    --btn-gap: 0.375rem;

    --i-wrap-size: 1.875rem;
    --i-wrap-bg: transparent;

    --icon-size: 1rem;

    --bs-btn-active-border-color: #FCD55D;

    --btn-icon-color: #7B879D;
    --btn-icon-hover-color: var(--btn-icon-color);
    --btn-icon-active-color: #000;
}
.page-account nav.col-aside .aside-nav-item > i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--i-wrap-size);
    height: var(--i-wrap-size);
    background: var(--i-wrap-bg);
    border-radius: 50%;
}
.page-account nav.col-aside .aside-nav-item.active{
    --i-wrap-bg: var(--bs-btn-active-border-color);
}

/* --- main --- */
.page-account .page-title{
    margin-bottom: 1.25rem;

    font-size: var(--fs-h3);
}
.page-account .card-title{
    margin-bottom: 1rem;
    font-size: var(--fs-h4);
}

@media (min-width: 575px) {
    .page-account .page-title{
        font-size: var(--fs-h2);
    }
    .page-account .card-title{
        font-size: var(--fs-h3);
    }
}
/* ---------- /account ---------- */


/* ---------- basket ---------- */
.page-basket{
    display: flex;
    flex-direction: column;
}
.page-basket .btn-remove-all{
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-font-weight: 500;
}
.page-basket .btn-remove-all img + span:last-child{
    padding-right: 0.375rem;
}

.page-basket .order-summary-fixed-wrap{
    width: 100%;
    /*background-color: #fff;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    box-shadow: 0 -4px 24px 0 rgba(0,0,0,.07);
    padding: 0.6255rem 0.6255rem 1rem;*/
    position: fixed;
    left: 0;
    bottom: var(--app-bottom-bar-height);
    z-index: 335;
}


@media (min-width: 768px) {
    .page-basket .card-order-summary .badge-points{
        --bs-badge-padding-x: 0.75rem;
        --bs-badge-font-size: 14px;

        --badge-size: var(--element-size-4);
    }

    .page-basket .order-summary-fixed-wrap .card-order-summary{
        --bs-card-bg: #fff;
        --bs-card-box-shadow: 0 -2px 12px 0 rgba(0,0,0,.05);
    }
    .page-basket .order-summary-fixed-wrap .badge-points{
        outline: 1px solid #E6E6E6;
    }

}
@media (min-width: 768px) and (max-width: 991px){
    .page-basket .order-summary-fixed-wrap .card-order-summary{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
@media (min-width: 992px) {
    .page-basket .order-summary-fixed-wrap{
        padding: 0 var(--app-content-px);
        bottom: 1.5rem;
    }
    .page-basket .order-summary-fixed-wrap .card-order-summary{
        width: calc( (100vw - var(--app-content-px) * 2)  * 0.91);
        max-width: calc(var(--container-width) * 0.91);
        margin: 0 auto;
    }
}
@media (min-width: 1400px) {
    .page-basket{
        --app-page-spacing-top: 2.25rem;
    }
}

@media (max-width: 991px) {
    .page-basket{
        --app-page-spacing-bottom: 1.5rem;
    }
}
@media (max-width: 767px) {
    .page-basket{
        --app-page-spacing-bottom: 0;
    }
    .page-basket > .card{
        flex-grow: 1;
    }
    .page-basket > .card > .card-body{
        display: flex;
        flex-direction: column;
    }

    .page-basket .btn-remove-all{
        background-color: #fff !important;
        border-color: #fff !important;
    }

    .page-basket .order-summary-wrap,
    .page-basket .order-summary-fixed-wrap{
        background-color: #fff;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        box-shadow: 0 -4px 24px 0 rgba(0,0,0,.07);
        padding: 0.625rem;
    }
    .page-basket .order-summary-wrap{
        padding-bottom: 1rem;
        margin: auto calc(var(--app-content-px) * -1) 0;
    }
    /*.page-basket .order-summary-fixed-wrap .card-body .row:first-child,*/
    .page-basket .order-summary-fixed-wrap .card-body .row:last-child > div:not(:last-child){
        display: none;
    }
}
/* ---------- /basket ---------- */


/* ---------- checkout ---------- */
.page-checkout .col-main > .card,
.page-checkout .col-aside > .card{
    --bs-card-border-radius: var(--card-border-radius-lg);
}

.page-checkout .col-main > .card{
    --bs-card-spacer-y: clamp(1rem, 0.301rem + 1.942vw, 2rem);
    --bs-card-spacer-x: clamp(1rem, 0.301rem + 1.942vw, 2rem);
}

.page-checkout .col-aside .basket-item-card{
    --basket-item-mb: 0.75rem;
}
.page-checkout .col-aside .card-order-summary{
    --card-body-gap-vertiacl: 1rem;

    --product-price-font-size: 1.625rem;
    --product-price-old-font-size: 0.875rem;

    margin-top: 1.5rem;
}

.page-checkout .card-section{
    margin-bottom: 2rem;
}

/* ---------- /checkout ---------- */


/* ---------- orders ---------- */
.order-item-card{
    /*--products-count: attr(data-products-count type(<integer>), 0);*/

    margin-bottom: 1rem;
}

.order-item-card > .card-body{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-item-card .row{
    --bs-gutter-x: 0.75rem;
}
.order-item-card .row:not([class*="gy-"]){
    --bs-gutter-y: 0.75rem;
}

.order-item-card .badge{
    --bs-badge-padding-y: 0.5rem;
    --bs-badge-padding-x: 1rem;
}
.order-item-card .btn{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-border-radius: 0.75rem;

    --icon-size: 1rem;
}
.order-item-card div.btn{
    cursor: default;
}


/* --- products col --- */
.order-item-card .col-products{
    --items-gap: 0.625rem;

    display: flex;
    gap: var(--items-gap);
}

/* products list */
.order-item-card .col-products .products-wrap{
    flex-grow: 1;
    display: flex;
    gap: var(--items-gap);
    max-width: 100%;
    overflow: hidden;
}

/*.order-item-card .col-products .products-list-item:nth-child(2) ~ .products-list-item{
    display: none !important;
}*/

/*.order-item-card .col-products .products-list-item{
    width: calc(50% - var(--items-gap) * 0.5);
}
.order-item-card[data-products-count="1"] .col-products .products-list-item{
    width: 100%;
    max-width: 485px;
}
.order-item-card[data-products-count="1"] .col-products .products-list-item.border-0{
    max-width: 680px;
}*/

.order-item-card .products-list-item .badge{
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-font-size: 12px;
}


/* btn wrap */
.order-item-card .col-products .btn-wrap{
    flex-shrink: 0;
}

.order-item-card .col-products .btn-show-more{
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0;
    --bs-btn-border-radius: 1.125rem;
    --bs-btn-font-size: 1.125rem;
    --bs-btn-font-weight: bold;
    --btn-size: auto;
    --btn-gap: 0;

    --bs-btn-color: #000;
    --bs-btn-border-color: var(--bs-light);

    flex-shrink: 0;
    width: 70px;
    height: 100%;

    /*counter-reset: producst-count calc(var(--products-count) - 2);
    &::after{
        content: counter(producst-count);
    }*/
}

.order-item-card[data-products-count="1"],
.order-item-card[data-products-count="2"]{
    .col-products .btn-show-more{
        display: none !important;
    }
}

/* --- modal --- */
.order-products-modal .modal-dialog{
    --bs-modal-padding: clamp(1.5rem, 0.808rem + 1.923vw, 2rem);
}
.order-products-modal .products-list-item .badge{
    display: none !important;
}
.order-products-modal .products-list-item .product-title{
    -webkit-line-clamp: 5;
}

@media (min-width: 768px) and (max-width: 1299px){
    .order-item-card .col-products{
        max-width: 70%;
    }
    .order-item-card .col-products .products-list-item:not(:first-child){
        display: none !important;
    }
}
@media (min-width: 1300px) {
    .order-item-card .col-products{
        max-width: 75%;
    }

    .order-item-card .col-products .products-list-item:nth-child(2) ~ .products-list-item{
        display: none !important;
    }

    .order-item-card .col-products .products-list-item{
        width: calc(50% - var(--items-gap) * 0.5);
    }
    .order-item-card[data-products-count="1"] .col-products .products-list-item{
        width: 100%;
        max-width: 485px;
    }
    .order-item-card[data-products-count="1"] .col-products .products-list-item.border-0{
        max-width: 680px;
    }
}

@media (max-width: 767px) {
    .order-item-card .col-products,
    .order-item-card .products-wrap{
        flex-direction: column;
    }
    .order-item-card .col-products .btn-show-more{
        display: none !important;
    }

    .order-item-card .btn[data-text-mobile] > span{
        display: none;
    }
    .order-item-card .btn[data-text-mobile]::after{
        content: attr(data-text-mobile);
    }
}


/* --- cancellation --- */
.order-cancellation-modal .modal-dialog{
    --bs-modal-width: 426px;
}

.order-cancellation-modal .col-uploader{
    order: 100;
}
.order-cancellation-modal .btn-upload{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 2px;
    --bs-btn-border-radius: 0.75rem;

    --btn-size: 3rem;
    --btn-gap: 0;
    --icon-size: 1.125rem;

    --bs-btn-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-border-color: #E6E9EF;
    --bs-btn-hover-border-color: #D6DCE8;
    --bs-btn-active-border-color: #C9D0DF;

    border-style: dashed;
    overflow: hidden;
}
.order-cancellation-modal .btn-upload input{
    visibility: hidden;
    position: absolute;
}

.order-cancellation-modal .col-uploader:first-child:last-child,
.order-cancellation-modal .col-uploader:first-child:last-child .btn-upload{
    --bs-btn-border-radius: 1rem;
    width: 100%;
}
.order-cancellation-modal .col-uploader:not(:first-child:last-child) .btn-upload span,
.order-cancellation-modal .col-uploader:first-child:last-child .btn-upload img{
    display: none;
}

.order-cancellation-modal .col-img .img-wrap{
    width: 3rem;
    border: 2px solid #E6E9EF;
    border-radius: 0.75rem;
}
.order-cancellation-modal .col-img .btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 0;

    --btn-size: 100%;
    --icon-size: 1.5rem;

    background-color: rgba(0,0,0,.5);
    opacity: 0;
}
.order-cancellation-modal .col-img .img-wrap:hover .btn{
    opacity: 1;
}
/* ---------- /orders ---------- */


/* ---------- loyalty ---------- */
.loyalty-page-container{
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 0.611rem + 1.852vw, 2rem);
}

@media (min-width: 768px) {
    .loyalty-page-container .card.basket-item-card{
        --bs-card-border-width: 1px;
        --bs-card-border-color: #E9ECF2;
        --basket-item-mb: 0.75rem;
    }
    .loyalty-page-container .basket-item-card .product-wrap{
        --product-title-font-size: 1rem;
        --product-title-font-weight: 700;
        --product-img-width: 6.5rem;

        max-width: 700px;
    }
}
/* ---------- /loyalty ---------- */


/* ---------- contact ---------- */
.page-contact .row-main{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.75rem;
}

/* col map */
.page-contact .col-map .info-wrap .row{
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}
.page-contact .col-map .info-wrap .btn-card{
    pointer-events: auto;
}

/* col form */
.page-contact .card-form{
    --bs-card-spacer-x: 1.5rem;
    --bs-card-spacer-y: 1.5rem;

    --bs-card-title-spacer-y: 0;
    --card-title-font-size: clamp(1.125rem, 0.548rem + 1.603vw, 1.75rem);
}
.page-contact .card-form .card-body{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-contact .card-form .card-title{
    font-size: var(--card-title-font-size);
}

.page-contact .card-form .form-group{
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .page-contact{
        --app-page-spacing-top: 1.5rem;
    }
}
@media (min-width: 992px) {
    .page-contact{
        --app-page-spacing-top: 1.75rem;
    }

    /* col map */
    .page-contact .col-map,
    .page-contact .map-container{
        display: flex;
        flex-direction: column;
    }
    .page-contact .map-container,
    .page-contact .map{
        flex-grow: 1;
    }
    .page-contact .map-container{
        position: relative;
    }
    .page-contact .map{
        outline: 5px solid #fff;
        border-radius: 1.75rem;
    }

    .page-contact .col-map .info-wrap{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 0.75rem;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    /* col form */
    .page-contact .col-form{
        width: 35%;
        max-width: 400px;
    }
}

@media (max-width: 991px) {
    .page-contact .col-map{
        order: 2;
    }
    .page-contact .map{
        display: none;
    }
}

@media (max-width: 767px) {
    .page-contact .card-form{
        margin-left: calc(var(--app-content-px) * -1);
        margin-right: calc(var(--app-content-px) * -1);
    }
}
/* ---------- /contact ---------- */


/* ---------- compare ---------- */
.page-compare .section{
    --section-heder-mb: 1rem;
}
.page-compare .section-head .title{
    font-size: var(--fs-h5);
}

/* --- only differences btn --- */
.page-compare .btn-differences{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 500;
    --bs-btn-color: #2D3648;
    --bs-btn-border-color: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary-bg-subtle);
    --bs-btn-active-border-color: var(--bs-primary-bg-subtle);

    --btn-size: 2.5rem;
    --btn-icon-active-color: var(--bs-primary);

    flex-shrink: 0;
}

/* --- container --- */
.page-compare .compare-container{
    --compare-striped-bg: #F8F9FB;
    --compare-labels-offset: 2px;
    --compare-labels-width: 8.5rem;
    --compare-col-width: 13.5rem;
    --compare-col-gap: 0.25rem;
    --compare-arrow-top: 6.125rem;

    position: relative;
    margin-left: calc(var(--app-content-px) * -1);
    margin-right: calc(var(--app-content-px) * -1);
}

.page-compare [data-compare-row]{
    min-height: var(--row-height, var(--row-min-height, 0));
}

/* --- labels --- */
.page-compare .compare-labels{
    width: var(--compare-labels-width);
    position: absolute;
    top: 0;
    left: var(--compare-labels-offset);
    z-index: 2;
}
.page-compare .compare-labels .compare-card{
    border-radius: var(--bs-border-radius-xxl);
    box-shadow: 0 0 12px 0 rgba(0,0,0,.1);
    padding: 0.5rem 0.25rem 0.25rem;
}
.page-compare .compare-labels .compare-cell{
    justify-content: flex-start;
    padding-left: 0.75rem;

    color: var(--bs-dark-text-emphasis);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}
.page-compare .compare-labels .compare-cell-foot{
    margin-top: 1.5rem;
}
.page-compare .compare-labels .compare-head{
    --row-min-height: 11.25rem;
}

/* --- carousel --- */
.page-compare .compare-carousel.swiper{
    overflow: clip;
    padding-left: calc(var(--compare-labels-offset) + var(--compare-labels-width) + 0.5rem);
    padding-right: var(--app-content-px);
}
.page-compare .compare-carousel .swiper-slide{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: var(--compare-col-width);
    height: auto;
}

.page-compare .compare-carousel .btn-swiper{
    --btn-size: 2.5rem;

    position: absolute;
    top: var(--compare-arrow-top);
    z-index: 4;
}
.page-compare .compare-carousel .btn-swiper-prev{
    left: calc(var(--compare-labels-offset) + var(--compare-labels-width) + 1rem);
}
.page-compare .compare-carousel .btn-swiper-next{
    right: 0.5rem;
}
.page-compare .compare-carousel .btn-swiper.swiper-button-disabled{
    display: none;
}

/* --- card --- */
.page-compare .compare-card{
    background-color: #fff;
    border-radius: var(--bs-border-radius-2xl);
    padding: 0.5rem;
}

/* --- head --- */
.page-compare .compare-head{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
}
.page-compare .compare-tags{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
}
.page-compare .compare-tags .badge{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0;
    --bs-badge-color: #000;
    --badge-size: var(--element-size-2);
    --badge-gap: 0.25rem;
    --badge-line-height: 1;

    justify-content: center;
}
.page-compare .compare-tags .logo-badge img{
    width: 2rem;
}
.page-compare .compare-tags .btn-remove{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;

    margin-left: auto;
}
.page-compare .compare-head .img-wrap{
    --bs-aspect-ratio: 58%;
}

/* --- cells --- */
.page-compare .compare-cell{
    --cell-px: 1rem;
    --cell-py: 8.5px;
    --row-min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius-lg);
    padding: var(--cell-py) var(--cell-px);

    color: var(--bs-dark);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.page-compare .compare-rows > .compare-cell:nth-child(odd of :not(.d-none)){
    background-color: var(--compare-striped-bg);
}
.page-compare .compare-col .compare-rows > .compare-cell:nth-last-child(1 of :not(.d-none)){
    border-bottom-left-radius: var(--bs-border-radius-xxl);
    border-bottom-right-radius: var(--bs-border-radius-xxl);
}

.page-compare .compare-col [data-compare-row="name"]{
    --cell-py: 0.25rem;

    justify-content: flex-start;
    text-align: left;
}
.page-compare .compare-col .product-title{
    --product-title-font-size: 12px;
    --product-title-color: var(--bs-body-color);

    line-height: 1.333;
}
.page-compare .compare-col .product-price{
    --product-price-font-size: 1rem;
    --product-price-color: var(--bs-dark);

    font-weight: 600;
    line-height: 1.22;
}

/* --- foot --- */
.page-compare .compare-foot{
    padding: 0.375rem;
}
.page-compare .compare-foot [data-compare-row="stock"]{
    --cell-py: 0.75rem;

    gap: 0.625rem;
    background-color: var(--compare-striped-bg);
    border-radius: var(--bs-border-radius-xxl) var(--bs-border-radius-xxl) var(--bs-border-radius-lg) var(--bs-border-radius-lg);

    color: #000;
    white-space: nowrap;
}
.page-compare .compare-foot [data-compare-row="offer"]{
    --cell-py: 0.75rem;

    flex-direction: column;
    gap: 0.625rem;
}

.page-compare .btn-compare-cart{
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 500;

    --btn-size: 3rem;
    --icon-size: auto;

    justify-content: space-between;
    width: 100%;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) var(--bs-border-radius-xxl) var(--bs-border-radius-xxl);
}
.page-compare .btn-compare-cart.btn-primary.is-active{
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: rgba(var(--bs-primary-rgb),.15);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb),.2);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb),.05);
    --bs-btn-active-border-color: transparent;
}
.page-compare .btn-compare-cart{
    --bs-btn-disabled-color: color-mix(in srgb, var(--bs-tertiary-color) 40%, transparent);
    --bs-btn-disabled-bg: var(--compare-striped-bg);
    --bs-btn-disabled-border-color: var(--compare-striped-bg);
}
.page-compare .btn-compare-cart:not(.is-active) .btn-state-active,
.page-compare .btn-compare-cart.is-active .btn-state-default{
    display: none;
}

/* --- add card --- */
.page-compare .compare-add-card .btn-add-new-item{
    --bs-btn-bg: var(--bs-light-bg-subtle);
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: var(--bs-border-radius-xxl);
    --bs-btn-font-weight: 500;

    --btn-gap: 0.75rem;

    width: 100%;
    min-height: var(--row-height, 15rem);
}
.page-compare .compare-add-card .btn-add-new-item .i-wrap{
    background-color: #fff;
}

/* --- sticky --- */
.page-compare .compare-sticky{
    display: none;
}

@media (max-width: 767px) {
    /* --- carousel --- */
    .page-compare .compare-carousel.swiper{
        clip-path: inset(0 0 0 var(--compare-labels-offset));
    }

    /* --- labels --- */
    .page-compare .compare-labels .compare-head{
        background-color: var(--compare-striped-bg);
        border-radius: 1.25rem 1.25rem 0 0;
    }
    .page-compare .compare-labels [data-compare-row="name"]{
        align-items: flex-end;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .page-compare .compare-labels .compare-rows > .compare-cell:nth-last-child(1 of :not(.d-none)){
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
    }
}

@media (min-width: 768px) {
    .page-compare .section{
        --section-heder-mb: 1.5rem;
    }
    .page-compare .section-head .title{
        font-size: var(--fs-h2);
    }

    /* --- container --- */
    .page-compare .compare-container{
        --compare-labels-width: 11.25rem;
        --compare-col-width: 18.5625rem;
        --compare-arrow-top: 11.25rem;

        display: flex;
        gap: 0.5rem;
        margin-left: 0;
        margin-right: 0;
    }

    /* --- labels --- */
    .page-compare .compare-labels{
        flex-shrink: 0;
        position: static;
    }
    .page-compare .compare-labels .compare-card{
        height: 100%;
        border-radius: var(--bs-border-radius-2xl);
        box-shadow: none;
        padding: 0.5rem;
    }
    .page-compare .compare-labels .compare-cell{
        font-size: 13px;
    }
    .page-compare .compare-labels [data-compare-row="name"]{
        --cell-py: 0.5rem;
    }
    .page-compare .compare-labels .compare-head{
        --row-min-height: 21.5625rem;
    }

    /* --- carousel --- */
    .page-compare .compare-carousel.swiper{
        flex-grow: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    .page-compare .compare-carousel .btn-swiper-prev{
        left: 0.5rem;
    }

    /* --- head --- */
    .page-compare .compare-head .img-wrap{
        --bs-aspect-ratio: 100%;
    }

    /* --- cells --- */
    .page-compare .compare-cell,
    .page-compare .compare-col [data-compare-row="name"]{
        --cell-py: 0.75rem;
    }

    /* --- foot --- */
    .page-compare .compare-foot{
        padding: 0.5rem;
    }
    .page-compare .btn-compare-cart{
        --bs-btn-font-size: 1rem;
        --bs-btn-font-weight: 400;
    }

    /* --- sticky --- */
    .page-compare .compare-sticky{
        display: block;
        height: 5.5rem;
        margin-bottom: -6rem;
        position: sticky;
        top: calc(var(--app-header-height) + 0.5rem);
        z-index: 3;
        pointer-events: none;
    }
    .page-compare .compare-sticky .products-list-item{
        background-color: #fff;
        border-color: #E0E4EB;
        border-radius: 1.25rem;
        box-shadow: 0 4px 12px 0 rgba(0,0,0,.1);
        padding: 0 0 0 0.375rem;
        position: absolute;
        top: 0;
        left: 0.375rem;
        right: 0.375rem;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.5rem);
        transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility .2s;
    }
    .page-compare .compare-sticky .products-list-item .img-wrap{
        width: 3.125rem;
        border-radius: 2px;
        margin-right: 0.125rem;
    }
    .page-compare .compare-sticky .products-list-item .product-title{
        --product-title-font-size: 12px;

        -webkit-line-clamp: 3;
        padding: 0.75rem 0.75rem 0.75rem 0;
        line-height: 1.333;
    }
    .page-compare .compare-container.is-sticky .compare-sticky .products-list-item{
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
}
/* ---------- /compare ---------- */


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