/* ===== Top nav to match screenshot ===== */
.nav {
	position: fixed;       /* take it out of normal flow */
	top: 0; 
	left: 0; 
	right: 0;
	height: clamp(60px, 10vw, 66px);
	z-index: 100;             /* above the hero */
	color: #000;
	/* translucent gradient so links stay readable over the image */
	background: #ffffff;
	border-bottom: 1px solid #e7e9eb;
}

.nav .inner {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 0 clamp(10px, 3vw, 18px);
}

.brand {
	display:flex;
	align-items:center;
	gap:10px;
	font-weight:700;
	cursor: pointer;
}

.brand img {
	height: 34px;
	width:auto;
	object-fit:contain;
}

.nav .links {
	display:flex;
	gap:10px;
	font-weight:500
}

.badge-row {
	display:flex;
	gap:14px;
	flex-wrap:wrap;
	margin-top:20px;
	margin-bottom: 35px;
}

.badge-row img {
	width: 150px;
	height:auto
}

.searchbox {
	height: 44px;
	position:relative; 
	flex:1; 
	min-width:250px;
	background:#eaecee; 
	border-radius:clamp(8px, 2vw, 10px);
	padding-left:5px;
	margin: 0 0px 0 10px;
}

.truncate{
	width: 100%;               /* or a fixed/max width */
	box-sizing: border-box;    /* keep padding inside width */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;   /* ← the ellipsis */
	padding-right: 10px;       /* your padding */
}

.addressBox {
	height: 44px;
	position:relative; 
	flex:1; 
	min-width:150px;
	background:#eaecee; 
	border-radius:clamp(8px, 2vw, 10px); 
	padding-left:10px;
	margin: 0 0px 0 10px;
	display:flex;
	align-items:center;
	overflow:hidden;          /* key: enables ellipsis clipping */
   cursor: pointer;
}

.searchbox svg { 
	position:absolute; 
	left:12px; 
	top:50%; 
	transform:translateY(-50%); 
	width:20px; 
	height:20px; 
	fill:#6b7280 
}

.searchbox input {
	width:100%; 
	height:40px; 
	border:none; 
	outline:none; 
	font-size:15px; 
	color:#000; 
	background:transparent;
}

.addressBox input {
	width:100%; 
	height:40px; 
	border:none; 
	outline:none; 
	font-size:15px; 
	color:#000; 
	font-weight: 400;
	background:transparent;
}

.brandName {
	color:#bb0000; 
	font-size:24px; 
	font-weight:800;
	white-space: nowrap;
   margin-right: 10px;
}


.headerRight{
	position: relative;   /* positioning context */
	display:flex;
	align-items:center;
	gap:12px;
}

.headerSignInBtn {
	height: 44px;
	padding:0 19px;
	border-radius:clamp(8px, 2vw, 10px);
	border:0;
	background:#000;
	font-size: 15px;
	color:#fff;
	font-weight:550;
	cursor:pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}
/* .headerSignInBtn:hover{
	border:0;
	background:#333;
} */

.headerUser{
	display:flex;
	width:44px;
	height:44px;
	align-items:center;
	gap:8px;
	background:#eaecee;
	border-radius:clamp(8px, 2vw, 10px); 
	cursor:pointer;
}

/* default state = icon */
.headerUserAvatar{
  width:100%;
  height:100%;
  box-sizing:border-box;
  border-radius:inherit;
  object-fit:contain;      /* better for icon */
}

/* real avatar */
.headerUserAvatar.is-real{
  object-fit:cover;        /* fill the box */
}

.headerUserWrap{ 
	position:relative; 
}

.headerUserName{
	font-size:14px;
	font-weight:600;
}

/* Dropdown menu */
.headerUserMenu {
	position: absolute;
	top: calc(100% + 8px); /* a little gap under avatar */
	right: 0;              /* right-align with avatar */
	/* or use left: 0; if you want it left-aligned under the avatar */
	min-width: 160px;
	padding: 8px 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0px 5px 44px rgba(28, 33, 44, 0.38);
	z-index: 1000;

	/* animation base (closed, but still in DOM when hidden=false) */
	opacity:0;
	transform: translateY(-6px) scale(.98);
	pointer-events:none;
	transition: opacity .18s ease, transform .18s ease;
}

.headerUserMenu.is-open{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

.headerMenuItem{
	min-width:170px;
	border:0;
   color: #333;
	background:#fff;
	padding:12px 15px;
	border-radius:0px;
	text-align:left;
	font-size:15px;
	cursor:pointer;
	/* smooth hover */
	transition: background-color 0.18s ease, color 0.18s ease;
}

.headerMenuItem:hover{
  	background:#f3f4f6;
}

.headerRight {
	display:flex;
	align-items:center;
	gap:12px;
}

/* Cart button container */
.headerSearchBtn {
	position:relative;
	width:50px;
	height:44px;
	min-width: 44px;
	min-height: 40px;
	border-radius:clamp(8px, 2vw, 10px); 
	border:0;
	background:#eaecee;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	cursor:pointer;
	transition: background-color 0.2s ease;
	display: none;
	margin: 0 0 0 clamp(6px, 2vw, 10px);
}

.headerSearchBtn:hover{
	border:0;
	background:#d5d7d9;
}

/* Cart icon */
.headerSearchIcon {
	width:22px;
	height:22px;
	background:url('../images/searchIcon.png') center/contain no-repeat;
}


/* Cart button container */
.headerCartBtn {
	position:relative;
	width:50px;
	height:44px;
	min-width: 44px;
	min-height: 40px;
	border-radius:clamp(8px, 2vw, 10px);
	border:0;
	background:#eaecee;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	cursor:pointer;
	transition: background-color 0.2s ease;
	margin: 0 clamp(6px, 2vw, 10px);
}

.headerCartBtn:hover{
	border:0;
	background:#d5d7d9;
}

/* Cart icon */
.headerCartIcon {
	width:22px;
	height:22px;
	background:url('../images/cart.png') center/contain no-repeat;
}

/* Badge in the top-right corner */
.headerCartBadge {
	position:absolute;
	top:-6px;
	right:-5px;
	min-width:26px;
	height:26px;
	padding:0;
	border-radius:999px;
	background:#ff3b30;
	border: 2px solid #fff;
	color:#fff;
	font-size:13px;
	font-weight:600;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Make avatar act like the cart button so badge can be positioned */
.headerUser{
  position:relative;
}

/* Badge on avatar (same look as cart badge) */
/* Orders badge on avatar */
.headerOrdersBadge{
  top: -6px;
  right: -6px;
  pointer-events: none;
}

/* Menu row with badge */
.headerMenuItem--row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.headerMenuBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#ff3b30;
  color:#fff;
  font-weight:700;
  font-size:12px;
  line-height:1;
  pointer-events:none;
}



.rdConfirm{
  position:fixed;
  inset:0;
  background: rgba(0,5,10,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding-bottom:20px;

  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}

.rdConfirm[hidden]{ display:none; }

.rdConfirm.is-open{
  opacity:1;
  pointer-events:auto;
}

.rdConfirm.is-open .rdConfirm__card{
  transform: translateY(0) scale(1);
}

.rdConfirm__card{
  width:min(420px, 92%);
  background:#fff;
  border-radius:14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding:0px 0px 16px;

  transform: translateY(6px) scale(.98);
  transition: transform .18s ease;
  overflow: auto;
}

.rdConfirm__title{
  font-size:18px;
  font-weight:700;
  margin:0px 0 8px;
  padding: 14px 20px 7px;
  background: #f1f3f5;
}

.rdConfirm__msg{
  font-size:14px;
  color:#333;
  margin:0 0 14px;
  line-height:1.35;
   padding: 0 20px;
}

.rdConfirm__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding: 0 20px;
}

.rdConfirm__btn{
  border:0;
  border-radius:8px;
  padding:10px 16px;
  font-weight:500;
  cursor:pointer;
  font-size: 14px;
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.rdConfirm__btn--ghost{ 
   background:#eceef0; 
   color:#000; 
}

.rdConfirm__btn--ghost:hover{ 
   background:#e1e3e5; 
}

.rdConfirm__btn--danger{ 
   background:#000; 
   color:#fff; 
}

.rdConfirm__btn--danger:hover{ 
   opacity:.92; 
}


.seg {
  height: 42px;
  background:#eaecee; 
  border-radius:10px; 
  padding:4px; 
  display:inline-flex; 
  gap:0px;
  margin-left: 10px;

}

.seg__btn {
  flex: 1;
  border:none; 
  background:transparent; 
  padding:0px 18px; 
  border-radius:6px; 
  font-weight:700; 
  color:#777; 
  cursor:pointer;
  font-size: 14px;
}

.seg__btn.is-active { 
  background:#fff; 
  color:#000; 
}

#deliveryMode2 {
  display:none;
  width: 100%;
  margin: 0 clamp(14px, 2vw, 18px);
}

#searchClear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: none;             
  border-radius: 50%;      
}

/* #searchClear::before {
  display: block;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  opacity: .55;
}

#searchClear:hover::before { 
   opacity: .9; 
} */

/* row look */
.suggest-item {
  display:flex; 
  align-items:center; 
  gap:18px;
  padding:12px 14px; 
  cursor:pointer;
  font-size:15px;
  font-weight: 500;
}

.suggest-item .ico{
   width: 25px; 
   height: 25px;
   flex: 0 0 22px;        /* fixed icon column */
   display: flex; 
   align-items: center; 
   justify-content: center;
}

.suggest-item .ico img{ 
   display:block; 
   width:25px; 
   height:25px; 
   object-fit:contain; 
}

/* .suggest-item .txt{ 
   line-height: 1.2; 
   border-top: 1px solid #888;
} */

/* Kitchens: 36×36 round avatar */
.suggest-item[data-kitchen-id] .ico {
  width:36px; 
  height:36px; 
  flex:0 0 36px;
  display:flex; 
  align-items:center; 
  justify-content:center;
  overflow:hidden; 
  border-radius:50%;
}

.suggest-item[data-kitchen-id] .ico img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* fills the circle nicely */
  border-radius: 50%;            /* makes the image itself round too */
}

.suggest-item:hover{ 
   background:#f6f6f6; 
}

.suggest {
  display: none;         
  position: absolute;
  top: calc(100% + 8px);        
  left: 0; right: 0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  max-height: 60vh;
  overflow:auto;
  z-index: 1010;         
  list-style:none; 
  margin:0; 
  padding:6px 0;
}

.suggest.show { 
   display:block; 
}

.suggest li { 
   padding:8px 12px; 
   border:0; 
   cursor:pointer; 
}

.suggest li:hover { 
   background:#f6f6f6; 
}


/* search row icon */
.suggest-item.suggest-search .search-ico { 
  width:22px; 
  height:22px; 
  flex:0 0 22px; 
}

/* "Search For …" row: SAME 36px column */
.suggest-item.suggest-search .ico {
  width:36px; 
  height:36px; 
  flex:0 0 36px;
  display:flex; 
  align-items:center; 
  justify-content:center;
}

/* Search row icon image (keeps it centered in the 36x36 column) */
.suggest-item.suggest-search .ico img{
  width:20px;
  height:20px;
  display:block;
  object-fit:contain;
  opacity:1;
}


/* Optional tidy: only the divider draws a rule */
.suggest .divider {
  height:10px; 
  background:#fff;
  border-top:1px solid #eee; 
  border-bottom:1px solid #eee;
}


.suggest-item.is-static {
  pointer-events: none;        /* disables mouse/touch */
  cursor: default;
  color: #374151;              /* optional: muted */
}

.suggest-item.is-static:hover{ 
   background: transparent; 
}


.loc-modal[hidden] { 
   display:none; 
}

.loc-modal { 
   position:fixed; 
   inset:0; 
   z-index:1000; 
}
.loc-backdrop { 
   position:absolute; 
   inset:0; 
   background:rgba(0,0,0,.35); 
}

.loc-sheet {
  position:relative; 
  z-index:1; 
  width:min(680px,92vw);
  margin:10vh auto 0; 
  background:#fff; 
  border-radius:16px; 
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  padding:16px;
}
.loc-head { 
   display:flex; 
   align-items:center; 
   justify-content:space-between; 
   margin-bottom:8px; 
}

.loc-title { 
   font-weight:600; 
   font-size:18px; 
}

.loc-close { 
   border:0; 
   background:transparent; 
   font-size:24px; 
   line-height:1; 
   cursor:pointer; 
}

.loc-field { 
   display:flex; 
   align-items:center; 
   gap:10px; 
   padding:10px 12px; 
   border:1px solid #e5e7eb; 
   border-radius:12px; 
}

.loc-field input { 
   flex:1; border:0; 
   outline:none; 
   font-size:16px; 
}

.loc-actions { 
   display:flex; 
   justify-content:flex-end; 
   gap:10px; 
   margin-top:12px; 
}

.loc-field svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:block;
  fill:#111;   
}

.loc-field{ 
   display:flex; 
   align-items:center; 
   gap:10px; 
}

.loc-field input{ 
   flex:1; 
   border:0; 
   outline:none; 
   font-size:16px; 
}

.loc-field{ 
   position:relative; 
   display:flex; 
   align-items:center; 
   gap:10px; 
}

.loc-field input{ 
   flex:1; 
   border:0; 
   outline:none; 
   font-size:16px; 
}

.loc-clear{
  position:absolute; 
  right:10px; 
  top:50%; 
  transform:translateY(-50%);
  width:24px; 
  height:24px; 
  line-height:24px; 
  text-align:center;
  border:0; 
  border-radius:50%; 
  background:#eee; 
  cursor:pointer;
  font-size:16px; 
  color:#333;
}

.loc-clear:hover{ 
   background:#e5e7eb; 
}


#locBox { 
   position: relative; 
   display:flex; 
   align-items:center; 
   gap:6px; 
}

#locBox2 { 
   position: relative; 
   display:flex; 
   align-items:center; 
   gap:2px; 
}

#locBox input { 
   pointer-events:none; 
   background:transparent; 
   border:0; 
}

.btn-ghost { 
   border:1px solid #e5e7eb; 
   background:#fff; 
   padding:8px 12px; 
   border-radius:10px; 
   cursor:pointer; 
}

.btn-primary { 
   border:0; 
   background:#2563eb; 
   color:#fff; 
   padding:8px 14px; 
   border-radius:10px; 
   cursor:pointer; 
}

.btn-primary:disabled { 
   opacity:.5; 
   cursor:not-allowed; 
}

#q::-webkit-search-cancel-button { 
   -webkit-appearance: none; 
}

#q {
  width: 100%;
  padding-right: 44px; /* room for the clear button */
}

/* ---------- Suggestions: iOS-style separators ---------- */

/* kill the "dash" above each label */
.suggest-item .txt{
  border-top: 0 !important;
  flex: 1;
  display: block;              /* makes text span behave like a row cell */
  line-height: 1.2;
}

/* your file currently has .suggest li { padding: 8px 12px; } later,
   which can override the nicer row padding — re-assert it */
.suggest li.suggest-item{
  padding: 12px 14px;
}

/* Optional: title styling (header.js renders <li class="suggest-title">Top categories</li>) */
.suggest li.suggest-title{
  padding: 10px 14px;
  font-weight: 700;
  font-size: 16px;
  color: #111;
  cursor: default;
}

/* Draw separators BETWEEN rows, starting after the icon column */
.suggest-item{
  position: relative;
  --padX: 14px;    /* matches row padding-left/right */
  --gap: 18px;     /* matches your flex gap */
  --icoW: 25px;    /* default icon column width */
}

/* Kitchen avatar + “Search for …” row uses 36px icons in your CSS */
.suggest-item[data-kitchen-id],
.suggest-item.suggest-search{
  --icoW: 36px;
}

/* separator between consecutive suggestion rows */
.suggest-item + .suggest-item::before{
  content: "";
  position: absolute;
  left: calc(var(--padX) + var(--icoW) + var(--gap));
  right: 0;
  top: 0;
  height: 1px;
  background: #f1f3f5;  /* subtle iOS-like divider */
}


/* =========================
   Mobile search takeover
   ========================= */

/* Leading icon button inside the search field */
.searchLeadBtn{
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  border-radius: 10px;
  background: url('../images/searchIcon.png') center/18px 18px no-repeat;
  flex: 0 0 32px;
  cursor: default;
  pointer-events: none;          /* NOT clickable normally */
  opacity: .9;
}

/* keep input from pushing layout */
.searchbox input{ 
   min-width: 0; 
}

/* When mobile search is open, the lead button becomes a BACK arrow and is clickable */
.nav.is-mobile-search .searchLeadBtn{
  pointer-events: auto;
  cursor: pointer;

  /* inline SVG arrow (no new image file needed) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M20 11H7.83l4.58-4.59L11 5l-7 7 7 7 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

/* Show the real search field on mobile ONLY when open */
@media (max-width: 880px){
  .nav.is-mobile-search #locBox2{ 
      display:flex !important; 
   }
}

/* Hide everything except SignIn/Avatar + search field when open */
.nav.is-mobile-search .brand,
.nav.is-mobile-search #deliveryMode1,
.nav.is-mobile-search #locBox,
.nav.is-mobile-search #headerSearchBtn,
.nav.is-mobile-search #headerCartBtn{
  display: none !important;
}

/* Make the searchbox consume almost full width */
.nav.is-mobile-search .inner{
  justify-content: flex-start;
  gap: 10px;
}

.nav.is-mobile-search #locBox2{
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Suggestions become a full-height “sheet” below the header */
@media (max-width: 880px){
  .nav.is-mobile-search #suggestList.suggest{
    position: fixed;
    left: 0;
    right: 0;
    top: clamp(60px, 10vw, 70px);  /* same as header height */
    bottom: 0;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    z-index: 2000;
    padding-bottom: 18px;
    border: 0;
  }
}




@media (max-width: 1000px) {
	.brandName {
		display: none;
	}
}

@media (max-width: 830px) {
	#locBox2 {
		display: none;
	}
	.headerSearchBtn {
		display: flex;
	}
}

@media (max-width: 690px) {

	#deliveryMode1 {
		display: none;
	}
	#deliveryMode2 {
		display: flex;
	}
}


@media (max-width: 500px) {
	.brand {
		display: none;
	}
	.addressBox {
		margin: 0;
	}
}

@media (max-width: 450px) {
	.addressBox {
		min-width:100px;
	}
}

/* ==============================
   Auth no-flicker (first paint)
   ============================== */

/* Auth slot: overlay without reserving empty width */
.headerAuthSlot{
  display: grid;
  align-items: center;
  justify-items: end;   /* align to the right */
}

.headerAuthSlot > #headerSignIn,
.headerAuthSlot > .headerUserWrap{
  grid-area: 1 / 1;     /* both sit in same cell */
}


/* Default fallback = logged out */
#headerUser { display: none; }
#headerSignIn { display: inline-flex; align-items: center; }

/* Show/hide based on html class (your pre-hydration script sets it) */
html.rd-auth-in  #headerSignIn{ display:none !important; }
html.rd-auth-in  #headerUser  { display:flex !important; }

html.rd-auth-out #headerSignIn{ display:inline-flex !important; }
html.rd-auth-out #headerUser  { display:none !important; }