/* ══ GLOBAL OVERFLOW FIX ══════════════════════════════════ */
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* Mobile: add breathing room below navbar for non-hero pages */
@media(max-width: 767px) {
  .page-content-start { padding-top: 16px; }
}

/* ══ GLOBAL PAGE HERO PADDING FIX ══════════════════════════
   All pages with dark hero sections need top padding
   to account for fixed navbar + optional announcement bar
══════════════════════════════════════════════════════════ */
/* All page heroes / first sections that sit directly under fixed navbar */
.wl-hero,
.ot-hero,
.oc-page,
.co-progress,
.sg-hero,
.policy-hero,
.about-hero,
.shop-hero,
.shop-header,
.page-hero,
.contact-hero,
.search-hero,
.breadcrumb-bar,
.category-hero {
  padding-top: calc(var(--nav-h) + 52px) !important;
}

/* Generic fallback — any section that is the FIRST child of body (non-hero pages) */
body > section:first-of-type:not(.hero-slider):not(.ann-bar),
body > div.page-wrap:first-of-type,
.page-top-pad {
  padding-top: calc(var(--nav-h) + 24px);
}

@media(max-width:767px) {
  .wl-hero,
  .ot-hero,
  .sg-hero,
  .policy-hero,
  .about-hero,
  .shop-hero,
  .shop-header,
  .page-hero,
  .contact-hero,
  .search-hero,
  .breadcrumb-bar,
  .category-hero {
    padding-top: calc(var(--nav-h) + 28px) !important;
  }

  /* Non-hero pages: ensure content doesn't hide under navbar */
  body > section:first-of-type:not(.hero-slider):not(.ann-bar),
  .page-top-pad {
    padding-top: calc(var(--nav-h) + 16px);
  }
}

/* ══════════════════════════════════
   NAVBAR — Premium Luxury
══════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: all .35s cubic-bezier(.4,0,.2,1);
}

.navbar.at-top {
  /* Default at-top: white for non-hero pages */
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
}

.navbar.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
}

/* Only hero page gets transparent navbar at top */
.navbar.hero-page.at-top {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
.navbar.hero-page.at-top .nav-link    { color: rgba(255,255,255,.85); }
.navbar.hero-page.at-top .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.navbar.hero-page.at-top .nav-logo-wordmark { color: #fff; }
.navbar.hero-page.at-top .nav-logo-sub      { color: rgba(255,255,255,.55); }
.navbar.hero-page.at-top .nav-icon-btn      { color: rgba(255,255,255,.8); }
.navbar.hero-page.at-top .nav-icon-btn:hover{ background: rgba(255,255,255,.12); color: #fff; }
.navbar.hero-page.at-top .nav-badge         { border-color: transparent; background: #d6a43a; }
.navbar.hero-page.at-top .nav-search input  { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.navbar.hero-page.at-top .nav-search input::placeholder { color: rgba(255,255,255,.4); }
.navbar.hero-page.at-top .nav-search svg    { color: rgba(255,255,255,.4); }
.navbar.hero-page.at-top .nav-hamburger span{ background: #fff; }

.nav-inner {
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}

/* ── LOGO ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity .2s;
}
.nav-logo:hover { opacity: .85; }

.nav-logo-mark {
  width: 52px; height: 52px;
  background: #111;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease-spring);
}
.navbar.hero-page.at-top .nav-logo-mark { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); }
.nav-logo:hover .nav-logo-mark { transform: scale(1.05); }
.nav-logo-mark img {
  width: 40px; height: 40px;
  object-fit: contain;
  display: block;
}
.nav-logo-mark-fallback {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #d6a43a;
  letter-spacing: -1px;
  line-height: 1;
}

.nav-logo-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-logo-wordmark {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #111;
  letter-spacing: -0.8px;
  line-height: 1;
  transition: color .25s;
}
.nav-logo-wordmark .gold { color: #d6a43a; }
.nav-logo-sub {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #a0a0a0;
  line-height: 1;
  transition: color .25s;
}

/* ── NAV LINKS ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-link {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--grey-600);
  white-space: nowrap;
  transition: background .15s, color .15s;
  text-decoration: none;
  position: relative;
}
.nav-link:hover { background: var(--grey-100); color: var(--grey-900); }
.nav-link.active { color: var(--grey-900); font-weight: 600; }
.nav-link.active::after {
  content: '';
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #d6a43a;
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
}

.navbar.hero-page.at-top .nav-link:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.navbar.hero-page.at-top .nav-link.active {
  background: transparent;
  color: #fff;
  font-weight: 600;
}
.navbar.hero-page.at-top .nav-link.active::after {
  background: #d6a43a;
}

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,.12);
  min-width: 220px;
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--white);
  border-left: 1px solid var(--grey-200);
  border-top: 1px solid var(--grey-200);
  rotate: 45deg;
}
.nav-dropdown-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 13.5px; color: var(--grey-700);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-dropdown-item:hover { background: var(--grey-50); color: var(--grey-900); }
.nav-dropdown-item .dd-count {
  font-size: 11px; color: var(--grey-400);
  background: var(--grey-100);
  padding: 1px 7px; border-radius: 99px;
}
.nav-dropdown-divider {
  border: none;
  border-top: 1px solid var(--grey-100);
  margin: 5px 0;
}

/* ── SEARCH ── */
.nav-search {
  position: relative;
  max-width: 240px;
  flex: 1;
}
.nav-search input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  border: 1.5px solid var(--grey-200);
  border-radius: 99px;
  font-size: 13px;
  background: var(--grey-50);
  outline: none;
  transition: all .2s;
  color: var(--grey-800);
}
.nav-search input:focus {
  border-color: #d6a43a;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(214,164,58,.12);
}
.nav-search svg {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--grey-400); pointer-events: none;
}

/* ── ACTIONS ── */
.nav-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }

.nav-icon-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--grey-600); position: relative;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.nav-icon-btn:hover { background: var(--grey-100); color: var(--grey-900); }

.nav-badge {
  position: absolute; top: 5px; right: 5px;
  min-width: 16px; height: 16px;
  background: #111; color: #fff;
  border-radius: 99px;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
  padding: 0 3px;
  transition: transform .2s cubic-bezier(.34,1.6,.64,1);
}
.nav-badge.bump { animation: badge-bump .3s cubic-bezier(.34,1.6,.64,1); }
@keyframes badge-bump { 0%{transform:scale(1)} 50%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* Hamburger */
.nav-hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  border-radius: 10px;
  transition: background .15s;
  background: none; border: none; cursor: pointer;
}
.nav-hamburger:hover { background: var(--grey-100); }
.nav-hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--grey-800); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero transparent: hamburger white lines */
.navbar.hero-page.at-top .nav-hamburger span { background: #fff; }

/* ══════════════════════════════════
   MOBILE MENU DRAWER
══════════════════════════════════ */
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 88% !important;
  max-width: 340px !important;
  background: #ffffff !important;
  z-index: 1050 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(110%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,.2) !important;
  overflow: hidden !important;
}
.mobile-menu.open {
  transform: translateX(0) !important;
}

/* Drawer backdrop */
.mobile-menu-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 1040 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-menu-backdrop.open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Drawer header */
.mm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.mm-header-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.mm-header-logo-mark {
  width: 34px; height: 34px;
  background: #111;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mm-header-logo-mark span {
  font-family: 'Outfit', sans-serif;
  font-size: 16px; font-weight: 900; color: #d6a43a;
}
.mm-header-wordmark {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 900; color: #111;
  letter-spacing: -.5px;
}
.mm-header-wordmark .gold { color: #d6a43a; }
.mm-close-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f5; border: none; cursor: pointer;
  color: #525252; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.mm-close-btn:hover { background: #111; color: #fff; }

/* Drawer body — scrollable */
.mm-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 24px;
  -webkit-overflow-scrolling: touch;
}

/* Search bar inside drawer */
.mm-search {
  position: relative;
  margin: 0 16px 16px;
}
.mm-search-input {
  width: 100%;
  padding: 11px 44px 11px 40px;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  font-size: 14px; color: #111;
  background: #fafafa;
  outline: none; font-family: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mm-search-input:focus {
  border-color: #d6a43a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(214,164,58,.1);
}
.mm-search-input::placeholder { color: #b0b0b0; }
.mm-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #a0a0a0; pointer-events: none;
}
.mm-search-btn {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  background: #111; border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  transition: background .15s;
}
.mm-search-btn:hover { background: #d6a43a; }

/* Quick action row — Cart + Wishlist */
.mm-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px 18px;
}
.mm-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  text-decoration: none;
  background: #fafafa;
  transition: all .18s;
  position: relative;
}
.mm-action-card:hover {
  border-color: #111;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
.mm-action-card.cart-action:hover   { border-color: #d6a43a; }
.mm-action-card.wl-action:hover     { border-color: #dc2626; }
.mm-action-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cart-action .mm-action-icon  { background: #f0f0f0; color: #111; }
.wl-action   .mm-action-icon  { background: #fee2e2; color: #dc2626; }
.mm-action-label {
  font-size: 13px; font-weight: 600; color: #111;
  line-height: 1.2;
}
.mm-action-sub {
  font-size: 11px; color: #a0a0a0;
  margin-top: 1px;
}
.mm-action-badge {
  position: absolute; top: 8px; right: 10px;
  min-width: 18px; height: 18px;
  background: #111; color: #fff;
  border-radius: 99px;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.wl-action .mm-action-badge { background: #dc2626; }

/* Section label */
.mm-section-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #b0b0b0;
  padding: 0 20px;
  margin: 6px 0 8px;
}

/* Nav links */
.mm-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  font-size: 15px; font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: background .12s, color .12s;
  border-radius: 0;
}
.mm-nav-link:hover, .mm-nav-link.active {
  background: #fafafa; color: #111;
}
.mm-nav-link .mm-link-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  color: #525252; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.mm-nav-link:hover .mm-link-icon { background: #111; color: #fff; }
.mm-nav-link.active .mm-link-icon { background: #d6a43a; color: #fff; }

/* Category chips */
.mm-cat-section { padding: 0 16px; }
.mm-cat-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 8px;
}
.mm-cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: #f5f5f5; border-radius: 99px;
  font-size: 13px; font-weight: 500; color: #525252;
  text-decoration: none;
  transition: background .12s, color .12s;
  border: 1.5px solid transparent;
}
.mm-cat-chip:hover { background: #111; color: #fff; }

/* Divider */
.mm-divider {
  border: none; border-top: 1px solid #f0f0f0;
  margin: 10px 0;
}

/* Drawer footer */
.mm-footer {
  padding: 14px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  flex-shrink: 0;
}
.mm-footer-links {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.mm-footer-link {
  font-size: 12.5px; color: #a0a0a0;
  text-decoration: none; font-weight: 500;
  transition: color .12s;
}
.mm-footer-link:hover { color: #111; }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .nav-search { max-width: 180px; }
  .nav-logo-wordmark { font-size: 18px; }
}
@media(max-width:767px) {
  .nav-links, .nav-search { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-logo-mark { width: 44px; height: 44px; border-radius: 10px; }
  .nav-logo-mark-fallback { font-size: 20px; }
  .nav-logo-wordmark { font-size: 17px; }
  .nav-logo-sub { display: none; }
  .nav-inner { padding: 0 16px; }
  .mobile-only-search { display: flex; }

}
@media(min-width:768px) {
  .mobile-only-search { display: none !important; }
  /* mobile-search-bar hidden via transform/opacity, not display:none */
}

/* ── FORCE OVERRIDE — counter any style.css conflicts ── */
#mobileMenu {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 88% !important; max-width: 340px !important;
  background: #fff !important;
  z-index: 9999 !important;
  transform: translateX(110%);
  transition: transform .38s cubic-bezier(.4,0,.2,1) !important;
  overflow: hidden !important;
  overflow-y: auto !important;
}
#menuBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  background: rgba(0,0,0,.5) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease !important;
}
/* ── MOBILE SEARCH BAR (drops below navbar) ── */
.mobile-search-bar {
  position: fixed;
  top: calc(var(--nav-h) + 40px); /* nav-h + ann-bar height */
  left: 0; right: 0;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 16px;
  z-index: 998;
  display: block; /* always block — hidden via transform */
  transform: translateY(-200%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.mobile-search-bar.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: all !important;
  display: block !important;
}
.mobile-search-bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-search-bar input {
  flex: 1;
  padding: 11px 44px 11px 40px;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  font-size: 15px; color: #111;
  background: #f7f7f7;
  outline: none; font-family: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mobile-search-bar input:focus {
  border-color: #d6a43a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(214,164,58,.1);
}
.mobile-search-bar input::placeholder { color: #b0b0b0; }
.mobile-search-bar-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #a0a0a0; pointer-events: none;
}
.mobile-search-bar-close {
  width: 36px; height: 36px; flex-shrink: 0;
  background: #f0f0f0; border: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #525252; cursor: pointer;
  transition: background .15s, color .15s;
}
.mobile-search-bar-close:hover { background: #111; color: #fff; }

/* Khan Choice 2.1: keep the added Reviews link comfortable on tablet widths. */
@media(min-width:768px) and (max-width:960px){
  .nav-search{display:none!important;}
  .nav-link{padding-left:9px;padding-right:9px;font-size:12.5px;}
  .nav-logo-text-wrap{margin-right:4px;}
}
@media(min-width:961px) and (max-width:1120px){
  .nav-search{max-width:135px;}
  .nav-link{padding-left:10px;padding-right:10px;}
}