@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/*body {font-family: "Jost", sans-serif;}*/
body {font-family: "Noto Sans", sans-serif; line-height:normal;}

/* Screen reader only class for accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
pre {font-family: "Noto Sans", sans-serif;}
.hd.open{background: rgba(0, 0, 0, 0.8); left: 0px; top: 0px; bottom: 0px; right: 0px; position: fixed; z-index: 100;}
.header-inner {display: flex; align-items: center; justify-content: space-between; max-width: 100%; margin: auto; padding: 15px 45px 0px 45px; grid-template-columns: 30% 70%; background: #fff;}
.header-left {width: 200px;justify-content: flex-start;display: flex;}
.site-logo {font-size: 1.2em; font-weight: 500; color: #000; text-decoration: none; margin-right: 24px;}
.category-nav {display: flex; gap: 18px;}
/*.header-right {width: 288px;justify-content: flex-end;display: flex;}*/
.header-right {justify-content: flex-end;display: flex;}
.cart-link {position: relative; background: #000; text-decoration: none; align-items: center; gap: 4px; width: 34px; height: 34px; display: inline-block; padding: 6px; border-radius: 5px; margin-right:15px; color:#fff;}
.cart-icon {width:18px; height: 18px; background: url(/assets/images/cart.png) no-repeat center center; display: block; background-size: cover; margin: 0 auto;}
.cart-count {padding: 5px 2px 5px 13px; font-size: 0.8em; margin-left: 0px; position: relative; display: block; text-align: center; background: url(../images/shop-cart-n3.svg?123) no-repeat center left !important; left: 0px; top: 0px; background-size: contain!important; width: 53px; height: 33px; color: #f08804 !important;}
.user-link {position: relative; background: #000; text-decoration: none; align-items: center; gap: 4px; width: 34px; height: 34px; display: inline-block; padding: 6px; border-radius: 5px;}
.user-icon {width: 18px; height: 18px; background: url(/assets/images/user.png) no-repeat center center; display: block; background-size: cover; margin: 0 auto;}
.main-nav {flex: 1;}
#header-search-form {display: flex; align-items: center; gap: 0.5rem; margin: 0;}
.category-section {scroll-margin-top: 120px; padding: 20px 0;}
.search-input-focused{box-shadow:0 0 0 2px #f90,0 0 0 3px rgba(255,153,0,.5); border-radius:5px;}
#page-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); /* semi-transparent black */ z-index: 999; /* make sure it's above other elements */ display: none; /* hidden by default */}
.category-slider {position: sticky; top:56px; z-index: 100; background: #fff; white-space: nowrap; overflow-x: unset; padding: 0px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; display: flex;  justify-content: center;  align-items: center;  border-bottom: solid 5px #F3F3F3; }
.category-slider::-webkit-scrollbar {display: none;}
.category-slider .category-link {flex: 0 0 auto;}
.category-list {flex-wrap: wrap; overflow-x: visible; background: #fff; border-radius:0px; margin: 0px; padding: 10px;}
.category-list .category-link {flex: 1 1 auto; text-align:center; position:relative;}
.category-list .category-link:before{content:''; width:2px; height:10px;  background:#000; right:0px; top:50%; margin-top:-25%;}
.category-link {padding: 8px; border-radius: 4px;  color: #222;  text-decoration: none; font-weight: 500; transition: all 0.3s ease; display: inline-block;  margin-right: 0px;}
.category-link.active {color: #000; position: relative;}
.category-link.active:before{content:''; width:100%; height:5px; background:#000; bottom:-5px; position:absolute; left:0px;}
.products-section {scroll-margin-top: 120px; /* Adjust based on your header + category nav height */}
.products-section h2{font-size: 24px; line-height: 32px; font-weight: 700; padding: 20px;}

.retail-layout .header-inner{background: #fff; padding:10px 20px;}
.retail-layout .header-inner.fr_active {grid-template-columns: 18% 58% 23%;}
.retail-layout .header-left .site-logo{margin-right:0px; color:#000; line-height:normal;}
.retail-layout .header-left .location{color: #000; font-size: 12px; line-height: 14px; padding-left:20px; position:relative; display:none;}
.retail-layout .header-left .location span{display: table; color: #000; font-size: 14px; font-weight: 700; line-height: 17px;}
.retail-layout .header-left .location:before{content:''; width:16px; height:16px; background:url('/assets/images/location-n.png') no-repeat center center; position:absolute; bottom:4px; left:0px; background-size: contain;}

.retail-layout .header-center {isplay: flex;gap: 20px;flex: 1;justify-content: center;}
.retail-layout .header-center .search-form {width: 100%; position: relative; margin:0 auto;display: flex; grid-template-columns: 20.5% 79.5%; z-index:1000}
.retail-layout .header-center .search-form input[type="text"] {padding: 8px 50px 8px 15px; border-radius: 100px; border: 1px solid #ccc; font-size: 1em; width: 100%; font-size: 14px;}
.retail-layout .header-center .search-form button {position: absolute; right: 7px; width: 36px; height: 36px; top: 50%; transform: translateY(-50%); border-radius: 100px; background: #000; border: none; cursor: pointer; padding: 0;}
.retail-layout .header-center .search-form button:before {position: absolute; content: ''; background: url('/assets/images/search-w.png') no-repeat center center; background-size: 18px; left: 50%; top: 50%; background-size: cover; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;}
.retail-layout .header-center .search-form button:hover {background: #000;}
.retail-layout .header-center .select-drop{background-color: #d4d4d4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 12px 8px; border-radius: 4px 0px 0px 4px; position: relative; display: inline-block; padding:0px 24px 0px 10px}
/*.retail-layout .header-center .select-drop .fake-select {background: transparent; border: 0px solid #ccc; border-right: none; border-radius: 4px 0 0 4px; height: 38px; display: inline-flex; align-items: center; padding: 0 10px; white-space: nowrap; font-size: 14px; }
.retail-layout .header-center .select-drop .fake-text {margin-right: 6px; font-size: 14px}
.retail-layout .header-center .select-drop .fake-arrow {font-size: 0.8em; pointer-events: none; width:20px; text-align:center;flex: none;}*/

.retail-layout .header-center .select-drop .fake-select {position: relative; box-sizing: border-box; font-size: 14px; line-height: 37px; padding: 0px;}
.retail-layout .header-center .select-drop .fake-arrow {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;}
.retail-layout .header-center .select-drop .fake-text {display: block; white-space: nowrap;}

.retail-layout .header-center .select-drop select{position: absolute;  left: 0px; top: 0; opacity:0; width: 100%; cursor: pointer; width: 100%; background: transparent; border: 0px; height: 100%; font-size: 12px; padding: 10px; box-shadow:unset; outline:unset; font-size: 14px; padding: 6px; min-width: 80px;}
.retail-layout .header-center .input-group input{border-radius: 0px 4px 4px 0px !important; box-shadow:unset;}
.retail-layout .header-center .input-group button{position: absolute; right: 0px; top: 0px; margin: 0px; z-index: 20; background: #d4d4d4!important; color: #000; border-radius: 0px 4px 4px 0px!important; transform: unset; height: 100%; width: 45px;}
.retail-layout .header-center .search-form button:before{background-size: 30px;}
.retail-layout .header-center .search-form button i{display:none;}


.main-header.retail-header{position: relative; z-index: 1001; width: 100%; top: 0px; left: 0px;}

.pickup_icon {display: inline-block; background-color: #ff6b6b; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; margin: 8px 0; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; z-index: 1;}
.pickup_icon::before {content: ''; margin-right: 4px; font-size: 14px; background: url(/assets/images/pickup.png) no-repeat center center; position: relative; display: inline-block; width: 25px; height: 25px; left: 0px; top: 0px; background-size: contain;}
/*.pickup_icon::before {content: '🚚'; margin-right: 4px; font-size: 14px;}*/


.auth-footer {background: #fff; padding: 20px 0; text-align: center; border-top: 1px solid #eee; color: #666; font-size: 0.9rem;}
.alert {margin: 0 auto; padding: 12px; border-radius: 8px; margin-bottom: 20px; width: 420px; border: 2px solid transparent; border-left: 12px solid transparent; background:transparent;  font-size:14px; line-height:normal}
.alert span{display:table; font-size:18px; font-weight:24px; font-weight:700; position:relative; padding-bottom:10px; padding-left: 25px;}
.alert-danger {color: #000; border-color: #cc0c39;}
.alert-danger span::before {content: ""; display: inline-block; width: 1em; height: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23cc0c39' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right:8px; position: absolute; left: 0px; top: 3px;}
.alert-success {color: #000; border-color: #0a3622;}
.alert-success span::before {content: ""; display: inline-block; width: 1em; height: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230a3622' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right:8px; position: absolute; left: 0px; top: 3px;}
.alert-info {color: #000; border-color: #9ec5fe;}
.alert-info span::before {content: ""; display: inline-block; width: 1em; height: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%239ec5fe' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right:8px; position: absolute; left: 0px; top: 3px;}


@media screen and (min-width: 1150px) and (max-width: 1280px) {
}
@media screen and (min-width: 1024px) and (max-width: 1149px) {
	.retail-layout .header-inner{padding:10px;}
	.retail-layout .action-link span.text{display:none;}
	.retail-layout .cart-link.action-link{width:45px!important;}

}
@media screen and (min-width: 991px) and (max-width: 1023px) {
	.retail-layout .header-inner .mobile-menu-toggle{display:none;}
	.retail-layout .header-inner{padding:10px;}
	.retail-layout .action-link span.text{display:none;}
	.retail-layout .cart-link.action-link{width:45px!important;}
	.retail-layout .header-inner{grid-template-columns: 19% 53% 26%;}
	.retail-layout .header-actions .dropdown .dropdown-menu.dropdown-menu-end{right:0px;}
}
@media screen and (min-width: 768px) and (max-width: 990px) {
	.retail-layout .header-inner .mobile-menu-toggle{display:none;}
	.retail-layout .header-inner{padding:10px; grid-template-columns: 20% 58% 21%;}
	.retail-layout .action-link span.text{display:none;}
	.retail-layout .cart-link.action-link{width:45px!important;}
}



/* Language Selector Styles */
.language-selector {position: relative; margin-left: 10px;}
.language-toggle {background: none; border: 1px solid transparent; border-radius: 4px; padding: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #000; text-decoration: none; width:85px;}
.language-toggle:hover {border: solid 1px #000;}
.language-toggle i.fa-globe {color: #000;}
.language-toggle i.fa-chevron-down {font-size: 12px; transition: transform 0.3s ease;}
.language-dropdown.open .language-toggle i.fa-chevron-down {transform: rotate(180deg);}
.language-toggle .country-flag{width:22px; height:16px;}
.language-toggle[title="Language Settings"] .country-flag{background:url('/assets/images/flag-english.jpg') no-repeat center center; background-size: contain;}
.language-toggle[title="Paramètres de langue"] .country-flag{background:url('/assets/images/flag-french.jpg') no-repeat center center; background-size: contain;}

/* Country Flag Styles - Cross-platform compatibility */
.country-flag {width: 22px;height: 16px;vertical-align: middle;margin-right: 4px;border-radius: 2px;object-fit: cover;border: 1px solid rgba(0, 0, 0, 0.1);display: inline-block;max-width: 22px;max-height: 16px;}

/* Retail layout specific positioning */
.retail-header .header-center .language-selector {display: flex;align-items: center;}

/* Restaurant layout specific positioning */
.restaurant-header .header-right .language-selector {display: flex;align-items: center;}


.breadcrumb{color: #565959; font-size: 12px; line-height: 14px; padding: 11px 25px;display: flex; align-items: center; margin: 15px 10px;}
.breadcrumb i{font-size: 9px; margin: 0px 5px;}
.breadcrumb a{color: #565959; text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

select {background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; /* small padding for Safari */ background-size: 11px 8px; padding-right: 24px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #ccc;}

/* Safari fix to hide default arrow */
select::-ms-expand {display: none; /* IE/Edge */}
select::-webkit-inner-spin-button, select::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}


@media screen and (min-width: 1281px) and (max-width: 1500px) {
	.retail-layout .header-inner{grid-template-columns: 18% 59% 22%;}
	[lang="fr"] .retail-layout .action-link{font-size: 10px; line-height: 12px; padding: 5px;}
	.pickup_icon::before{width: 35px; height: 36px;}
}

/* Desktop-only dropdown positioning */
@media (min-width: 769px) {
    .retail-header .header-center .language-dropdown {position: relative;}
    
    .restaurant-header .header-right .language-dropdown {position: relative;}
}

/* Hide language selector on mobile and tablet */
@media (max-width: 768px) {
    .language-selector {display: none !important;}
}

/* Tablet-specific language dropdown styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .language-dropdown {position: relative; display: inline-block;}
    .language-menu {position: absolute;top: 100%;right: 0;background: white;border: 1px solid #dee2e6;border-radius: 0px;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);list-style: none;margin: 0;padding: 0;min-width: 120px;z-index: 1000;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;}
    .language-dropdown.open .language-menu {opacity: 1;visibility: visible;transform: translateY(0);}
    .language-menu li {margin: 0;}
    .language-option {display: block;padding: 0.25rem 1rem;text-decoration: none;color: #444;transition: background-color 0.3s ease;font-size: 14px;}
    .language-menu li:first-child .language-option{border-radius:0px;}
    .language-menu li:last-child  .language-option{border-radius:0px;}
    .language-option:hover {background-color: transparent;color: inherit;}
    .language-option:focus {background-color: transparent !important; color: inherit !important; outline: none !important; box-shadow: none !important;}
    .language-option:active {background-color: transparent !important; color: inherit !important; outline: none !important; box-shadow: none !important;}
    .language-option.active {background-color: transparent;color: inherit;}
    .language-option.active:hover {background-color: transparent;color: inherit;}
}

/* Desktop dropdown styles (1025px and above) */
@media (min-width: 1025px) {
    .language-dropdown {position: relative; display: inline-block;}
	.language-menu {position: absolute;top: 100%;right: 0;background: white;border: 1px solid #dee2e6;border-radius: 0px;list-style: none;margin: 0;padding: 0.5rem 0rem;min-width: 120px;z-index: 1000;opacity: 0;visibility: hidden; text-align:left;}
	.language-dropdown.open .language-menu {opacity: 1;visibility: visible;}
	.language-menu li {margin: 0; border:0px;}
	.language-option {display: block;padding: 0.25rem 1rem;text-decoration: none;color: #444;transition: background-color 0.3s ease;font-size: 14px;}
	.language-menu li:first-child .language-option{border-radius:0px;}
	.language-menu li:last-child  .language-option{border-radius:0px;}
	.language-option:hover {background-color: #f8f9fa;color: #444}
	.language-option:focus {background-color: #f8f9fa !important; color: inherit !important; outline: none !important; box-shadow: none !important;}
	.language-option:active {background-color: transparent !important; color: inherit !important; outline: none !important; box-shadow: none !important;}
	.language-option.active {background-color: transparent;color: #444}
	.language-option.active:hover {background-color: #f8f9fa;color: #444}
}


@media screen and (min-width: 540px) and (max-width: 767px) {
	.header-inner{padding: 15px 20px; grid-template-columns: 64% 30%;}
	.cart-link{width:30px; height:30px; margin-right: 10px;}
	.cart-icon {width: 20px; height: 20px;}
	.user-link{width: 30px; height: 30px;}
	.user-icon{width: 20px; height: 20px;}
	.category-nav {flex-wrap: unset; gap: 10px; overflow: auto; top: 66px; justify-content: start; padding:0px 10px}
	.products-section h2 {font-size: 18px;}
	.product-info {padding: 8px!important;     align-content: baseline;}
	.product-card {grid-template-columns: 50% 48%; gap: 8px; margin: 0px;}
	.products-section h2 {font-size: 18px; padding: 10px; margin: 0px;}
	.retail-layout .header-inner{grid-template-columns: 7% 61% 28%; gap: 10px; row-gap: 10px;; padding:10px; display:grid;} 
	.retail-layout .header-inner .mobile-menu-toggle{background: transparent; border: 0px; width: 25px; order:!}
	.retail-layout .header-inner .header-center{width: 100%; grid-column: 3 span; text-align: center; order:4}
	.retail-layout .header-inner .header-center .search-form{width:100%;}
	.retail-layout .header-inner .header-left{order:2;}
	.retail-layout .header-inner .header-right{order:3;}
	.retail-layout .action-link{color:#fff;}
	.retail-layout .action-link span.text{display:none;}
	.retail-layout .cart-link.action-link{width:45px!important;}
	.retail-layout.sidebar-open .hd{background: rgba(0, 0, 0, 0.8); left: 0px; top: 0px; bottom: 0px; right: 0px; position: fixed; z-index: 100; display:block;}
	.retail-layout.sidebar-open .category-dropdown .main-nav{left:0px;}
	.retail-layout .category-dropdown .category-toggle{display:none!important;}
	retail-layout .category-dropdown .main-nav .nav-wrapper .category-link.active:before{display:none!important;}
}

@media screen and (min-width: 320px) and (max-width: 539px) {
	.retail-layout .header-left{grid-template-columns: repeat(1, 1fr);} 
	.retail-layout .header-left .location{display:none;}
	.header-inner{padding: 15px 20px; grid-template-columns: 64% 30%;}
	.cart-link{width:30px; height:30px; margin-right: 10px;}
	.cart-icon {width: 20px; height: 20px;}
	.user-link{width: 30px; height: 30px;}
	.user-icon{width: 20px; height: 20px;}
	.category-nav {flex-wrap: unset; gap: 10px; overflow: auto; top: 66px; justify-content: start; padding:0px 10px}
	.products-section h2 {font-size: 18px;}
	.product-info {padding: 8px!important;     align-content: baseline;}
	.product-card {grid-template-columns: 50% 48%; gap: 8px; margin: 0px;}
	.products-section h2 {font-size: 18px; padding: 10px; margin: 0px;}
	.retail-layout .header-inner{grid-template-columns: 7% 46% 41%; gap: 5px; row-gap: 0px;; padding:10px; display:grid;} 
	.retail-layout .header-inner .mobile-menu-toggle{background: transparent; color: #000; border: 0px; width: 25px;}
	.retail-layout .header-inner .header-left{order:1; width:100%;}
	.retail-layout .header-inner .header-left .site-logo{font-size: 17px; line-height: 22px;}
	.retail-layout .header-inner .header-center{width: 100%; grid-column: 3 span; text-align: center; padding: 10px 0px 0px 0px; order:3 }
	.retail-layout .header-inner .header-center .search-form{width:100%;}
	.retail-layout .header-inner .header-right {order:2; text-align: right;}
	.retail-layout .action-link span.text{display:none;}
	.retail-layout .cart-link.action-link{width:45px!important;}
	.retail-layout.sidebar-open .hd{background: rgba(0, 0, 0, 0.8); left: 0px; top: 0px; bottom: 0px; right: 0px; position: fixed; z-index: 100; display:block;}
	.retail-layout.sidebar-open .category-dropdown .main-nav{left:0px;}
	.retail-layout .category-dropdown .category-toggle{display:none!important;}
	.retail-layout .category-dropdown .main-nav .nav-wrapper .category-link.active:before{display:none!important;}
	.product-grid .text{margin-bottom:15px;}
	.retail-layout .header-center .select-drop{display:none;}
	.retail-layout .header-center .search-form input[type="text"]{border-radius:4px!important;}
	.pickup_icon::before{width: 27px; height: 30px;}
	.retail-layout .header-actions{float: right; margin-right:unset!important;}

	[lang="fr"] .retail-layout .header-inner.fr_active {grid-template-columns: 6% 43% 44%;}
	[lang="fr"] .retail-layout .header-actions .dropdown .action-link.dropdown-toggle{grid-template-columns: 48% 44%;}

	.alert{width:90%;}
}