/* Fresh Meadow - green #16A34A + ivory #FAF7EF + gold accents + glass-morphism */
:root{--mw-green:#16A34A;--mw-green-d:#0E7A3A;--mw-green-dd:#0A4F27;--mw-ivory:#FAF7EF;--mw-gold:#C9A227;--mw-gold-l:#E8C766;--mw-ink:#15291C;
 --mw-glass:rgba(255,255,255,.62);--mw-glass-b:rgba(255,255,255,.85);--mw-shadow:0 10px 34px rgba(14,122,58,.12);--mw-blur:blur(16px) saturate(1.5)}
html{scroll-behavior:smooth}
body{background:radial-gradient(900px 500px at 8% 0,rgba(22,163,74,.10),transparent 60%),radial-gradient(800px 500px at 100% 30%,rgba(201,162,39,.10),transparent 60%),var(--mw-ivory)!important;color:var(--mw-ink)}
::selection{background:var(--mw-green);color:#fff}
#bmProgress{background:linear-gradient(90deg,var(--mw-green),var(--mw-gold-l))!important;box-shadow:0 0 12px rgba(22,163,74,.6)!important}
/* ===== LUXURY RESTAURANT NAVBAR OVERHAUL ===== */
.site-header {
  background: linear-gradient(180deg, rgba(7, 44, 23, 0.96) 0%, rgba(5, 34, 18, 0.90) 100%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(232, 199, 102, 0.28) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.22) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.site-header.scrolled {
  background: rgba(4, 25, 13, 0.98) !important;
  border-bottom: 1px solid rgba(232, 199, 102, 0.4) !important;
  box-shadow: 0 10px 35px rgba(2, 12, 6, 0.5) !important;
}

.brand img {
  height: 52px;
  width: auto;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}
.brand:hover img {
  transform: scale(1.02);
  filter: drop-shadow(0 4px 14px rgba(232, 199, 102, 0.35));
}

/* Desktop Floating Nav Dock Capsule */
@media (min-width: 861px) {
  .site-header .nav {
    min-height: 78px !important;
    gap: 20px !important;
  }

  .site-header .nav nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;
    padding: 5px 8px !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 18px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .site-header .nav nav a {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
  }

  .site-header .nav nav a::after {
    display: none !important;
  }

  .site-header .nav nav a.hidden,
  .site-header .nav nav a[hidden] {
    display: none !important;
  }

  .site-header .nav nav a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }

  /* User Chip in Nav Dock */
  .nav-user-chip {
    background: rgba(217, 161, 59, 0.18) !important;
    border: 1px solid rgba(232, 199, 102, 0.5) !important;
    color: #ffffff !important;
    padding: 4px 14px 4px 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(217, 161, 59, 0.18) !important;
  }
  .nav-user-chip:hover {
    background: rgba(217, 161, 59, 0.3) !important;
    border-color: #f59e0b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(217, 161, 59, 0.35) !important;
  }
  .nav-chip-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d9a13b, #f59e0b);
    color: #062b16;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  }
  .nav-chip-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Logout Pill in Nav Dock */
  .nav-logout-link {
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.38) !important;
    color: #fca5a5 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.22s ease !important;
  }
  .nav-logout-link:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
  }
  .nav-logout-link.hidden,
  .nav-logout-link[hidden],
  #navLogoutLink.hidden,
  #navLogoutLink[hidden] {
    display: none !important;
  }

  /* Sign In link in Nav Dock */
  .nav-signin-link {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(232, 199, 102, 0.4) !important;
    color: var(--mw-gold-l, #e8c766) !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }
  .nav-signin-link:hover {
    background: var(--mw-gold-l, #e8c766) !important;
    border-color: var(--mw-gold-l, #e8c766) !important;
    color: #062b16 !important;
  }

  /* Hide duplicate account button in actions on desktop */
  .nav-actions .account-btn {
    display: none !important;
  }

  /* Desktop Cart Button & Action Bar */
  .cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 42px !important;
    width: auto !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    position: relative !important;
  }
  .cart-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: var(--mw-gold-l, #e8c766) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(232, 199, 102, 0.25) !important;
  }
  .cart-btn #cartCount {
    background: var(--mw-gold-l, #e8c766) !important;
    color: #07381b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22) !important;
    position: static !important;
  }
}
/* hero: fresh green with gold glow */
.hero{background:radial-gradient(circle at 78% 30%,rgba(232,199,102,.38),transparent 38%),radial-gradient(circle at 5% 100%,rgba(74,222,128,.30),transparent 45%),linear-gradient(135deg,#0A4F27 0%,#0E7A3A 48%,#16A34A 100%)!important}
.eyebrow{color:var(--gold-deep, #855300)!important}
.hero .eyebrow,.section-dark .eyebrow,.deal-banner .eyebrow{color:var(--mw-gold-l, #E8C766)!important}
.hero h1{background:linear-gradient(100deg,#fff 35%,#FFF1C2 70%,var(--mw-gold-l))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent}
.hero-carousel{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.4)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 70px rgba(4,40,20,.45),inset 0 1px 0 rgba(255,255,255,.5)!important}
.trust span{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.32)!important;color:#fff!important;backdrop-filter:blur(8px)}
.btn-primary,.hero-slide-cta{background:linear-gradient(135deg,var(--mw-green),#22C55E)!important;color:#fff!important;border:0!important;box-shadow:0 10px 26px rgba(22,163,74,.38)!important}
.hero .btn-primary{background:linear-gradient(135deg,var(--mw-gold-l),var(--mw-gold))!important;color:#0A2E17!important;box-shadow:0 10px 28px rgba(201,162,39,.45)!important}
.btn-ghost,.btn-outline{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.45)!important;color:#fff!important;backdrop-filter:blur(8px)}
.carousel-dot.active,.carousel-dot.is-active{background:var(--mw-gold-l)!important}
/* menu */
.section-head h2{color:var(--mw-green-dd)}
.tabs button{background:var(--mw-glass)!important;border:1px solid var(--mw-glass-b)!important;color:var(--mw-green-dd)!important;backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(14,122,58,.08)}
.tabs button.active,.tabs button.is-active{background:linear-gradient(135deg,var(--mw-green),#22C55E)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(22,163,74,.35)}
.product-card{background:var(--mw-glass)!important;backdrop-filter:var(--mw-blur);-webkit-backdrop-filter:var(--mw-blur);border:1px solid var(--mw-glass-b)!important;box-shadow:var(--mw-shadow)!important}
.product-card:hover{border-color:var(--mw-gold)!important;box-shadow:0 22px 46px rgba(14,122,58,.20),0 0 0 1px var(--mw-gold)!important}
.product-cat{color:var(--gold-deep, #855300)!important;font-weight:700!important}
.product-name{color:var(--mw-ink)!important}
.price{color:var(--mw-green-d)!important}
.product-image{background:linear-gradient(110deg,#e9f4e6 8%,#f6f1de 18%,#e9f4e6 33%);background-size:200% 100%;animation:mwShimmer 1.4s linear infinite}
.product-image img{animation:mwFade .6s ease both}
@keyframes mwShimmer{to{background-position:-200% 0}}
@keyframes mwFade{from{opacity:0;transform:scale(1.04)}}
.product-image-plus{background:linear-gradient(135deg,var(--mw-green),#22C55E)!important;border:2px solid #fff!important;box-shadow:0 6px 16px rgba(22,163,74,.4)}
/* other cards */
.offer-card,.contact-card,.quick-grid>div,.feature-list>div,.delivery-auto-card,.payment-box{background:var(--mw-glass)!important;backdrop-filter:var(--mw-blur);-webkit-backdrop-filter:var(--mw-blur);border:1px solid var(--mw-glass-b)!important;box-shadow:var(--mw-shadow)!important;color:var(--mw-ink)}
.offer-badge{background:linear-gradient(135deg,var(--mw-gold-l),var(--mw-gold))!important;color:#0A2E17!important}
.offer-card-overlay{background:linear-gradient(0deg,rgba(6,50,26,.88),transparent)!important;color:#fff}
.deal-banner{background:linear-gradient(120deg,#0A4F27,#16A34A 70%,#4ADE80)!important;border:1px solid rgba(232,199,102,.5)}
.section-dark,.footer{background:linear-gradient(160deg,#08331B,#0E7A3A 130%)!important;color:#EFF8EE}
.section-dark h2,.footer h3{color:#fff}
.footer a:hover{color:var(--mw-gold-l)}
.footer{border-top:3px solid var(--mw-gold)}
/* modals + cart drawer */
.modal{background:rgba(6,40,22,.55)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-card{background:rgba(250,247,239,.92)!important;backdrop-filter:var(--mw-blur);-webkit-backdrop-filter:var(--mw-blur);border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 30px 80px rgba(6,40,22,.35)!important;color:var(--mw-ink)}
.size-btn.active,.size-btn.is-active,.payment-choice.active{border-color:var(--mw-green)!important;background:rgba(22,163,74,.12)!important;color:var(--mw-green-dd)!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mw-green)!important;box-shadow:0 0 0 3px rgba(22,163,74,.22)!important}
:focus-visible{outline:3px solid var(--mw-gold)!important}
.toast{background:rgba(8,52,28,.92)!important;color:#fff;border:1px solid var(--mw-gold);backdrop-filter:blur(10px);z-index:99999!important}
/* speed: skip rendering of off-screen sections */
#about,#contact,.footer{content-visibility:auto;contain-intrinsic-size:auto 600px}
@media(max-width:760px){.product-card,.offer-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.88)!important}}
@media(prefers-reduced-motion:reduce){.product-image,.product-image img{animation:none!important}}
/* ghost and outline buttons on light sections and modals must be clearly visible */
.section:not(.section-dark) .btn-ghost,
.section:not(.section-dark) .btn-outline,
.section-head .btn-ghost,
.modal-card .btn-ghost,
.modal-card .btn-outline,
.modal .btn-outline {
  background: rgba(22, 163, 74, 0.08) !important;
  border: 1.5px solid rgba(22, 163, 74, 0.45) !important;
  color: var(--mw-green-dd, #0A4F27) !important;
  font-weight: 700 !important;
}
.modal-card .btn-outline:hover,
.modal-card .btn-ghost:hover,
.modal .btn-outline:hover {
  background: rgba(22, 163, 74, 0.16) !important;
  border-color: var(--mw-green, #16A34A) !important;
  color: #053319 !important;
}

/* ===== Refinement: calmer, more restaurant than "app" ===== */
h1,h2,.section-head h2,.modal-card h2{font-family:"Fraunces",Georgia,"Times New Roman",serif!important;font-weight:600;letter-spacing:-.015em}
.hero h1{background:none!important;-webkit-text-fill-color:#FFF8E7!important;color:#FFF8E7!important;font-weight:600}
.hero-carousel,.about-img{animation:none!important}
.btn-primary:after{display:none!important}
.about-img{height:auto!important;aspect-ratio:5/4;object-fit:cover;width:100%}
.product-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#FFFEFA!important;border:1px solid #E9E2CC!important;box-shadow:0 2px 10px rgba(21,41,28,.06)!important}
.product-card:hover{transform:translateY(-3px)!important;border-color:#CDBF8A!important;box-shadow:0 14px 30px rgba(21,41,28,.12)!important}
.product-image img{transition:transform .5s ease}.product-card:hover .product-image img{transform:scale(1.05) rotate(0)!important}
.offer-card,.contact-card,.quick-grid>div{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#FFFEFA!important;border:1px solid #E9E2CC!important;box-shadow:0 2px 10px rgba(21,41,28,.06)!important}
.section-dark .feature-list>div{background:rgba(255,255,255,.08)!important;border:1px solid rgba(232,199,102,.4)!important;color:#fff!important;backdrop-filter:none!important}
.section-dark .feature-list>div b{color:var(--mw-gold-l)!important}
.section-dark .feature-list>div span{color:#fff!important;font-weight:600}
/* open / closed pill */
.bm-open{display:inline-flex;align-items:center;gap:8px;margin:-6px 0 18px;padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff}
.bm-open i{width:9px;height:9px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:bmOn 2s infinite}
.bm-open.off i{background:#FBBF24;animation:none}
@keyframes bmOn{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
/* search */
.bm-search{margin:0 0 14px}
.bm-search input{width:100%;max-width:420px;padding:13px 16px 13px 42px;border-radius:14px;border:1px solid #D9D1B8;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2315291C' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center no-repeat;font:inherit;color:var(--mw-ink)}
.bm-search span{display:block;margin-top:10px;color:#7a6f4d;font-weight:600}
/* sticky cart bar */
#bmCartBar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(560px,calc(100% - 24px));padding:14px 18px;border:0;border-radius:16px;background:var(--mw-green-dd);color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 14px 34px rgba(6,40,22,.4),0 0 0 1px rgba(232,199,102,.5)}
#bmCartBar[hidden]{display:none}
#bmCartBar em{font-style:normal;background:var(--mw-gold-l);color:#0A2E17;padding:8px 14px;border-radius:10px}
#bmCartBar b{color:var(--mw-gold-l)}
.bm-has-cart .whatsapp-float{bottom:92px!important}
.bm-has-cart .footer{padding-bottom:90px}
/* free delivery bar */
.bm-free{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);color:var(--mw-green-dd);font-size:14px}
.bm-free-bar{height:7px;margin-top:8px;border-radius:99px;background:rgba(22,163,74,.18);overflow:hidden}
.bm-free-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mw-green),var(--mw-gold));transition:width .5s ease}
body:has(.modal.open) #bmCartBar{display:none!important}
/* bug fix: cart rows ran together on narrow screens */
.total-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.total-row span:last-child{text-align:right}

/* Chef mascot sits above the sticky cart bar */
.bm-has-cart .chef-mascot{bottom:92px}
@media(max-width:760px){.bm-has-cart .chef-mascot{transform:scale(.82);transform-origin:left bottom}}
.bm-has-cart .toast{bottom:92px!important}

/* ===== Cart extras ===== */
.bm-extras{margin:14px 0;padding:12px;border-radius:16px;background:rgba(201,162,39,.10);border:1px dashed rgba(201,162,39,.6)}
.bm-extras>b{display:block;margin-bottom:10px;color:var(--mw-green-dd)}
.bm-extra-row{display:grid;gap:8px}
.bm-extra{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:#fff;border:1px solid #E9E2CC}
.bm-extra img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.bm-extra div{flex:1;min-width:0;display:grid}
.bm-extra span{font-weight:700;color:var(--mw-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-extra em{font-style:normal;color:var(--mw-green-d);font-weight:700;font-size:14px}
.bm-extra button{flex:none;border:0;border-radius:10px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--mw-green),#22C55E)}
/* ===== Reviews ===== */
.bm-rate-chip{display:flex;align-items:baseline;gap:10px;padding:10px 16px;border-radius:14px;background:#FFFEFA;border:1px solid #E9E2CC}
.bm-rate-chip b{font-size:22px;color:#B8860B}.bm-rate-chip span{color:#6b6a55;font-size:14px}
.bm-rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.bm-rev{margin:0;padding:20px;border-radius:18px;background:#FFFEFA;border:1px solid #E9E2CC;box-shadow:0 2px 10px rgba(21,41,28,.06)}
.bm-rev-stars{color:#E0A800;font-size:18px;letter-spacing:2px}
.bm-rev blockquote{margin:10px 0 14px;color:var(--mw-ink);line-height:1.55}
.bm-rev blockquote.muted{opacity:.6}
.bm-rev figcaption{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:#555}
.bm-rev figcaption span{margin-left:auto;font-size:12px;opacity:.7}
.bm-rate{margin-top:18px;padding:16px;border-radius:16px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.3);display:grid;gap:10px}
.bm-stars{display:flex;gap:6px}
.bm-stars button{border:0;background:none;font-size:34px;line-height:1;color:#D6D3C4;cursor:pointer;padding:2px;transition:transform .15s}
.bm-stars button.on{color:#E0A800}.bm-stars button:hover{transform:scale(1.15)}
.bm-rate textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid #D9D1B8;font:inherit;background:#fff}
/* ===== Install banner ===== */
#bmInstall{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;width:min(460px,calc(100% - 24px));padding:12px 14px;border-radius:16px;background:var(--mw-green-dd);color:#fff;box-shadow:0 14px 34px rgba(6,40,22,.4),0 0 0 1px rgba(232,199,102,.5);animation:mwFade .5s ease both}
#bmInstall div{flex:1;display:grid;gap:2px}#bmInstall span{font-size:13px;opacity:.85}
#bmInstall button{border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:800;cursor:pointer;background:var(--mw-gold-l);color:#0A2E17}
#bmInstall #bmInstallX{background:none;color:#fff;padding:4px 8px;font-size:22px}

/* ===== Modal Layering & Floating Widget Protection ===== */
.modal {
  z-index: 1000 !important;
}
body:has(.modal.open) .whatsapp-float,
body:has(.modal.open) .chef-mascot {
  display: none !important;
}

/* ===== Modal Close Global Z-Index & Elevation ===== */
.modal-close {
  z-index: 60 !important;
  cursor: pointer !important;
}

/* ===== Auth Modal Header & Language Bar (No Overlap) ===== */
.auth-modal-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(21, 41, 28, 0.08) !important;
}

.auth-modal-top-bar .auth-lang-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--ivory-2) !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(22, 163, 74, 0.2) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--mw-green-dd, #0A4F27) !important;
  min-width: 0 !important;
}

.auth-modal-top-bar .auth-lang-btn {
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-color: var(--mw-green, #16A34A) !important;
  background: #ffffff !important;
  color: var(--mw-green-dd, #0A4F27) !important;
  white-space: nowrap !important;
}

.auth-modal-top-bar .modal-close {
  position: static !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 24px !important;
  border-radius: 50% !important;
  background: var(--ivory-2) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--ink) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.auth-modal-top-bar .modal-close:hover {
  background: var(--ivory) !important;
  transform: scale(1.05) !important;
}

/* ===== Customer Profile Modal & Header Navigation ===== */
.profile-modal-card {
  padding: 24px 28px !important;
  max-width: 680px !important;
  position: relative;
}
.modal-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(21, 41, 28, 0.08);
}
.btn-modal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 163, 74, 0.09);
  border: 1px solid rgba(22, 163, 74, 0.28);
  color: var(--mw-green-dd);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-modal-back:hover {
  background: rgba(22, 163, 74, 0.18);
  border-color: var(--mw-green);
  transform: translateX(-2px);
}
.modal-top-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--mw-green-dd);
  letter-spacing: -0.01em;
}
.modal-card-top-bar .modal-close {
  position: static !important;
  margin-left: auto;
}
.profile-tabs-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 22px;
}
.profile-tabs-wrapper::-webkit-scrollbar {
  display: none;
}
.profile-tabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
  width: max-content;
}
.profile-tabs .tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.profile-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* ===== Profile User Summary Header Card & Logout Button ===== */
.profile-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--ivory-2, #fbf7ee);
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(10, 79, 39, 0.04);
}
.profile-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.profile-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0A4F27, #16A34A);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(10, 79, 39, 0.25);
  border: 2px solid #fff;
}
.profile-user-text {
  min-width: 0;
}
.profile-user-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--mw-green-dd, #0A4F27);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.profile-user-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  flex-wrap: wrap;
}
.profile-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.btn-logout-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-logout-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.btn-logout-danger svg {
  transition: transform 0.2s ease;
}
.btn-logout-danger:hover svg {
  transform: translateX(2px);
}

.btn-logout-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #fca5a5;
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-logout-subtle:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.nav-logout-link {
  color: #ef4444 !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-logout-link.hidden,
.nav-logout-link[hidden],
#navLogoutLink.hidden,
#navLogoutLink[hidden] {
  display: none !important;
}

/* ===== In-Modal Auth Error Banner (Sign In & Create Account) ===== */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #991b1b !important;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12);
  margin: 4px 0 12px 0;
  animation: authAlertSlideIn 0.28s ease-out both;
}

@keyframes authAlertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-alert-icon {
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-alert-content {
  flex: 1;
  min-width: 0;
}

.auth-alert-msg {
  font-weight: 700;
  color: #991b1b;
  display: block;
  word-break: break-word;
}

.auth-alert-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 16px;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
}

.auth-alert-action:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

@media (max-width: 580px) {
  .profile-modal-card {
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }
  .modal-top-title {
    font-size: 15px;
  }
  .btn-modal-back {
    padding: 6px 12px;
    font-size: 12.5px;
  }
  .profile-tabs .tab {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .profile-user-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .profile-user-card .btn-logout-danger {
    justify-content: center;
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
  }
  .profile-bottom-bar {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .profile-bottom-bar .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ===== Professional Account Button & Customer Avatar Pill ===== */
.account-btn {
  position: relative;
  height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.account-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: var(--mw-gold-l) !important;
  transform: translateY(-1px);
}
.account-avatar-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  flex-shrink: 0;
  transition: all .25s ease;
}
.account-avatar-icon svg {
  display: block;
}
.account-btn.logged-in {
  padding: 0 14px 0 8px !important;
  border-radius: 999px !important;
  background: rgba(10, 79, 39, 0.65) !important;
  border: 1px solid rgba(232, 199, 102, 0.55) !important;
  box-shadow: 0 4px 16px rgba(4, 40, 20, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.account-btn.logged-in .account-avatar-icon {
  background: linear-gradient(135deg, var(--mw-gold-l), var(--mw-gold));
  color: #0A2E17;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.45);
}
.account-btn.logged-in:hover {
  background: rgba(14, 122, 58, 0.8) !important;
  border-color: var(--mw-gold-l) !important;
  box-shadow: 0 6px 20px rgba(4, 40, 20, 0.4);
}
.account-badge {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

/* ===== Brand Logo Geometry Lock & Mobile Responsiveness ===== */
.brand {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  min-height: 44px !important;
}
.brand img {
  height: 44px !important;
  max-height: 46px !important;
  width: auto !important;
  aspect-ratio: 760 / 278 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

@media (max-width: 860px) {
  .site-header {
    padding: 0 !important;
  }
  .nav {
    min-height: 60px !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .brand img {
    height: 36px !important;
    max-height: 38px !important;
  }
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .cart-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 19px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    flex-shrink: 0 !important;
  }
  .cart-btn span,
  .cart-btn #cartCount {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background: var(--mw-gold-l, #e8c766) !important;
    color: #07381b !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    border: 1.5px solid #072a17 !important;
    line-height: 1 !important;
  }
  .account-btn {
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    flex-shrink: 0 !important;
  }
  .account-btn.logged-in {
    padding: 0 10px 0 6px !important;
    border-radius: 999px !important;
    max-width: 105px !important;
    background: rgba(217, 161, 59, 0.18) !important;
    border: 1px solid rgba(232, 199, 102, 0.45) !important;
    gap: 6px !important;
  }
  .account-avatar-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #d9a13b, #f59e0b) !important;
    color: #062b16 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .account-avatar-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
  .account-btn.logged-in .account-badge {
    max-width: 55px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: inline-block !important;
  }
  .nav nav.open {
    display: flex !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: 66px !important;
    background: rgba(5, 30, 16, 0.98) !important;
    border: 1px solid rgba(232, 199, 102, 0.35) !important;
    padding: 12px !important;
    border-radius: 20px !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 100 !important;
  }
  .nav nav.open a {
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    background: transparent !important;
    text-decoration: none !important;
  }
  .nav nav.open a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
  .nav nav.open .nav-user-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: rgba(217, 161, 59, 0.14) !important;
    border: 1px solid rgba(232, 199, 102, 0.35) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    margin-top: 6px !important;
  }
  .nav nav.open .nav-user-chip .nav-chip-avatar {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }
  .nav nav.open .nav-user-chip .nav-chip-name {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    max-width: none !important;
  }
  .nav nav.open .nav-logout-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    border-radius: 14px !important;
    padding: 11px 16px !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
  .nav nav.open .nav-logout-link:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
  }
  .nav nav.open .nav-logout-link.hidden,
  .nav nav.open .nav-logout-link[hidden],
  .nav nav.open #navLogoutLink.hidden,
  .nav nav.open #navLogoutLink[hidden] {
    display: none !important;
  }
  #mainNav .menu-lang-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-top: 8px !important;
    padding: 12px 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    border-radius: 14px !important;
  }
  .modal {
    padding: 8px !important;
  }
  .modal-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-height: 94vh !important;
  }
  .profile-modal-card {
    padding: 14px 12px !important;
  }
  .auth-modal-top-bar {
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  .auth-modal-top-bar .auth-lang-card {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    gap: 6px !important;
  }
  .auth-modal-top-bar .auth-lang-btn {
    padding: 3px 9px !important;
    font-size: 11.5px !important;
  }
  .auth-modal-top-bar .modal-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 22px !important;
  }
}

@media (max-width: 380px) {
  .nav {
    min-height: 56px !important;
    gap: 4px !important;
  }
  .brand img {
    height: 31px !important;
    max-height: 32px !important;
  }
  .nav-actions {
    gap: 4px !important;
  }
  .account-btn.logged-in {
    max-width: 92px !important;
    padding: 0 6px 0 5px !important;
  }
  .account-btn.logged-in .account-badge {
    max-width: 45px !important;
    font-size: 10.5px !important;
  }
  .cart-btn, .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .account-btn {
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
  }
  .auth-modal-top-bar .auth-lang-card {
    padding: 4px 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  .auth-modal-top-bar .auth-lang-btn {
    padding: 2px 7px !important;
    font-size: 10.5px !important;
  }
  .auth-modal-top-bar .modal-close {
    width: 30px !important;
    height: 30px !important;
    font-size: 20px !important;
  }
}