:root {
    --primary: #0054A6;
    --primary-light: #E6EEF6;
    --primary-light-alt: #f8faff;
    --secondary: #EC008C;
    --secondary-light: #FDE6F4;
    --black: #333333;
    --gray: #58595B;
    --white: #ffffff;
    --green: #22C55E;
    --green-light: #e8f5e9;
    --red: #EF4444;
    --red-light: #ffebee;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --light: #f1f1f1;
    --light1: #eeeeee;
    --light2: #dddddd;
    --light3: #cccccc;
    --light4: #f9f9f9;
}
body {/*font-family: "Montserrat", sans-serif;*/font-family: "Inter", sans-serif;font-weight: 400;color: var(--black);background-color: var(--white);font-size: clamp(13px, 1.2vw, 15px);line-height: 1.55;}
a {color: var(--primary);text-decoration: none;transition: color 0.2s ease-in-out;}
a:hover,a:focus {color: var(--secondary);box-shadow: none!important;}
h1,h2,h3,h4,h5,h6 {padding: 0;margin: 0;font-weight: 600;}
p {padding: 0;margin: 0;}
ul,ol,li {margin: 0;padding: 0;list-style: none;font-size: clamp(14px, 1.2vw, 16px);}
h1 {font-size: clamp(22px, 2vw, 30px);line-height: 1.2;}
h2 {font-size: clamp(18px, 2vw, 23px);line-height: 1.25;}
h3 {font-size: clamp(16px, 2vw, 18px);line-height: 1.3;}
h4 {font-size: clamp(14px, 1.2vw, 16px);line-height: 1.3;}
h5 {font-size: 16px;}
h6 {font-size: clamp(12px, 1.2vw, 14px);}
p {font-size: clamp(14px, 1.2vw, 16px);line-height: 1.5;}
p span {font-weight: 500;}
.small {font-size: clamp(12px, 1.2vw, 14px);}

button,
.btn {font-size: clamp(14px, 1.2vw, 16px);font-weight: 500;border-radius: 6px;padding: 7px 24px;border: 1px solid transparent!important;cursor: pointer;transition: all 0.2s ease-in-out;white-space: nowrap;box-shadow: none!important;}
.btn-check:checked+.btn, 
.btn.active, .btn.show, 
.btn:first-child:active, 
:not(.btn-check)+.btn:active {border: 1px solid var(--primary)!important;color: var(--primary);box-shadow: 0px 0px 0px 1px var(--primary)!important;}
.btn-primary {background-color: var(--primary);color: var(--white)!important;}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active {background-color: var(--secondary)!important;}
.btn-secondary {background-color: var(--secondary);color: var(--white)!important;}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active {background-color: var(--primary)!important;}
.btn-outline-primary {color: var(--primary)!important;border-color: var(--primary)!important;background: var(--white);}
.btn-outline-primary:hover,.btn-outline-primary:focus,.btn-outline-primary:active {background-color: var(--primary)!important;color: var(--white)!important;}
.btn-outline-secondary {color: var(--secondary)!important;border-color: var(--secondary)!important;background: var(--white);}
.btn-outline-secondary:hover,.btn-outline-secondary:focus,.btn-outline-secondary:active {background-color: var(--secondary)!important;color: var(--white)!important;}
.btn-outline-dark {color: var(--black)!important;border-color: var(--black)!important;background: var(--white);}
.btn-outline-dark:hover,.btn-outline-dark:focus,.btn-outline-dark:active {background-color: var(--black)!important;color: var(--white)!important;}
.btn-outline-light {color: var(--gray)!important;border-color: var(--light3)!important;}
.btn-outline-light:hover,.btn-outline-light:focus,.btn-outline-light:active {background-color: var(--light2)!important;}
.btn-link {color: var(--black);text-decoration: none;}
.btn-link:hover,.btn-link:focus,.btn-link:active {color: var(--primary)!important;}
.btn-danger {background-color: var(--red);color: var(--white)!important;}
input,select,textarea {font-size: clamp(14px, 1.2vw, 16px)!important;padding: 7px 12px!important;border-radius: 6px;border: 1px solid var(--light2)!important;max-width: 100%;transition: border-color 0.2s ease-in-out;box-shadow: none!important;}
input:focus,select:focus,textarea:focus {border-color: var(--primary)!important;outline: none;}
label {font-weight: 500;font-size: clamp(13px, 1.2vw, 15px);}
.form-check-input {width: 18px!important;height: 18px!important;border-radius: 3px!important;margin-top: 2px;margin-right: 8px;margin-left: -1.4em!important;padding: 0px!important;}
.form-check-input[type=radio] {border-radius: 50%!important;cursor: pointer;}
.form-check-input:checked {background-color: var(--primary);border-color: var(--primary)!important}
hr {margin: 30px 0px;border-top: 1px solid var(--light2);opacity: 1;}
.badge {font-size: 12px;font-weight: 500;border-radius: 3px;}
.bg-primary {background-color: var(--primary)!important;padding: 5px 10px;}
.bg-primary-light {background-color: var(--primary-light);padding: 5px 10px;}
.bg-secondary {background-color: var(--secondary)!important;padding: 5px 10px;}
.bg-secondary-light {background-color: var(--secondary-light);}
.bg-success {background-color: var(--green)!important;padding: 5px 10px;}
.bg-success-light {background-color: var(--green-light);padding: 5px 10px;}
.bg-danger {background-color: var(--red)!important;padding: 5px 10px;}
.bg-danger-light {background-color: var(--red-light);padding: 5px 10px;}
.bg-warning {color: var(--yellow) !important;}
.bg-orange {background-color: var(--orange);}
.bg-dark {background-color: var(--black);}
.bg-dark-light {background-color: var(--light2);padding: 5px 10px;}
.bg-light {background-color: var(--light4)!important;}
.text-primary {color: var(--primary)!important;}
.text-secondary {color: var(--secondary)!important;}
.text-success {color: var(--green)!important;}
.text-warning {color: var(--yellow)!important;}
.text-danger {color: var(--red)!important;}
.text-dark {color: var(--black)!important;}
.alert-success {background-color: var(--green-light);color: var(--black);}
.alert-success svg {color: var(--green);}
.alert-danger {background-color: var(--red-light);color: var(--black);}
.alert-danger svg {color: var(--red);}
/* ==== header ==== */
.header {padding: 20px 0px;background-color: var(--white);border-bottom: 1px solid var(--light1);box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.header .logo img {width: 200px;height: auto;}
.header .logo .btn-link svg {width: 30px;height: 30px;stroke-width: 1.5;}
.header .btn-light {padding: 0px;background-color: var(--white)!important;color: var(--black);}
.header .btn-light svg {width: 30px;height: 30px;stroke-width: 1;}
.header .btn-link {padding: 0px;}
.header .btn-link svg {width: 30px;height: 30px;stroke-width: 1;}
.header form input {width: 360px!important;}
.header form .btn-primary {padding: 7px 10px;}
.header .bg-danger {padding: 3px 7px;font-size: 10px;font-weight: 600;}
.header .btn-secondary {background-color: var(--primary);color: var(--white);border: 1px solid transparent!important;width: 40px;height: 40px;border-radius: 50%;padding: 0px;padding-top: 6px;font-size: 18px;font-weight: 600;box-shadow: 0px 0px 0px 0px var(--white)!important;}
.header .dropdown-menu {border: 1px solid var(--light2);border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.header .dropdown-item {color: var(--black);background-color: var(--white);font-size: 15px;font-weight: 500;}
.header .dropdown-item:hover {color: var(--primary);}
.top-bar {background: linear-gradient(to right, var(--primary), var(--secondary));color: var(--white);padding: 5px 0px;font-size: 13px;font-weight: 500;}
.top-bar svg {width: 15px;height: 15px;}
.top-bar a {color: var(--white);transition: opacity 0.2s;}
.top-bar a:hover {opacity: 0.8;}
@media (max-width: 575.98px) {
    .header .logo img {width: 130px;height: auto;}
    .header .logo .btn-link svg {width: 25px;height: 25px;stroke-width: 1.5;}
    .header .btn-light svg {width: 25px;height: 25px;stroke-width: 1.25;}
    .header .btn-link svg {width: 25px;height: 25px;stroke-width: 1.25;}
    .header .btn-secondary {width: 35px;height: 35px;padding-top: 5px;font-size: 16px;}
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .header .logo img {width: 150px;height: auto;}
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .header .logo img {width: 150px;height: auto;}
}
/* ==== menubar ==== */
.navbar {background-color: var(--primary);padding: 0px;}
.navbar .nav-link {color: var(--white);text-transform: uppercase;font-size: 12px;font-weight: 500;letter-spacing: 1px;padding-top: 15px;padding-bottom: 15px;}
.navbar .nav-link svg {width: 15px;height: 15px;}
.navbar .dropdown-menu {border: 1px solid var(--light2);border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.navbar .dropdown-item {color: var(--black);background-color: var(--white);font-size: 15px;font-weight: 500;}
.navbar .dropdown-item:hover {color: var(--primary);}
.menu-sm .nav-link {text-transform: uppercase;font-size: 12px;font-weight: 500;letter-spacing: 1px;}
.menu-sm .nav-link svg {width: 15px;height: 15px;}
.menu-sm .offcanvas-header {padding: 25px 25px 0px;}
.menu-sm .offcanvas-body {padding: 25px;}
.menu-sm .offcanvas-header h5 {text-transform: uppercase;font-size: 14px;}

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {display: block;}
    .navbar .dropdown-submenu {position: relative;}
    .navbar .dropdown-submenu > .dropdown-menu {top: 0;left: 100%;margin-left: .1rem;display: none;}
    .navbar .dropdown-submenu:hover > .dropdown-menu {display: block;}
} 
/* ==== footer ==== */
.footer {background-color: var(--primary);padding: 50px 0px;color: var(--white);}
.footer .logo img {width: 200px;height: auto;opacity: 0.8;}
.footer h4 {margin-bottom: 15px;opacity: 0.8;}
.footer a {color: var(--white);opacity: 0.8;}
.footer a:hover {opacity: 1;}
.footer ul>li {margin-bottom: 5px;}
.footer svg {width: 25px;height: 25px;}
.footer hr {margin: 30px 0px;}
.footer .intro {opacity: 0.8;margin: 20px 0px;}
.footer .copyright {opacity: 0.8;}

/* ==== info ==== */
.info-banner {background: url(../img/bg-1.jpg) center center no-repeat;background-size: cover;height: 440px;}
.info-header {padding: 50px 0px 30px;background: linear-gradient(to right, var(--primary-light), var(--secondary-light));}
.info-header h1 {font-size: clamp(20px, 2.6vw, 25px);margin-bottom: 15px;color: var(--primary);}
.info-header h3 {font-size: clamp(16px, 2vw, 18px);margin-bottom: 15px;}
.info-header p {font-size: clamp(16px, 1.2vw, 18px);margin-bottom: 20px;}
.info-header .breadcrumb {margin-bottom: 0px;}
.info-header .breadcrumb a {color: var(--black);}
.info-header .breadcrumb a:hover, .info-header .breadcrumb a:focus {color: var(--primary);}
.info-header .breadcrumb .breadcrumb-item {font-size: clamp(13px, 2vw, 14px)!important;font-weight: 500;}
.info-header .breadcrumb-item.active {color: var(--black);}
.info-header .breadcrumb-item+.breadcrumb-item::before {color: var(--black);font-weight: 300;}
.info-content {padding: 50px 0px;}
.info-content h2 {margin-bottom: 20px;color: var(--primary);}
.info-content h3 {margin-bottom: 15px;}
.info-content h4 {margin-bottom: 10px;}
.info-content p {margin-bottom: 20px;}
.info-content ul,.info-content ol {margin-bottom: 20px;}
.info-content ul>li {margin-bottom: 5px;}
.info-content ol {margin-left: 20px;}
.info-content ol>li {list-style: disc;margin-bottom: 8px;}
.info-content ul>li:last-child,.info-content ol>li:last-child {margin-bottom: 0px;}
.info-content ul>li span,.info-content ol>li span {font-weight: 500;}
.info-content ol ol {margin-top: 5px;margin-left: 20px;}
.info-content ol ol>li {list-style: lower-alpha;margin-bottom: 4px;}
.info-content ul svg {color: var(--primary);width: 20px;height: 20px;}
.info-content .card {position: relative;padding: 25px;border-radius: 15px;border: 2px solid transparent;background: linear-gradient(white, white) padding-box,linear-gradient(to right, var(--primary), var(--secondary)) border-box;}
.info-content .order-product img {width: 100px;height: auto;border-radius: 10px;}
.info-content .order-flow .badge {width: 30px;height: 30px;border-radius: 50%;padding: 0px;padding-top: 5px;}
.info-content .order-flow .text-bg-success {background-color: var(--green)!important;}
.info-content .order-flow .text-bg-light {background-color: var(--light3)!important;}
.info-content .order-flow .text-bg-light svg {color: var(--light3);}
.info-content .order-flow .text-bg-secondary {background-color: var(--secondary)!important;}
.info-content .order-flow .text-bg-secondary svg {color: var(--secondary);}
.info-content .order-flow svg {width: 20px;height: 20px;}
.info-content .order-flow h4 {font-size: clamp(13px, 1.2vw, 15px);margin-bottom: 0px;}
.info-content .order-flow p {font-size: clamp(12px, 1.2vw, 14px);margin-bottom: 0px;}
.info-footer {background: linear-gradient(to right, var(--primary), var(--secondary));color: var(--white);padding: 25px 30px;border-radius: 15px;}
.info-footer h1 {font-size: clamp(18px, 2.6vw, 23px);margin-bottom: 5px;color: var(--white);font-weight: 600;}

/* ==== home ==== */
.hero-slider {position: relative;width: 100%;height: 70vh;min-height: 400px;overflow: hidden;background: var(--primary);}
.hero-slider .slider-wrapper {width: 100%;height: 100%;}
.hero-slider .slide {position: absolute;top: 0; left: 0;width: 100%; height: 100%;opacity: 0;transition: opacity 1s ease-in-out;display: flex;align-items: center;justify-content: flex-start;}
.hero-slider .slide.active {opacity: 1;z-index: 1;}
.hero-slider .slide img {position: absolute;width: 100%; height: 100%;object-fit: cover;filter: brightness(0.6);}
.hero-slider .slide-content {position: relative;z-index: 2;padding: 0 10%;color: var(--white);max-width: 800px;transform: translateY(30px);transition: all 0.8s ease 0.3s;opacity: 0;}
.hero-slider .slide.active .slide-content {transform: translateY(0);opacity: 1;}
.hero-slider h1 {font-size: clamp(28px, 4vw, 56px);font-weight: 800;line-height: 1.2;margin-bottom: 15px;}
.hero-slider p {font-size: clamp(14px, 1.5vw, 18px);margin-bottom: 25px;font-weight: 500;}
.hero-slider .slider-nav {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;background: rgba(255,255,255,0.2);color: var(--white);border: none;padding: 10px;cursor: pointer;transition: 0.3s;border-radius: 50%;width: 50px; height: 50px;display: flex; align-items: center; justify-content: center;}
.hero-slider .slider-nav:hover {background: var(--primary);}
.hero-slider .prev {left: 20px;}
.hero-slider .next {right: 20px;}
.hero-slider .slider-dots {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);z-index: 10;}
.hero-slider .dot {height: 12px; width: 12px;margin: 0 5px;background-color: rgba(255,255,255,0.5);border-radius: 50%;display: inline-block;cursor: pointer;transition: 0.3s;}
.hero-slider .dot.active {background-color: var(--primary);width: 30px;border-radius: 10px;}
.home-info {background: linear-gradient(to right, var(--primary-light), var(--secondary-light));padding: 70px 0px;}
.home-info h1 {font-size: clamp(18px, 2vw, 23px);margin-bottom: 10px;}
.home-info h4 {font-weight: 500;}
.home-info p {font-size: clamp(13px, 1.2vw, 15px);}
.home-info img {height: 60px;width: auto;}
@media (max-width: 768px) {
    .hero-slider {height: 60vh;}
    .hero-slider .slide-content {text-align: center;padding: 0 20px;width: 100%;}
    .hero-slider .slider-nav {display: none;}
}

/* ==== category-list ==== */
.category-list h1 {font-size: clamp(18px, 2vw, 23px);margin-bottom: 10px;color: var(--primary);}
.category-list h4 {margin-bottom: 40px;font-weight: 500;color: var(--gray);}
.category-list .cat-list {text-align: center;border: 1px solid var(--light2);border-radius: 10px;padding: 18px 12px;transition: all 0.2s ease-in-out;}
.category-list .cat-list img {height: 60px;width: auto;margin-bottom: 15px;}
.category-list .cat-list h2 {color: var(--black);font-size: 15px;transition: all 0.2s ease-in-out;}
.category-list .cat-list:hover {border-color: var(--primary);}
.category-list .cat-list:hover h2 {color: var(--primary);}

/* ==== product-list ==== */
.product-lists h1 {font-size: clamp(18px, 2vw, 23px);margin-bottom: 10px;color: var(--primary);}
.product-lists h4 {margin-bottom: 30px;font-weight: 500;color: var(--gray);}
.product-lists .list-box {border: 1px solid var(--light2);border-radius: 10px;padding: 12px;transition: all 0.2s ease-in-out;}
.product-lists .list-box h2 {color: var(--black);font-size: 16px;margin-bottom: 5px;}
.product-lists .list-box h2:hover {color: var(--primary);}
.product-lists .list-box h3 {color: var(--primary);font-size: 16px;}
.product-lists .list-box h3 span {font-size: 14px;font-weight: 400;color: var(--black);text-decoration: line-through;}
.product-lists .list-box svg {width: 10px;height: 10px;color: var(--light3);margin-right: 2px;}
.product-lists .list-box .ratings svg {color: var(--yellow);}
.product-lists .list-box h6 {color: var(--black);font-size: 12px;font-weight: 500;}
.product-lists .list-box .post {position: relative;margin-bottom: 10px;}
.product-lists .list-box .post img {border-radius: 10px;}
.product-lists .list-box .post .badge {position: absolute;top: 0;left: 0;}
.product-lists .list-box .btn-primary {padding: 3px 5px;background-color: rgba(0,84,166, .1);}
.product-lists .list-box .btn-primary svg {width: 18px;height: 18px;color: var(--primary);stroke-width: 1.75;}
.product-lists .list-box .btn-primary:hover {background-color: rgba(0,84,166, 1)!important;}
.product-lists .list-box .btn-primary:focus {background-color: rgba(0,84,166, 1)!important;}
.product-lists .list-box .btn-primary:hover svg {color: var(--white)!important;}
.product-lists .list-box .btn-primary:focus svg {color: var(--white)!important;}
.product-lists .list-box:hover {box-shadow: 0 4px 4px rgba(0, 0, 0, 0.075)!important;}

/* ==== filter ==== */
.filter {padding: 30px 0px;}
.filter h3 {margin-bottom: 15px;}
.filter h4 {margin-bottom: 15px;}
.filter ul.cat-list {margin-bottom: 25px;}
.filter ul.cat-list li {margin-bottom: 5px;}
.filter ul.cat-list a {color: var(--gray);font-weight: 500;}
.filter ul.cat-list a:hover {color: var(--primary);}
.filter ul.cat-list svg {width: 18px;height: 18px;}
.filter ul.cat-list a.active {color: var(--primary);}
.filter .filter-scroll {max-height: 160px;overflow-y: auto;overflow-x: hidden;padding-right: 5px;margin-bottom: 25px;}
.filter .filter-scroll::-webkit-scrollbar {width: 3px;}
.filter .filter-scroll::-webkit-scrollbar-track {background: var(--light);border-radius: 10px;}
.filter .filter-scroll::-webkit-scrollbar-thumb {background: var(--light3);border-radius: 10px;}
.filter .filter-scroll::-webkit-scrollbar-thumb:hover {background: var(--gray);}
.filter .form-check {margin-bottom: 8px;color: var(--gray);}

/* ==== search ==== */
.search-cat-banner {padding-top: 30px;}
.search-header {padding: 25px 0px;}
.search-header p {font-size: 14px;font-weight: 500;color: var(--gray);}
.search-header .btn-outline-light {border: 1px solid var(--light2)!important;color: var(--black);}
.search-header .input-group {border: 1px solid var(--light2)!important;color: var(--black);border-radius: 6px;}
.search-header .input-group-text {background-color: var(--white);border: 0px;}
.search-header select {border: 0px!important;padding-left: 0px!important;font-size: clamp(14px, 1.2vw, 16px);font-weight: 500;}
.search-header svg {width: 20px;height: 20px;}

/* ==== pagination ==== */
.pagination {border: none;background-color: transparent;}
.pagination .page-link {border: none;background-color: transparent;color: var(--black);font-weight: 500;transition: color 0.2s ease-in-out;}
.pagination .page-item:not(.active) .page-link:hover {background-color: transparent;color: var(--secondary);}
.pagination .page-item.active .page-link {background-color: transparent;border: none;color: var(--primary);font-weight: 600;}
.pagination .page-link:focus {box-shadow: none;background-color: transparent;}
.pagination .page-item.disabled {display: none;}

/* ==== product ==== */
.product-header {padding: 20px 0px;}
.product-header .breadcrumb {margin-bottom: 0px;}
.product-header .breadcrumb a {color: var(--black);}
.product-header .breadcrumb a:hover, .info-header .breadcrumb a:focus {color: var(--primary);}
.product-header .breadcrumb .breadcrumb-item {font-size: clamp(13px, 2vw, 14px)!important;font-weight: 500;}
.product-header .breadcrumb-item.active {color: var(--gray);}
.product-header .breadcrumb-item+.breadcrumb-item::before {color: var(--black);font-weight: 300;}
.product-action h1 {margin-bottom: 10px;}
.product-action h2 {color: var(--primary);display: flex;align-items: center;}
.product-action h6 {font-size: clamp(14px, 1.2vw, 16px);font-weight: 500;color: var(--gray);text-decoration: line-through;}
.product-action h4 {margin-bottom: 7px;}
.product-action hr {margin: 20px 0px;}
.product-action .ratings {margin-bottom: 10px;}
.product-action .ratings svg {width: 15px;height: 15px;color: var(--yellow);}
.product-action .ratings p {color: var(--gray);font-weight: 500;}
.product-action .btn-light {border: 1px solid var(--light2)!important;background-color: var(--white)!important;color: var(--black);font-size: 14px;font-weight: 500;padding: 8px 14px;margin-right: 5px;}


.product-action .btn-link {padding: 0px;border-radius: 7px;margin-right: 5px;}
.product-action .btn-color {width: 30px;height: 30px;border-radius: 6px;}

.product-action .quantity {width: 100px;}
.product-action .quantity input {padding: 0px!important;border-radius: 6px 0px 0px 6px;font-weight: 500;}
.product-action .quantity svg {width: 12px;height: 12px;stroke-width: 3;}
.product-action .quantity .qty-btn-top {background-color: var(--white);border: 1px solid var(--light2)!important;border-left: 0px!important;border-radius: 0px 6px 0px 0px;padding: 0px 5px!important;}
.product-action .quantity .qty-btn-bottom {background-color: var(--white);border: 1px solid var(--light2)!important;border-left: 0px!important;border-top: 0px!important;border-radius: 0px 0px 6px 0px;padding: 0px 5px!important;}
.product-action .quantity-cart .btn-primary {display: flex;align-items: center;}
.product-action .quantity-cart .btn-primary svg {width: 25px;height: 25px;stroke-width: 1.25;margin-right: 10px;}
.product-info svg {width: 35px;height: 35px;stroke-width: 1.25;color: var(--primary);}
.product-info h4 {font-size: 14px;}
.product-info p {font-size: 14px;}
.product-image {position: relative;overflow: hidden;border: 1px solid var(--light2);border-radius: 10px;cursor: zoom-in;}
.main-img {transition: transform 0.3s ease;width: 100%;}
.product-image:hover .main-img {transform: scale(1.05);}
.product-image .zoom-hint {position: absolute;bottom: 10px;right: 10px;background: rgba(0,0,0,0.5); color: var(--white);padding: 2px 8px;font-size: 12px;border-radius: 5px;pointer-events: none;}
.product-thumbnails .img-thumbnail {width: 80px;height: 80px;object-fit: cover;cursor: pointer;border: 2px solid transparent;transition: 0.2s;}
.product-thumbnails .img-thumbnail.active {border-color: var(--primary);}
.lightbox-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 10000;justify-content: center;align-items: center;margin-top: 0px;}
.lightbox-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.9);z-index: 10001;}
.lightbox-image-container {position: relative;z-index: 10002;display: flex;justify-content: center;align-items: center;max-width: 90%;}
.lightbox-content {max-width: 100%;max-height: 80vh;object-fit: contain;}
.nav-btn {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255, 255, 255, 0.1);color: var(--white);border: none;width: 60px;height: 60px;cursor: pointer;z-index: 10005;border-radius: 50%;display: flex;align-items: center;justify-content: center;padding: 0px;}
.nav-btn svg {width: 30px;height: 30px;stroke-width: 1;}
.prev {left: 10px;}
.next {right: 10px;}
.close-btn {position: absolute;top: 20px;right: 20px;color: var(--white);z-index: 10005;cursor: pointer;}
.close-btn svg {width: 40px;height: 40px;stroke-width: 1;}
.product-details {padding: 50px 0px;}
.product-details .product-tabs .nav-tabs {border-bottom: 1px solid var(--light2)}
.product-details .product-tabs .nav-link {border: none;color: var(--black);font-weight: 600;padding: 12px 0px;margin-right: 30px;background: transparent;border-radius: 0px;transition: all 0.3s ease;}
.product-details .product-tabs .nav-link:hover {color: var(--primary);border: none;}
.product-details .product-tabs .nav-link.active {color: var(--primary);background: transparent;border: none;border-bottom: 1px solid var(--primary)!important;margin-bottom: -1px;}
.product-details .tab-content {margin-top: 30px;}
.product-details .ratings-box {border-bottom: 1px solid var(--light2);padding-bottom: 30px;margin-bottom: 30px;}
.product-details .ratings-box h1 {color: var(--primary);font-weight: 700;}
.product-details .ratings-box h4 {width: 50px;align-items: center;}
.product-details .ratings-box h4 svg {width: 15px;height: 15px;color: var(--black);margin-top: -2px;}
.product-details .ratings-box svg {width: 18px;height: 18px;color: var(--yellow);}
.product-details .ratings-box .border-bar {border-right: 1px solid var(--light2) !important;}
.product-details .ratings-box .progress {background-color: var(--light1);border-radius: 10px;height: 8px;}
.product-details .ratings-box .progress-bar {border-radius: 10px;}
.product-details .review-list {margin-bottom: 25px;}
.product-details .review-list .user-text {background-color: var(--light2);width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center!important;justify-content: center;font-weight: 600;color: var(--gray);}
.product-details .review-list .user-img img {width: 50px;height: 50px;border-radius: 50%;}
.product-details .review-list .text-warning svg {width: 15px;height: 15px;}
@media (max-width: 768px) {
    .product-details .ratings-box .border-bar {border-right: 0px!important;}
    .nav-btn {width: 50px;height: 50px;background: rgba(0, 0, 0, 0.5);}
}

/* ==== cart ==== */
.cart {padding: 30px 0px 50px;}
.cart .card {border: 1px solid var(--light2);padding: 12px;border-radius: 10px;transition: all 0.3s ease;}
.cart .card img {border: 1px solid var(--light1);border-radius: 10px;}
.cart .card h6 {font-size: clamp(14px, 1.5vw, 18px);}
.cart .card .text-muted {font-size: clamp(10px, 1vw, 12px);color: var(--gray);}
.cart hr {margin: 20px 0px;}
.cart .card .quantity {width: 100px;}
.cart .card .quantity input {padding: 0px!important;border-radius: 6px 0px 0px 6px;font-weight: 500;}
.cart .card .quantity svg {width: 12px;height: 12px;stroke-width: 3;}
.cart .card .quantity .qty-btn-top {background-color: var(--white);border: 1px solid var(--light2)!important;border-left: 0px!important;border-radius: 0px 6px 0px 0px;padding: 0px 5px!important;}
.cart .card .quantity .qty-btn-bottom {background-color: var(--white);border: 1px solid var(--light2)!important;border-left: 0px!important;border-top: 0px!important;border-radius: 0px 0px 6px 0px;padding: 0px 5px!important;}
.cart .card .btn-link {padding: 0px;}
.cart .card .btn-link svg {width: 23px;height: 23px;stroke-width: 1.5;}
.cart .summary {border: 1px solid var(--light2);padding: 25px;border-radius: 10px;}
.cart .summary h5 {color: var(--gray);font-weight: 500;}
.cart .btn-outline-light {border: 1px solid var(--light2)!important;text-align: left;padding: 10px 15px;color: var(--black)!important;}
.cart .btn-outline-light h6 {font-size: clamp(14px, 1.5vw, 16px);}
.cart .btn-outline-light p {font-size: clamp(14px, 1.5vw, 16px);font-weight: 400;}
.cart .btn-check:checked+.btn, 
.cart .btn.active, 
.cart .btn.show, 
.cart .btn:first-child:active, 
.cart :not(.btn-check)+.btn:active {background-color: var(--light4)!important;border: 1px solid var(--light3)!important;}
.cart .address-item {cursor: pointer;transition: all 0.2s ease;border: 1px solid var(--light2) !important;padding: 15px 15px 15px 12px;border-radius: 10px;}
.cart .address-item:hover {background-color: var(--primary-light-alt);border-color: var(--primary) !important;}
.cart .address-item:has(input:checked) {background-color: var(--primary-light-alt);border-color: var(--primary) !important;box-shadow: 0 2px 5px rgba(0, 84, 166, 0.1);}
.cart .address-details h5 {font-size: clamp(14px, 1.3vw, 16px);font-weight: 500;}
.cart .address-details h5 span {color: var(--light3);}
.cart .address-details h6 {font-size: clamp(13px, 1.3vw, 15px);color: var(--black);margin-bottom: 5px;}
.cart .address-details h6 span {font-weight: 500;color: var(--gray);}
.cart .address-details p {font-size: clamp(11px, 1.2vw, 13px);color: var(--gray);}
.cart .pointer {cursor: pointer;}
.cart .badge {font-size: 10px;text-transform: uppercase;font-weight: 600;}
.cart .text-primary {font-weight: 600;}
.cart #addNewAddress .form-control {background-color: #fff;}

/* ==== confirmation ==== */
.confirmation {padding: 50px 0px;}
.confirmation .card {border: 1px solid var(--light2);padding: 30px;border-radius: 10px;transition: all 0.3s ease;}
.confirmation .status-icon {width: clamp(60px, 10vw, 90px);height: clamp(60px, 10vw, 90px);display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.confirmation .status-icon svg {width: clamp(40px, 10vw, 60px);height: clamp(40px, 10vw, 60px);stroke-width: 1.5;}
.confirmation .order-success h2, 
.confirmation .order-failure h2 {font-size: clamp(22px, 3vw, 32px);margin-bottom: 10px;}
.confirmation .order-success p,
.confirmation .order-failure p {font-size: clamp(12px, 1.2vw, 14px);margin-bottom: 20px;}
.confirmation .order-success p span,
.confirmation .order-failure p span {font-weight: 600;}
.confirmation .order-summary-box {border: 1px solid var(--light2);background-color: var(--light4);padding: 15px;border-radius: 8px;margin-bottom: 30px;}

/* ==== accounts ==== */
.login {background-image: url('../img/login-bg.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;padding: 60px 0px;}
.login-card {background: rgba(255, 255, 255, 0.98);border-radius: 16px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;}
.accounts {padding: 50px 0px;}
.accounts table th {font-weight: 600;}
.accounts .card {border: 1px solid var(--light2);border-radius: 10px;}
.accounts .card-header {background-color: transparent;padding: 15px 20px;border-bottom: 1px solid var(--light2);}
.accounts .card-footer {background-color: transparent;padding: 15px 20px;}
.accounts .card-body {padding: 20px;}
.accounts .chat-window {background-image: radial-gradient(var(--light2) 1px, transparent 1px);background-size: 20px 20px;}
.accounts .dropdown-menu {border: 1px solid var(--light2);border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.accounts .dropdown-item {color: var(--black);background-color: var(--white);font-size: 15px;font-weight: 500;}
.accounts .dropdown-item:hover {color: var(--primary);}
.accounts .list-group svg {width: 25px;height: 25px;stroke-width: 1.5;}
.accounts .list-group-item {padding: 10px 16px;color: var(--black);}
.accounts .list-group-item.active {color: var(--white);background-color: var(--primary);border-color: var(--primary);}
.accounts .intro h2 {color: var(--primary);}
.accounts .intro h6 {font-size: clamp(12px, 1.5vw, 14px);color: var(--gray);font-weight: 400;}
.accounts .intro p {margin: 5px 0px;}
.accounts .menu-item {border: 1px solid var(--light2);padding: 12px;border-radius: 15px;font-size: 12px;font-weight: 500;transition: all 0.3s ease;}
.accounts .menu-item svg {width: 45px;height: 45px;stroke-width: 0.8;color: var(--primary);}
.accounts .menu-item a {color: var(--black);}
.accounts .menu-item:hover {background-color: var(--primary-light-alt);}

.accounts .page-header {margin-bottom: 35px;}
.accounts .page-header h2 {color: var(--primary);}
.accounts .page-header svg {color: var(--primary);width: 30px;height: 30px;stroke-width: 1.75;}
.accounts .page-header .btn-back {color: var(--gray);font-weight: 500;}
.accounts .page-header .btn-back svg {color: var(--gray);width: 25px;height: 25px;}

.accounts .order-box {border: 1px solid var(--light2);border-radius: 10px;}
.accounts .order-box .box-header {padding: 15px 20px;}
.accounts .order-box .box-list {border-top: 1px solid var(--light2);padding: 15px 20px;}
.accounts .order-box .box-list img {border: 1px solid var(--light1);border-radius: 10px;}
.accounts .order-box .box-list:hover {background-color: var(--light4);transition: all 0.3s ease;}
.accounts .order-box .box-footer {padding: 20px;border-top: 1px solid var(--light2);text-align: end;}
.accounts .order-box .box-info {text-align: center;padding: 40px 150px;}
.accounts .order-box .box-info svg {width: 100px;height: 100px;stroke-width: 1;background-color: var(--primary-light);padding: 23px;border-radius: 50%;}
.accounts .order-box .box-track {border-top: 1px solid var(--light2);padding: 20px 40px;position: relative;}
.accounts .order-box .box-track::before {content: "";position: absolute;top: 40px;left: 10%;width: 81%;height: 2px;background: var(--light3);z-index: 1;}
.accounts .order-box .box-track-step {position: relative;z-index: 2;}
.accounts .order-box .box-track-step h5 {font-size: clamp(14px, 1vw, 16px);}
.accounts .order-box .box-track-step p {font-size: clamp(12px, 1vw, 13px);color: var(--gray);}
.accounts .order-box .box-track-step svg {width: 40px;height: 40px;stroke-width: 1.5;border: 2px solid var(--light2);color: var(--light2);background-color: var(--white);border-radius: 50%;padding: 5px;}
.accounts .order-box .box-track-step.active svg {color: var(--white);border-color: var(--primary);background-color: var(--primary);}
.accounts .order-box .box-track-step.active h5 {color: var(--primary);}
.accounts .order-box .box-details {border-top: 1px solid var(--light2);padding: 20px;}
.accounts .address-list {border: 1px solid var(--light2);padding: 20px;border-radius: 10px;}
.accounts .address-list h5 {color: var(--gray);font-size: clamp(14px, 1vw, 16px);}
.accounts .address-list .btn-link {padding: 0;}
.accounts .profile-avatar-wrapper {position: relative;width: 120px;}
.accounts .profile-avatar-wrapper img {width: 120px;height: 120px;border-radius: 50%;border: 1px solid var(--light2);object-fit: cover;}
.accounts .avatar-edit-btn {position: absolute;bottom: 0;right: 0;width: 35px;height: 35px;background: var(--primary);color: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;border: 3px solid var(--white);transition: all 0.2s ease;}
.accounts .avatar-edit-btn:hover {transform: scale(1.1);background: var(--primary);}
.accounts .support-icon-box {width: 60px;height: 60px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
@media (max-width: 768px) {
    .accounts .order-box .box-info {text-align: center;padding: 50px 50px;}
    .accounts .order-box .box-track {padding: 20px;}
    .accounts .order-box .box-track::before {width: 2px;height: 70%;left: 40px;}
}

/* ==== auth ==== */
.auth {background: url('../img/login-bg.jpg') center center no-repeat;background-size: cover;overflow: hidden;min-height: 100vh;padding: 50px 0px;}
.auth .auth-card {background: rgba(255, 255, 255, 0.98);border-radius: 16px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;}
.auth .auth-card img {width: 230px;height: auto;margin-bottom: 15px;}
.auth .auth-card p {color: var(--gray);}
@media (max-width: 768px) {
    .auth .auth-card img {width: 160px;height: auto;margin-bottom: 15px;}
}