body, html {font-family: 'Quicksand';}
body { overflow-x: hidden; }
html[dir="rtl"] body { direction: rtl; text-align: right; }
/*
header h1, header .nav-link {font-family: 'Playfair Display', serif;color: #1C1C1C;}
header small {font-size: 0.75rem;color: #6c757d;}
*/
::-webkit-scrollbar {width: 8px; height: 8px;}
::-webkit-scrollbar-track {background-color: #F3F3F3;}
html[data-bs-theme="dark"] ::-webkit-scrollbar-track {background-color: #343a40;}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {background-color: rgba(186, 186, 192, 0.7); border-radius: 8px; border: 1px solid #B9B9B9; transition: background-color 0.3s, opacity 0.3s,transform 0.1s, box-shadow 0.1s;}
::-webkit-scrollbar-thumb:hover {background-color: rgba(160, 160, 165, 0.5); opacity: 0.5; transform: scale(1.05);}
::-webkit-scrollbar-thumb:active {background-color: #8a8a8f; opacity: 1; transform: scale(0.95);}

	#back-to-top {display:none; position:fixed; bottom:20px; cursor:pointer; z-index:1000;}
	html[dir="ltr"] #back-to-top {right:20px; }
	html[dir="rtl"] #back-to-top {left:20px; }
/*-----------------------------------------------------------------*/

.navbar-brand img {height: 42px;}
.nav-utils .btn-icon {width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; /*border: 1px solid #ddd; background: #fff;*/}
/*.nav-utils .btn-icon:hover {background: cyan;}*/
.cart-badge {position: absolute; top: -4px; right: -4px; background: #dc3545; color: white; font-size: 0.65rem; border-radius: 50%; padding: 2px 6px;}
@media (min-width: 992px) {
  .dropdown-submenu {position:relative;}
  .dropdown-submenu > .submenu {display:none;position:absolute;left:100%;top:0;min-width:220px;margin-left:0;}
  .dropdown-submenu:hover > .submenu {display:block;}
  .dropdown-submenu > .dropdown-toggle {display:block;padding:6px 45px 6px 12px;}
  .dropdown-submenu:hover > a.dropdown-item {background-color:#2563eb!important;color:#fff!important;}
  .dropdown-submenu > .dropdown-toggle::after {content:"▸";font-size:0.6rem;color:#aaa;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:transform .2s ease,color .2s ease;}
  .dropdown-submenu:hover > .dropdown-toggle::after {color:#fff!important;transform:translate(2px,-50%);}
  .submenu .dropdown-item:hover {background-color:#2563eb!important;color:#fff!important;}
}
.dropdown-submenu:hover > a.dropdown-item {background-color: #2563eb !important; color: #fff !important;}
.dropdown-submenu:hover > a.dropdown-item::after {color: #fff !important;}
.dropdown-submenu > .dropdown-toggle::after {content: "▸";font-size: 0.6rem;color: #aaa;transition: transform 0.2s ease;float: right;margin-left: auto;}
.dropdown-submenu:hover > .dropdown-toggle::after {color: #0080bb;transform: translateX(2px);}
.submenu .dropdown-item:hover {background-color: #2563eb !important; color: #fff !important;}
#offcanvasMenu {--bs-offcanvas-width: min(320px, 85vw);}
#offcanvasMenu .offcanvas-header {border-bottom: 1px solid #eee;}

.offcanvas-utilities {display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;}
.offcanvas-utilities-summary {margin-left: auto; text-align: right; font-size: 0.85rem;}
.offcanvas-utilities-summary .label {color: #6b7280;}
.offcanvas-utilities-summary .value {font-weight: 600;}
.offcanvas-nav-section-title {font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; margin-bottom: .25rem;}
.offcanvas-category {padding: .4rem 0; border-bottom: 1px solid #f3f4f6;}
.offcanvas-cat-row {display: flex; align-items: center; justify-content: space-between;}
.offcanvas-cat-link {text-decoration: none; font-weight: 500; flex: 1; padding: .15rem 0;}
html[data-bs-theme="light"] .offcanvas-cat-link {color: #111827;}
html[data-bs-theme="dark"] .offcanvas-cat-link {color: #e5e7eb;}
.offcanvas-cat-link:hover {color: #0b5ed7;}
.offcanvas-toggle-sub {border: none; background: transparent; padding: 0 .25rem; font-size: 0.9rem; cursor: pointer; line-height: 1; user-select: none;}
.offcanvas-subcats {display: none; padding: .1rem 0 .4rem .75rem; font-size: 0.9rem;}
.offcanvas-subcats a {display: block; text-decoration: none; padding: .1rem 0;}
html[data-bs-theme="light"] .offcanvas-subcats a {color: #4b5563;}
html[data-bs-theme="light"] .offcanvas-subcats a:hover {color: #111827;}
html[data-bs-theme="dark"] .offcanvas-subcats a {color: #d1d5db;}
html[data-bs-theme="dark"] .offcanvas-subcats a:hover {color: #ffffff;}
.offcanvas-category.open .offcanvas-toggle-sub {transform: translateX(2px);}
.offcanvas-main-link {display: block; padding: .4rem 0; text-decoration: none; font-weight: 500;}
html[data-bs-theme="light"] .offcanvas-main-link {color: #111827;}
html[data-bs-theme="dark"] .offcanvas-main-link {color: #e5e7eb;}
.offcanvas-main-link:hover {color: #0b5ed7;}
.offcanvas-category .offcanvas-subcats {display: none;}
.offcanvas-category.open .offcanvas-subcats {display: block !important;}


#searchBarContainer {position: relative;}
#searchResults {position: absolute;top: 65%;left: 50%;transform: translateX(-50%);max-height: 300px;border-radius: 5px;z-index: 1000;display: none;background: white;box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);}
#searchResultsScroll {max-height: 300px; overflow-y: auto; border-radius: 5px; margin-left: auto; margin-right: auto;}
.search-results {list-style-type: none; padding: 0; margin: 0; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 5px;}
.search-result {padding: 8px 12px; cursor: pointer; transition: background-color 0.3s ease; font-size: 1rem; color: #333;}




.carousel {position: relative; height: 350px; overflow: hidden;}
.carousel-slide {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 1s ease-in-out; display: flex; align-items: center; /*justify-content: center;*/ background-size: cover; background-position: center; padding-left: 3rem;}
.carousel-slide.show {opacity: 1; pointer-events: auto;}
.carousel-content {text-align: center; color: white; text-shadow: 0 0 4px rgba(0,0,0,0.4);}
.carousel-content h2 {font-size: 2rem; margin-bottom: 0.5rem;}
.carousel-content p {font-size: 1.2rem; margin-bottom: 1.2rem;}
.slide1 {background-image: url('/assets/img/carousel/carousel_01.jpg');}
.slide2 {background-image: url('/assets/img/carousel/carousel_02.jpg');}
.slide3 {background-image: url('/assets/img/carousel/carousel_03.jpg');}



.testimonial-container {}
.testimonial {transition: transform 0.3s ease;}
.testimonial:hover {transform: scale(1.03);}
.testimonial p {font-size: 1rem; line-height: 1.5; color: #333;}
.author {font-size: 0.9rem;}
@keyframes scroll {from {transform: translateX(0);} to {transform: translateX(-50%);}}
.scroller-wrapper:hover .scroller {animation-play-state: paused;}
.scroller-wrapper {overflow: hidden; position: relative;}
.scroller-wrapper::-webkit-scrollbar {display: none;}
.scroller {display: flex; gap: 1rem; animation: scroll 90s linear infinite; width: max-content;}
.scroller::-webkit-scrollbar {display: none;}
.scroller-item {flex: 0 0 300px;}


.zoom {transition: transform 0.3s ease;}
.zoom:hover {transform: scale(1.05);}


.product-page h1 {font-size: 1.9rem;letter-spacing: 0.02em;}
.product-price {font-size: 1.7rem;font-weight: 600;}
.card-soft {background: #ffffff;border-radius: 16px;border: 1px solid rgba(15, 23, 42, 0.06);box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);}
.card-soft-light {background: #fafbff;border-radius: 14px;border: 1px solid rgba(56, 88, 233, 0.08);}
.badge-soft {display: inline-flex;align-items: center;padding: 4px 10px;border-radius: 999px;font-size: 0.78rem;letter-spacing: 0.04em;text-transform: uppercase;background: #f3f4ff;color: #3843a9;}
.product-gallery {display: flex !important;flex-direction: row !important;align-items: stretch;/*gap: 14px;*/ width: 100%;flex-wrap: nowrap !important;}
.thumbs {display: flex !important;flex-direction: column !important;gap: 8px;}
.thumbs img {width: 65px;height: 65px;object-fit: cover;border-radius: 10px;cursor: pointer;border: 2px solid transparent;transition: 0.2s ease;background: #ffffff;box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);}
.thumbs img:hover {transform: translateY(-1px) scale(1.02);box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);}
.thumbs img.active {border-color: #3858e9;}
.product-image-wrapper {position: relative;width: 100%;overflow: hidden;}
.slider {display: flex !important;align-items: center;position: relative;transition: transform 0.6s ease, opacity 0.25s ease;}
.slider.fade {opacity: 0;}
.slider.fade-active {opacity: 1;}
.slide {min-width: 100%;}
.slide img {width: 100%;display: block;border-radius: 16px;}
.product-nav {position: absolute;top: 50%;transform: translateY(-50%);width: 44px;height: 44px;border-radius: 999px;background: rgba(255,255,255,0.75);border: 1px solid rgba(255,255,255,0.5);backdrop-filter: blur(6px);display: flex;justify-content: center;align-items: center;cursor: pointer;opacity: 0.9;transition: 0.22s ease;z-index: 10;box-shadow: 0 10px 24px rgba(0,0,0,0.12);}
.product-nav:hover {opacity: 1;transform: translateY(-50%) scale(1.06);box-shadow: 0 16px 32px rgba(0,0,0,0.18);}
.product-nav.prev {left: 12px;}
.product-nav.next {right: 12px;}
.product-nav svg {width: 18px;height: 18px;stroke: #333;}
.material-box {padding: 18px 20px;margin-top: 1.5rem;background: #fafbff;border-radius: 14px;border-left: 4px solid #3858e9;font-size: 0.95rem;line-height: 1.6;}
.btn-add-cart {border-radius: 999px;padding: 12px 26px;font-weight: 600;letter-spacing: 0.03em;text-transform: uppercase;box-shadow: 0 10px 24px rgba(56, 88, 233, 0.3);border: none;}
.btn-add-cart:active {transform: scale(0.97);}
.similar-card {transition: transform 0.22s ease, box-shadow 0.22s ease;}
.similar-card img {border-radius: 14px;}
.similar-card:hover {transform: translateY(-3px);box-shadow: 0 15px 28px rgba(15, 23, 42, 0.18);}
.avis-card {background: #ffffff;border-radius: 16px;border: 1px solid rgba(15,23,42,0.06);box-shadow: 0 18px 30px rgba(15,23,42,0.08);padding: 18px 20px;}

@media (max-width: 767.98px) {
    .product-gallery {flex-direction: column !important;}
    .thumbs {flex-direction: row !important;order: 2;}
    .thumbs img {width: 65px;height: 65px; margin-top: 10px;}
}