/*
 * Theme: PCBayi B2B
 * URL: pcbayi.com
 */

/* 0- Reset */
:root{
    --font-family-main: "Inter", sans-serif;
    --font-family-tabler: 'tabler-icons';
    --base-font-size-12: 12px;
    --base-font-size-13: 13px;
    --base-font-size-14: 14px;
    --base-font-size-16: 16px;
    --base-font-size-18: 18px;
    --base-font-size-20: 20px;
    --base-font-size-22: 22px;
    --base-font-size-24: 24px;
    --color-main-border: #e4e4e4;
    --color-bg-f2: #f2f2f2;
    --color-bg-fb: #fbfbfb;
    --color-red: #ff0000;
    --color-main: #1c1c1c;
    --color-main-soft: #ff6f68;
    --color-second: #313131;
    --color-main-hover: #ff0000;
    --color-main-81: #818181;
    --color-main-22: #222222;
    --color-white: #ffffff;
    --color-main-c3: #c3c3c3;
    --css-transition-ease: all .3s ease-in-out;
    --set-margin-bottom: 30px;
    --set-margin-bottom-15: 15px;
    --footer-bg: #7c7c7c;
    --color-main-6e: #6e6e6e;
    --color-warning: #ff9800;
    --color-dark-red: #c52323;
    --color-main-blue: #18264d;
    --color-main-blue-hover: #213467;
    --box-shadow-global: 0 0 7px 0px rgb(0 0 0 / 15%);
    --box-shadow-global-focus: 0 0 7px 0px rgb(0 35 170 / 35%);
    --tblr-white: #ffffff;
    --tblr-black: #000000;
    --tblr-dark: #1f2937;
    --tblr-blue: #066fd1;
    --tblr-azure: #4299e1;
    --tblr-indigo: #4263eb;
    --tblr-purple: #ae3ec9;
    --tblr-pink: #d6336c;
    --tblr-red: #d63939;
    --tblr-orange: #f76707;
    --tblr-yellow: #f59f00;
    --tblr-lime: #74b816;
    --tblr-green: #2fb344;
    --bs-primary: #18264d;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:@0,300;0,400;0,600;0,700;&family=STIX+Two+Text');
a, a:active, a:focus, a:hover, button, button:hover, button:focus, button:active{ text-decoration: none!important; outline: none!important; }
.form-control.no-resize{ resize: none; }
.cursor-pointer{ cursor: pointer; }
.dropdown-toggle::after{ content: "\ea5f"; font-family: var(--font-family-tabler); border: 0; }
html, body { min-height: 100%; height: 100%; width: 100%; }
body{ font-family: var(--font-family-main); font-size: var(--base-font-size-14); min-height: 100%}
.modal.no-footer .modal-footer{ display: none; }
.modal.no-footer .modal-header{ background-color: var(--color-second); }
.modal.no-footer .modal-header .modal-title{ color: var(--color-white); }
.modal.no-footer .modal-header .btn-close{ background-color: var(--color-white); opacity: 1; }
.tooltip-el{ text-align: center; position: relative; display: inline-block; font-weight: 600; width: 10px; color: var(--color-main)}
.btn-primary-main{ background-color: var(--color-main); border-color: var(--color-main); color: var(--color-white)}
.btn-primary-main:hover,
.btn-primary-main:active,
.btn-primary-main:first-child:active,
.btn-primary-main:focus,
.btn-primary-main.show,
.btn-primary-main.active{ color: var(--color-white); background-color: var(--color-main-hover); border-color: var(--color-main-hover)}
.btn-secondary-main{ background-color: var(--color-main-blue); border-color: var(--color-main-blue); color: var(--color-white)}
.btn-secondary-main:hover,
.btn-secondary-main:active,
.btn-secondary-main:first-child:active,
.btn-secondary-main:focus,
.btn-secondary-main.show,
.btn-secondary-main.active{ color: var(--color-white); background-color: var(--color-main-blue-hover); border-color: var(--color-main-blue-hover)}
.form-control::placeholder{ color: var(--color-main-81) }
.overlay-div{ display: none; }
.mobile-overlay .overlay-div,
.show-overlay .overlay-div{ display: block; width: 100%; height: 100%; background: rgba(0,0,0,.55); z-index: 15; position: fixed; top: 0; left: 0; }
a.full-anchor{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; }
body.mm-opened,
body.show-overlay{ width: 100%; height: 100%; overflow: hidden; }
body.show-overlay .quick-links{ z-index: 2; }
.visible-container{ position: relative; width: 1px; height: 1px; display: inline-block; overflow: hidden; opacity: 0;}
.visible-container .visible-item{ position: absolute; top: 0; lefT: 0; width: 1px; height: 1px;}
a div.pending-el{ display: none; }
a.pending-btn span.btn-def-el{ display: none; }
a.pending-btn div.pending-el{ display: inline-block; }
.loading-div{ display: none; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }
.loading-show-el .loading-div{ display: block; z-index: 999; }
.loading-show-el .loading-div .loading-el{ height: 100%; display: flex; justify-content: center; align-items: center;}
.loading-show-el .loading-div .loading-el .inner-el{ display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center; color: #f2f2f2; background: rgb(0 0 0 / 50%); padding: 10px; border-radius: 100%;  }
.loading-show-el .loading-div .loading-el .inner-el .text{ font-size: var(--base-font-size-20); font-weight: 600; margin-top: 15px;}
body.loading-show-el{ overflow: hidden; }
.telInput{ max-width: 100px;  }
.telInput+.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 36px; }
.telInput+.select2-container--default .select2-selection--single .select2-selection__arrow{ height: 34px; }
.telInput+.select2-container .select2-selection--single .select2-selection__rendered{ height: 38px; }
.telInput+.select2-container .select2-selection--single{ height: 38px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); margin-left: 1px; }

/* 1- Header */
.head-side{ }
.head-side.zIndex{ z-index: 17; position: relative; background-color: var(--color-white) }
body.is-sticky{ margin-top: 193px; }
.head-side.is-sticky {animation: slideDown 0.35s ease-out; position: fixed; top: 0; left: 0; background-color: var(--color-white); z-index: 99; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 40%); }
.head-side .top-bar{ background: var(--color-white); border-bottom: 1px solid var(--color-main-border) }
.head-side .top-bar .list-group .list-group-item{ padding: 7px 0; background: none; border: none;}
.head-side .top-bar .list-group .list-group-item+.list-group-item label.no-click.has-border{ position: relative; }
.head-side .top-bar .list-group .list-group-item+.list-group-item a:not(.not-main){ position: relative; }
.head-side .top-bar .list-group .list-group-item+.list-group-item a:before{ content: ""; top: 5px; left: 0; display: block; width: 1px; height: 16px; background-color: var(--color-main-border); position: absolute; }
.head-side .top-bar .list-group .list-group-item+.list-group-item label.no-click.has-border:before{ content: ""; top: 5px; left: 0; display: block; width: 1px; height: 16px; background-color: var(--color-main-border); position: absolute; }
.head-side .top-bar .list-group .list-group-item+.list-group-item .mega-inner a:before{ display: none }
.head-side .top-bar .list-group .list-group-item+.list-group-item .mega-inner ul a{ border-left: 0}
.head-side .top-bar .list-group .list-group-item+.list-group-item .mega-inner ul+ul{ position: relative}
.head-side .top-bar .list-group .list-group-item+.list-group-item .mega-inner ul+ul:after{content: ""; position: absolute; left: 0; top: 15%; width: 1px; height: 70%; background: var(--color-main-border); }
.head-side .top-bar .list-group .list-group-item label.no-click,
.head-side .top-bar .list-group .list-group-item a{ transition: var(--css-transition-ease); color: var(--color-second); display: inline-flex; align-items: center; padding: 3px 15px; background: none; border: none;}
.head-side .top-bar .list-group .list-group-item a:hover{ color: var(--color-main-hover);}
.head-side .top-bar .list-group .list-group-item i{ color: var(--color-main); font-size: var(--base-font-size-14); margin-right: 5px; padding-bottom: 3px  }
.head-side .top-bar .list-group .list-group-item label.no-click i{ margin-right: 2px; padding-bottom: 3px  }
.head-side .top-bar .list-group .list-group-item span{  }
.head-side .top-bar .list-group .list-group-item+.list-group-item label.no-click{ padding-right: 7px; }
.head-side .top-bar .list-group .list-group-item+.list-group-item label+label{ padding-left: 0; }
.dropdown.hoverable .dropdown-menu { animation: 0.3s slideUp; }
/*.dropdown.hoverable:hover>.dropdown-menu { display: block; }*/
.dropdown.hoverable>.dropdown-menu.show-el { display: block; }
.dropdown.hoverable>.dropdown-toggle:active { pointer-events: none; }
.head-side .mega-drdown.dropdown-menu{ padding: 15px; background: none; border: none; right: 0; }
.head-side .sub-header-container .mega-drdown.dropdown-menu{ padding: 15px 0; }
.head-side .mega-drdown.dropdown-menu .mega-inner{ position: relative; border-radius: 5px; background: var(--color-white); border-top: 3px solid var(--color-main); display: flex; box-shadow: var(--box-shadow-global)}
.head-side .mega-drdown.dropdown-menu .mega-inner:after{ content: ""; width: 10px; height: 10px; position: absolute; top: -7px; right: 1em; z-index: -1; transform: rotate(45deg); background: var(--color-main); }
.head-side .mega-drdown.dropdown-menu .mega-inner ul { padding: 15px 10px;}
.head-side .mega-drdown.dropdown-menu .mega-inner ul li{ font-size: var(--base-font-size-14); list-style: none; }
.head-side .mega-drdown.dropdown-menu .mega-inner ul li a .defaultCurrency{ margin-left: 10px; background: var(--color-main-blue); color: var(--color-white); border-radius: 5px; font-size: 10px; padding: 2px 5px; text-transform: uppercase; font-weight: 600; }
.head-side .mega-drdown.dropdown-menu .mega-inner ul li.title{ font-weight: 600 }
.head-side .mega-drdown.dropdown-menu .mega-inner .title-wrapper{ font-size: var(--base-font-size-14); min-width: 450px; padding: 15px 20px; width: 100%; height: auto; border-bottom: 1px solid var(--color-main-border); }
.head-side .mega-drdown.dropdown-menu .mega-inner .bottom-side .right-side i{ min-width: var(--base-font-size-14);}
.head-side .mega-drdown.dropdown-menu .mega-inner .bottom-side{ font-size: var(--base-font-size-14);}
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .col{ padding: 15px; text-align: left;}
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .sub-container,
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .up-container{ width: 100%; height: 50%; padding: 15px; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; }
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .not-main{ padding: 0}
.head-side .mega-drdown.dropdown-menu.profile-mega{ min-width: 520px;}
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .not-main.tel_gsm{ display: inline-flex; }
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .tel-gsm-wrap span{ color: var(--color-main); font-weight: 600; }
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .title{ color: var(--color-main); font-weight: 600;}
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .mail-info{ color: #2a2e37; }
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .sub-container{ border-top: 1px solid var(--color-main-border); }
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side .left-side{ border-right: 1px solid var(--color-main-border); }
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side,
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side span,
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side a,
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-side ul li a{ font-size: 14px; }
.top-bar .mega-drdown.dropdown-menu .mega-inner .bottom-button-wrapper a{ border-top: 1px solid var(--color-main-border); border-radius: 0 0 5px 5px; padding: 1em; background: var(--color-bg-f2); }
.head-side .mega-drdown.dropdown-menu .mega-inner.cat-list{}
.head-side .mega-drdown.dropdown-menu .mega-inner.cat-list ul{ margin-bottom: 0; width: 100%; padding: 10px 0;}
.head-side .mega-drdown.dropdown-menu .mega-inner.cat-list ul li{ padding: 0 10px; width: 100%}
.head-side .mega-drdown.dropdown-menu .mega-inner.cat-list ul li a{ position: relative; width: 100%}
.head-side .mega-drdown.dropdown-menu .mega-inner.cat-list ul li.has-child>a:after{ color: var(--color-main); font-size: var(--base-font-size-16); content: '\ea61'; position: absolute; font-family: var(--font-family-tabler); top: 0; right: 0; width: 20px; height: 100%; display: flex; justify-content: center; align-items: center; }
.head-side .mega-drdown.dropdown-menu .mega-inner.cat-list ul li a i{ min-width: 20px; display: inline-block; }
.main-header{ }
.main-header .logo-side{ width: 100%; max-width: 230px; }
.main-header .logo-side a.main-logo{ display: block; position: relative; padding: 15px 0;}
.main-header .search-side{ width: 100%; padding: 0 calc(var(--bs-gutter-x) * .5); display: flex; align-items: center; }
.show-overlay .main-header .search-side.z-index-overlay{ z-index: 16; }
.main-header .search-side .input-group-wrapper{ position: relative; /*padding: 0 calc(var(--bs-gutter-x) * .5);*/ }
.main-header .search-side .form-control{ border-right: 0; border-color: var(--color-main-border); padding-left: 20px; font-size: var(--base-font-size-14); height: 52px; background: var(--color-bg-f2); }
.main-header .search-side .form-control:focus{ box-shadow: none; }
.main-header .search-side .cats-btn{ background-color: var(--color-bg-f2); border-color: var(--color-main-border); border-left: 0; }
.main-header .search-side .cats-btn:after{ display: none; }
.main-header .search-side .cats-btn span{ color: var(--color-second); position: relative; padding: 5px 30px 5px 10px; background: rgba(0, 0, 0, .05); border-radius: var(--bs-border-radius); }
.main-header .search-side .cats-btn span:after{ content: "\ea5f"; top: 5px; right: 10px; position: absolute; font-family: var(--font-family-tabler); }
.main-header .search-side .search-btn{ padding: 0 5px 0 0; border-left: 0; border-color: var(--color-main-border); background-color: var(--color-bg-f2); }
.main-header .search-side .search-btn i{ font-size: 20px; border-radius: var(--bs-border-radius); width: 42px; height: 42px; display: inline-flex; justify-content: center; align-items: center; color: var(--color-white); background-color: var(--color-main); }
.main-header .header-buttons-side{ width: 100%; max-width: 155px; display: flex; align-items: center; justify-content: space-evenly; }
.main-header .header-buttons-side a{ color: var(--color-second); position: relative; display: inline-flex; }
.main-header .header-buttons-side a .badge{ background-color: var(--color-main); color: var(--color-white); position: absolute; right: -5px; top: 0; }
.main-header .header-buttons-side a+a{ margin-left: 15px; }
.main-header .header-buttons-side i{ font-size: 32px; position: relative; }
.main-header .search-result-wrapper{ position: absolute; top: 100%; left: 0; width: 100%; padding: calc(var(--bs-gutter-x) * .5); z-index: 5; display: none; }
.main-header .search-result-wrapper .result-content{ width: 100%; height: auto; min-height: 120px; position: relative; border-radius: 5px; background: var(--color-white); border-top: 3px solid var(--color-main); display: block; box-shadow: var(--box-shadow-global);  padding: var(--set-margin-bottom-15); }
.main-header .search-result-wrapper .result-content:after{ content: ""; width: 10px; height: 10px; position: absolute; top: -7px; left: 1em; z-index: -1; transform: rotate(45deg); background: var(--color-main); }
.search-result-wrapper .result-content .title-content{ margin-bottom: var(--set-margin-bottom-15); font-weight: 600; color: var(--color-main); font-size: var(--base-font-size-16) }
.search-result-wrapper .result-content .title-content i{ display: none; }
.search-result-wrapper .result-content .res-products,
.search-result-wrapper .result-content .res-cats-wrapper{ max-height: 50vh; overflow-y: auto; width: 100%;  }
.search-result-wrapper .result-content .result-cat-list{ padding: 0;  list-style: none; }
.search-result-wrapper .result-content .result-cat-list .cat-item{  }
.search-result-wrapper .result-content .result-cat-list .cat-item a{ display: inline-block; color: var(--color-main-81); font-size: var(--base-font-size-14); padding: 2px 0; }
.search-result-wrapper .result-content .result-cat-list .cat-item.title-item a{ color: var(--color-second); font-weight: 600; margin-bottom: 5px; }
.search-result-wrapper .res-product-el{ position: relative; width: 100%; padding: 5px; border-radius: var(--bs-border-radius); background-color: var(--color-bg-f2)}
.search-result-wrapper .res-product-el:nth-child(even){ background-color: var(--color-white) }
.search-result-wrapper .res-product-el .image-side{ border-radius: var(--bs-border-radius); position: relative; width: 60px; max-width: 60px; height: 60px; max-height: 60px; text-align: center; }
.search-result-wrapper .res-product-el .col{ padding: 0;  }
.search-result-wrapper .res-product-el .buttons-side{ max-width: 146px;}
.search-result-wrapper .res-product-el .product-side{ padding: 0 var(--set-margin-bottom-15)}
.search-result-wrapper .res-product-el .buttons-side .input-group{ max-width: 146px; text-align: right;}
.search-result-wrapper .res-product-el .buttons-side .input-group .form-control{ padding: 5px; height: 30px; width: 40px; max-width: 40px; text-align: center }
.search-result-wrapper .res-product-el .buttons-side .input-group .btn{ height: 30px; width: 36px; }
.search-result-wrapper .res-product-el .buttons-side .input-group .btn-cart{ background-color: var(--color-second); border-color: var(--color-second) }
.res-product-el .product-side .pr-name{ margin-bottom: 5px; font-weight: 600; font-size: var(--base-font-size-12); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.res-product-el .product-side .pr-stock{ font-size: var(--base-font-size-12); }
.res-product-el .product-side .pr-stock label{ color: var(--color-main); font-weight: 600; }
.res-product-el .product-side .pr-stock span{ color: var(--color-main-81)}
.res-product-el a.full-anchor{ z-index: 9; }
.res-product-el .input-group{ z-index: 10; }
.not-found-warning{ display: flex;}
.not-found-warning i{ font-size: var(--base-font-size-20); margin-right: 10px;}
.sub-header{}
.sub-header .sub-header-container{ padding: 5px; display: flex; align-items: center; border: 1px solid var(--color-main-border); border-radius: var(--bs-border-radius); position: relative; }
.sub-header .sub-header-container .categories-btn-wrapper{ width: 100%; max-width: 260px; }
.sub-header .sub-header-container .mega-drdown{ width: 100%; }
.sub-header .sub-header-container .btn.btn-main-menu{ font-weight: 600; padding-left: 25px; padding-right: 25px; display: flex; justify-content: space-between; width: 100%; }
.sub-header .sub-header-container .btn.btn-main-menu i{ position: relative; top: 4px;}
.sub-header .sub-header-container .btn.btn-main-menu:after{ display: none;}
.sub-header .sub-header-container .second-nav{ justify-content: space-between; display: flex; width: 100%; padding: 0 0 0 calc(var(--bs-gutter-x) * .5); }
.sub-header .sub-header-container .second-nav ul.list-inline{ margin-bottom: 0; }
.sub-header .sub-header-container .second-nav ul.list-inline li{ display: inline-flex; }
.sub-header .sub-header-container .second-nav ul.list-inline li a{ align-items: center; padding: 10px 15px; color: var(--color-second); font-weight:600; }
.sub-header .second-nav ul.list-inline li a.pc-wizard{ position: relative; font-weight: 600; border-radius: var(--bs-border-radius); background-color: var(--color-main-blue); color: var(--color-white) }
.sub-header .second-nav ul.list-inline li a.campaign-products{ position: relative; font-weight: 600; border-radius: var(--bs-border-radius); background-color: var(--bs-primary); color: var(--color-white) }
.sub-header .second-nav ul.list-inline li a.campaign-products .badge{ background-color: var(--color-dark-red); position: absolute; top: -4px; left: -10px; font-size: var(--base-font-size-12); border-radius: 50px; box-shadow: 0 0 15px -4px rgb(0 0 0 / 50%)}
.sub-header .sub-header-container .second-nav ul.list-inline li .mega-drdown{ left: 0; top: 100%; width: 100%;}
.sub-header .mega-inner .category-sub-menu{ display: none; }
.sub-header-container .second-nav-sub-menu{ animation: 0.3s slideUp; padding: 15px; display: none; z-index: 10; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--color-white); min-height: 300px; border-radius: var(--bs-border-radius); box-shadow: var(--box-shadow-global); border-top: 3px solid var(--color-main); max-height: 70vh; overflow-y: auto; }
.sub-header-container .second-nav-sub-menu.show-it{ display: block; }
.sub-header-container .mega-menu-manufacturers .mega-mm-inner{ display: flex; flex-wrap: wrap; align-items: flex-start; align-content: center; gap: 15px; }
.sub-header-container .second-nav-sub-menu.mega-menu-wizard{ max-width: 600px; left: auto; right: 0; }
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el{ display: flex; justify-content: space-around; height: 100%; }
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el{ text-align: center; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 15px; min-height: 250px; align-items: center; justify-content: space-between; }
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el p{ font-size: var(--base-font-size-14); color: var(--color-main-81); }
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el .btn{ transition: all .3s ease; font-size: var(--base-font-size-14); border-color: var(--color-main-blue); background-color: var(--color-main-blue); font-weight: 600; }
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el .btn:hover,
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el .btn:focus,
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el .btn:active,
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el .btn.active{ background-color: var(--tblr-indigo); border-color: var(--tblr-indigo)}
.sub-header-container .second-nav-sub-menu.mega-menu-wizard .inner-flex-el .wizard-el img{ position: relative; height: 80px; width: auto; margin-bottom: 15px; }
.sub-header-container .mega-menu-manufacturers ul{ margin-bottom: 0; display: flex; padding: 0; flex-direction: column; width: 6.55%; }
.sub-header-container .mega-menu-manufacturers ul li{ list-style: none; }
.sub-header-container .mega-menu-manufacturers ul li.list-head{ font-size: var(--base-font-size-16); border-bottom: 2px solid var(--color-main-border); color: var(--color-main); font-weight: 600; margin-bottom: 5px; padding: 2px 0; }
.sub-header-container .mega-menu-manufacturers ul li a{ font-size: var(--base-font-size-13); transition: all .3s ease; padding: 3px 0; color: var(--color-second); }
.sub-header-container .mega-menu-manufacturers ul li a:hover,
.sub-header-container .mega-menu-manufacturers ul li a:active,
.sub-header-container .mega-menu-manufacturers ul li a.active,
.sub-header-container .mega-menu-manufacturers ul li a:focus{ color: var(--color-main) }
.sub-header .cat-list .has-child{ position: relative; }
.sub-header .cat-list .has-child .dr-menu{ display: none; border-radius: var(--bs-border-radius); box-shadow: var(--box-shadow-global); border-top: 3px solid var(--color-main); }
.sub-header .cat-list .has-child .dr-menu.show-el{ display: block; position: absolute; top: 0; left: 100%; width: 250px; height: auto; min-height: 100px; background-color: var(--color-white); z-index: 5; }
.sub-header .cat-list .has-child .dr-menu li a{ display: block; color: var(--color-second); padding: 4px 10px!important; }
.sub-header .cat-list .has-child a:hover{ background-color: var(--color-bg-f2); color: var(--color-main)!important; }

.sub-header-container .mega-menu-campaign .mega-mm-inner{ display: flex; flex-wrap: wrap; align-items: flex-start; align-content: center; gap: 15px; }
.mega-menu-campaign .slick-pr-item{ float: left; position: relative; padding: 0 5px; width: 16.66666% }
.mega-menu-campaign .slick-pr-item .item-inner{ position: relative; border-radius: var(--bs-border-radius); border: 1px solid var(--color-main-border); padding: 10px;  }
.mega-menu-campaign .slick-pr-item .item-inner .promo-badge{ position: absolute; top: 10px; left: 10px; background-color: var(--bs-success); color: var(--color-white); padding: 2px 10px; font-size: var(--base-font-size-14); z-index: 2; border-radius: var(--bs-border-radius);  }
.mega-menu-campaign .slick-pr-item .item-inner .pr-img{ margin-bottom: 10px; background-size: contain; background-position: center center; background-repeat: no-repeat; width: 100%; position: relative; display: block; height: 180px; border-radius: var(--bs-border-radius); }
.mega-menu-campaign .slick-pr-item .item-inner .pr-name{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--base-font-size-12); font-weight: 600; width: 100%; margin-bottom: 10px; }
.mega-menu-campaign .slick-pr-item .item-inner .actions-div{ font-size: var(--base-font-size-12); font-weight: 600; width: 100%; display: flex; justify-content: space-between; align-items: end; }
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .btn-cart{ position: relative; z-index: 3; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; font-size: 14px;  background-color: rgba(from var(--color-main) r g b / 0.2); border-color: var(--color-main); color: var(--color-main)}
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .btn-cart:hover,
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .btn-cart:active,
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .btn-cart.active,
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .btn-cart:focus{ background-color: var(--color-main); color: vaR(--color-white); }
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .price-side{ margin-bottom: -4px; }
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .price-side span{ display: block; }
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .price-side span.discount{ font-size: var(--base-font-size-12); color: var(--color-main-81); text-decoration: line-through; font-weight: normal; }
.mega-menu-campaign .slick-pr-item .item-inner .actions-div .price-side span.price{ font-size: var(--base-font-size-14); color: var(--color-main); }
.mega-menu-campaign .slick-pr-item .pr-act-list{ animation: 0.5s slideLeft; z-index: 2; display: none; position: absolute; right: 10px; top: 10px; width: 34px; }
.mega-menu-campaign .slick-pr-item .pr-act-list .act-btn{ font-size: 18px; width: 34px; height: 34px; margin-bottom: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--color-bg-f2); color: var(--color-second); }
.mega-menu-campaign .slick-pr-item .pr-act-list .act-btn:hover,
.mega-menu-campaign .slick-pr-item .pr-act-list .act-btn:active,
.mega-menu-campaign .slick-pr-item .pr-act-list .act-btn.active,
.mega-menu-campaign .slick-pr-item .pr-act-list .act-btn:focus{ color: var(--color-white); background: var(--color-main); }
.mega-menu-campaign .slick-pr-item:hover .pr-act-list{ display: block; }
.mega-menu-campaign .slick-pr-item a.full-anchor{ z-index: 1;}
.mega-menu-campaign .text-side{ padding: 0 5px; margin-bottom: 10px; }
.mega-menu-campaign .promo-title{ padding: 10px 0; font-size: vaR(--base-font-size-16); position: relative; font-weight: 600; color: var(--color-second); border-bottom: 1px solid var(--color-main-border); }
.mega-menu-campaign .promo-title:after{ position: absolute; content: ""; bottom: 0; left: 0; width: 45px; border-bottom: 2px solid var(--color-main); }
.mega-menu-campaign .show-more-div{ padding: 0 5px; width: 100%; margin-top: 15px; }
.mega-menu-campaign .show-more-div .promo-text{ font-size: 20px; /*font-weight: 600;*/ }
.mega-menu-campaign .show-more-div .inner-div{ background-color: var(--color-bg-f2); border-radius: var(--bs-border-radius); padding: 15px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.mega-menu-campaign .show-more-div .btn-load-more{ border-color: var(--color-warning); color: var(--color-white); background-color: var(--color-warning); font-weight: 600; }


.sidebar-cart-div{ position: fixed; top: 0; bottom: 0; height: 100%; width: 400px; background-color: var(--color-white); opacity: 0; visibility: hidden; z-index: 0; transition: .2s ease-in-out; right: -200px; }
.sidebar-cart-div.active{ z-index: 200; opacity: 1; visibility: visible; transform: translate(-200px) }
.sidebar-cart-div .cart-inner{ display: block; width: 100%; height: 100%; }
.sidebar-cart-div .cart-inner .cart-header{ padding: var(--set-margin-bottom-15); background: var(--color-bg-f2); width: 100%; height: 80px; display: flex; justify-content: space-between; align-items: center;  }
.sidebar-cart-div .cart-inner .cart-header .cart-text{ position: relative;  }
.sidebar-cart-div .cart-inner .cart-header .cart-text i{ font-size: 36px; }
.sidebar-cart-div .cart-inner .cart-header .cart-text .badge{ position: absolute; top: 0; right: -10px; background-color: var(--bs-danger); }
.sidebar-cart-div .cart-inner .cart-header .cart-buttons{}
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-save-cart{ transition: all .3s ease; font-weight: 600; font-size: var(--base-font-size-14); color: var(--color-main); background-color: rgba(from var(--color-main) r g b / 0.2); border: 2px solid var(--color-main); }
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-save-cart:hover,
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-save-cart:active,
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-save-cart.active,
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-save-cart:focus{ background-color: var(--color-main); color: var(--color-white); }

.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-close-cart{ transition: all .3s ease; display: inline-flex; justify-content: center; align-items: center; padding: 0; width: 37px; height: 37px;  font-size: 24px; border-color: var(--color-second); color: var(--color-white); background-color: var(--color-second); }
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-close-cart:hover,
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-close-cart:active,
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-close-cart.active,
.sidebar-cart-div .cart-inner .cart-header .cart-buttons .btn-close-cart:focus{ background-color: var(--bs-danger); color: var(--color-white); border-color: var(--bs-danger) }

.sidebar-cart-div .cart-inner .cart-content{ padding: var(--set-margin-bottom-15); width: 100%; display: block; height: calc(100% - 204px); overflow-x: auto; }
.sidebar-cart-div .cart-content .cart-item-div{ margin-bottom: 7px; position: relative; width: 100%; background-color: var(--color-bg-f2); border: 2px solid var(--color-main-border); border-radius: var(--bs-border-radius) }
.sidebar-cart-div .cart-content .cart-item-div .item-inner{ align-items: center; display: flex; justify-content: space-between; }
.sidebar-cart-div .cart-content .cart-item-div .promo-badge{ position: absolute; top: 10px; left: 10px; background-color: var(--bs-success); color: var(--color-white); padding: 0 5px; font-size: var(--base-font-size-12); z-index: 2; border-radius: var(--bs-border-radius);  }
.sidebar-cart-div .cart-content .cart-item-div .img-side{ padding: 5px; flex: 0 0 80px; border-radius: var(--bs-border-radius);  }
.sidebar-cart-div .cart-content .cart-item-div .text-side{ padding: 5px; width: calc(100% - 80px);}
.sidebar-cart-div .cart-content .cart-item-div .pr-img{ background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; position: relative; display: block; height: 60px; border-radius: var(--bs-border-radius); }
.sidebar-cart-div .cart-content .cart-item-div .pr-name{ margin-bottom: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--base-font-size-12); font-weight: 600; width: 100%; }
.sidebar-cart-div .cart-content .cart-item-div .actions-div{ font-size: var(--base-font-size-12); font-weight: 600; width: 100%; display: flex; justify-content: space-between; align-items: end; }
.sidebar-cart-div .cart-content .cart-item-div .actions-div .form-control{ width: 40px; height: 24px; font-size: var(--base-font-size-14); text-align: center; }
.sidebar-cart-div .cart-content .cart-item-div .actions-div .btn-sm{ position: relative; z-index: 2; width: 28px; height: 24px; display: inline-flex; justify-content: center; align-items: center; font-size: 14px;  background-color: var(--color-main); border-color: var(--color-main); color: var(--color-white)}
.sidebar-cart-div .cart-content .cart-item-div .actions-div .btn-cart{ position: relative; z-index: 2; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; font-size: 14px;  background-color: var(--color-second); border-color: var(--color-second); color: var(--color-white)}
.sidebar-cart-div .cart-content .cart-item-div .actions-div .btn-cart:hover,
.sidebar-cart-div .cart-content .cart-item-div .actions-div .btn-cart:active,
.sidebar-cart-div .cart-content .cart-item-div .actions-div .btn-cart.active,
.sidebar-cart-div .cart-content .cart-item-div .actions-div .btn-cart:focus{ background-color: var(--color-main); color: vaR(--color-white); }
.sidebar-cart-div .cart-content .cart-item-div .actions-div .price-side{ margin-bottom: -4px; }
.sidebar-cart-div .cart-content .cart-item-div .actions-div .price-side span{ }
.sidebar-cart-div .cart-content .cart-item-div .actions-div .price-side span.discount{ font-size: var(--base-font-size-12); color: var(--color-main-81); text-decoration: line-through; font-weight: normal; }
.sidebar-cart-div .cart-content .cart-item-div .actions-div .price-side span.price{ font-size: var(--base-font-size-14); color: var(--color-main); }
.sidebar-cart-div .cart-content .cart-item-div .btn-delete-item{ transition: all .3s ease; display: none; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; color: var(--color-white); background-color: var(--bs-danger); font-size: 12px; justify-content: center; align-items: center; }
.sidebar-cart-div .cart-content .cart-item-div:hover .btn-delete-item{ display: flex; }

.sidebar-cart-div .cart-inner .cart-footer{ padding: var(--set-margin-bottom-15); width: 100%; height: 124px; background-color: var(--color-bg-f2); display: block; position: relative; }
.sidebar-cart-div .cart-inner .cart-footer .sub-total{ border: 2px solid var(--color-main-border); font-weight: 600; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-radius: var(--bs-border-radius); background-color: var(--color-white); width: 100%; }
.sidebar-cart-div .cart-inner .cart-footer .sub-total .text-side{ width: 50%; border-right: 2px solid var(--color-main-border); color: var(--color-main-6e)}
.sidebar-cart-div .cart-inner .cart-footer .sub-total .price-side{ color: var(--color-main)}
.sidebar-cart-div .cart-inner .cart-footer .sub-buttons{ padding: 10px 0 0; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.sidebar-cart-div .cart-footer .btn{ font-size: var(--base-font-size-14); transition: all .3s ease; font-weight: 600; width: calc(50% - 5px); }
.sidebar-cart-div .cart-footer .btn.btn-give-offer{ border: 2px solid var(--color-warning); color: var(--color-warning); background-color:  rgba(from var(--color-warning) r g b / 0.2); }
.sidebar-cart-div .cart-footer .btn.btn-give-offer:hover,
.sidebar-cart-div .cart-footer .btn.btn-give-offer:active,
.sidebar-cart-div .cart-footer .btn.btn-give-offer.active,
.sidebar-cart-div .cart-footer .btn.btn-give-offer:focus{ color: var(--color-white); background-color: var(--color-warning); }
.sidebar-cart-div .cart-footer .btn.btn-checkout{ border: 2px solid var(--color-main); color: var(--color-white); background-color: var(--color-main) }

.quick-links{ top: 50%; transform: translateY(-50%); right: 8px; position: fixed; z-index: 3; width: 40px; height: auto; }
.quick-links .quick-1500{ display: none; }
.quick-links .links-inner{ padding: 15px 0; border-radius: 18px; box-shadow: var(--box-shadow-global); background-color: var(--color-white) }
.quick-links .links-inner .quick-item{ position: relative; }
.quick-links .links-inner .quick-item + .quick-item{ margin-top: 5px; }
.quick-links .quick-1500 i,
.quick-links .links-inner .quick-item i{ color: var(--color-second); position: relative; background-color: var(--color-white); z-index: 11; width: 100%; height: 36px; display: flex; justify-content: center; align-items: center; font-size: 26px; }
.quick-links .links-inner .hidden-menu{ box-shadow: var(--box-shadow-global); z-index: 10; border-radius: 15px 0 0 15px; position: absolute; right: 100%; padding: 8px 15px; font-weight: 600; top: 0; background-color: var(--color-white);  animation: 0.5s slideLeft;  display: none; }
.quick-links .links-inner .hidden-menu span{ white-space: nowrap; }
.quick-links .quick-1500 a,
.quick-links .links-inner .quick-item a{ z-index: 12; color: var(--color-second);  }
.quick-links .links-inner .quick-item.active .hidden-menu{ display: block; }


.breadcrumb-item a{ color: var(--color-second) }
.breadcrumb-item a:active,
.breadcrumb-item a:focus,
.breadcrumb-item a:hover{ color: var(--color-main) }
.breadcrumb-item+.breadcrumb-item::before{ content: '\ea61'; font-family: var(--font-family-tabler)}

.footer{ background-repeat: no-repeat; background-position: center center; background-size: contain; padding-top: 5em; padding-bottom: 5em; background-color: var(--footer-bg); color: var(--color-white); }
.footer .img-link{ display: block; margin-bottom: 15px; }
.footer .img-link img{ max-width: 205px;}
.footer .footer-social .inner{ padding: 0; max-width: 205px; display: flex; justify-content: space-between; }
.footer .footer-social .inner a.social-item{ font-size: 20px; color: var(--color-white); padding: 15px calc(var(--bs-gutter-x) * .5); }
.footer .footer-social .inner a.social-item:hover,
.footer .footer-social .inner a.social-item:active,
.footer .footer-social .inner a.social-item:focus{ color: var(--color-main)}
.footer .footer-list .list-header{ font-weight: 600; font-size: var(--base-font-size-16); margin-bottom: var(--set-margin-bottom-15) }
.footer .footer-list .list-item{ list-style: none; padding: 10px 0; font-size: var(--base-font-size-14)  }
.footer .footer-list .list-item a{ color: var(--color-main-c3)}
.footer .footer-list .list-item a i{ min-width: 18px; display: inline-block; }
.footer .footer-list .list-item a:hover,
.footer .footer-list .list-item a:active,
.footer .footer-list .list-item a:focus{ color: var(--color-white)}
.footer .footer-list .list-item a:hover i,
.footer .footer-list .list-item a:active i,
.footer .footer-list .list-item a:focus i{ color: var(--color-main)}
.footer-sub-links{ background-color: var(--footer-bg); padding: 3em 0;  }
.footer-sub-links .list-header{ color: var(--color-white); font-weight: 600; font-size: var(--base-font-size-16); margin-bottom: 10px; }
.footer-sub-links .list-item{ list-style: none; padding: 10px 0; font-size: var(--base-font-size-14)  }
.footer-sub-links .list-item a{ color: var(--color-main-c3)}
.footer-sub-links .list-item a:hover,
.footer-sub-links .list-item a:active,
.footer-sub-links .list-item a:focus{ color: var(--color-white)}
.footer-sub-links .list-item a i{ min-width: 18px; display: inline-block; }
.footer-end .copyright-text{ color: var(--color-main-81); margin: 0; padding: calc(var(--bs-gutter-x) * .5) 0; }
.footer-end .payment-types-list{ display: flex; height: 100%; justify-content: end; align-items: center; }
.footer-end .payment-types-list .payment-type-item{ margin-left: 25px; position: relative; width: 47px; height: auto; }
.footer-end .payment-types-list .payment-type-item img{ width: 100%; height: auto; }

/* 2- Single Page Content */
.single-page-content{ /*margin-top: var(--set-margin-bottom);*/ margin-bottom: 20px;}
.single-page-content .left-side{ width: 270px;}
.single-page-content .left-side .sidebar{ border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color); }
.single-page-content .left-side .sidebar li{ padding: 0 15px;}
.single-page-content .left-side .sidebar li:first-child{ padding-top: 15px;}
.single-page-content .left-side .sidebar li:last-child{ padding-bottom: 15px;}
.single-page-content .left-side .sidebar li a{ color: var(--color-second); position: relative; display: flex; align-items: center; padding: 10px; font-size: var(--base-font-size-16) }
.single-page-content .left-side .sidebar li a:hover,
.single-page-content .left-side .sidebar li a:active,
.single-page-content .left-side .sidebar li a.active,
.single-page-content .left-side .sidebar li a:focus{ color: var(--color-main)}
.single-page-content .left-side .sidebar li a i{ position: relative; top:-2px; font-size: 20px; margin-right: 10px; }
.single-page-content .right-side{ margin-left: 30px; width: calc(100% - 300px); overflow: hidden; }
.single-page-content .left-side .sidebar li a.active:before{ content: ""; position: absolute; top: calc(50% - 11px); left: -5px; width: 7px; height: 16px; border-radius: 0 50% 50% 0; background: var(--color-main); }
.single-page-content .right-side .content-wrapper{ width: 100%; /*padding: 3em; border: 1px solid var(--color-main-border);*/ border-radius: var(--bs-border-radius);}
.single-page-content .right-side .title-wrapper{ border-radius: var(--bs-border-radius); padding: 15px; display: flex; justify-content: space-between; align-items: center; background-color: var(--color-bg-f2); }
.single-page-content .right-side .title-wrapper h5{ font-weight: 600; }
.single-page-content .right-side .title-wrapper p{ color: var(--color-main-81); margin-bottom: 0; }
.single-page-content .right-side .col-lg-6>label{ font-weight: 600; }
.pagination .page-item a{ color: var(--color-second); background-color: var(--color-bg-f2); }
.pagination .page-item:active a,
.pagination .page-item:focus a,
.pagination .page-item.active a,
.pagination .page-item:hover a{ border-color: var(--color-main); background-color: var(--color-main); color: var(--color-white)}
.table td.td-fit,
.table th.td-fit { white-space: nowrap; width: 1%; vertical-align: middle; }
.table.table-center th,
.table.table-center td { vertical-align: middle }
.divider-title{ font-weight: 600; margin: 20px 0 15px;}
.el-md{ margin-bottom: 10px; }
.el-md .form-switch { }
.el-md .form-switch .form-check-input { margin-top: 0;  height: 1.5rem; width: calc(2rem + 0.75rem); border-radius: 3rem;}
.el-md .form-switch label{ font-weight: 600; height: 24px; padding-left: 5px; display: inline-flex; justify-content: center; align-items: center; }
.el-md .form-check-input:checked{ background-color: var(--color-main); border-color: var(--color-main) }
.align-right {text-align:right;}
.align-center {text-align:center;}

.btn-compare-products-wrapper{ position: fixed; z-index: 9; bottom: 30px; left: 30px; display: block; }
.btn-compare-products-wrapper .btn{ transition: all .3s ease; border-color: var(--color-main); background-color: var(--color-main); color: var(--color-white); font-weight: 600; }
.products-compare-wrapper{ display: none; transition: all .3s ease; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 40%); position: fixed; width: 100%; height: 250px; background-color: var(--color-bg-f2); bottom: 0; left: 0; z-index: 10;  }
.products-compare-wrapper.show-it{ animation: 0.3s slideUp; display: block; }
.products-compare-wrapper h5{ font-weight: 600; }
.products-compare-wrapper .compare-list{  margin-bottom: 15px; background-color: var(--color-white); border-radius: var(--bs-border-radius); width: 100%; height: auto; display: flex; flex-wrap: nowrap; }
.products-compare-wrapper .compare-list .compare-item{ flex: 0 0 auto; width: 25%; }
.products-compare-wrapper .compare-list .compare-item+.compare-item .inner-el{ border-left: 2px solid var(--color-bg-f2); }
.products-compare-wrapper .compare-list .compare-item .inner-el{ width: 100%; height: 120px; display: flex; justify-content: space-between; align-items: center; }
.products-compare-wrapper .compare-list .compare-item .inner-el.no-item{ text-align: center; justify-content: center }
.products-compare-wrapper .compare-list .compare-item .inner-el.no-item span{ max-width: 60%; color: var(--color-main-6e) }
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-image{ flex: 0 0 auto; width: 95px; height: 95px; background-origin: content-box; padding: 5px;  background-size: contain; background-position: center center; background-repeat: no-repeat;}
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-text{ flex: 0 0 auto; width: calc(100% - 155px) }
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-text .pr-name{ width: 100%; font-size: var(--base-font-size-14); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-text .pr-name a{ color: var(--color-main-6e)}
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-text .pr-price{ font-weight: 600; color: var(--color-main) }
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-btn{ flex: 0 0 auto; width: 60px; text-align: right; padding-right: 10px; }
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-btn a{ transition: all .3s ease; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; background-color: var(--color-red); color: var(--color-white); }
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-btn a:hover,
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-btn a:active,
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-btn a.active,
.products-compare-wrapper .compare-list .compare-item .inner-el .pr-btn a:focus{ background-color: var(--color-second) }

.products-compare-wrapper .actions-side{ display: flex; justify-content: end; align-items: center; }
.products-compare-wrapper .actions-side .btn{ transition: all .3s ease; margin-left: 7px; font-size: var(--base-font-size-13); font-weight: 600; }
.products-compare-wrapper .actions-side .btn-hide{ background-color: var(--color-main-border); border-color: var(--color-main-border); color: vaR(--color-second); }
.products-compare-wrapper .actions-side .btn-hide:active,
.products-compare-wrapper .actions-side .btn-hide.active,
.products-compare-wrapper .actions-side .btn-hide:focus,
.products-compare-wrapper .actions-side .btn-hide:hover{ background-color: var(--color-second); border-color: var(--color-second); color: vaR(--color-white); }
.products-compare-wrapper .actions-side .btn-compare-them{ background-color: var(--color-main-blue); border-color: var(--color-main-blue); color: vaR(--color-white); }
.products-compare-wrapper .actions-side .btn-compare-them:hover,
.products-compare-wrapper .actions-side .btn-compare-them:active,
.products-compare-wrapper .actions-side .btn-compare-them.active,
.products-compare-wrapper .actions-side .btn-compare-them:focus{ background-color: var(--color-main); border-color: var(--color-main); color: vaR(--color-white); }
#changeCurrency .modal-body{}
#changeCurrency .modal-body .currency-modal-list{ display: flex; justify-content: space-between; align-items: center; }
#changeCurrency .modal-body .currency-modal-list .currency-el-content{ position: relative;  width: 30%;  }
#changeCurrency .modal-body .currency-modal-list .currency-el-content .placeholder{ position: relative; border-radius: var(--bs-border-radius); height: 80px; }
#changeCurrency .modal-body .currency-modal-list .currency-el-content a{ position: relative; display: flex; background-color: var(--color-bg-f2);  border-radius: var(--bs-border-radius); justify-content: center; font-weight: 600; color: var(--color-second); align-items: center; width: 100%;  height: 80px; font-size: var(--base-font-size-24) }
#changeCurrency .modal-body .currency-modal-list .currency-el-content a:hover{ background-color: var(--color-second); color: var(--color-white) }


@keyframes slideLeft {
    from {
        transform: translateX(10%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(10%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}


.scroll-bar::-webkit-scrollbar {
    width: 7px;
}

.scroll-bar::-webkit-scrollbar-thumb {
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.1);
}

.scroll-bar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}

.show-on-1200{ display: none!important; }
.sticky-sub-bar,
.mobile-menu-slide-btn,
.mobile-menu-wrapper{ display: none; }


.table thead th{ color: #6b7280; background: var(--color-bg-f2); font-size: var(--base-font-size-13); font-weight: normal; text-transform: uppercase; line-height: 1rem; padding-top: .5rem; padding-bottom: .5rem; white-space: nowrap;}
.table.no-border tr td{ border: none; height: 40px; vertical-align: middle; }
.table.no-border tr td .text-side{ display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.table.mb-0>tbody>tr:nth-of-type(even)>*{ background-color: var(--color-bg-f2); }

.uc-modal .modal-header{ display: none; }
.uc-modal-content{}
.uc-modal-content .uc-inner{ max-width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.uc-modal-content .uc-inner .text-side{ flex: 0 0 50%; }
.uc-modal-content .uc-inner .image-side{ flex: 0 0 50%; }
.uc-modal-content .uc-inner .image-side img{ position: relative; width: 100%; }
.uc-modal-content .uc-inner .text-side .title-text{ display: flex; justify-content: space-between; padding: 12px 0; font-size: var(--base-font-size-24); position: relative; font-weight: 600; color: var(--color-second); margin-bottom: 30px;}
.uc-modal-content .uc-inner .text-side .title-text:after{ position: absolute; content: ""; bottom: 0; left: 0; width: 45px; border-bottom: 2px solid var(--color-main); }
.uc-modal-content .uc-inner .text-side .description-text{ font-size: var(--base-font-size-16); color: var(--color-main-81); margin: 5px 0;}
.uc-modal-content .uc-inner .text-side .btn{ margin-top: 30px;}

.no-item-content .no-item-inner{ max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.no-item-content .no-item-inner .text-side{ flex: 0 0 40%; }
.no-item-content .no-item-inner .image-side{ flex: 0 0 60%; text-align: center; }
.no-item-content .no-item-inner .image-side img{ position: relative; width: 100%; max-width: 600px; }
.no-item-content .no-item-inner .text-side .title-text{ display: flex; justify-content: space-between; padding: 12px 0; font-size: var(--base-font-size-24); position: relative; font-weight: 600; color: var(--color-second); margin-bottom: 30px;}
.no-item-content .no-item-inner .text-side .title-text:after{ position: absolute; content: ""; bottom: 0; left: 0; width: 45px; border-bottom: 2px solid var(--color-main); }
.no-item-content .no-item-inner .text-side .description-text{ font-size: var(--base-font-size-16); color: var(--color-main-81); margin: 5px 0;}
.no-item-content .no-item-inner .text-side .btn{ margin-top: 30px;}

.progress-wrap{ text-align: center; margin-bottom: 15px; }
.progress-wrap label{ font-size: var(--base-font-size-12); color: var(--color-main-81); }
.progress-wrap .progress{ margin-top: 10px; height: 10px; }
.progress-wrap .progress .progress-bar{ background-color: #656565; }

.wz-overlay{ display: none;}
body.wizard-init .wz-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9990; }
.highlight-outline { background-color: rgba(255,255,255,1); position: fixed; border: 3px solid var(--color-bg-f2); border-radius: 8px; box-shadow: 0 0 20px var(--color-bg-f2); z-index: 9991; pointer-events: none;}
.highlight-box { position: fixed; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.5); padding: 15px; max-width: 350px; z-index: 9992; color: black;}
.wizard-controls { margin-top: 10px; text-align: right; }
.wizard-controls button { margin-left: 5px; }

/* step wizard */
.wizard-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none;}
.wizard-overlay.active { display: block; }
.wizard-overlay .spotlight { position: absolute; background: rgba(255, 255, 255, 0.1); border: 3px solid #667eea; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8); transition: all 0.5s ease; z-index: 1001; }
.wizard-overlay .wizard-tooltip { position: absolute; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 350px; z-index: 1002; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
.wizard-overlay .wizard-tooltip.show { opacity: 1; transform: translateY(0); }
.wizard-overlay .tooltip-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px; }
.wizard-overlay .tooltip-description { color: #666; line-height: 1.6; margin-bottom: 20px; }
.wizard-overlay .tooltip-actions { display: flex; justify-content: space-between; align-items: center; }
.wizard-overlay .wizard-progress { display: flex; gap: 5px; }
.wizard-overlay .progress-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0e0e0; transition: background 0.3s ease; }
.wizard-overlay .progress-dot.active { background: #667eea; }
.wizard-overlay .wizard-nav { display: flex; gap: 10px; }
.wizard-overlay .wizard-btn { padding: 8px 20px; border: none; border-radius: 20px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; }
.wizard-overlay .wizard-btn-primary { background: #667eea; color: white; }
.wizard-overlay .wizard-btn-primary:hover { background: #5a6fd8; }
.wizard-overlay .wizard-btn-secondary { background: #f8f9fa; color: #666; }
.wizard-overlay .wizard-btn-secondary:hover { background: #e9ecef; }
.wizard-overlay .wizard-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@keyframes pulseWizard {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.highlight-pulse {
    animation: pulseWizard 2s infinite;
}

.wp-wrapper{ position: fixed; display: flex; align-items: center; justify-content: end; z-index: 22; min-width: 120px; min-height: 120px; width: auto; height: auto; bottom: 15px; right: 15px; }
body.show-overlay .wp-wrapper{ z-index: 3;}
.wp-wrapper .text-wrapper{ cursor: pointer; margin-right: 8px; position: relative; display: flex; justify-content: center; align-items: center; text-align: left; font-weight: 600; padding: 15px; width: 220px; height: 60px; border-radius: var(--bs-border-radius); background-color: var(--color-white); box-shadow: 0 0 15px -4px rgb(0 0 0 / 50%);}
.wp-wrapper .text-wrapper a.btn-close-text{ position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background-color: var(--color-main); color: var(--color-white); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.wp-wrapper .logo-side{ cursor: pointer; position: relative; width: 60px; height: 60px; background-color: var(--color-main); border-radius: 50%; color: var(--color-white); display: flex; justify-content: center; align-items: center; font-size: 40px; }
.wp-wrapper .logo-side span{ position: absolute; right: 3px; top: -1px; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; font-size: 10px; border-radius: 50%; background-color: var(--color-main-hover); color: var(--color-white);  }

.wp-wrapper .chat-wrapper{ width: 280px; position: relative; box-shadow: 0 0 15px -4px rgb(0 0 0 / 50%); }
.wp-wrapper .chat-wrapper .chat-top{ width: 100%; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; background-color: var(--color-main); border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; padding: 40px 20px 20px;  }
.wp-wrapper .chat-wrapper .chat-top .text{ color: var(--color-white); font-weight: 600; }
.wp-wrapper .chat-wrapper .chat-top .text span + span{ margin-left: 5px; }
.wp-wrapper .chat-wrapper .chat-top .icon-elem{ position: absolute; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background-color: var(--color-white); color: var(--color-main); border: 2px solid var(--color-main); font-size: 30px; top: -20px; left: 50%; transform: translateX(-50%); }
.wp-wrapper .chat-wrapper .chat-top .go-turn-small{ position: absolute; right: -7px; top: -10px; border-radius: 50%; width: 30px; height: 30px; background-color: var(--color-main-hover); color: var(--color-white); display: flex; justify-content: center; align-items: center; }
.wp-wrapper .chat-wrapper .chat-main{ width: 100%; position: relative; }
.wp-wrapper .chat-wrapper .chat-main .info-text{ border-bottom: 1px solid var(--color-main-border); background-color: var(--color-white); width: 100%; height: auto; text-align: center; padding: 20px; font-weight: 600; }
.wp-wrapper .chat-wrapper .chat-main .input-elem{ background-color: var(--color-white); width: 100%; height: auto; text-align: center; border-radius: var(--bs-border-radius); }
.wp-wrapper .chat-wrapper .chat-main .input-elem .form-control{ border: 0; border-top-left-radius: 0; font-size: var(--base-font-size-14)}
.wp-wrapper .chat-wrapper .chat-main .input-elem .btn{ border-top-right-radius: 0; font-size: var(--base-font-size-20)}
.wp-wrapper .chat-wrapper .chat-main .input-elem .form-control:focus{ border: 0; box-shadow: none; }

/* Media Queries */
@media screen and (min-width: 1920px) {
    .container-fluid { max-width: 1770px; --bs-gutter-x: 30px; }
}
@media screen and (min-width: 2200px) {
    .container-fluid { max-width: 1920px;  }
}
@media screen and (max-width: 1920px) {
    .container-fluid { max-width:100%; --bs-gutter-x: 8% }
}

@media screen and (max-width: 1500px) {
    .container-fluid { --bs-gutter-x: 3.6% }
    .top-links.right-side{ max-width: 55%; flex: 1 0 auto; }
    .quick-links .quick-1500{ display: block; }
    .quick-links .quick-item{ display: none; }
    .quick-links.open-all{ }
    .quick-links .ti-adjustments-down{ display: flex!important; }
    .quick-links .ti-adjustments-up{ display: none!important; }
    .quick-links.open-all .ti-adjustments-down{ display: none!important; }
    .quick-links.open-all .ti-adjustments-up{ display: flex!important; }
    .quick-links.open-all .quick-item{ display: block; }
    /*.quick-links.open-all .links-inner .quick-item .hidden-menu{ right: auto; left: auto; position: relative; display: block; }*/
    /*.quick-links.open-all .links-inner .quick-item a{ display: flex; }*/
    /*.quick-links.open-all .links-inner .quick-item a i{ flex: 1 0 0; width: auto; min-width: 36px; justify-content: end;}*/
    /*.quick-links.open-all .links-inner .quick-item a .hidden-menu{ flex: 1 0 0; width: auto; box-shadow: none; min-width: 150px}*/
}

@media screen and (min-width: 990px) {
    .footer .footer-cols{ width: 31%; max-width: 31% }
    .footer .footer-cols:first-child{ width: 37%; max-width: 37%;  }
    .uc-modal .modal-dialog{ max-width: 900px; }
    .kvkk_modal .modal-dialog{ max-width: 900px }
}

@media screen and (max-width: 1200px) {
    .head-side{ transition: transform 0.3s ease; }
    /*.head-side.mobile-sticky{  position: sticky; top: 0; z-index: 999; transform: translateY(0);}*/
    .head-side.mobile-sticky {animation: slideDown 0.35s ease-out; position: fixed; top: 0; left: 0; background-color: var(--color-white); z-index: 99; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 40%); }
    .head-side.mobile-sticky .top-bar{ display: none!important;}
    .top-bar .top-links{ flex: 1 0 100%; }
    .top-bar .top-links .list-group{ justify-content: space-between!important;}
    .sub-header-container .mega-menu-manufacturers ul{ width: 10%}
    .hide-on-1200{ display: none!important; }
    .show-on-1200{ display: block!important; }
    .main-navbar{ flex-direction: column }
    .main-header .logo-side{ align-items: center; width: 100%; max-width: 100%; display: flex; justify-content: space-between; }
    .main-header .logo-side a.main-logo{ padding: 8px 0; }
    .main-header .logo-side a.main-logo img{ max-width: 120px;}
    .main-header .logo-side .dropdown-toggle{ cursor: pointer; display: block; padding: 5px 0 5px 5px; }
    .main-header .logo-side .dropdown-toggle::after{ display: none; }
    .main-header .logo-side .mega-drdown.dropdown-menu{ width: 360px; padding: 0; }
    .main-header .logo-side .mega-drdown.dropdown-menu .mega-inner:after{ right: 10px;}
    .main-header .logo-side .mega-drdown.dropdown-menu ul{ display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 0; }
    .main-header .logo-side .mega-drdown.dropdown-menu ul li{ flex: 1 0 auto; width: 50%; padding: 5px;}
    .main-header .logo-side .mega-drdown.dropdown-menu ul li a{ flex-direction: column; position: relative; padding: 4px 0;  color: var(--color-second); height: 100px; background-color: var(--color-bg-f2); border: 1px solid var(--color-main-border); border-radius: var(--bs-border-radius); display: flex; justify-content: center; align-items: center;  }
    .main-header .logo-side .mega-drdown.dropdown-menu ul li a:hover,
    .main-header .logo-side .mega-drdown.dropdown-menu ul li a:active,
    .main-header .logo-side .mega-drdown.dropdown-menu ul li a.active{ background-color: var(--color-bg-f2) }
    .main-header .logo-side .mega-drdown.dropdown-menu ul li a i{ color: var(--color-main); font-size: var(--base-font-size-22); position: relative; top: 0; margin-bottom: 5px; }
    .head-side .top-bar .list-group .list-group-item+.list-group-item label.no-click.has-border:before{ display: none; }
    .head-side .top-bar .left-side .list-group:nth-child(1) .list-group-item a{ padding-left: 0; }
    .head-side .top-bar .list-group .list-group-item+.list-group-item label.no-click{ padding-right: 0;}
    .main-header .search-side{ margin-bottom: 10px; }
    .main-header .search-side,
    .main-header .search-side .input-group-wrapper{ padding: 0; }
    .mobile-menu-wrapper.show-it{ overflow: hidden; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.55); position: fixed; z-index: 100; width: 100%; height: 100%; }
    .mobile-menu-wrapper .inner-div{ overflow: hidden; border-radius: var(--bs-border-radius); background: var(--color-bg-f2); width: 100%; height: auto; max-width: 480px; max-height: 80%; }
    .mobile-menu-wrapper .dr-menu{ display: none; }
    .mobile-menu-wrapper .mobile-menu-top{ position: relative; padding: 15px; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .mobile-menu-wrapper .mobile-menu-top .main-logo img{ position: relative; display: block; max-width: 120px; }
    .mobile-menu-wrapper .exit-button{ position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; }
    .mobile-menu-wrapper .exit-button i{ color: var(--color-main); font-size: var(--base-font-size-24)}
    .mobile-menu-wrapper .menu-list-content{ padding: 0; list-style: none; position: relative; height: calc(100% - 92px);  overflow: hidden; }
    .mobile-menu-wrapper .menu-list-content ul{ overflow-y: auto; list-style: none; height: 100%; margin-bottom: 0; width: 100%; padding: 10px 0;}
    .mobile-menu-wrapper .menu-list-content ul li{ padding: 0 10px; width: 100%}
    .mobile-menu-wrapper .menu-list-content ul li a{ color: var(--color-second); display: block; position: relative; padding: 7px 10px; width: 100%}
    .mobile-menu-wrapper .menu-list-content ul li.static-links a{ font-weight: 600; }
    .mobile-menu-wrapper .menu-list-content ul li.has-child>a:after{ color: var(--color-main); font-size: var(--base-font-size-16); content: '\ea61'; position: absolute; font-family: var(--font-family-tabler); top: 0; right: 0; width: 20px; height: 100%; display: flex; justify-content: center; align-items: center; }
    .mobile-menu-wrapper .menu-list-content ul li+li a{ border-top: 1px solid var(--color-main-border); }
    .mobile-menu-wrapper .menu-list-content ul li a i{ min-width: 20px; display: inline-block; }
    .mobile-menu-wrapper .dr-menu.show-el{ overflow-y: auto; position: absolute; display: block; z-index: 2; width: 100%; height: 100%; background: var(--color-bg-f2); top: 0; left: 0; }
    .mobile-menu-wrapper .dr-menu.show-el.opened{ overflow: hidden;}
    .mobile-menu-wrapper .menu-list-content span.placeholder{ min-height: 24px; margin-bottom: 7px;}
    .mobile-menu-wrapper .dr-menu .menu-link-element{ display: flex; justify-content: space-between; align-items: center; }
    .mobile-menu-wrapper .dr-menu .menu-link-element a{ border-top: 0; display: inline-block; width: auto; color: var(--color-main); font-weight: 600; padding: 7px 0; }
    .mobile-menu-wrapper .dr-menu .menu-link-element a:after{ display: none!important;}
    .main-header .mobile-buttons-side{ width: 100%; min-width: 155px; display: flex; align-items: center; justify-content: space-between; }
    .main-header .mobile-menu-button,
    .main-header .mobile-buttons-side a{ color: var(--color-second); position: relative; display: inline-flex; }
    .main-header .mobile-buttons-side a .badge{ background-color: var(--color-main); color: var(--color-white); position: absolute; right: -5px; top: 0; }
    .main-header .mobile-buttons-side a+a{ margin-left: 15px; }
    .main-header .mobile-menu-button i,
    .main-header .mobile-buttons-side i{ font-size: 32px; position: relative; }
    .container-fluid .row{ --bs-gutter-x: 3.6%; }
    .mobile-overlay{ height: 100%; overflow: hidden; }
    .mobile-overlay .overlay-div{ z-index: 10;}
    .mobile-overlay .head-side{ z-index: 16; background-color: var(--color-white)}
    .single-page-content .right-side{ margin-left: 20px; width: calc(100% - 90px);}
    .single-page-content .left-side{ width: 70px; }
    .single-page-content .left-side .sidebar{ background-color: var(--color-white) }
    .single-page-content .left-side .sidebar li a span{ display: none;}
    .head-side.mobile-sticky .main-header .logo-side .mega-drdown.dropdown-menu{ transform: none!important; position: fixed!important; top: 55px!important; }
}

@media screen and (max-width: 990px) {
    .products-compare-wrapper.show-it{ display: none; }
    .single-page-content .right-side .title-wrapper{ flex-direction: column; justify-content: start; align-items: start; }
    .single-page-content .right-side .title-wrapper .btn-side{ margin-top: 10px; }
    .single-page-content .right-side .title-wrapper .btn-side .btn{ font-size: var(--base-font-size-14); margin-bottom: 5px;}
}

@media screen and (max-width: 780px){
    .uc-modal-content .uc-inner{ flex-direction: column; text-align: center; }
    .uc-modal-content .uc-inner .text-side .title-text{ justify-content: center; font-size: var(--base-font-size-24); margin-bottom: 15px;}
    .uc-modal-content .uc-inner .text-side .title-text:after{ left: calc(50% - 23px)}
    .uc-modal-content .uc-inner .text-side .description-text{ font-size: var(--base-font-size-14); }
    .uc-modal-content .uc-inner .text-side .btn{ margin-top: 15px;}
}

@media screen and (max-width: 660px) {
    body{ overflow-x: hidden; }
    .mobile-menu-wrapper .inner-div{ border-radius: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%;}
}


@media screen and (max-width: 577px) {
    .footer-sub-links{ padding: 3em 0 1em }
    .footer-sub-links .col-sm-4.col-xs-6{ width: 50%; max-width: 50%; margin-bottom: 20px;}
    .result-content .res-cats-wrapper{ display: none; }
    .search-result-wrapper .result-content .title-content{ cursor: pointer;  }
    .search-result-wrapper .result-content .title-content i{ display: inline-block; }
    .search-result-wrapper .res-product-el>.d-flex{ align-items: center;}
    .search-result-wrapper .res-product-el .d-flex.text-side{ flex-wrap: wrap; flex-direction: column; }
    .search-result-wrapper .res-product-el .product-side,
    .search-result-wrapper .res-product-el .buttons-side{ max-width: 100%; padding: 0 10px 5px ;}
    .single-page-content .left-side{ width: 270px; transition: all .5s ease; position: fixed; left: -270px; top: 145px; z-index: 17; }
    .single-page-content .right-side{ margin-left: 0; width: 100%; }
    .single-page-content .left-side .sidebar{ position: relative;  }
    .mobile-menu-slide-btn{ display: block; position: absolute; top: 0; left: 100%; width: 40px; height: 40px;}
    .mobile-menu-slide-btn a{ font-size: var(--base-font-size-24); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; background-color: var(--color-main); color: var(--color-white); }
    .single-page-content .left-side.mms-opened{ transform: translateX(278px); }
    .single-page-content .left-side .sidebar{ padding-top: 10px; }
    .single-page-content .left-side .sidebar li a{ padding: 5px 10px; }
    .single-page-content .left-side .sidebar li a span{ display: inline-block;}
    .main-header .logo-side .mega-drdown.dropdown-menu{ width: 100vw!important; padding: 0 5px; }
}


@media (max-width: 480px) {
    body{ height: auto; padding-bottom: calc(90px + env(safe-area-inset-bottom));}
    .main-header .mobile-buttons-side{ min-width: auto; width: auto;}
    .main-header .mobile-buttons-side .h-480{ display: none;}
    .sticky-sub-bar{ z-index: 99; position: fixed; display: flex; align-items: center; bottom: 0; lefT: 0; width: 100%; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); /*border-top: 5px solid var(--color-main);*/ box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%); background: var(--color-bg-f2); }
    .sticky-sub-bar .sticky-links{ padding: 0 10px; position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center;}
    .sticky-links .link-el{ min-width: 64px}
    .sticky-links .link-el .inner{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .sticky-links .link-el .inner .icon-side{ position: relative;}
    .sticky-links .link-el .inner i{ min-height: 28px; color: var(--color-second); font-size: var(--base-font-size-24); }
    .sticky-links .link-el .inner span:not(.badge){ color: var(--color-second); font-size: var(--base-font-size-13); }
    .sticky-links .link-el .inner span.badge{ color: var(--color-white); position: absolute; top: 0; right: -10px; background-color: var(--color-main); }
    .footer-end .copyright-text{ text-align: center; }
    .footer-end .payment-types-list{ justify-content: space-between; }
    .footer-end .payment-types-list .payment-type-item{ margin-left: 0;}
    .btn{ font-size: var(--base-font-size-14); }
    .sticky-links .link-el.cart-el{ position: relative; min-width: 60px; width: 60px; height: 50px; }
    .sticky-links .link-el.cart-el .inner{ position: absolute; width: 60px; height: 60px; top: -10px; left: 0; border-radius: 50%; background-color: var(--color-second); }
    .sticky-links .link-el.cart-el .inner i{ color: var(--color-white); font-size: 36px;}
    .sticky-links .link-el.cart-el .inner span:not(.badge){ display: none; }
    .sticky-links .link-el.cart-el .inner span.badge{ top: -15px; right: -15px; width: auto; height: auto; border-radius: 8px;display: flex; justify-content: center; align-items: center; padding-top: 5px; }
    .wp-wrapper{ bottom: 70px; }
    .wp-wrapper .text-wrapper{ display: none!important; }
    .wp-wrapper .chat-wrapper .chat-top{ padding: 35px 20px 10px; }
}

@media screen and (max-width: 370px) {
    .sticky-links .link-el .inner span:not(.badge){ display: none }
}

tbody, td, tfoot, th, thead, tr {vertical-align: middle;}
.align-center {text-align: center;}


.right-side {
    position: relative;
}

.pv-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    z-index: 10;
}

.pv-loader.show {
    display: flex;
}
/* Mega menu iskeleti aynı kalsın */
.mega-drdown-cat .mega-inner {
    display: flex;
    align-items: stretch;
    min-width: 100rem;
}

/* Sol kolon: kategori listesi (aynı) */
.mega-drdown-cat .mega-left {
    flex: 0 0 230px;
    border-right: 1px solid #eee;
    padding: 15px 0;
}

/* Sağ kolon: içerik */
.mega-drdown-cat .mega-right {
    flex: 1;
    padding: 20px 30px;
}

/* Paneller */
.mega-drdown-cat .dr-menu {
    display: none;
    height: 100%;
}
.mega-drdown-cat .dr-menu.active {
    display: block;
}

/* İÇ LAYOUT: sol text, sağ banner */
.mega-drdown-cat .dr-menu-inner {
    display: flex;
    gap: 24px;
}

/* Sol: yaklaşık %75 */
.mega-drdown-cat .dr-menu-left {
    flex: 0 0 75%;
}

/* Sağ: yaklaşık %25 – banner alanı */
.mega-drdown-cat .dr-menu-right {
    flex: 0 0 25%;
    min-width: 260px;
}

/* SOL TARAFTAKİ SÜTUNLAR */
.mega-drdown-cat .dr-menu-cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    column-gap: 28px;   /* sütun arası */
    row-gap: 12px;      /* satır arası */
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-drdown-cat .dr-col {
    min-width: 160px;
}

.mega-drdown-cat .dr-col-title {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0;
    line-height: 1.2;
}

.mega-drdown-cat .dr-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-drdown-cat .dr-col-list li {
    margin-bottom: 3px;
}

.mega-drdown-cat .dr-col-list a {
    display: block;
    font-size: .9rem;
    padding: 0;
    line-height: 1.15;
}

/* SAĞ TARAFTAKİ GÖRSEL GRIDİ: 2 sütun, max 8 adet kullanılır */
.mega-drdown-cat .dr-ads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mega-drdown-cat .dr-ads-grid a {
    display: block;
}

.mega-drdown-cat .dr-ads-grid img {
    width: 100%;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}
/* Sistematik kategori linkleri (en küçük olan liste) */
.mega-drdown-cat .dr-col-list a {
    display: block;
    font-size: 12px;          /* küçük font */
    color: #8a8a8a;           /* açık gri */
    padding: 0;               /* boşluk azaltıldı */
    line-height: 1.15;        /* satır aralığı dar */
    margin-bottom: 2px;       /* satır arası daha da az */
}

/* Hover rengi biraz koyu olsun */
.mega-drdown-cat .dr-col-list a:hover {
    color: #555;              /* hafif koyulaşma */
}
/* Kategori drop-down pozisyon ayarı */
.mega-drdown-cat {
    margin-top: 14px !important;       /* aşağı kaydırır (daha fazla için artır) */
    transform: translateX(-15px);      /* sola kaydırır */
    /* veya left kullanmak istersen → left: -15px; */
    background-color: #f5f5f5 !important;
}

/* Eğer hala Bootstrap override ediyorsa daha güçlü selector */
.dropdown .mega-drdown-cat {
    margin-top: 54px !important;
    transform: translateX(-7px) !important;
}
.home-category-frame {
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 16px 20px;
    background-color: #fff;
    margin-bottom: 24px;
}

.home-category-frame .frame-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
}

.home-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;              /* satır / sütun boşlukları */
}

/* 5 sütun → yüzde 20 */
.home-category-item {
    flex: 0 0 calc(20% - 10px);  /* 5 kolon */
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all .15s ease-in-out;
}

.home-category-item .icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
}

.home-category-item .text {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

/* Hover efekti */
.home-category-item:hover {
    border-color: #0d6efd;
    background-color: #f0f6ff;
    transform: translateY(-1px);
}

/* Responsive kırılımlar */
@media (max-width: 1199.98px) {
    .home-category-item {
        flex: 0 0 calc(25% - 10px);  /* 4 kolon */
    }
}

@media (max-width: 991.98px) {
    .home-category-item {
        flex: 0 0 calc(33.333% - 10px); /* 3 kolon */
    }
}

@media (max-width: 767.98px) {
    .home-category-item {
        flex: 0 0 calc(50% - 10px); /* 2 kolon */
    }
}
.home-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #f7f7f7;       /* Normal arka plan */
    border-radius: 10px;
    transition: all .2s ease;
    text-align: center;
    color: #333;
}

.cat-icon{
    color: var(--color-second);
    font-size: 2rem;
}
.home-category-item:hover {
    background: #e2e2e2 !important;   /* 🔥 Daha koyu, gri hover */
    color: #222 !important;            /* Metni koyulaştır */
    border-color: #d0d0d0 !important;  /* Hafif koyu çerçeve */
}

.home-category-item .icon i {
    font-size: 32px;
    color: #555;
    transition: color .2s ease;
}

.home-category-item:hover .icon i {
    color: #444; /* ikon da koyulaşsın */
}
.global-blur-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transition: all 0.25s ease;
    z-index: 9; /* Dropdown'un altına gelecek */
}
.main-navbar{
    padding-top: 30px;
    padding-bottom: 30px;
}
.head-side {
    position: relative;
    z-index: 14;  /* blur’dan yukarı çıkıyor */
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    /* Sadece sepet alanını yazdır */
    body * {
        visibility: hidden;
    }

    #cart-print-area,
    #cart-print-area * {
        visibility: visible;
    }

    #cart-print-area {
        position: static;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Sayfa içi padding/box-shadow vs. temizleyelim */
    #cart-print-area .container-fluid {
        padding: 0 !important;
    }
    /* Ürün ilk kolonu: resim + yazı yanyana, düzgün hizalı */
    #cart-print-area .product-item-wrapper .inner-div > .col-auto:first-child {
        display: flex !important;
        align-items: flex-start;
    }

    /* Resim alanını sabitle, taşıp kaymasın */
    #cart-print-area .product-item-wrapper .inner-div > .col-auto:first-child .img-div {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
        margin-right: 10px;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Metin tarafı resmin yanından başlasın, üstüne binmesin */
    #cart-print-area .product-item-wrapper .inner-div > .col-auto:first-child .text-side {
        flex: 1 1 auto;
        max-width: 100%;
        white-space: normal !important;
        word-break: break-word;
        hyphens: none;
    }
    .cart-main-wrapper {
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Üstteki "PDF yazdır" butonunu gizle */
    .cart-main-wrapper .top-side .act-side {
        display: none !important;
    }

    /* content-side ve summary-side yan yana değil, alt alta olsun */
    .inner-div-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    .inner-div-wrapper .content-side,
    .inner-div-wrapper .summary-side {
        width: 100% !important;
    }

    .inner-div-wrapper .summary-side {
        margin-top: 16px;
    }

    /* Ürün satırları sayfaya sığsın diye gerekirse biraz sıkılaştır */
    .product-item-wrapper .inner-div {
        flex-wrap: wrap;
    }
    /* Ürün adı kolonunu genişlet */
    .head-info-bar .d-flex > .col-auto:first-child {
        flex: 1 0 55% !important;
        max-width: 55% !important;
    }

    .product-item-wrapper .inner-div > .col-auto:first-child {
        flex: 1 0 55% !important;
        max-width: 55% !important;
    }

    /* Diğer kolonlar otomatik daralsın */
    .product-item-wrapper .inner-div > .col-auto:not(:first-child),
    .head-info-bar .d-flex > .col-auto:not(:first-child) {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    /* İsimlerin saçma şekilde kelime kelime kırılmasını engelle */
    .product-item-wrapper .text-side,
    .product-item-wrapper .text-side .pr-title {
        white-space: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
    /* Menü, footer, sağ-sol ikonlar, butonlar vb tamamen gizlenebilir */
    .navbar,
    .footer,
    .print-cart,
    .btn-save-address,
    .btn-complete-cart,
    .btn-save-cart,
    .sidebar,
    .change-max-count,
    .change-max-count-t,
    .process-t,
    .btn-delete-el,
    .floating-buttons {
        display: none !important;
    }
}
/* Normal ekranda bu img'yi gizle, arka planı kullan */
.cart-product-image-print {
    display: none;
}
/* Ekranda görünmesin, sadece printte çıksın */
.print-header {
    display: none;
}

@media print {

    .print-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10mm;
        padding-bottom: 4mm;
        border-bottom: 1px solid #ddd;
        font-family: Arial, sans-serif;
        visibility: visible !important; /* body * hidden'ı ezsin */
    }

    .print-header-left img {
        height: 20mm;
        width: auto;
        visibility: visible !important; /* logo için ekstra garanti */
        display: block !important;
    }

    .print-header-right {
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        visibility: visible !important;
    }

    /* EKSTRA GARANTİ: cart-print-area içindeki tüm img'leri göster */
    #cart-print-area img {
        visibility: visible !important;
    }
}
/* Print'te arka planı kapat, gerçek resmi göster */
@media print {
    .img-div {
        background-image: none !important;
    }

    .cart-product-image-print {
        display: block !important;
        max-width: 70px;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }
}
.detail-panel-cari {
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden; /* köşelerin kesilmesi için gerekli */
    background: #fff;
    margin-bottom: 20px;
}

.detail-panel-cari table {
    margin-bottom: 0 !important;
    border-collapse: collapse;
}

.detail-panel-cari table thead th {
    background: #f8f8f8;
}
.title{
    font-weight: 600;
    font-size: var(--base-font-size-14);
}
.readonly-field {
    background-color: #f4f4f4 !important;  /* Daha açık bir gri */
    color: #777 !important;                /* Soluk yazı */
    cursor: not-allowed !important;        /* Tıklanamaz işareti */
    border-color: #ddd !important;         /* Yumuşak kenar */
}

.readonly-field:focus {
    outline: none !important;
    box-shadow: none !important;           /* Focus efekti tamamen kapat */
}
/* ================================
   ÖDEME SONUÇ SAYFASI (TOP CARD)
================================ */

/* Arka plan */
.payment-result-container {
    width: 100%;
    padding: 40px 20px;
}

/* Kart en üstte ince bir banner gibi */
.payment-result-card {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 28px 35px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 25px;
    animation: fadeIn 0.5s ease;
}

/* Animasyon */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Success Icon */
.payment-success i {
    font-size: 55px;
    color: #0cbf3a;
    flex-shrink: 0;
}

/* Failure Icon */
.payment-failure i {
    font-size: 55px;
    color: #e03a2e;
    flex-shrink: 0;
}

/* Başlık */
.payment-success h2,
.payment-failure h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

/* Açıklama */
.payment-success p,
.payment-failure p {
    font-size: 15px;
    color: #4a4a4a;
    margin: 0;
}

/* Hata mesajı */
.payment-failure p:last-child {
    margin-top: 6px;
    padding: 10px 12px;
    background: #ffe8e8;
    border-radius: 8px;
    color: #b30000;
    border: 1px solid #ffbfbf;
    font-size: 14px;
}

/* Mobil */
@media (max-width: 600px) {
    .payment-result-card {
        flex-direction: column;
        text-align: center;
        padding: 22px 20px;
    }

    .payment-result-card i {
        font-size: 48px;
        margin-bottom: 10px;
    }

    .payment-success h2,
    .payment-failure h2 {
        font-size: 20px;
    }
}
.mobile-logo{
    display: none;
    padding: 1em;
    max-width: 20rem;
}
@media (max-width: 1200px) {
    .mobile-logo{
        display: block;
    }
}