@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;900&display=swap');

:root{
  --primary:#16a34a;
  --primary-dark:#15803d;
  --text-dark:#0f172a;
  --text-gray:#64748b;
  --bg-light:#f8fafc;
  --border:#e2e8f0;
  --max-width:1400px;
  --brand-logo-image:url('/images/logo-circle.webp');
  --footer-logo-image:url('/images/footer-logo.webp');
  --brand-logo-ratio:1 / 1;
  --footer-logo-ratio:3 / 2;
  --brand-logo-chip-width:62px;
  --brand-logo-chip-width-mobile:54px;
  --brand-logo-badge-width:118px;
  --brand-logo-badge-width-mobile:98px;

  /* Z-index scale (keep simple and consistent across all pages) */
  --z-subheader: 900;
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-network-banner: 9850;
  --z-overlay: 12980;
  --z-menu-overlay: 12990;
  --z-drawer: 13000;
  --z-drawer-control: 13010;
  --z-drawer-dropdown: 13020;
  --z-delete-overlay: 13100;
  --z-delete-modal: 13110;
  --z-reconnect-overlay: 13200;
  --z-upload-overlay: 13210;
  --z-auth-backdrop: 13300;
  --z-auth-dialog: 13310;
  --z-critical: 13400;
  --z-admin-reauth: 13450;
  --z-admin-reauth-card: 13460;
  --z-search-results: 100120;
  --z-celebration: 20050;
  --z-toast: 99999;
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;color:var(--text-dark);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}




/* make nav links use exclusive font and be larger */
.product-nav .product-links a {
  font-family: "Poppins", "Playfair Display", sans-serif;
  font-weight: 600;
  font-size: 18px;            /* adjust as you like */
  letter-spacing: 0.2px;
  display: inline-block;
  padding: 6px 12px;
  transition: color .18s ease, transform .12s ease;
}

/* stronger selector for desktop only (won't affect mobile menu) */
@media (min-width: 1025px) {
  .product-nav .product-links a {
    font-size: 20px; /* desktop default, will be scaled down by the smart JS/CSS we add later */
  }
}




/* Contact Bar */
.contact-bar{background:#fff;border-bottom:1px solid var(--border);padding:8px 0;font-size:13px}
.contact-bar-content{max-width:var(--max-width);margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.contact-items{display:flex;gap:30px;align-items:center}
.contact-bar-item{display:flex;align-items:center;gap:8px;color:var(--text-gray);text-decoration:none;transition:color .3s}
.contact-bar-item i{color:var(--primary);font-size:14px}
.contact-bar-item:hover{color:var(--primary)}
.contact-bar-label{font-weight:600;color:var(--text-dark);margin-right:6px}

/* Announcement */
.announcement-bar{background:var(--text-dark);color:#fff;padding:10px 0;text-align:center;font-size:13px}
.announcement-bar i{color:var(--primary);margin-right:8px}

/* Header */
.main-header{position:relative;background:#fff;border-bottom:2px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06);z-index:var(--z-header)}
.main-header:has(.chef-smart-search-panel.is-open),
.main-header:has(.search-container.chef-search-enhanced.is-focused){
  z-index:var(--z-search-results);
}
.search-container.chef-search-enhanced,
.chef-smart-search-panel,
.chef-search-feedback{
  z-index:var(--z-search-results) !important;
}
.header-top{max-width:var(--max-width);margin:0 auto;padding:18px 20px;display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:center}
@media (max-width: 768px) {
  .header-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
  }
  
  .logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  
  .search-container {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
  }
  
  .header-actions {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }
}
.logo{font-size:26px;font-weight:800;color:var(--primary);text-decoration:none;display:flex;align-items:center;gap:12px}
.logo::before{
  content:"";
  width:var(--brand-logo-chip-width);
  aspect-ratio:var(--brand-logo-ratio);
  background-image:var(--brand-logo-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:0 10px 24px rgba(15,23,42,.16),0 0 0 1px rgba(22,163,74,.18);
  flex-shrink:0;
  outline:1px solid rgba(22,163,74,.18);
  outline-offset:3px;
  transition:transform .25s ease,box-shadow .25s ease,outline-color .25s ease;
}
.logo i{display:none}
@media (min-width:769px){
  .logo:hover::before{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 14px 30px rgba(15,23,42,.18),0 0 0 1px rgba(22,163,74,.32),0 0 0 7px rgba(22,163,74,.08);
    outline-color:rgba(22,163,74,.3);
  }
}

/* Ensure search can shrink inside grid and keep controls inline */
.header-top .search-container{min-width:0;display:flex;align-items:center;gap:8px}

/* Search */
.search-container{max-width:640px;position:relative}
.search-bar{width:100%;min-width:200px;padding: 12px 56px 12px 18px;border:2px solid var(--border);border-radius:10px;font-size:14px;transition:all .3s}
.search-bar:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,163,74,0.1)}
.search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #d7e0ea;padding:8px 14px;border-radius:8px;color:#5b6472;cursor:pointer;transition:all .22s ease;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.search-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#334155}
.search-scope{display:none !important}

/* Wishlist-like search layout (override for tighter inline controls) */
.search-container{display:flex;align-items:center;gap:0 !important;width:100%;max-width:640px;position:relative;height:52px}
.search-container .custom-select-wrapper{display:none !important}
.custom-select-display{height:42px;padding:8px 12px;background:white;border:2px solid var(--border);border-radius:10px 0 0 10px;border-right:none !important;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .3s;min-width:100px}
.search-bar{flex:1;min-width:150px;height:42px;padding:0 50px 0 14px;border:2px solid var(--border);border-radius:0;border-right:none;font-size:14px;transition:all .3s}
.search-clear{position:absolute;right:64px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:none;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;background:var(--bg-light);color:var(--text-gray);font-size:13px;z-index:5;border:1px solid var(--border);transition:all .2s}
.search-clear.visible{display:flex}
.search-btn{height:42px;padding:0 16px;border-radius:0 10px 10px 0;border:2px solid var(--border);border-left:none !important;background:#fff;color:#64748b;font-size:15px;cursor:pointer;font-weight:600;flex-shrink:0;margin:0 !important;box-shadow:none}

@media (max-width:640px){
  .search-container{flex-wrap:nowrap !important;gap:0 !important;height:auto;min-height:42px}
.search-container .custom-select-display{display:none !important}
  .search-bar{padding:0 50px 0 8px;font-size:12px;border-right:none !important;min-height:42px}
  .search-clear{right:48px;width:20px;height:20px;font-size:10px}
  .search-btn{padding:0 10px;font-size:13px;min-width:40px;height:42px}
}
/* Header Actions */
.header-actions{display:flex;gap:10px;align-items:center}
.header-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text-dark);
  gap:4px;
  position:relative;
  cursor:pointer;
  transition:color .3s;
  background:transparent;
  border:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  line-height:1;
}

/* Desktop only hover transform */
@media (min-width: 769px) {
  .header-action:hover{color:var(--primary);transform:translateY(-2px)}
}

/* Mobile - no transform, just color */
@media (max-width: 768px) {
  .header-action:active{color:var(--primary)}
}

.action-icon{font-size:22px;position:relative}
.badge{position:absolute;top:-8px;right:-8px;background:var(--primary);color:white;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid white;font-weight:700}
.badge[hidden],
.support-unread-pill[hidden],
[data-support-unread][hidden] { display: none !important; }
.action-label{font-size:12px;font-weight:600}
.cart-price{font-size:11px;color:var(--text-gray);font-weight:600}

/* Inbox page header color theme */
body.support-page .header-actions .header-action{
  color:#0f766e;
}
body.support-page .header-actions .header-action .action-icon{
  color:#0f766e;
}
body.support-page .header-actions .header-action .action-label{
  color:#0f766e;
}
body.support-page .header-actions .header-action:hover,
body.support-page .header-actions .header-action:active{
  color:#0b5f59;
}
body.support-page .header-actions .header-action.header-action--inbox{
  color:#0f172a;
}
body.support-page .header-actions .header-action.header-action--inbox .action-icon{
  background:linear-gradient(135deg,#0f766e 0%,#0e9f6e 100%);
  color:#fff;
}
body.support-page .header-actions .header-action.header-action--inbox .action-label{
  color:#0f172a;
}

/* Support inbox action: premium but integrated with existing header language */
.header-actions .header-action.header-action--inbox{
  min-width:58px;
  padding:4px 6px;
  color:var(--text-dark);
}
.header-actions .header-action.header-action--inbox .action-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%);
  color:#fff;
  font-size:22px;
  box-shadow:0 8px 18px rgba(37,99,235,.3);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.header-actions .header-action.header-action--inbox .action-label{
  font-size:12px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:.2px;
}
.header-actions .header-action.header-action--inbox .badge,
.header-actions .header-action.header-action--inbox [data-support-unread]{
  top:-8px;
  right:-8px;
  border-color:#fff;
}
@media (min-width:769px){
  .header-actions .header-action.header-action--inbox:hover{
    color:var(--text-dark);
    transform:none;
  }
  .header-actions .header-action.header-action--inbox:hover .action-icon{
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(37,99,235,.36);
    filter:saturate(1.06);
  }
}

.header-actions .header-action.header-action--inbox.admin-inbox-disabled{
  opacity:.56;
  filter:saturate(.55);
}
.header-actions .header-action.header-action--inbox.admin-inbox-disabled .action-icon{
  box-shadow:none;
}

@media (max-width:640px){
  .header-actions .header-action.header-action--inbox{
    min-width:54px;
    min-height:50px;
    padding:4px 4px;
    transform:translateY(-1px);
  }
  .header-actions .header-action.header-action--inbox .action-icon{
    width:38px;
    height:38px;
    font-size:20px;
    box-shadow:0 7px 14px rgba(37,99,235,.28);
  }
  .header-actions .header-action.header-action--inbox .action-label{
    display:block !important;
    font-size:10px;
    line-height:1;
    margin-top:2px;
    color:#1e3a8a;
    font-weight:800;
    letter-spacing:.25px;
  }
}
@media (max-width:420px){
  .header-actions .header-action.header-action--inbox{
    min-width:50px;
    min-height:46px;
    padding:3px 2px;
  }
  .header-actions .header-action.header-action--inbox .action-icon{
    width:34px;
    height:34px;
    font-size:18px;
  }
  .header-actions .header-action.header-action--inbox .action-label{
    font-size:9px;
  }
}

/* Login page overrides to keep the same clean inbox pattern */
body.login-page .main-header .header-actions .header-action.header-action--inbox{
  min-width:58px !important;
  padding:4px 6px !important;
  color:var(--text-dark) !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
body.login-page .main-header .header-actions .header-action.header-action--inbox .action-icon{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%) !important;
  color:#fff !important;
  font-size:22px !important;
  box-shadow:0 8px 18px rgba(37,99,235,.3) !important;
}
body.login-page .main-header .header-actions .header-action.header-action--inbox .action-label{
  display:inline-block !important;
  font-size:12px !important;
  color:#0f172a !important;
  font-weight:700 !important;
}
@media (max-width:640px){
  body.login-page .main-header .header-actions .header-action.header-action--inbox{
    min-width:54px !important;
    min-height:50px !important;
    padding:4px 4px !important;
    transform:translateY(-1px) !important;
  }
  body.login-page .main-header .header-actions .header-action.header-action--inbox .action-icon{
    width:38px !important;
    height:38px !important;
    font-size:20px !important;
  }
  body.login-page .main-header .header-actions .header-action.header-action--inbox .action-label{
    display:block !important;
    font-size:10px !important;
    line-height:1 !important;
    margin-top:2px !important;
    color:#1e3a8a !important;
    font-weight:800 !important;
    letter-spacing:.25px !important;
  }
}

/* User Greeting */
.user-greeting{max-width:var(--max-width);margin:0 auto;padding:10px 20px;background:var(--bg-light);border-bottom:1px solid var(--border)}
.greeting-content{display:flex;justify-content:space-between;align-items:center}
.greeting-text{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-dark);font-weight:500}
.greeting-text i{color:var(--primary);font-size:16px}
.login-status-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:24px;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);color:#334155;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;margin-left:8px;box-shadow:0 4px 15px rgba(15,23,42,.08);will-change:transform;letter-spacing:.2px;cursor:pointer;transition:all .3s ease;border:1px solid rgba(148,163,184,.35)}
.login-status-badge:hover{box-shadow:0 6px 20px rgba(15,23,42,.12);transform:translateY(-2px)}
/* Removed all session checking/loading state styles - auth happens silently in background */
.login-status-badge.is-logged-in{background:linear-gradient(135deg,#16a34a 0%,#15803d 100%);color:#fff;box-shadow:0 4px 15px rgba(22,163,74,.35);border-color:rgba(255,255,255,.25);animation:none;text-shadow:0 1px 0 rgba(0,0,0,.12)}
.login-status-badge.is-logged-in:hover{box-shadow:0 6px 20px rgba(22,163,74,.45);transform:translateY(-2px)}
@keyframes subtle-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.92;transform:scale(1.01)}}
@media(max-width:640px){
  .greeting-text{flex-wrap:wrap;justify-content:center;text-align:center}
  .login-status-badge{
    padding:5px 12px;
    font-size:11px;
    margin-left:0;
    margin-top:6px;
    width:auto;
    text-align:center;
    align-self:center;
  }
}

@media(max-width:640px){
  .user-greeting .login-status-badge{
    width:auto !important;
    margin-left:0 !important;
    margin-top:6px !important;
    align-self:center !important;
    text-align:center !important;
  }
  .user-greeting .greeting-text{
    justify-content:center !important;
    text-align:center !important;
  }
}

.admin-login-session-panel{
  margin-top:16px;
  padding:18px 18px 16px;
  border-radius:16px;
  border:1px solid rgba(109,40,217,.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,.18), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(14,165,233,.12), transparent 45%),
    #ffffff;
  box-shadow:0 18px 35px rgba(15,23,42,.14);
}
.admin-login-panel-head{display:flex;align-items:center;justify-content:flex-start}
.admin-login-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#6d28d9;
  background:rgba(109,40,217,.12);
  border:1px solid rgba(109,40,217,.24);
}
.admin-login-title{
  margin:12px 0 6px;
  font-size:20px;
  color:#1e1b4b;
  font-weight:800;
}
.admin-login-sub{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:#475569;
}
.admin-login-actions{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.admin-login-actions .btn-primary,
.admin-login-actions .btn-ghost{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
}
.admin-login-note{
  margin-top:10px;
  font-size:12px;
  color:#64748b;
  font-weight:600;
}
@media(max-width:640px){
  .admin-login-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .admin-login-actions .btn-primary,
  .admin-login-actions .btn-ghost{
    width:100%;
  }
}

/* Auth required modal */
.auth-required-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:var(--z-auth-backdrop)}
.auth-required-backdrop.active{opacity:1;pointer-events:auto}
.auth-required-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none;transition:all .2s ease;background:#fff;border-radius:16px;border:2px solid var(--border);width:min(90vw,420px);padding:22px;box-shadow:0 24px 60px rgba(15,23,42,.22);z-index:var(--z-auth-dialog);text-align:left}
.auth-required-dialog.active{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.auth-required-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-light);border:2px solid var(--border);color:var(--primary);font-size:20px;margin-bottom:12px}
.auth-required-title{margin:0 0 6px 0;font-size:18px;font-weight:700;color:var(--text-dark)}
.auth-required-text{margin:0;color:var(--text-gray);font-size:14px;line-height:1.5}
.auth-required-actions{display:flex;gap:10px;margin-top:16px}
.auth-required-actions .btn-primary,.auth-required-actions .btn-ghost{flex:1;text-align:center}
.auth-required-actions .btn-primary{text-decoration:none}
.auth-required-dialog .btn-primary,
.auth-required-dialog .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
  font-family:inherit;
}
.auth-required-dialog .btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(22,163,74,.2);
}
.auth-required-dialog .btn-primary:hover{background:var(--primary-dark)}
.auth-required-dialog .btn-ghost{
  background:#fff;
  color:var(--text-dark);
  border-color:var(--border);
}
.auth-required-dialog .btn-ghost:hover{
  border-color:var(--primary);
  color:var(--primary);
}

/* Quick header auth modal - EXTREMELY SMOOTH PREMIUM ANIMATION */
body.quick-auth-lock{overflow:hidden}
.quick-auth-root{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:calc(var(--z-auth-dialog) + 10);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),visibility 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:opacity,visibility;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.quick-auth-root.is-active{
  opacity:1;
  visibility:visible;
}
.quick-auth-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:backdrop-filter 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility:hidden;
}
.quick-auth-modal{
  position:relative;
  width:min(94vw,520px);
  max-height:min(92vh,820px);
  overflow:auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-radius:14px;
  box-shadow:0 28px 74px rgba(15,23,42,.32);
  padding:20px;
  color:#0f172a;
  transform:scale(0.94) translateY(12px);
  opacity:0;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:transform,opacity;
  contain:layout style paint;
  content-visibility:auto;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform-style:preserve-3d;
  perspective:1000px;
}
.quick-auth-root.is-active .quick-auth-modal{
  transform:scale(1) translateY(0);
  opacity:1;
}
.quick-auth-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:10px;
  background:#fff;
  color:#334155;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:
    background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:transform;
  backface-visibility:hidden;
}
.quick-auth-close:hover{
  background:#f8fafc;
  color:#16a34a;
  transform:translateY(-2px) scale(1.05);
  border-color:rgba(22,163,74,.2);
}
.quick-auth-close:active{
  transform:translateY(0) scale(0.98);
}
.quick-auth-head{display:flex;align-items:center;gap:12px;padding-right:42px;margin-bottom:16px}
.quick-auth-icon{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dcfce7,#f0fdf4);color:#15803d;box-shadow:inset 0 0 0 1px rgba(22,163,74,.15)}
.quick-auth-head h2{font-size:1.2rem;line-height:1.2;margin:0;font-weight:900;color:#0f172a;letter-spacing:0}
.quick-auth-head p{min-height:18px;margin:4px 0 0;color:#64748b;font-size:.84rem;font-weight:700}
.quick-auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  margin-bottom:16px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}
.quick-auth-tab{
  min-width:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#64748b;
  padding:10px 8px;
  font-weight:900;
  cursor:pointer;
  transition:none;
  backface-visibility:hidden;
}
.quick-auth-tab:hover:not(.is-active){
  color:#475569;
  background:rgba(255,255,255,0.5);
}
.quick-auth-tab.is-active{
  background:#fff;
  color:#15803d;
  box-shadow:0 6px 16px rgba(15,23,42,.08),inset 0 0 0 1px rgba(22,163,74,.16);
}
.quick-auth-panel{
  display:grid;
  gap:12px;
  min-height:0;
  contain:layout style;
}
.quick-auth-panel[hidden]{
  display:none!important;
  content-visibility:hidden;
}
.quick-auth-message[hidden],.quick-auth-otp[hidden],.quick-auth-optional-body[hidden]{
  display:none!important;
}
.quick-auth-field{display:grid;gap:6px;margin:0;position:relative}
.quick-auth-field>span{display:flex;align-items:center;gap:7px;color:#334155;font-size:.84rem;font-weight:900}
.quick-auth-field>span i{color:#16a34a}
.quick-auth-field-note{display:flex;gap:7px;align-items:flex-start;margin:-4px 0 0;color:#64748b;font-size:.78rem;line-height:1.4;font-weight:600}
.quick-auth-field-note i{margin-top:2px;color:#16a34a;flex:0 0 auto}
.quick-auth-field input,.quick-auth-field select,.quick-auth-field textarea{
  width:100%;
  min-height:44px;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  padding:11px 12px;
  font:inherit;
  font-size:.95rem;
  outline:none;
  transition:border-color .12s ease,box-shadow .12s ease;
  will-change:border-color,box-shadow;
  backface-visibility:hidden;
}
.quick-auth-field input:hover,.quick-auth-field select:hover,.quick-auth-field textarea:hover{
  border-color:#c7d2dd;
}
.quick-auth-field input:focus,.quick-auth-field select:focus,.quick-auth-field textarea:focus{
  border-color:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.12);
}
.quick-auth-field textarea{
  resize:vertical;
  min-height:76px;
  line-height:1.45;
  will-change:auto;
}
.quick-auth-field input:focus,.quick-auth-field select:focus,.quick-auth-field textarea:focus{border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.quick-auth-field input.is-invalid,.quick-auth-field textarea.is-invalid,.quick-auth-field select.is-invalid{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.1)}
.quick-auth-password input{padding-right:48px}
.quick-pass-toggle{
  position:absolute;
  right:8px;
  top:calc(100% - 22px);
  bottom:auto;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  border-radius:9px;
  background:#f8fafc;
  color:#64748b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  line-height:1;
  transition:background-color .08s ease,color .08s ease,box-shadow .08s ease;
}
.quick-pass-toggle:hover{color:#15803d;background:#ecfdf5}
.quick-pass-toggle:active{transform:translateY(-50%)}
.quick-auth-message{border-radius:10px;padding:10px 12px;font-size:.88rem;font-weight:800;line-height:1.45}
.quick-auth-security-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid rgba(22,163,74,.2);border-radius:10px;background:#f0fdf4;color:#166534;font-size:.8rem;font-weight:700;line-height:1.45}
.quick-auth-security-note i{margin-top:2px;color:#15803d;flex:0 0 auto}
.quick-auth-message.is-success{background:#ecfdf5;color:#166534;border:1px solid rgba(22,163,74,.18)}
.quick-auth-message.is-error{background:#fef2f2;color:#991b1b;border:1px solid rgba(220,38,38,.18)}
.quick-auth-message.is-neutral{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}
.quick-auth-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;margin-top:2px}
.quick-auth-actions--compact{margin-top:8px}
.quick-auth-primary,.quick-auth-secondary,.quick-auth-ghost,.quick-auth-icon-btn{
  min-height:44px;
  border-radius:10px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:transform;
  backface-visibility:hidden;
}
.quick-auth-primary{
  border:0;
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;
  box-shadow:0 10px 22px rgba(22,163,74,.22);
}
.quick-auth-primary:hover:not(:disabled){
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 28px rgba(22,163,74,.32);
}
.quick-auth-primary:active:not(:disabled){
  transform:translateY(0) scale(0.98);
  box-shadow:0 8px 18px rgba(22,163,74,.18);
}
.quick-auth-primary:disabled,.quick-auth-ghost:disabled,.quick-auth-icon-btn:disabled{opacity:.58;cursor:not-allowed;transform:none;box-shadow:none}
.quick-auth-secondary{border:1px solid #dbe4ef;background:#fff;color:#334155;padding:0 12px;text-align:center}
.quick-auth-secondary:hover:not(.is-disabled){border-color:#16a34a;color:#15803d;background:#f0fdf4}
.quick-auth-secondary.is-disabled{opacity:.48;pointer-events:none;cursor:not-allowed}
.quick-auth-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;animation:spin .75s linear infinite}
.quick-auth-optional{
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  overflow:hidden;
}
.quick-auth-optional-toggle{
  width:100%;
  min-height:44px;
  border:0;
  background:transparent;
  color:#334155;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  cursor:pointer;
  text-align:left;
  transition:background-color 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.quick-auth-optional-toggle:hover{
  background:rgba(241,245,249,0.6);
}
.quick-auth-optional-toggle:active{
  transform:scale(0.98);
}
.quick-auth-optional-toggle[aria-expanded="true"] .fa-chevron-down{
  transform:rotate(180deg);
  color:#16a34a;
}
.quick-auth-optional-toggle .fa-chevron-down{
  transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color:#64748b;
}
.quick-auth-optional-body{
  display:grid;
  gap:12px;
  padding:0 12px 12px;
  overflow:hidden;
  /* Smooth hardware-accelerated transitions */
  transition:max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
             opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
             transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:max-height, opacity, transform;
}
/* Smooth entrance animation for form fields */
.quick-auth-optional-body > * {
  animation:slideInFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.quick-auth-optional-body > *:nth-child(1) { animation-delay: 0.05s; }
.quick-auth-optional-body > *:nth-child(2) { animation-delay: 0.08s; }
.quick-auth-optional-body > *:nth-child(3) { animation-delay: 0.11s; }
.quick-auth-optional-body > *:nth-child(4) { animation-delay: 0.14s; }
.quick-auth-optional-body > *:nth-child(5) { animation-delay: 0.17s; }
@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .quick-auth-optional-toggle,
  .quick-auth-optional-toggle .fa-chevron-down,
  .quick-auth-optional-body {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .quick-auth-optional-body > * {
    animation: none !important;
  }
}
.quick-auth-optional-toggle[aria-expanded="true"] + .quick-auth-optional-body{
  /* Expanded state managed by JS */
}
.quick-auth-phone-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(112px,.6fr);gap:10px}
.quick-auth-location-actions{display:flex;gap:8px;align-items:center}
.quick-auth-ghost{border:1px solid #dbe4ef;background:#fff;color:#334155;padding:0 12px}
.quick-auth-ghost:hover:not(:disabled){border-color:#16a34a;color:#15803d;background:#f0fdf4}
.quick-auth-icon-btn{width:44px;border:1px solid #dbe4ef;background:#fff;color:#64748b;flex:0 0 44px}
.quick-auth-icon-btn:hover:not(:disabled){color:#dc2626;border-color:#fecaca;background:#fef2f2}
.quick-auth-otp{display:grid;gap:10px;border:1px solid rgba(22,163,74,.16);border-radius:12px;background:#f0fdf4;padding:12px}
.quick-auth-destination{margin:0;color:#166534;font-size:.86rem;font-weight:900;line-height:1.45}
.quick-auth-recaptcha{display:flex;align-items:center;gap:8px;color:#64748b;font-size:.78rem;line-height:1.35}
.quick-auth-recaptcha img{width:28px;height:28px;object-fit:contain;flex:0 0 28px}
.quick-auth-recaptcha a{color:#15803d;font-weight:800;text-decoration:none}
.quick-auth-root.is-busy .quick-auth-close{opacity:.5}
@media (max-width:768px){
  .quick-auth-root{
    align-items:flex-start;
    justify-content:center;
    padding:
      calc(12px + env(safe-area-inset-top,0px) + var(--quick-auth-vp-top, 0px))
      10px
      calc(10px + env(safe-area-inset-bottom,0px) + var(--quick-auth-vp-bottom, 0px))
      10px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .quick-auth-modal{
    width:100%;
    max-height:none;
    min-height:auto;
    border-radius:16px;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px));
    margin:0 auto 18px;
  }
  .quick-auth-head h2{font-size:1.08rem}
  .quick-auth-actions{grid-template-columns:1fr}
  .quick-auth-phone-row{grid-template-columns:1fr}
  .quick-auth-location-actions{align-items:stretch}
  .quick-auth-location-actions .quick-auth-ghost{flex:1}
}

/* Logout confirmation modal */
.logout-confirmation-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.6);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:var(--z-critical);
  transition:all .25s ease;
}
.logout-confirmation-overlay.active{
  opacity:1;
  visibility:visible;
}
.logout-confirmation-modal{
  width:min(92vw,460px);
  background:#fff;
  border-radius:18px;
  padding:26px;
  border:2px solid var(--border);
  box-shadow:0 30px 70px rgba(15,23,42,.25);
  transform:translateY(16px) scale(.98);
  transition:all .25s ease;
}
.logout-confirmation-overlay.active .logout-confirmation-modal{
  transform:translateY(0) scale(1);
}
.logout-modal-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(22,163,74,.12);
  color:var(--primary);
  font-size:24px;
  margin:0 auto 14px;
  border:2px solid rgba(22,163,74,.2);
}
.logout-modal-title{
  margin:0 0 8px 0;
  text-align:center;
  font-size:20px;
  font-weight:800;
  color:var(--text-dark);
}
.logout-modal-text{
  margin:0;
  text-align:center;
  color:var(--text-gray);
  font-size:14px;
  line-height:1.5;
}
.logout-modal-actions{
  display:flex;
  gap:12px;
  margin-top:20px;
}
.btn-confirm-logout,
.btn-cancel-logout{
  flex:1;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  border:2px solid transparent;
  transition:all .2s ease;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* Unified support/admin message styles */
.message, .support-message {
  transition:box-shadow .18s ease, transform .12s ease, background-color .18s ease;
}

/* Admin-sent messages (admin console) */
.message.admin {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(14,165,233,0.06), rgba(14,165,233,0.03));
  border-color: rgba(3,105,161,0.18);
  box-shadow: 0 12px 28px rgba(3,105,161,0.06);
}

/* User-facing support message for admin (what the customer sees) */
.support-message.is-admin {
  align-self: flex-start;
  background: linear-gradient(180deg, rgba(251,146,60,0.06), rgba(251,146,60,0.03));
  border-color: rgba(234,88,12,0.14);
  box-shadow: 0 10px 20px rgba(234,88,12,0.06);
}

/* Distinct badge for admin messages */
.admin-message-tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.04);
  background: rgba(255,255,255,0.85);
  color: #7c2d12;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* New message emphasis for user threads */
.message.new-message, .support-message.new-message {
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(16,185,129,0.12);
}
.btn-confirm-logout{
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 22px rgba(22,163,74,.25);
}
.btn-confirm-logout:hover{background:var(--primary-dark)}
.btn-cancel-logout{
  background:#fff;
  border-color:var(--border);
  color:var(--text-dark);
}
.btn-cancel-logout:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.btn-confirm-logout[disabled],
.btn-cancel-logout[disabled]{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}
.logout-confirmation-modal .logout-spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#fff;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-links{display:flex;gap:15px}
.auth-link{color:var(--text-dark);text-decoration:none;font-size:13px;font-weight:600;padding:6px 16px;border-radius:8px;transition:all .3s;display:flex;align-items:center;gap:6px}
.auth-link.login{background:#fff;border:2px solid var(--border)}
.auth-link.signup{background:var(--primary);color:#fff}
.auth-link:hover{transform:translateY(-2px)}
.auth-link.signup:hover{background:var(--primary-dark)}

/* Product Navigation */
.product-nav{max-width:var(--max-width);margin:0 auto;padding:18px 20px;overflow-x:auto;position:relative;z-index:var(--z-subheader)}
.menu-toggle{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;font-weight:600;border-radius:10px;border:2px solid var(--border);background:#fff;cursor:pointer;transition:all .3s;font-family:inherit;font-size:14px;color:var(--text-dark)}
.menu-toggle:hover{border-color:var(--primary);color:var(--primary)}
/* Mobile default: hidden (shown by menu toggle) */
.product-links{display:none}
.product-links a{text-decoration:none;color:var(--text-gray);font-weight:600;font-size:var(--pl-font-size,13px);position:relative;padding:6px 8px;transition:all .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}
.product-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--primary);transition:width .3s}
.product-links a:hover{color:var(--primary)}
.product-links a:hover::after{width:100%}

/* Desktop: use products.html desktop nav styles for exact behavior */
@media (min-width: 991px) {
  .product-nav .product-links {
    /* keep single-row desktop behavior and let JS adjust --pl-font-size */
    display: flex !important;
    gap: 28px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow: visible;
    --pl-font-size: 26px;
  }

  .product-nav .product-links a {
    font-family: 'Playfair Display', serif;
    font-size: var(--pl-font-size);
    font-weight: 600;
    letter-spacing: 0.6px;
    white-space: nowrap;
    padding: 10px 6px;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
  }

  .product-nav .product-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
  }

  .product-nav .product-links a:hover {
    color: var(--primary);
  }

  .product-nav .product-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ============================================================
   OPTIMIZED DRAWER SYSTEM - Smooth, Professional, Performant
   ============================================================ */

/* Overlay - Hardware accelerated, smooth fade */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6); /* Darker for better focus */
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--z-menu-overlay);
  will-change: opacity;
  backdrop-filter: blur(2px); /* Subtle blur for premium feel */
  -webkit-backdrop-filter: blur(2px);
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Side Menu (LEFT) - Optimized for 60fps */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 380px;
  height: 100%;
  background: #fff;
  transform: translate3d(-100%, 0, 0); /* Hardware accelerated */
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); /* Material Design standard */
  z-index: var(--z-drawer);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.15);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.side-menu.active {
  transform: translate3d(0, 0, 0);
}

.menu-header {
  padding: 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  position: sticky;
  top: 0;
  z-index: 10;
}

.menu-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.close-menu {
  width: 38px;
  height: 38px;
  border: none;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 1;
  position: relative;
  z-index: var(--z-drawer-control);
}

.close-menu:hover {
  background: var(--text-dark);
  color: #fff;
  transform: rotate(90deg);
}

.menu-content {
  padding: 22px;
}

.menu-links {
  display: flex;
  flex-direction: column;
  padding: 18px;
  gap: 8px;
}

.menu-links a {
  text-decoration: none;
  color: var(--text-dark);
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  transition: background-color 200ms ease, color 200ms ease, transform 150ms ease;
  font-size: 15px;
}

.menu-links a:hover {
  background: var(--bg-light);
  color: var(--primary);
  transform: translateX(4px);
}

/* Breadcrumb */
.breadcrumb{max-width:var(--max-width);margin:20px auto;padding:0 20px;font-size:15px;color:var(--text-gray);font-weight:500}
.breadcrumb a{color:var(--text-gray);text-decoration:none;transition:color .3s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb strong{color:var(--text-dark);font-weight:600}

/* Global thin green scrollbar */
@supports (scrollbar-width: thin) {
  *{
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #eef2f0;
  }
}
*::-webkit-scrollbar{
  width:8px;
  height:8px;
}
*::-webkit-scrollbar-track{
  background:#eef2f0;
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #22c55e, #16a34a);
  border-radius:999px;
  border:2px solid #eef2f0;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #16a34a, #15803d);
}

/* ============================================================
   WISHLIST PANEL (RIGHT) - Optimized & Smooth
   ============================================================ */
.wishlist-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: min(440px, calc(100vw - 32px));
  height: 100%;
  background: white;
  box-shadow: -16px 0 42px rgba(15, 23, 42, 0.18);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0); /* Hardware accelerated */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0ms linear 180ms;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.wishlist-panel.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.panel-header {
  padding: 18px;
  border-bottom: 2px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  position: sticky;
  top: 0;
  z-index: 10;
}

.panel-header h3 {
  font-size: 18px;
  font-weight: 700;
}

.close-panel {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--text-gray);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: var(--z-drawer-control);
}

.close-panel:hover {
  color: var(--text-dark);
  transform: rotate(90deg);
}
.panel-content{flex:1;min-height:0;overflow-y:auto;padding:22px;padding-bottom:90px}
.panel-footer{padding:20px;border-top:1px solid var(--border);background:#fff;margin-top:auto}
.wishlist-items{display:flex;flex-direction:column;gap:12px;min-height:0}
.wishlist-empty{text-align:center;padding:70px 18px;color:var(--text-gray)}
.wishlist-empty i{font-size:64px;margin-bottom:18px;opacity:.25}
.wishlist-empty h3{font-size:20px;margin-bottom:8px}
.wishlist-empty h4{font-size:18px;margin:0 0 8px;color:var(--text-dark)}
.wishlist-empty p{margin:0;color:var(--text-gray);line-height:1.5}
.wishlist-empty-icon{width:72px;height:72px;border-radius:50%;background:var(--bg-light);border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:28px;margin:0 auto 12px}
.wishlist-empty-icon i{font-size:28px;opacity:1;color:var(--primary)}
.wishlist-item-card{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--border);position:relative}
.wishlist-item-card img{width:80px;height:80px;border-radius:8px;object-fit:cover;border:1px solid var(--border)}
.wishlist-item-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.wishlist-item-name{font-size:14px;font-weight:600;color:var(--text-dark);line-height:1.3;word-break:break-word}
.wishlist-item-price{font-size:14px;color:var(--primary);font-weight:700}
.btn-add-mini{font-size:12px;padding:6px 12px;background:var(--text-dark);color:#fff;border:none;border-radius:4px;cursor:pointer;width:fit-content;margin-top:4px;font-weight:700}
.remove-item-btn{background:none;border:none;font-size:18px;color:#ccc;cursor:pointer;padding:0 5px;align-self:flex-start}
.remove-item-btn:hover{color:#ef4444}
.btn-view-full-wishlist{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:var(--primary);color:#fff;text-decoration:none;font-weight:700;border-radius:12px;transition:all .3s;box-shadow:0 4px 12px rgba(22,163,74,0.2)}
.btn-view-full-wishlist:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,163,74,0.4)}
.btn-view-full-wishlist::after{content:"\2192";font-size:16px;margin-left:6px;opacity:0.95}
.wishlist-counter{margin-left:5px}
/* ============================================================
   CART DRAWER (RIGHT) - Optimized & Smooth
   ============================================================ */
.cart-drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: min(456px, calc(100vw - 32px));
  height: 100%;
  background: #fff;
  box-shadow: -16px 0 42px rgba(15, 23, 42, 0.18);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction:column;
  transform: translate3d(100%, 0, 0); /* Hardware accelerated */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms ease, visibility 0ms linear 320ms;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cart-drawer.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.cart-drawer-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:34px 18px;color:var(--text-gray)}
.cart-drawer-empty-icon{width:72px;height:72px;border-radius:50%;background:var(--bg-light);border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:28px}
.cart-drawer-empty h4{font-size:18px;margin:0;color:var(--text-dark)}
.cart-drawer-empty p{margin:0;color:var(--text-gray);line-height:1.5}
.cart-drawer-empty-actions{margin-top:10px}
.cart-drawer-shop-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 18px;border-radius:999px;background:var(--primary);color:#fff;text-decoration:none;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 22px rgba(22,163,74,.18);transition:background .2s ease,transform .16s ease,box-shadow .2s ease}
.cart-drawer-shop-btn:hover,.cart-drawer-shop-btn:focus-visible{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 14px 26px rgba(21,128,61,.22);outline:none}
.cart-drawer-items{display:flex;flex-direction:column;gap:14px}
.cart-line{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff}
.cart-line.is-full{grid-template-columns:96px minmax(0,1fr);padding:14px}
.cart-line-media{display:block;width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg-light);border:1px solid var(--border)}
.cart-line-media img{width:100%;height:100%;object-fit:cover;display:block}
.cart-line-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.cart-line-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.cart-line-name{font-size:14px;line-height:1.35;color:var(--text-dark);word-break:break-word}
.cart-line-name-link{text-decoration:none;color:inherit}
.cart-line-name-link:hover .cart-line-name{color:var(--primary)}
.cart-line-meta{font-size:12px;color:var(--text-gray);line-height:1.35}
.cart-line-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cart-line-qty{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:4px;background:var(--bg-light)}
.cart-line-qty button{width:26px;height:26px;border:0;border-radius:50%;background:#fff;color:var(--text-dark);font-weight:900;cursor:pointer;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.cart-line-qty button:hover{background:var(--primary);color:#fff}
.cart-line-qty span{min-width:22px;text-align:center;font-size:13px;font-weight:800;color:var(--text-dark)}
.cart-line-price{font-size:13px;font-weight:800;color:var(--primary);white-space:nowrap}
.btn-cart-clear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.24);
  background:#fff7f7;
  color:#b91c1c;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn-cart-clear:hover{
  transform:translateY(-1px);
  background:#ffefef;
  border-color:rgba(239,68,68,.45);
  color:#991b1b;
}
.btn-cart-clear-top{
  margin-left:auto;
}
.cart-list{gap:12px}
.wishlist-item-media,.wishlist-card-media{display:block;flex:0 0 auto}
.wishlist-card-media img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.cart-counter{margin-left:6px}
.btn-view-full-cart{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:var(--primary);color:#fff;text-decoration:none;font-weight:700;border-radius:12px;transition:all .3s;box-shadow:0 4px 12px rgba(22,163,74,0.2)}
.btn-view-full-cart:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,163,74,0.4)}
.btn-view-full-cart::after{content:"\2192";font-size:16px;margin-left:6px;opacity:0.95}
/* ============================================================
   ACCOUNT DRAWER (LEFT) - Optimized & Smooth
   ============================================================ */
.account-drawer {
  position: fixed;
  left: 0;
  top: 0;
  width: min(432px, calc(100vw - 32px));
  height: 100%;
  background: #fff;
  box-shadow: 16px 0 42px rgba(15, 23, 42, 0.18);
  z-index: var(--z-drawer);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms ease, visibility 0ms linear 320ms;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate3d(-100%, 0, 0); /* Hardware accelerated */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.account-drawer.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.account-level-card{
  margin:10px 16px 20px;
  padding:18px 18px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
  color:var(--text-dark);
  border:1px solid #e5e7eb;
  box-shadow:
    0 14px 30px rgba(15,23,42,0.08),
    0 2px 6px rgba(15,23,42,0.05);
  position:relative;
  overflow:hidden;
}
.account-level-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(22,163,74,0.18), transparent 55%),
    radial-gradient(circle at 20% 10%, rgba(34,197,94,0.15), transparent 45%);
  pointer-events:none;
}
.account-level-card::after{
  content:'';
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(22,163,74,0.7), rgba(22,163,74,0));
  opacity:0.9;
}
.account-level-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
  z-index:1;
}
.account-level-title{
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:#64748b;
}
.account-level-badge{
  background:linear-gradient(135deg, rgba(22,163,74,0.18), rgba(22,163,74,0.06));
  color:#0f5132;
  padding:6px 12px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  border:1px solid rgba(22,163,74,0.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.account-level-sub{
  margin-top:8px;
  font-size:1.1rem;
  font-weight:700;
  color:#0f172a;
  position:relative;
  z-index:1;
}
.account-level-bar{
  margin-top:12px;
  height:10px;
  background:rgba(15,23,42,0.08);
  border-radius:999px;
  overflow:hidden;
  position:relative;
  z-index:1;
  box-shadow:inset 0 1px 3px rgba(15,23,42,0.12);
}
.account-level-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#16a34a 0%, #22c55e 60%, #14b8a6 100%);
  border-radius:999px;
  transition:width .35s ease;
  box-shadow:0 6px 14px rgba(22,163,74,0.3);
}
.account-level-meta{
  margin-top:8px;
  font-size:0.8rem;
  color:#64748b;
  position:relative;
  z-index:1;
}
.account-level-tip{
  margin-top:10px;
  font-size:0.82rem;
  line-height:1.4;
  color:#475569;
  position:relative;
  z-index:1;
}
body.admin-special .account-avatar,
.account-drawer.admin-account-mode .account-avatar{
  background:linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%);
  box-shadow:0 8px 18px rgba(3,105,161,.28);
}
body.admin-role-admin .account-avatar,
.account-drawer.admin-account-mode .account-avatar.admin-role-admin{
  background:linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%);
  box-shadow:0 8px 18px rgba(3,105,161,.28);
}
body.admin-role-superadmin .account-avatar,
.account-drawer.admin-account-mode .account-avatar.admin-role-superadmin{
  background:linear-gradient(135deg,#7c3aed 0%,#4c1d95 100%);
  box-shadow:0 8px 18px rgba(76,29,149,.3);
}
.admin-session-card{
  margin:8px 0 16px;
  border:1px solid rgba(14,165,233,.3);
  background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(3,105,161,.08));
  border-radius:12px;
  padding:12px 14px;
}
.admin-session-card.role-admin .admin-session-eyebrow{color:#0369a1}
.admin-session-card.role-admin .admin-session-name{color:#0c4a6e}
.admin-session-card.role-admin .admin-session-meta{color:#075985}
.admin-session-card.role-superadmin{
  border-color:rgba(76,29,149,.35);
  background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(76,29,149,.12));
}
.admin-session-card.role-superadmin .admin-session-eyebrow{color:#5b21b6}
.admin-session-card.role-superadmin .admin-session-name{color:#3b0764}
.admin-session-card.role-superadmin .admin-session-meta{color:#4c1d95}
.admin-session-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#0369a1;
  font-weight:800;
}
.admin-session-name{
  margin-top:6px;
  font-size:15px;
  font-weight:800;
  color:#0c4a6e;
}
.admin-session-meta{
  margin-top:4px;
  font-size:12px;
  color:#075985;
  font-weight:600;
}
.account-drawer.admin-account-mode .account-level-card{display:none !important}
.account-drawer.admin-account-mode .account-field[data-edit-field="phone"],
.account-drawer.admin-account-mode .account-field[data-edit-field="location"],
.account-drawer.admin-account-mode .account-field[data-edit-field="address"]{display:none}
.account-drawer.admin-account-mode .account-edit-btn{display:none !important;pointer-events:none}
.account-drawer.admin-account-mode .account-edit-actions{display:none}
.account-drawer.admin-account-mode .account-quick-actions{display:none}
.account-drawer.admin-account-mode .btn-account-action.delete{display:none}
.admin-action-disabled{
  opacity:.6 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  transform:none !important;
  filter:grayscale(.14);
}

.product-card-stars{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:20px;
  color:#92400e;
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
}
.product-card-star-row{
  display:inline-flex;
  align-items:center;
  gap:1px;
  line-height:1;
}
.product-card-star{
  display:inline-flex;
  color:#cbd5e1;
  font-size:.78rem;
}
.product-card-star.is-full,
.product-card-star.is-half{
  color:#f59e0b;
}
.product-card-rating-number{
  color:#0f172a;
}
.product-card-rating-count{
  color:#64748b;
  font-weight:700;
}
.product-card-rating-empty{
  color:#64748b;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}

/* Signup sprinkle celebration */
.signup-sprinkle-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:var(--z-celebration);
  overflow:hidden;
}
.signup-sprinkle-overlay::before{
  content:'';
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at top, rgba(255,255,255,0.28), transparent 55%);
  opacity:0.75;
}
.signup-sprinkle-overlay::after{
  content:'';
  position:absolute;
  inset:-15%;
  background:radial-gradient(circle at 50% 10%, rgba(34,197,94,0.18), transparent 60%),
             radial-gradient(circle at 15% 20%, rgba(56,189,248,0.2), transparent 55%);
  opacity:0.7;
  filter:blur(10px);
}
.signup-sprinkle{
  position:absolute;
  top:-10vh;
  width:8px;
  height:18px;
  opacity:0;
  animation-name:sprinkleFall;
  animation-timing-function:cubic-bezier(.18,.62,.22,1);
  animation-fill-mode:forwards;
  filter:drop-shadow(0 6px 12px rgba(15,23,42,0.2));
  transform-origin:center;
}
.signup-sprinkle::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(140deg, rgba(255,255,255,0.65), rgba(255,255,255,0));
  opacity:0.65;
  mix-blend-mode:screen;
}
@keyframes sprinkleFall{
  0%{transform:translate3d(var(--sprinkle-drift,0px), -18vh, 0) rotate(var(--sprinkle-tilt,0deg)) scale(var(--sprinkle-scale,1));opacity:0}
  12%{opacity:1}
  100%{transform:translate3d(var(--sprinkle-drift,0px), 118vh, 0) rotate(var(--sprinkle-spin,520deg)) scale(var(--sprinkle-scale,1));opacity:0.95}
}
.signup-sparkle{
  position:absolute;
  top:-8vh;
  width:6px;
  height:6px;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,0.95), rgba(56,189,248,0.6) 60%, rgba(20,184,166,0.3) 100%);
  animation-name:sparkleFall;
  animation-timing-function:cubic-bezier(.2,.7,.2,1);
  animation-fill-mode:forwards;
  filter:drop-shadow(0 10px 16px rgba(15,23,42,0.2));
  mix-blend-mode:screen;
}
@keyframes sparkleFall{
  0%{transform:translate3d(var(--sparkle-drift,0px), -14vh, 0) scale(0.6);opacity:0}
  15%{opacity:1}
  100%{transform:translate3d(var(--sparkle-drift,0px), 120vh, 0) scale(1.05);opacity:0.9}
}

.otp-destination{
  margin-top:8px;
  font-size:0.82rem;
  color:#64748b;
  display:flex;
  align-items:center;
  gap:6px;
}

.otp-resend-timer{
  margin-top:6px;
  font-size:0.78rem;
  color:#0f766e;
  background:rgba(20,184,166,0.08);
  border:1px solid rgba(20,184,166,0.16);
  border-radius:999px;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.signup-congrats{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:var(--z-toast);
  width:min(520px, calc(100% - 32px));
  background:linear-gradient(135deg, rgba(255,255,255,0.99), rgba(248,250,252,0.98));
  border:1px solid rgba(22,163,74,0.32);
  color:#0f172a;
  padding:11px 14px;
  border-radius:12px;
  box-shadow:0 8px 18px rgba(15,23,42,0.12);
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:none;
  animation:congratsFloat .95s ease forwards;
}
.signup-congrats i{
  font-size:16px;
  color:#16a34a;
}
.signup-congrats-title{
  font-weight:800;
  font-size:0.9rem;
}
.signup-congrats-sub{
  font-size:0.75rem;
  color:#475569;
  margin-top:1px;
}
.signup-congrats::after{
  content:'';
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(22,163,74,0.8), rgba(22,163,74,0));
  opacity:0.9;
}
.signup-congrats.is-logout{
  border-color:rgba(14,165,233,0.35);
}
.signup-congrats.is-logout i{
  color:#0ea5e9;
}
.signup-congrats.is-logout::after{
  background:linear-gradient(90deg, rgba(14,165,233,0.85), rgba(14,165,233,0));
}
@keyframes congratsFloat{
  0%{opacity:0;transform:translate(-50%, -4px) scale(.985)}
  22%{opacity:1;transform:translate(-50%, 0) scale(1)}
  80%{opacity:1;transform:translate(-50%, 0) scale(1)}
  100%{opacity:0;transform:translate(-50%, -2px) scale(.99)}
}
.signup-lite-pulse{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(22,163,74,0.5);
  box-shadow:0 0 0 0 rgba(22,163,74,0.18);
  z-index:var(--z-toast);
  animation:signupLitePulse .55s ease-out 1;
  pointer-events:none;
}
@keyframes signupLitePulse{
  0%{opacity:.12;transform:translateX(-50%) scale(.6);box-shadow:0 0 0 0 rgba(22,163,74,0.18)}
  100%{opacity:0;transform:translateX(-50%) scale(1.05);box-shadow:0 0 0 10px rgba(22,163,74,0)}
}
.drawer-header {
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.drawer-header h3 {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-header h3 i {
  color: var(--primary);
}

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Universal close button for all drawers */
.close-drawer,
.close-menu,
.close-panel {
  width: 38px;
  height: 38px;
  border: none;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: var(--text-gray);
  position: relative;
  z-index: var(--z-drawer-control);
}

.close-drawer:hover,
.close-menu:hover,
.close-panel:hover {
  background: var(--text-dark);
  color: #fff;
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.admin-console-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(3,105,161,0.18);transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.admin-console-btn i{font-size:14px}
.admin-console-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(3,105,161,0.22);opacity:0.98}
.admin-console-btn:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px}
.close-drawer{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .3s;color:var(--text-gray)}
.close-drawer:hover{transform:rotate(90deg);background:var(--bg-light);color:var(--text-dark)}
.drawer-content{flex:1;overflow-y:auto;padding:20px}
/* Admin re-auth modal */
.admin-reauth-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:var(--z-admin-reauth)}
.admin-reauth-modal.visible{display:flex}
.admin-reauth-backdrop{position:fixed;inset:0;background:rgba(8,12,20,0.56);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.admin-reauth-card{position:relative;z-index:var(--z-admin-reauth-card);background:var(--bg);color:var(--text);width:min(520px,calc(100% - 40px));max-width:520px;padding:18px;border-radius:12px;box-shadow:0 18px 40px rgba(2,6,23,0.48);display:flex;flex-direction:column;gap:10px}
.admin-reauth-card h4{margin:0;font-size:16px}
.admin-reauth-desc{margin:0;font-size:13px;color:var(--text-gray)}
.admin-reauth-row{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.admin-reauth-row label{font-size:12px;color:var(--text-gray)}
.admin-reauth-row input{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-light);font-size:14px}
.admin-reauth-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.admin-reauth-error{color:#ff6b6b;font-weight:700;font-size:13px;margin-top:6px;min-height:18px}
/* Account fields */
.account-info-section{display:flex;flex-direction:column}
.account-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px;box-shadow:0 4px 12px rgba(22,163,74,.25)}
.account-avatar i{color:#fff;font-size:36px}
.account-field{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.account-field:last-of-type{border-bottom:none}
.account-field label{display:flex;align-items:center;gap:8px;color:var(--text-gray);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.account-field label i{color:var(--primary);font-size:14px}
.account-field .field-label{justify-content:space-between;gap:12px}
.account-field .label-left{display:inline-flex;align-items:center;gap:8px}
.account-edit-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-gray);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  flex-shrink:0;
}
.account-edit-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--bg-light);
  transform:translateY(-1px);
}
.account-edit-btn:active{transform:translateY(0)}
.account-edit-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}
.field-edit{
  display:none;
  margin-top:10px;
  gap:8px;
  flex-direction:column;
}
.field-edit.active{display:flex}
.field-edit .account-field-ok{
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:6px;
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s ease;
}
.field-edit .account-field-ok:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(22,163,74,.18);
}
.field-edit .account-field-ok:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.field-edit .account-field-cancel{
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-gray);
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s ease;
}
.field-edit .account-field-cancel:hover{
  border-color:#d1d5db;
  color:var(--text-dark);
  background:var(--bg-light);
  transform:translateY(-1px);
}
.field-edit .account-field-cancel:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.account-input,
.account-textarea{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--text-dark);
  transition:border-color .2s, box-shadow .2s;
  font-family:inherit;
}
.account-input.gps-locked{
  background:var(--bg-light);
  cursor:not-allowed;
  pointer-events:none;
}
.account-textarea{resize:vertical;min-height:74px}
.account-input:focus,
.account-textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(22,163,74,0.12);
}
.account-edit-hint{
  font-size:12px;
  color:var(--text-gray);
}
.account-location-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.account-location-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-dark);
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  transition:all .2s ease;
}
.account-location-btn i{color:var(--primary)}
.account-location-btn.secondary{
  background:var(--bg-light);
  border-color:var(--border);
  color:var(--text-dark);
}
.account-location-btn.secondary:hover{
  background:#fff;
}
.account-location-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(22,163,74,.12);
}
.account-location-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.account-phone-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.account-phone-row .account-input{flex:1}
@media (max-width:520px){
  .account-phone-row{
    flex-direction:column;
    align-items:stretch;
  }
  .account-drawer .operator-btn{width:100%}
}
.account-drawer .operator-select{
  position:relative;
  flex-shrink:0;
}
.account-drawer .operator-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
  font-size:13px;
  color:var(--text-dark);
  cursor:pointer;
  transition:all .2s ease;
  min-width:110px;
  justify-content:space-between;
}
.account-drawer .operator-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.account-drawer .operator-list{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:160px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
  list-style:none;
  z-index:var(--z-drawer-dropdown);
  box-shadow:0 16px 32px rgba(15,23,42,.12);
}
.account-drawer .operator-list.hidden{display:none}
.account-drawer .operator-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text-dark);
  cursor:pointer;
}
.account-drawer .operator-list li:hover{
  background:var(--bg-light);
  color:var(--primary);
}
.account-drawer .operator-list .tick{display:none;color:var(--primary)}
.account-drawer .operator-list li[aria-selected="true"] .tick{display:inline-flex}
.account-edit-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.btn-account-action.save{
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 22px rgba(22,163,74,.25);
}
.btn-account-action.save:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}
.btn-account-action.save:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.account-edit-message{
  font-size:13px;
  color:var(--text-gray);
  min-height:18px;
}
.account-edit-message.visible{opacity:1}
.account-edit-message.error{color:#b91c1c;font-weight:600}
.account-edit-message.success{color:var(--primary);font-weight:600}
.field-value[data-pending="true"]{
  color:var(--text-dark);
}
.field-value[data-pending="true"]::after{
  content:" • pending";
  font-size:11px;
  font-weight:600;
  color:var(--text-gray);
}
.account-quick-actions{margin:6px 0 12px;padding:12px;background:var(--bg-light);border:1px solid var(--border);border-radius:12px}
.account-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-gray);font-weight:700;margin-bottom:10px}
.account-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.account-quick-btn{border:1px solid var(--border);background:#fff;color:var(--text-dark);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s}
.account-quick-btn i{color:var(--primary);font-size:14px}
.account-quick-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,163,74,.12)}
.account-quick-btn:active{transform:translateY(0)}
.account-quick-btn.has-support-badge{position:relative;overflow:visible;padding-right:12px}
.support-unread-pill{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;line-height:1;position:absolute;top:-7px;right:-7px;z-index:3;border:2px solid #fff;box-shadow:0 5px 12px rgba(220,38,38,.28);pointer-events:none}
@media (max-width:480px){
  .account-drawer .account-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px;
  }
}
/* Force 3-row layout everywhere (6 items -> 2 columns) */
.account-drawer .account-quick-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.field-value{padding:10px 12px;background:var(--bg-light);border-radius:8px;font-weight:600;color:var(--text-dark);font-size:15px}
.field-value.loading{color:var(--text-gray);font-style:italic;animation:pulse 1.5s ease-in-out infinite}
/* Account buttons */
.account-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.btn-account-action{padding:12px;border-radius:10px;font-weight:700;cursor:pointer;border:none;font-family:inherit;width:100%;padding:14px;font-size:15px;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:10px}
.btn-account-action.edit{background:var(--primary);color:#fff}
.btn-account-action.edit:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgba(22,163,74,0.3)}
.btn-account-action.logout{background:#fff;color:#ef4444;border:2px solid #ef4444}
.btn-account-action.logout:hover{background:#ef4444;color:#fff;transform:translateY(-2px)}
.btn-account-action.delete{background:#fff;color:#dc2626;border:2px solid #dc2626;margin-top:8px}
.btn-account-action.delete:hover{background:#dc2626;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(220,38,38,0.3)}
.btn-delete-account{background:#fff;color:#dc2626;border:2px solid #dc2626;margin-top:8px}
.btn-delete-account:hover{background:#dc2626;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(220,38,38,0.3)}
/* Shimmer skeleton */
.field-skeleton{height:44px;border-radius:10px;background:#e5e7eb;position:relative;overflow:hidden}
.field-skeleton.shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* Delete confirmation modal (shared) */
.delete-confirmation-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-delete-overlay);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:all .3s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.delete-confirmation-overlay.active{opacity:1;visibility:visible;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.delete-confirmation-modal{background:#fff;border-radius:16px;padding:32px;max-width:520px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:scaleIn .3s ease;border:3px solid #dc2626;transform:scale(.9) translateY(20px);transition:all .4s cubic-bezier(.34,1.56,.64,1);z-index:var(--z-delete-modal)}
.delete-confirmation-overlay.active .delete-confirmation-modal{transform:scale(1) translateY(0)}
@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

/* Offline Error Dialog - Exact styles from products.html */
.offline-error-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: var(--z-delete-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.offline-error-dialog {
  background: white;
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  padding: 40px 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 3px solid #e74c3c;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-delete-modal);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.offline-error-dialog h3 {
  margin: 0 0 12px 0;
  font-size: 22px;
  color: var(--text-dark);
  font-weight: 800;
  font-family: 'Playfair Display', serif;
}

.offline-error-dialog p {
  margin: 0 0 24px 0;
  color: var(--text-gray);
  font-size: 15px;
  line-height: 1.6;
}

.offline-error-dialog .btn-ok-offline {
  padding: 14px 32px !important;
  background: var(--primary) !important;
  color: white !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  font-family: inherit !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.offline-error-dialog .btn-ok-offline:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}

.offline-error-dialog .btn-ok-offline:active {
  transform: translateY(0);
}

/* Ensure offline banner stays above sticky action bars/buttons */
#offlineBanner{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:var(--z-network-banner) !important;
  pointer-events:none;
}
body.has-offline-banner{
  padding-top: var(--offline-banner-height, 56px);
}

.slow-network-banner{display:none !important}
.slow-network-banner i{display:none !important}
.slow-network-banner.hide{display:none !important}
body.has-slow-banner{padding-top:0 !important}
body.has-offline-banner #slowNetworkBanner{
  display:none !important;
}
@keyframes slowBannerUp{
  to{transform:translateY(-100%);opacity:0}
}

@media (max-width: 640px) {
  .offline-error-dialog {
    padding: 30px 25px;
    max-width: 90%;
  }
  
  .offline-error-dialog h3 {
    font-size: 20px;
  }
  
  .offline-error-dialog p {
    font-size: 14px;
  }
  
  .offline-error-dialog .btn-ok-offline {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
}
.delete-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dc2626,#991b1b);display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;margin:0 auto 16px}
.delete-modal-icon{width:80px;height:80px;margin:0 auto 25px;background:linear-gradient(135deg,#dc2626 0%,#991b1b 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;will-change:transform;animation:warningPulse 2s ease-in-out infinite}
.delete-modal-icon i{font-size:40px;color:#fff}
@keyframes warningPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.8}100%{transform:scale(1);opacity:1}}
.delete-modal-title{font-size:26px;font-weight:800;color:#dc2626;text-align:center;margin-bottom:25px;font-family:'Playfair Display',serif}
.delete-modal-warning{background:#fef2f2;border:2px solid #fecaca;border-radius:12px;padding:20px;margin-bottom:30px}
.warning-text{color:var(--text-dark);font-size:15px;line-height:1.6;margin-bottom:15px}
.warning-text strong{color:#dc2626;font-weight:700}
.warning-list{list-style:none;padding:0;margin:15px 0}
.warning-list li{display:flex;align-items:start;gap:12px;padding:8px 0;color:var(--text-gray);font-size:14px;line-height:1.5}
.warning-list li i{color:#dc2626;margin-top:3px;font-size:16px;flex-shrink:0}
.warning-note{margin-top:15px;font-size:15px;font-weight:600;color:var(--text-dark);text-align:center}
.delete-modal-actions{display:flex;gap:12px;margin-top:25px}
.btn-cancel,.btn-confirm-delete{flex:1;padding:16px 20px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;gap:8px;border:none;font-family:inherit}
.btn-cancel{background:var(--bg-light);color:var(--text-dark);border:2px solid var(--border)}
.btn-cancel:hover{background:#fff;border-color:var(--text-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.btn-confirm-delete{background:linear-gradient(135deg,#dc2626 0%,#991b1b 100%);color:#fff;position:relative;overflow:hidden}
.btn-confirm-delete::before{content:'';position:absolute;top:-50%;left:-100%;width:30%;height:200%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);animation:dangerShimmer 3s ease-in-out infinite}
@keyframes dangerShimmer{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.btn-confirm-delete:hover{background:linear-gradient(135deg,#991b1b 0%,#7f1d1d 100%);transform:translateY(-3px);box-shadow:0 8px 24px rgba(220,38,38,0.4)}
.btn-confirm-delete:active{transform:translateY(-1px)}

/* Social strip and footer */
.social-strip{max-width:var(--max-width);margin:50px auto 24px;padding:30px 20px;text-align:center}
.social-strip h3{font-size:20px;margin-bottom:16px;font-weight:700;color:var(--text-dark)}
.social-icons{display:flex;justify-content:center;gap:16px}
.social-icon{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-dark);font-size:20px;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.social-icon:hover{transform:translateY(-6px) scale(1.12);box-shadow:0 12px 24px rgba(0,0,0,.15)}
.social-icon.instagram:hover{background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);color:#fff;border-color:transparent}
.social-icon.facebook:hover{background:#1877f2;color:#fff;border-color:#1877f2}
.social-icon.youtube:hover{background:#ff0000;color:#fff;border-color:#ff0000}
.social-icon.tiktok:hover{background:#000;color:#fff;border-color:#000}

/* Footer */
footer{position:relative;background:var(--text-dark);color:#fff;margin-top:40px}
footer::after{content:"";position:absolute;top:16px;right:20px;width:44px;height:44px;background-image:url("images/icon/chef-icon.svg");background-size:contain;background-repeat:no-repeat;background-position:center;opacity:1;transition:transform .35s ease,opacity .35s ease;animation:footer-icon-breathe 5.5s ease-in-out infinite;pointer-events:none;z-index:2}
footer::before{content:"";position:absolute;top:8px;right:76px;color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.02em;font-family:Inter,sans-serif;white-space:nowrap;opacity:.12;transform:translateY(0);transition:opacity .35s ease,transform .35s ease;animation:footer-icon-whisper 8s ease-in-out infinite;pointer-events:none;z-index:1}
footer:hover::before{opacity:.3;transform:translateY(-3px)}
@keyframes footer-icon-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.02)}}
@keyframes footer-icon-whisper{0%,100%{opacity:.12;transform:translateY(0)}40%{opacity:.24;transform:translateY(-1px)}80%{opacity:.14;transform:translateY(-2px)}}
@media (max-width:768px){footer::after{top:14px;right:16px;width:36px;height:36px}footer::before{right:64px;top:10px;font-size:11px}}
.footer-content{max-width:var(--max-width);margin:0 auto;padding:50px 20px 25px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
.footer-column h4{font-size:16px;margin-bottom:12px;font-weight:700}
.footer-column a{display:block;color:rgba(255,255,255,.75);text-decoration:none;margin-bottom:10px;font-size:14px;transition:all .3s}
.footer-column a:hover{color:#fff;padding-left:6px}
.footer-brand{grid-column:1}
.footer-logo-wrapper{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.footer-logo-badge{
  width:var(--brand-logo-badge-width);
  aspect-ratio:var(--footer-logo-ratio);
  background:linear-gradient(135deg,#ffffff 0%,#eef7ee 100%);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.2),0 4px 16px rgba(255,255,255,.12);
  transition:all .3s ease;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.42);
  overflow:hidden;
  padding:6px;
}
.footer-logo-badge::before{
  content:"";
  width:100%;
  height:100%;
  background-image:var(--footer-logo-image);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:11px;
}
.footer-logo-badge i{display:none}
.footer-logo-wrapper:hover .footer-logo-badge{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 34px rgba(0,0,0,.24),0 6px 24px rgba(255,255,255,.18);background:linear-gradient(135deg,#fff 0%,#f3faf3 100%)}
.footer-brand-info{display:flex;flex-direction:column;gap:4px}
.footer-brand-title{font-size:24px;font-weight:800;color:#fff;line-height:1;font-family:Poppins,sans-serif;letter-spacing:-.5px;margin:0}
.footer-brand-subtitle{font-size:12px;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1.2px;line-height:1;margin:0}
.footer-description{color:rgba(255,255,255,.85);font-size:15px;line-height:1.7;margin-top:18px;font-family:Inter,sans-serif;font-style:italic;padding:16px 20px;background:rgba(255,255,255,.05);border-left:4px solid var(--primary);border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.contact-info{display:flex;flex-direction:column;gap:13px}
.contact-item{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.7);font-size:14px}
.contact-item i{color:var(--primary);margin-right:8px;font-size:16px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;text-align:center;color:rgba(255,255,255,.7);font-size:14px}
.footer-line{color:rgba(255,255,255,.55)!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:400;text-align:center;background:transparent!important;-webkit-user-select:text;user-select:text;letter-spacing:0.2px}

/* Social icons on touch devices: use explicit colors (no hover) */
@media (max-width:1024px){
  .social-icon.tiktok{background:#000;color:#fff;border-color:#000}
  .social-icon.instagram{background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);color:#fff;border-color:transparent}
  .social-icon.facebook{background:#1877f2;color:#fff;border-color:#1877f2}
  .social-icon.youtube{background:#ff0000;color:#fff;border-color:#ff0000}
  .social-icon:hover{transform:none}
  .social-icon:active{transform:scale(.98)}
}

/* Responsive helpers - Tablet & Small Desktop */
@media (max-width:998px){
  .header-top{grid-template-columns:auto 1fr;gap:12px;padding:14px 20px}
  .product-links{display:none}
  .menu-toggle{display:inline-flex}
  .user-greeting{padding:8px 15px}
  .greeting-text{font-size:12px}
  .auth-link{font-size:12px;padding:5px 12px}
  .footer-content{grid-template-columns:1fr 1fr 1fr;gap:24px 20px;padding:40px 20px 22px}
  .footer-brand{grid-column:1/-1;margin-bottom:8px}
  .footer-column h4{font-size:15px;margin-bottom:10px}
  .footer-column a{font-size:13.5px;margin-bottom:8px}
  .footer-description{font-size:14px;padding:13px 16px;margin-top:14px}
}
@media (max-width:768px){
  .wishlist-panel{width:min(88vw,380px)}
  .cart-drawer{width:min(90vw,392px)}
}
/* Desktop - Show links, hide menu toggle */
@media (min-width:999px){
  .product-links{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;padding:0 10px}
  .menu-toggle, #menuToggle, .mobile-menu-btn{display:inline-flex!important}
  .product-links a{font-size:var(--pl-font-size,14px)}
}

/* Menu appearance breakpoint bumped to 1024px */
@media (max-width:1023px){
  .product-nav .product-links{display:none!important}
  .menu-toggle, #menuToggle, .mobile-menu-btn{display:inline-flex!important}
}
@media (min-width:1024px){
  .product-nav .product-links{
    display:flex!important;
    gap:24px;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow:hidden;
    --pl-font-size:18px;
  }
  .product-nav .product-links a{
    font-weight:700;
    letter-spacing:.5px;
    font-size:var(--pl-font-size,18px);
  }
  .menu-toggle, #menuToggle, .mobile-menu-btn{display:inline-flex!important}
}
@media (max-width:640px){
  .wishlist-panel{width:min(90vw,372px)}
  .account-drawer{width:min(92vw,388px)}
  .cart-drawer{width:min(92vw,384px)}
  .social-icon{width:48px;height:48px;font-size:18px}
  .footer-content{grid-template-columns:1fr 1fr;gap:16px 20px;padding:35px 16px 20px}
  .footer-brand{grid-column:1/-1;margin-bottom:10px}
  .footer-column{margin-bottom:0}
  .footer-column h4{font-size:14px;margin-bottom:8px}
  .footer-column a{font-size:13px;margin-bottom:7px}
  .footer-description{font-size:13px;padding:12px 14px;margin-top:12px;line-height:1.5}
  .contact-bar-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }
  
  .contact-items {
    display: contents; /* Makes children part of the parent grid */
  }
  
  .contact-bar-item {
    font-size: 11px;
  }
  
  /* First two items (phone & email) side by side */
  .contact-items .contact-bar-item:nth-child(1) {
    grid-column: 1;
  }
  
  .contact-items .contact-bar-item:nth-child(2) {
    grid-column: 2;
  }
  
  /* Hours spans both columns */
  .contact-bar-content > .contact-bar-item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .announcement-bar{font-size:12px;padding:8px 10px}
  .header-top{padding:12px 15px;gap:12px}
  .logo{font-size:20px}
  .logo::before{width:var(--brand-logo-chip-width-mobile)}
  .search-bar{ padding: 10px 56px 10px 15px; font-size:13px}
  .search-scope{display:none !important}
  .search-btn{padding:6px 14px;font-size:14px}
  .action-label,.cart-price{display:none}
  .header-actions{gap:12px}
  .header-action{
    min-width:44px;
    min-height:44px;
    padding:6px 4px;
    justify-content:center;
  }
  .action-icon{
    font-size:24px;
    line-height:1;
  }
  .product-nav{padding:15px}
  .breadcrumb{font-size:13px;margin:15px auto}
  .delete-confirmation-modal{padding:30px 25px;max-width:95%}
  .delete-modal-icon{width:70px;height:70px}
  .delete-modal-icon i{font-size:35px}
  .delete-modal-title{font-size:22px}
  .delete-modal-actions{flex-direction:column-reverse}
  .btn-cancel,.btn-confirm-delete{width:100%}
  .footer-logo-badge{width:var(--brand-logo-badge-width-mobile)}
}
@media (max-width:420px){
  .wishlist-panel{width:calc(100vw - 14px)}
  .account-drawer{width:calc(100vw - 10px)}
  .cart-drawer{width:calc(100vw - 14px)}
  .header-actions{gap:8px}
  .header-action{
    min-width:42px;
    min-height:42px;
    padding:4px 2px;
  }
  .action-icon{font-size:22px}
}
@media (max-width:480px){
  .cart-drawer{width:calc(100vw - 14px)}
}

/* ===== Global product nav + menu styling (wide screens & drawer upgrade) ===== */
.product-nav{
  overflow-x:hidden !important;
}

@media (max-width:1023px){
  .product-nav .product-links{display:none !important;}
  .product-nav .menu-toggle{display:inline-flex !important;}
}

@media (min-width:1024px){
  .product-nav .product-links{
    display:flex !important;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow:hidden !important;
    gap:clamp(10px,1vw,18px) !important;
    padding:0 16px;
    --pl-font-size:clamp(12px,0.55vw + 6px,16px);
  }
  @supports (scrollbar-width: none) {
    .product-nav .product-links {
      scrollbar-width: none;
    }
  }
  .product-nav .product-links::-webkit-scrollbar{display:none}
  .product-nav .product-links a{
    font-size:var(--pl-font-size) !important;
    padding:6px 4px !important;
    letter-spacing:.2px !important;
  }
  .product-nav .menu-toggle{display:inline-flex !important;}
  #menuToggle, .menu-toggle, .mobile-menu-btn{display:inline-flex !important;}
}

.product-nav .menu-toggle{
  border:1px solid rgba(22,163,74,.25) !important;
  background:linear-gradient(135deg,#ffffff,#f1f5f9) !important;
  color:var(--text-dark) !important;
  font-weight:700 !important;
  letter-spacing:.4px;
  padding:10px 20px !important;
  border-radius:999px !important;
  box-shadow:0 14px 26px rgba(15,23,42,.12) !important;
  position:relative;
}
.product-nav .menu-toggle i{
  color:var(--primary);
}
.product-nav .menu-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 32px rgba(15,23,42,.16) !important;
  border-color:rgba(22,163,74,.45) !important;
}
.product-nav .menu-toggle:active{
  transform:translateY(0);
  box-shadow:0 10px 20px rgba(15,23,42,.14) !important;
}

.side-menu{
  background:linear-gradient(180deg,#ffffff 0%,#f5f7fb 100%) !important;
  border-right:1px solid #e2e8f0 !important;
  box-shadow:18px 0 50px rgba(15,23,42,.18) !important;
  overflow:hidden;
}
.side-menu::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg,#22c55e,#16a34a);
  opacity:.7;
}
.menu-header{
  background:rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e2e8f0 !important;
  padding:18px 20px !important;
  position:sticky;
  top:0;
  z-index:2;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.menu-header h2{
  font-family:'Playfair Display',serif;
  letter-spacing:.4px;
}
.close-menu{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  color:var(--text-dark) !important;
  box-shadow:0 10px 18px rgba(15,23,42,.12) !important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.close-menu:hover{
  background:var(--primary) !important;
  color:#fff !important;
  transform:rotate(90deg) scale(1.03);
  box-shadow:0 14px 24px rgba(22,163,74,.28) !important;
}
.menu-links{
  padding:18px 18px 26px !important;
  gap:10px !important;
}
.side-menu .menu-links a{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px 16px;
  font-weight:600;
  color:var(--text-dark);
  box-shadow:0 10px 18px rgba(15,23,42,.06);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.side-menu .menu-links a:hover{
  background:#f8fafc;
  color:var(--primary);
  transform:translateX(4px);
  box-shadow:0 14px 24px rgba(15,23,42,.1);
}
.side-menu .menu-links a::before{
  content:'' !important;
  display:none !important;
}

/* ===== Quantity buttons: calm, herbal, accessible - INSTANT RESPONSE ===== */
.qty-control {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* Touch targets and gentle herbal style - NO DELAY */
.qty-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: none;
  background: white;
  color: var(--text-dark);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* subtle herbal hover/focus - INSTANT */
.qty-btn:hover,
.qty-btn:focus {
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(22,163,74,0.08);
  color: var(--primary);
  background: linear-gradient(180deg, rgba(22,163,74,0.03), rgba(22,163,74,0.01));
}

.qty-btn:active {
  transform: scale(.98);
  transition: transform .05s ease;
}

/* keyboard focus visible */
.qty-btn:focus-visible {
  outline: 3px solid rgba(22,163,74,0.13);
  outline-offset: 2px;
}

/* keep input compact but readable */
.qty-input {
  min-width: 64px;
  padding: 0 8px;
  font-weight: 700;
  font-size: 16px;
  height: 48px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg,#fff,#fbfdfb);
}

/* mobile specific: slightly larger touch targets */
@media (max-width: 640px) {
  .qty-btn { min-width: 52px; min-height: 52px; font-size: 20px; }
  .qty-input { min-width: 72px; font-size: 16px; height: 52px; }
}

/* Desktop: keep side menu + menu toggle visible for consistent nav */
@media (min-width:1025px){
  .side-menu{display:block !important;}
  .menu-toggle{display:inline-flex !important;}
  #menuToggle, .mobile-menu-btn{display:inline-flex !important;}
}
/* Enhanced Account Avatar & Fields */
.account-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.account-avatar i {
  font-size: 40px;
  color: white;
}

.account-field {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.account-field:last-of-type {
  border-bottom: none;
}

.account-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.account-field label i {
  color: var(--primary);
  font-size: 14px;
}

.field-value {
  font-size: 15px;
  color: var(--text-dark);
  font-weight: 500;
  padding: 10px 12px;
  background: var(--bg-light);
  border-radius: 8px;
}

/* Shimmer Loading Effect */
.field-skeleton {
  height: 44px;
  border-radius: 10px;
  background: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.field-skeleton.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.6), 
    transparent);
  animation: shimmer 1.4s infinite;
}
/* Blinking shimmer effect - FIXED */
.field-skeleton {
  animation: blinkShimmer 1.5s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent; /* ✅ Hide "Loading..." text */
}

.field-skeleton::before {
  content: ''; /* ✅ Creates the shimmer bar */
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    #d1d5db 0%, 
    #f3f4f6 50%, 
    #d1d5db 100%);
  border-radius: 10px;
}

@keyframes blinkShimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Always show a sharp menu toggle and hide product links globally */
.menu-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  min-width: 42px;
  min-height: 42px;
  font-weight: 800;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(59,130,246,.92));
  color: #fff !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  font-family: inherit;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  box-shadow: 0 8px 24px rgba(15,23,42,.35), 0 0 0 1px rgba(99,179,255,.15);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.menu-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.9);
  background: linear-gradient(145deg, rgba(15,23,42,.95), rgba(37,99,235,.98), rgba(14,165,233,.95));
  box-shadow: 0 10px 28px rgba(15,23,42,.45), 0 0 0 2px rgba(59,130,246,.25);
}

.menu-toggle:focus-visible {
  outline: 2px solid rgba(56,189,248,.9);
  outline-offset: 2px;
}

.product-links {
  display: none !important;
}

/* Keep menu toggle visible in all breakpoints */
@media (max-width: 1024px), (min-width: 1025px) {
  .menu-toggle {
    display: inline-flex !important;
  }
  .product-links {
    display: none !important;
  }
}

/* Hide legacy product navigation links if still present */
.product-nav .product-links, .product-nav .menu-toggle + .product-links {
  display: none !important;
}

/* Search clear button */
/* Search clear button - FIXED */
.search-clear {
  position: absolute;
  right: 160px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-gray);
  transition: all 0.3s;
  z-index: 10;
  font-size: 12px;
}

.search-clear:hover {
  background: var(--border);
  color: var(--text-dark);
}

.search-clear.visible {
  display: flex;
}

@media (max-width: 640px) {
  .search-clear {
    right: 120px;
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}



/* Serving size */
.serving-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-light);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 12px;
}

.serving-size i {
  color: var(--primary);
  font-size: 16px;
}
/* small utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}



/* Custom Dropdown List */
.custom-select-list {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 140px;
  max-height: 240px;
  overflow: auto;
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  z-index: calc(var(--z-dropdown) + 1);
}
@supports (scrollbar-width: thin) {
  .custom-select-list {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
  }
}

.custom-select-list::-webkit-scrollbar {
  width: 6px;
}

.custom-select-list::-webkit-scrollbar-track {
  background: transparent;
}

.custom-select-list::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 999px;
}

.custom-select-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

.custom-select-wrapper.open .custom-select-list { 
  display: block; 
}

.custom-select-list li {
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

.custom-select-list li:hover {
  background: var(--bg-light);
  color: var(--primary);
  padding-left: 20px;
}

.custom-select-list li.selected {
  background: var(--bg-light);
  color: var(--primary);
  font-weight: 600;
  position: relative;
  padding-right: 32px;
}

.custom-select-list li.selected::after {
  content: '✓';
  position: absolute;
  right: 12px;
  color: var(--primary);
  font-weight: 700;
  font-size: 16px;
}

.custom-select-list {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  max-height: 280px;
  overflow: auto;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: calc(var(--z-dropdown) + 51) !important;

  transition: transform 0.3s;
}

.custom-select-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  min-width: 92px;
  transition: all 0.2s;
}

.custom-select-display:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.custom-select-wrapper.open .custom-select-caret {
  transform: rotate(180deg);
  opacity: 1;
}





/* Override conflicting search styles for wishlist page */
.search-container:not(.search-container[class*="wishlist"]) .search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* Fix for wishlist page search container */
.wishlist-page .search-container,
.search-container.wishlist-search {
  display: flex !important;
  align-items: stretch !important;
}

.wishlist-page .search-btn,
.search-btn.wishlist-search-btn {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
}












/* Delete Modal Mobile Fixes */
@media (max-width: 640px) {
  .delete-confirmation-modal {
    padding: 20px 18px;
    max-width: 90%;
    max-height: 85vh;
    overflow-y: auto;
  }
  
  .delete-modal-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }
  
  .delete-modal-icon i {
    font-size: 28px;
  }
  
  .delete-modal-title {
    font-size: 18px;
    margin-bottom: 15px;
  }
  
  .delete-modal-warning {
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .warning-text {
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .warning-list {
    margin: 10px 0;
  }
  
  .warning-list li {
    padding: 5px 0;
    font-size: 12px;
  }
  
  .warning-list li i {
    font-size: 14px;
  }
  
  .warning-note {
    margin-top: 10px;
    font-size: 13px;
  }
  
  .delete-modal-actions {
    margin-top: 15px;
    gap: 10px;
  }
  
  .btn-cancel,
  .btn-confirm-delete {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* Extra small screens */
@media (max-width: 400px) {
  .delete-confirmation-modal {
    padding: 18px 15px;
    max-height: 90vh;
  }
  
  .delete-modal-title {
    font-size: 16px;
  }
  .custom-select-display{min-width:55px;padding:4px 3px;font-size:10px}
  .search-bar{padding:0 54px 0 6px;font-size:11px}
  .search-clear{right:44px;width:18px;height:18px;font-size:9px}
  .search-btn{padding:0 8px;font-size:12px;min-width:36px}
  
  .warning-list li {
    font-size: 11px;
  }
}

/* ===== RESPONSIVE SEARCH CONTAINER ===== */
/* Tablet and smaller screens - first shrink */
@media (max-width: 640px) {
  .custom-select-display {
    min-width: 70px !important;
  }
  
  .search-bar {
    padding: 0 40px 0 8px !important;
    font-size: 13px !important;
  }
  
  .search-btn {
    padding: 0 16px !important;
    font-size: 14px !important;
  }
}

/* Mobile - more aggressive shrink */
@media (max-width: 530px) {
  .custom-select-display {
    min-width: 60px !important;
  }
  
  .search-bar {
    padding: 0 40px 0 6px !important;
    font-size: 12px !important;
  }
  
  .search-btn {
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  
  .search-clear {
    width: 24px !important;
    height: 24px !important;
    right: 54px !important;
    font-size: 11px !important;
  }
}

/* Extra small screens - maximum shrink */
@media (max-width: 400px) {
  .custom-select-display {
    min-width: 50px !important;
  }
  
  .search-bar {
    padding: 0 36px 0 4px !important;
    font-size: 11px !important;
  }
  
  .search-btn {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* Reconnect overlay (global) */
.reconnect-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,16,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:var(--z-reconnect-overlay);
}
.reconnect-overlay.active{
  opacity:1;
  visibility:visible;
}
.reconnect-card{
  background:#fff;
  border-radius:18px;
  padding:32px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  text-align:center;
  max-width:420px;
  width:90%;
  border:2px solid var(--border);
}
.reconnect-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--text-dark);
  margin:2px 0 12px;
  letter-spacing:.4px;
}
.reconnect-brand i{
  color:var(--primary);
  animation:reconnectPulse 1.8s ease-in-out infinite;
}
.reconnect-card.is-error{
  border-color:#dc2626;
}
.reconnect-spinner{
  width:56px;
  height:56px;
  border-radius:50%;
  border:4px solid rgba(22,163,74,.25);
  border-top-color:var(--primary);
  margin:0 auto 16px;
  animation:spin 1s linear infinite;
}
.reconnect-title{
  margin:0 0 8px;
  font-size:20px;
  font-weight:800;
  color:var(--text-dark);
}
.reconnect-message{
  margin:0;
  color:var(--text-gray);
  font-size:14px;
  line-height:1.5;
}
.reconnect-progress{
  margin:16px auto 0;
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(22,163,74,.12);
  overflow:hidden;
}
.reconnect-progress span{
  display:block;
  width:55%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(22,163,74,0), rgba(22,163,74,.35), var(--primary), rgba(22,163,74,.35), rgba(22,163,74,0));
  animation:reconnectBar 2.6s cubic-bezier(.45,0,.25,1) infinite alternate;
  will-change:transform;
  box-shadow:0 0 10px rgba(22,163,74,.25);
}
.reconnect-card.is-error .reconnect-progress{
  background:rgba(220,38,38,.12);
}
.reconnect-card.is-error .reconnect-progress span{
  background:linear-gradient(90deg, rgba(248,113,113,0), rgba(248,113,113,.35), #ef4444, rgba(248,113,113,.35), rgba(248,113,113,0));
  box-shadow:0 0 10px rgba(239,68,68,.25);
}
.reconnect-actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
}
.reconnect-retry{
  padding:10px 18px;
  border-radius:10px;
  border:none;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  display:none;
}
.reconnect-retry:hover{background:var(--primary-dark)}

body.reconnect-lock{
  overflow:hidden;
  cursor:wait;
}
body.reconnect-lock > *:not(.reconnect-overlay){
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}

/* Uploading overlay (account updates) */
.upload-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,16,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:var(--z-upload-overlay);
}
.upload-overlay.active{
  opacity:1;
  visibility:visible;
}
.upload-card{
  background:#fff;
  border-radius:18px;
  padding:32px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  text-align:center;
  max-width:420px;
  width:90%;
  border:2px solid var(--border);
}
.upload-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--text-dark);
  margin:2px 0 12px;
  letter-spacing:.4px;
}
.upload-brand i{
  color:var(--primary);
  animation:reconnectPulse 1.8s ease-in-out infinite;
}
.upload-spinner{
  width:56px;
  height:56px;
  border-radius:50%;
  border:4px solid rgba(22,163,74,.25);
  border-top-color:var(--primary);
  margin:0 auto 16px;
  animation:spin 1s linear infinite;
}
.upload-title{
  margin:0 0 8px;
  font-size:20px;
  font-weight:800;
  color:var(--text-dark);
}
.upload-message{
  margin:0;
  color:var(--text-gray);
  font-size:14px;
  line-height:1.5;
}
.upload-progress{
  margin:16px auto 0;
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(22,163,74,.12);
  overflow:hidden;
}
.upload-progress span{
  display:block;
  width:55%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(22,163,74,0), rgba(22,163,74,.35), var(--primary), rgba(22,163,74,.35), rgba(22,163,74,0));
  animation:reconnectBar 2.6s cubic-bezier(.45,0,.25,1) infinite alternate;
  will-change:transform;
  box-shadow:0 0 10px rgba(22,163,74,.25);
}
body.upload-lock{
  overflow:hidden;
  cursor:wait;
}
body.upload-lock > *:not(.upload-overlay){
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}

/* Server heartbeat indicator */
.server-heartbeat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:var(--text-dark);
  line-height:1;
  margin-left:6px;
  white-space:nowrap;
}
.server-heartbeat .heartbeat-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 0 rgba(148,163,184,.35);
  animation:heartbeatGlow 1.8s ease-in-out infinite;
}
.server-heartbeat .heartbeat-icon{
  color:#94a3b8;
  font-size:12px;
}
.server-heartbeat[data-status="online"] .heartbeat-dot,
.server-heartbeat[data-status="online"] .heartbeat-icon{
  background:var(--primary);
  color:var(--primary);
}
.server-heartbeat[data-status="online"] .heartbeat-dot{
  box-shadow:0 0 0 6px rgba(22,163,74,.12);
}
.server-heartbeat[data-status="offline"] .heartbeat-dot,
.server-heartbeat[data-status="offline"] .heartbeat-icon{
  background:#ef4444;
  color:#ef4444;
}
.server-heartbeat[data-status="checking"] .heartbeat-dot,
.server-heartbeat[data-status="checking"] .heartbeat-icon{
  background:#f59e0b;
  color:#f59e0b;
}
.server-heartbeat .heartbeat-label{letter-spacing:.2px}

@keyframes heartbeatGlow{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.15);opacity:1}
}

@media (max-width:720px){
  .server-heartbeat{padding:6px 8px;font-size:10px}
  .server-heartbeat .heartbeat-label{display:inline}
}

@keyframes reconnectBar{
  0%{transform:translateX(-70%)}
  100%{transform:translateX(70%)}
}
@keyframes reconnectPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

body.gift-locker-open {
  overflow: hidden;
}

.chef-gift-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff6da 0%, #f4c95d 100%);
  color: #5e4300;
  border: 1px solid rgba(183, 134, 11, 0.28);
  box-shadow: 0 10px 20px rgba(184, 142, 25, 0.18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  z-index: 3;
}

.gift-locker-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-auth-dialog) + 20);
}

.gift-locker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(11, 24, 16, 0.28), rgba(11, 24, 16, 0.5));
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.gift-locker-panel {
  position: absolute;
  top: 18px;
  right: 18px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    radial-gradient(circle at top right, rgba(255, 236, 186, 0.7), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 252, 245, 0.96));
  box-shadow: 0 28px 68px rgba(15, 23, 42, 0.18);
}

.gift-locker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(33, 63, 36, 0.08);
}

.gift-locker-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #8c6200;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gift-locker-title {
  margin: 0;
  color: #17351f;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 1;
}

.gift-locker-subtitle {
  margin: 8px 0 0;
  color: #5b6756;
  font-size: 13px;
  line-height: 1.55;
}

.gift-locker-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gift-locker-refresh,
.gift-locker-close {
  border: 1px solid rgba(28, 80, 40, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: #244c2d;
  border-radius: 14px;
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.gift-locker-close {
  min-width: 40px;
  padding: 0;
  justify-content: center;
}

.gift-locker-refresh:hover,
.gift-locker-close:hover,
.gift-action:hover,
.gift-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(16, 30, 20, 0.09);
}

.gift-locker-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 12px;
  display: grid;
  gap: 14px;
}

.gift-locker-preview,
.gift-locker-footer {
  padding: 0 18px 18px;
}

.gift-locker-footer-note {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(244, 248, 236, 0.88);
  border: 1px solid rgba(33, 63, 36, 0.08);
  color: #405443;
  font-size: 12px;
  line-height: 1.5;
}

.gift-locker-banner,
.gift-locker-state,
.gift-guest-card,
.gift-sequence-banner {
  border-radius: 22px;
  border: 1px solid rgba(33, 63, 36, 0.08);
  background: rgba(255, 255, 255, 0.86);
  padding: 16px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.gift-locker-state {
  display: grid;
  gap: 10px;
}

.gift-locker-state--error {
  border-color: rgba(185, 28, 28, 0.18);
  background: linear-gradient(180deg, rgba(255, 244, 244, 0.96), rgba(255, 255, 255, 0.96));
}

.gift-guest-card strong,
.gift-sequence-title,
.gift-reminder-card strong {
  color: #17351f;
  font-size: 16px;
}

.gift-guest-card p,
.gift-sequence-copy,
.gift-reminder-card p {
  margin: 8px 0 0;
  color: #5b6756;
  font-size: 13px;
  line-height: 1.55;
}

.gift-guest-note,
.gift-preview-note,
.gift-sequence-warning {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 248, 227, 0.92), rgba(255, 239, 192, 0.88));
  border: 1px solid rgba(201, 153, 43, 0.18);
  color: #7c5808;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.gift-sequence-head,
.gift-sequence-meta,
.gift-reminder-actions,
.gift-preview-actions,
.gift-pill-row,
.gift-meta-row,
.gift-worth-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gift-sequence-head {
  align-items: center;
  justify-content: space-between;
}

.gift-sequence-kicker {
  color: #8c6200;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gift-sequence-chip,
.gift-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(237, 246, 232, 0.95);
  border: 1px solid rgba(32, 93, 38, 0.12);
  color: #1f5b27;
  font-size: 11px;
  font-weight: 800;
}

.gift-sequence-chip--ok,
.gift-meta-chip--daily {
  background: linear-gradient(135deg, rgba(231, 249, 221, 0.98), rgba(214, 243, 203, 0.96));
}

.gift-sequence-chip--alert,
.gift-meta-chip--expiring {
  background: linear-gradient(135deg, rgba(255, 243, 220, 0.98), rgba(255, 231, 185, 0.96));
  border-color: rgba(191, 117, 10, 0.18);
  color: #8a5c09;
}

.gift-locker-section {
  display: grid;
  gap: 10px;
}

.gift-locker-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gift-locker-section-title {
  margin: 0;
  color: #17351f;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.gift-locker-empty {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(248, 250, 245, 0.88);
  border: 1px dashed rgba(31, 86, 37, 0.16);
  color: #667563;
  font-size: 13px;
  line-height: 1.5;
}

.gift-locker-stack {
  display: grid;
  gap: 10px;
}

.gift-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(30, 81, 36, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 245, 0.96));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.gift-card:hover,
.gift-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(212, 169, 56, 0.28);
  box-shadow: 0 20px 32px rgba(15, 23, 42, 0.1);
  outline: none;
}

.gift-card-media {
  width: 82px;
  height: 82px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #f7faf0, #eef6e7);
  border: 1px solid rgba(30, 81, 36, 0.08);
}

.gift-card-media img,
.gift-preview-hero img,
.gift-reminder-line-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gift-card-body,
.gift-preview-copy {
  min-width: 0;
}

.gift-card-title,
.gift-preview-title {
  margin: 0;
  color: #17351f;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.gift-card-copy,
.gift-card-detail,
.gift-preview-text {
  margin: 7px 0 0;
  color: #53624f;
  font-size: 13px;
  line-height: 1.5;
}

.gift-card-detail,
.gift-preview-text--muted {
  color: #6d7868;
}

.gift-pill {
  border: 1px solid rgba(190, 150, 41, 0.18);
  background: linear-gradient(135deg, rgba(255, 250, 236, 0.98), rgba(255, 241, 208, 0.94));
  color: #6d4c07;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.gift-worth-row {
  align-items: center;
  margin-top: 10px;
}

.gift-worth-label,
.gift-card-meta,
.gift-card-expiry,
.gift-card-status,
.gift-preview-expiry,
.gift-preview-eligibility {
  color: #425345;
  font-size: 12px;
  line-height: 1.5;
}

.gift-worth-label {
  font-size: 13px;
  font-weight: 800;
  color: #1f5b27;
}

.gift-worth-free {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(233, 250, 223, 0.98), rgba(213, 246, 199, 0.96));
  border: 1px solid rgba(48, 131, 60, 0.16);
  color: #176224;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.gift-card-status {
  margin-top: 8px;
  font-weight: 700;
  color: #76520a;
}

.gift-preview-card {
  margin-top: 4px;
  border-radius: 24px;
  border: 1px solid rgba(30, 81, 36, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 248, 0.96));
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.gift-preview-hero {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.gift-preview-hero img {
  width: 118px;
  height: 118px;
  border-radius: 22px;
  border: 1px solid rgba(30, 81, 36, 0.08);
  background: linear-gradient(135deg, #f7faf0, #eef6e7);
}

.gift-preview-eligibility {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(244, 248, 236, 0.88);
  border: 1px solid rgba(31, 86, 37, 0.08);
}

.gift-preview-actions {
  padding: 0 16px 16px;
}

.gift-action {
  border: 1px solid rgba(28, 80, 40, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: #244c2d;
  border-radius: 16px;
  min-height: 42px;
  padding: 0 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.gift-action--primary {
  background: linear-gradient(135deg, #1d5f32 0%, #2f7d32 55%, #4d9a4c 100%);
  border-color: rgba(28, 80, 40, 0.28);
  color: #f8fbf4;
  box-shadow: 0 14px 26px rgba(33, 93, 38, 0.2);
}

.gift-action--ghost {
  background: rgba(250, 252, 247, 0.96);
}

.gift-action.is-disabled,
.gift-action:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.gift-reminder-slot {
  margin-bottom: 12px;
}

.gift-reminder-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 252, 244, 0.95));
  border: 1px solid rgba(31, 86, 37, 0.12);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.gift-reminder-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(244, 248, 236, 0.88);
  border: 1px solid rgba(31, 86, 37, 0.08);
}

.gift-reminder-line-media {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #f7faf0, #eef6e7);
}

.gift-reminder-line-copy {
  min-width: 0;
}

.gift-reminder-line-copy strong {
  display: block;
  color: #17351f;
  font-size: 13px;
  line-height: 1.25;
}

.gift-reminder-line-copy p {
  margin: 4px 0 0;
  color: #5b6756;
  font-size: 12px;
  line-height: 1.45;
}

.gift-reminder-line-worth {
  display: inline-block;
  margin-top: 6px;
  color: #1f5b27;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 720px) {
  .gift-locker-panel {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 20px);
    border-radius: 24px;
  }

  .gift-locker-head,
  .gift-locker-body,
  .gift-locker-preview,
  .gift-locker-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .gift-locker-head {
    padding-top: 14px;
  }

  .gift-locker-title {
    font-size: 24px;
  }

  .gift-card,
  .gift-preview-hero {
    grid-template-columns: 1fr;
  }

  .gift-card-media,
  .gift-preview-hero img {
    width: 100%;
    height: 176px;
  }

  .gift-preview-actions,
  .gift-reminder-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gift-action,
  .gift-locker-refresh,
  .gift-locker-close {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-locker-panel,
  .gift-card,
  .gift-action,
  .gift-pill {
    transition: none !important;
  }
}
.server-check-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:var(--z-critical);
}
.server-check-overlay.active{
  opacity:1;
  pointer-events:auto;
}
.server-check-card{
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 26px;
  width:min(92vw,420px);
  text-align:center;
  box-shadow:0 20px 50px rgba(15,23,42,.25);
  transform:translateY(8px) scale(.98);
  transition:transform .25s ease;
}
.server-check-overlay.active .server-check-card{
  transform:translateY(0) scale(1);
}
.server-check-spinner{
  width:44px;
  height:44px;
  margin:0 auto 12px;
  border-radius:50%;
  border:3px solid rgba(22,163,74,.25);
  border-top-color:var(--primary);
  animation:serverCheckSpin .9s linear infinite;
}
.server-check-title{
  font-size:17px;
  font-weight:700;
  color:var(--text-dark);
  margin:0 0 4px 0;
}
.server-check-message{
  font-size:14px;
  color:var(--text-gray);
  margin:0;
}
body.server-check-lock{
  overflow:hidden;
}
@keyframes serverCheckSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ===== FINAL NAV + MENU OVERRIDES (single-line, no clipping, 1024px breakpoint) ===== */
.product-nav{overflow:visible !important;}

@media (max-width:1023px){
  .product-nav .product-links{display:none !important;overflow:hidden !important;}
  .product-nav .menu-toggle{display:inline-flex !important;}
  #menuToggle, .menu-toggle, .mobile-menu-btn{display:inline-flex !important;align-items:center;}
}

@media (min-width:1024px){
  .product-nav .product-links, .product-links {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .product-nav .menu-toggle, #menuToggle, .mobile-menu-btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

.product-nav .menu-toggle, #menuToggle, .menu-toggle, .mobile-menu-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #0ea5e9 !important;
  background:#0f172a !important;
  color:#fff !important;
  font-weight:800 !important;
  letter-spacing:.35px !important;
  padding:10px 12px !important;
  border-radius:999px !important;
  box-shadow:0 10px 32px rgba(15,23,42,.35) !important;
  text-transform:uppercase !important;
  font-size:12px !important;
  transition:all .2s ease !important;
}
.product-nav .menu-toggle:hover, #menuToggle:hover, .menu-toggle:hover, .mobile-menu-btn:hover {
  transform:translateY(-1px) scale(1.02);
  border-color:#38bdf8 !important;
  background:linear-gradient(135deg, #111827 0%, #1d4ed8 60%, #0ea5e9 100%) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.45) !important;
}
.product-nav .menu-toggle i, #menuToggle i, .menu-toggle i, .mobile-menu-btn i {
  color:#fff !important;
}
.product-nav .menu-toggle span, #menuToggle span, .menu-toggle span, .mobile-menu-btn span {
  color:#fff !important;
}
button.menu-toggle, #menuToggle, .menu-toggle, .mobile-menu-btn {
  background: linear-gradient(120deg, #ebf5e9 0%, #d9efde 55%, #b3d9bb 100%) !important;
  color:#1f3b1f !important;
  border:2px solid #7ca57d !important;
  box-shadow:0 6px 20px rgba(28,66,30,.2) !important;
  opacity:1 !important;
  filter:contrast(1.04) saturate(1.09) !important;
  border-radius: 28px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .2px !important;
}
button.menu-toggle:hover, #menuToggle:hover, .menu-toggle:hover, .mobile-menu-btn:hover {
  background: linear-gradient(120deg, #edf7ed 0%, #d3ebd4 50%, #abd4a7 100%) !important;
  border-color:#6f9d6d !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 10px 26px rgba(31,67,35,.28) !important;
}
button.menu-toggle:active, #menuToggle:active, .menu-toggle:active, .mobile-menu-btn:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 6px 18px rgba(27,55,27,.18) !important;
}
button.menu-toggle i, #menuToggle i, .menu-toggle i, .mobile-menu-btn i {
  color: #2d5d2d !important;
}
button.menu-toggle span, #menuToggle span, .menu-toggle span, .mobile-menu-btn span {
  color: #1f3b1f !important;
}

.product-nav .product-links, .product-links { display:none !important; }


.side-menu{
  background:linear-gradient(180deg,#ffffff 0%,#f5f7fb 100%) !important;
  border-right:1px solid #e2e8f0 !important;
  box-shadow:18px 0 50px rgba(15,23,42,.18) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
.side-menu::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg,#22c55e,#16a34a);
  opacity:.7;
}
.menu-header{
  background:rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e2e8f0 !important;
  padding:18px 20px !important;
  position:sticky;
  top:0;
  z-index:2;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.menu-header h2{
  font-family:'Playfair Display',serif !important;
  letter-spacing:.4px;
}
.close-menu{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  color:var(--text-dark) !important;
  box-shadow:0 10px 18px rgba(15,23,42,.12) !important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.close-menu:hover{
  background:var(--primary) !important;
  color:#fff !important;
  transform:rotate(90deg) scale(1.03);
  box-shadow:0 14px 24px rgba(22,163,74,.28) !important;
}
.side-menu .menu-links{
  padding:12px 16px 20px !important;
  gap:2px !important;
}
.side-menu .menu-links a{
  position:relative;
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid rgba(148,163,184,0.25) !important;
  border-radius:0 !important;
  padding:12px 6px !important;
  font-weight:600 !important;
  color:var(--text-dark) !important;
  letter-spacing:.2px;
  transition:color .2s ease,background .2s ease;
}
.side-menu .menu-links a::before{
  content:'' !important;
  display:none !important;
}
.side-menu .menu-links a:hover{
  background:rgba(22,163,74,0.06) !important;
  color:var(--primary) !important;
}

/* Remove blur from menu overlay (keep dim only) */
.menu-overlay{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  background:rgba(15,23,42,.4) !important;
}
.menu-overlay.active{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

/* ===== Global Search Bar Stability ===== */
.header-top .search-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.search-container {
  width: 100%;
  max-width: 720px;
  min-width: 0;
}

.custom-select-wrapper {
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
}

.custom-select-display {
  width: 100%;
  justify-content: space-between;
}

.custom-select-label {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-bar {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1024px) {
  .header-top .search-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 640px) {
  .search-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Global always-visible sharp menu toggle override */
#menuToggle, .menu-toggle, .mobile-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  border-radius: 28px !important;
  border: 2px solid #7ca57d !important;
  background: linear-gradient(135deg, #f0f7ef 0%, #deebd8 60%, #c0d7b7 100%) !important;
  color: #1f3b1f !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .15px !important;
  box-shadow: 0 10px 24px rgba(28,66,30,.2) !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .2s ease, background .25s ease !important;
  z-index: var(--z-header) !important;
}

@media (min-width: 1024px) {
  #menuToggle, .menu-toggle, .mobile-menu-btn {
    padding: 14px 26px !important;
    font-size: 16px !important;
    border-radius: 32px !important;
    border-width: 2px !important;
    letter-spacing: .25px !important;
  }
}

#menuToggle, .menu-toggle, .mobile-menu-btn:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #e8f4e3 0%, #cfe5c6 60%, #a7cb9c 100%) !important;
  border-color: #6d9a69 !important;
  box-shadow: 0 12px 26px rgba(21,59,27,.22) !important;
}

#menuToggle, .menu-toggle, .mobile-menu-btn:focus-visible {
  outline: 2px solid rgba(81, 130, 75, 0.9) !important;
  outline-offset: 2px !important;
}


#menuToggle { position: relative !important; }

/* Ensure side menu and overlay use the right default states */
#sideMenu { transform: translateX(-100%) !important; transition: transform .2s ease !important; }
#sideMenu.active { transform: translateX(0) !important; }
#menuOverlay { opacity: 0 !important; visibility: hidden !important; transition: opacity .2s ease !important; }
#menuOverlay.active { opacity: .8 !important; visibility: visible !important; }

.custom-select-wrapper {
    flex: 0 0 78px !important;
    width: 78px !important;
    min-width: 78px !important;
  }

  .custom-select-display {
    min-width: 0 !important;
    padding: 6px 8px !important;
  }

.search-bar {
    min-width: 0 !important;
    padding: 0 58px 0 10px !important;
  }

body .wishlist-panel .btn-view-full-wishlist,
body .cart-drawer .btn-view-full-cart{
  min-height:52px;
  padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(135deg,#1c8a4d 0%,#24a95d 100%);
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 14px 28px rgba(22,163,74,.20);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .2s ease;
}
body .wishlist-panel .btn-view-full-wishlist:hover,
body .cart-drawer .btn-view-full-cart:hover{
  background:linear-gradient(135deg,#187642 0%,#209754 100%);
  transform:translateY(-1px);
  box-shadow:0 18px 32px rgba(22,163,74,.24);
}
body .wishlist-panel .btn-view-full-wishlist:active,
body .cart-drawer .btn-view-full-cart:active{
  transform:translateY(0);
}

body .account-drawer .account-edit-btn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  color:#64748b;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
body .account-drawer .account-edit-btn:hover{
  border-color:rgba(22,163,74,.26);
  color:var(--primary);
  background:linear-gradient(180deg,#ffffff 0%,#eef7ec 100%);
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(15,23,42,.10);
}

body .account-drawer .account-quick-btn{
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.20);
  background:linear-gradient(180deg,#ffffff 0%,#f9fbf8 100%);
  color:#334155;
  box-shadow:0 10px 20px rgba(15,23,42,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
body .account-drawer .account-quick-btn i{
  color:var(--primary);
}
body .account-drawer .account-quick-btn:hover{
  border-color:rgba(22,163,74,.24);
  color:#166534;
  background:linear-gradient(180deg,#ffffff 0%,#f1f7ee 100%);
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(15,23,42,.08);
}

body .delete-confirmation-modal .btn-cancel,
body .delete-confirmation-modal .btn-confirm-delete{
  min-height:52px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
body .delete-confirmation-modal .btn-cancel{
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  color:#334155;
  box-shadow:0 10px 18px rgba(15,23,42,.05);
}
body .delete-confirmation-modal .btn-cancel:hover{
  border-color:rgba(22,163,74,.22);
  color:#1f2937;
  background:linear-gradient(180deg,#ffffff 0%,#eef5ef 100%);
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(15,23,42,.08);
}
body .delete-confirmation-modal .btn-confirm-delete{
  background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);
  box-shadow:0 14px 24px rgba(220,38,38,.20);
}
body .delete-confirmation-modal .btn-confirm-delete:hover{
  background:linear-gradient(135deg,#c81e1e 0%,#991b1b 100%);
  transform:translateY(-1px);
  box-shadow:0 18px 30px rgba(220,38,38,.26);
}

@media (max-width:640px){
  body .product-nav .menu-toggle,
  body .product-nav #menuToggle,
  body .product-nav .mobile-menu-btn{
    min-height:44px !important;
    padding:10px 16px !important;
    font-size:13px !important;
  }

  body .wishlist-panel .btn-view-full-wishlist,
  body .cart-drawer .btn-view-full-cart,
  body .account-drawer .account-quick-btn,
  body .delete-confirmation-modal .btn-cancel,
  body .delete-confirmation-modal .btn-confirm-delete{
    min-height:48px;
  }
}

/* ===== Final Safe Body Button Polish (header-safe) ===== */
body .product-nav .product-links a,
body .side-menu .menu-links a,
body .wishlist-panel .btn-add-mini,
body .wishlist-panel .remove-item-btn,
body .wishlist-panel .close-panel,
body .cart-drawer .close-panel,
body .account-drawer .close-drawer,
body .account-drawer .btn-account-action,
body .logout-confirm-modal .btn-cancel-logout{
  -webkit-tap-highlight-color: transparent;
}

body .product-nav .product-links a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px !important;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#ffffff 0%,#f8fbf7 100%);
  color:#475569 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease !important;
}
body .product-nav .product-links a::after{
  display:none !important;
}
body .product-nav .product-links a:hover,
body .product-nav .product-links a:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(22,163,74,.26);
  background:linear-gradient(180deg,#ffffff 0%,#eef7ec 100%);
  color:#166534 !important;
  box-shadow:0 12px 22px rgba(15,23,42,.08);
}
body .product-nav .product-links a:active{
  transform:translateY(0);
  box-shadow:0 8px 16px rgba(15,23,42,.06);
}

body .side-menu .menu-links a{
  min-height:48px;
  padding:13px 16px !important;
  border-radius:16px !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
  color:#24313d !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  box-shadow:0 10px 20px rgba(15,23,42,.06) !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease !important;
}
body .side-menu .menu-links a:hover{
  transform:translateX(4px) translateY(-1px) !important;
  border-color:rgba(22,163,74,.22) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f2f8ef 100%) !important;
  color:#166534 !important;
  box-shadow:0 14px 24px rgba(15,23,42,.09) !important;
}

body .wishlist-panel .close-panel,
body .cart-drawer .close-panel,
body .account-drawer .close-drawer{
  width:40px !important;
  height:40px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
  color:#64748b !important;
  box-shadow:0 10px 20px rgba(15,23,42,.08) !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease !important;
}
body .wishlist-panel .close-panel:hover,
body .cart-drawer .close-panel:hover,
body .account-drawer .close-drawer:hover{
  transform:translateY(-1px) rotate(90deg) !important;
  border-color:rgba(22,163,74,.24) !important;
  background:linear-gradient(180deg,#ffffff 0%,#eef7ec 100%) !important;
  color:var(--primary) !important;
  box-shadow:0 14px 24px rgba(15,23,42,.12) !important;
}

body .wishlist-panel .btn-add-mini{
  min-height:38px;
  padding:9px 13px;
  border-radius:12px;
  background:linear-gradient(135deg,#17212b 0%,#243746 100%);
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 10px 18px rgba(15,23,42,.14);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .18s ease;
}
body .wishlist-panel .btn-add-mini:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#111827 0%,#1f3645 100%);
  box-shadow:0 14px 22px rgba(15,23,42,.18);
}

body .wishlist-panel .remove-item-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid transparent;
  color:#94a3b8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
body .wishlist-panel .remove-item-btn:hover{
  transform:translateY(-1px);
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.14);
  color:#dc2626;
}

body .account-drawer .btn-account-action{
  min-height:50px;
  padding:14px 16px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 12px 22px rgba(15,23,42,.08);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
body .account-drawer .btn-account-action.save,
body .account-drawer .btn-account-action.edit{
  background:linear-gradient(135deg,#1c8a4d 0%,#24a95d 100%);
  color:#fff;
  border:1px solid rgba(22,163,74,.24);
}
body .account-drawer .btn-account-action.save:hover,
body .account-drawer .btn-account-action.edit:hover{
  background:linear-gradient(135deg,#187642 0%,#209754 100%);
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(22,163,74,.2);
}
body .account-drawer .btn-account-action.logout{
  background:linear-gradient(180deg,#ffffff 0%,#fff7f7 100%);
  color:#dc2626;
  border:1px solid rgba(239,68,68,.26);
}
body .account-drawer .btn-account-action.logout:hover{
  background:linear-gradient(180deg,#ffffff 0%,#feecec 100%);
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(220,38,38,.12);
}
body .account-drawer .btn-account-action.delete{
  background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);
  color:#fff;
  border:1px solid rgba(220,38,38,.22);
}
body .account-drawer .btn-account-action.delete:hover{
  background:linear-gradient(135deg,#c81e1e 0%,#991b1b 100%);
  transform:translateY(-1px);
  box-shadow:0 18px 30px rgba(220,38,38,.22);
}

body .logout-confirm-modal .btn-cancel-logout{
  min-height:48px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  color:#334155;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 10px 18px rgba(15,23,42,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
body .logout-confirm-modal .btn-cancel-logout:hover{
  transform:translateY(-1px);
  border-color:rgba(22,163,74,.22);
  background:linear-gradient(180deg,#ffffff 0%,#eef5ef 100%);
  color:#1f2937;
  box-shadow:0 14px 24px rgba(15,23,42,.09);
}

body .product-nav .product-links a:focus-visible,
body .side-menu .menu-links a:focus-visible,
body .wishlist-panel .btn-add-mini:focus-visible,
body .wishlist-panel .remove-item-btn:focus-visible,
body .wishlist-panel .close-panel:focus-visible,
body .cart-drawer .close-panel:focus-visible,
body .account-drawer .close-drawer:focus-visible,
body .account-drawer .btn-account-action:focus-visible,
body .logout-confirm-modal .btn-cancel-logout:focus-visible{
  outline:2px solid rgba(22,163,74,.42) !important;
  outline-offset:3px !important;
}

@media (max-width:640px){
  body .product-nav .product-links a,
  body .side-menu .menu-links a,
  body .account-drawer .btn-account-action,
  body .logout-confirm-modal .btn-cancel-logout{
    min-height:46px;
  }

  body .wishlist-panel .btn-add-mini,
  body .wishlist-panel .remove-item-btn{
    min-height:36px;
  }
}

/* Cart + wishlist drawer polish: smoother, lighter, modern */
body .menu-overlay{
  transition: opacity .3s ease, visibility .3s ease !important;
  backdrop-filter: blur(3px) saturate(1.06);
}

body .wishlist-panel,
body .cart-drawer{
  right: 0 !important;
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    opacity .22s ease,
    visibility 0s linear .34s !important;
  will-change: transform, opacity;
  border-left: 1px solid rgba(148,163,184,.18);
  box-shadow: -14px 0 28px rgba(15,23,42,.12);
}

body .wishlist-panel.open,
body .cart-drawer.open{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    opacity .22s ease,
    visibility 0s linear 0s !important;
}

body .wishlist-panel .panel-header,
body .cart-drawer .panel-header{
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 8px;
  backdrop-filter: blur(6px) saturate(1.05);
  background: rgba(248,250,252,.92);
}

body .wishlist-panel .panel-content,
body .cart-drawer .panel-content{
  padding-bottom: 24px;
}

body .cart-drawer .panel-footer{
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(148,163,184,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, #fff 52%);
}

body .cart-drawer-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

body .cart-drawer-summary strong{
  color: #0f172a;
  font-size: 15px;
}

body .cart-drawer-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body .cart-drawer .btn-cart-process,
body .cart-drawer .btn-cart-clear,
body .cart-drawer .btn-view-full-cart{
  min-height: 38px;
  border-radius: 12px;
  font-weight: 750;
  font-size: 12px;
  letter-spacing: .01em;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, opacity .2s ease;
}

body .cart-drawer .btn-cart-process{
  border: 1px solid rgba(22,163,74,.22);
  background: linear-gradient(135deg,#16a34a 0%,#15803d 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(22,163,74,.24);
}

body .cart-drawer .btn-cart-process:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(22,163,74,.28);
}

body .cart-drawer .btn-cart-clear{
  border: 1px solid rgba(239,68,68,.24);
  background: #fff7f7;
  color: #b91c1c;
  cursor: pointer;
}

body .cart-drawer .btn-cart-clear-top{
  position: sticky;
  top: 8px;
  z-index: 3;
  margin-left: auto;
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
}

body .cart-drawer .btn-cart-clear:hover{
  transform: translateY(-1px);
  background: #ffefef;
  border-color: rgba(239,68,68,.45);
}

body .cart-drawer [data-cart-process].is-disabled,
body .cart-drawer [data-cart-clear].is-disabled,
body .summary-btn.is-disabled,
body .summary-btn[aria-disabled="true"],
body .cart-drawer button:disabled{
  opacity: .56 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  body .menu-overlay,
  body .wishlist-panel,
  body .cart-drawer,
  body .wishlist-panel.open,
  body .cart-drawer.open,
  body .cart-drawer .btn-cart-process,
  body .cart-drawer .btn-cart-clear{
    transition-duration: .01ms !important;
  }
}

@media (max-width: 640px){
  body .wishlist-panel .wishlist-item-card{
    flex-direction: column;
    align-items:flex-start;
    gap:12px;
  }
  body .wishlist-panel .wishlist-item-card img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }
  body .wishlist-panel .wishlist-item-info{
    width:100%;
  }
  body .cart-drawer .panel-footer{
    gap: 8px;
    padding: 10px 12px;
  }
  body .cart-drawer .cart-drawer-actions{
    flex-direction: column;
    gap: 6px;
  }
  body .cart-drawer .btn-cart-process,
  body .cart-drawer .btn-view-full-cart,
  body .cart-drawer .btn-cart-clear{
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    font-size: 11px;
  }
  body .cart-drawer .btn-view-full-cart::after{
    font-size: 12px;
    margin-left: 3px;
  }
  body .cart-drawer .cart-line,
  body .cart-drawer .cart-line.is-full{
    grid-template-columns:1fr;
  }
  body .cart-drawer .cart-line-media,
  body .cart-drawer .cart-line.is-full .cart-line-media{
    max-width:none;
    width:100%;
    aspect-ratio:1 / 1;
  }
  body .cart-drawer .cart-line-top,
  body .cart-drawer .cart-line-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  body .cart-drawer .cart-line-price{
    white-space:normal;
  }
}

@media (max-width: 480px){
  body .wishlist-panel .panel-content,
  body .cart-drawer .panel-content{
    padding:14px 12px 18px;
  }
  body .wishlist-panel .wishlist-item-card{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  body .wishlist-panel .wishlist-item-card img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }
  body .wishlist-panel .remove-item-btn{
    align-self:flex-end;
  }
  body .cart-drawer .cart-line,
  body .cart-drawer .cart-line.is-full{
    grid-template-columns:1fr;
  }
  body .cart-drawer .cart-line-media,
  body .cart-drawer .cart-line.is-full .cart-line-media{
    max-width:96px;
  }
  body .cart-drawer .cart-line-top,
  body .cart-drawer .cart-line-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===== Shared Shell Recovery ===== */

#menuOverlay{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#menuOverlay.active{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.header-top .search-container,
.search-container{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  width:100% !important;
  max-width:640px !important;
  min-width:0 !important;
  overflow:visible !important;
  min-height:46px !important;
  padding:0 12px !important;
  border:1px solid #edf2f7 !important;
  border-radius:10px !important;
  background:#fbfcfd !important;
  box-shadow:none !important;
}

.search-container .custom-select-wrapper{
  display:none !important;
}

.search-container .custom-select-display{
  display:none !important;
}

.search-container .search-bar{
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  height:44px !important;
  padding:0 42px 0 2px !important;
  border:none !important;
  border-right:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:14px !important;
  color:var(--text-dark) !important;
}

.search-container .search-btn{
  position:absolute !important;
  top:50% !important;
  right:10px !important;
  transform:translateY(-50%) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  min-width:28px !important;
  height:28px !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#94a3b8 !important;
  box-shadow:none !important;
}

.search-container .search-clear{
  right:36px !important;
  z-index:6 !important;
  width:22px !important;
  height:22px !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#94a3b8 !important;
}

.search-container .search-bar::placeholder{
  color:#94a3b8 !important;
}

.search-container .search-bar:focus{
  outline:none !important;
  border:none !important;
  box-shadow:none !important;
}

.main-header .header-actions .header-action.header-action--inbox{
  min-width:58px !important;
  padding:4px 6px !important;
  color:var(--text-dark) !important;
}

.main-header .header-actions .header-action.header-action--inbox .action-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(37,99,235,.3) !important;
}

.main-header .header-actions .header-action.header-action--inbox .action-label{
  display:inline-block !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:#0f172a !important;
  letter-spacing:.2px !important;
}

@media (max-width:1023px){
  .product-nav.is-category-discovery .product-links{
    gap:8px !important;
  }
}

@media (max-width:640px){
  .search-container{
    max-width:100% !important;
    min-height:44px !important;
    padding:0 10px !important;
  }

  .search-container .custom-select-wrapper{
    display:none !important;
  }

  .search-container .custom-select-display{
    display:none !important;
  }

  .search-container .search-bar{
    height:42px !important;
    padding:0 40px 0 0 !important;
    font-size:12.5px !important;
  }

  .search-container .search-btn{
    right:8px !important;
    width:26px !important;
    min-width:26px !important;
    height:26px !important;
    font-size:13px !important;
  }

  .search-container .search-clear{
    right:30px !important;
    width:18px !important;
    height:18px !important;
    font-size:10px !important;
  }

  .main-header .header-actions .header-action.header-action--inbox{
    min-width:54px !important;
    min-height:50px !important;
    padding:4px 4px !important;
  }

  .main-header .header-actions .header-action.header-action--inbox .action-icon{
    width:38px !important;
    height:38px !important;
    font-size:20px !important;
  }

  .main-header .header-actions .header-action.header-action--inbox .action-label{
    display:block !important;
    font-size:10px !important;
    line-height:1 !important;
    margin-top:2px !important;
    color:#1e3a8a !important;
    font-weight:800 !important;
    letter-spacing:.25px !important;
  }
}

@media (max-width:400px){
  .search-container .custom-select-wrapper{
    flex:0 0 58px !important;
    width:58px !important;
    min-width:58px !important;
  }

  .search-container .search-bar{
    padding:0 42px 0 6px !important;
    font-size:11px !important;
  }

  .search-container .search-btn{
    min-width:36px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }

  .main-header .header-actions .header-action.header-action--inbox .action-label{
    font-size:9px !important;
  }
}

/* ===== Shared Category Menu ===== */
.category-menu-bar{
  position:relative;
  z-index:var(--z-subheader);
  width:100%;
}

.category-menu-shell{
  max-width:var(--max-width);
  margin:0 auto;
  padding:14px 20px 0;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  width:100%;
}

.category-menu-bar.is-floating{
  position:fixed;
  top:18px;
  right:18px;
  width:auto;
  z-index:calc(var(--z-header) + 4);
}

.category-menu-bar.is-floating .category-menu-shell{
  padding:0;
  margin:0;
}

.category-menu-shell #menuToggle{
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:42px !important;
  padding:9px 14px !important;
  border-radius:16px !important;
  border:1px solid rgba(22,163,74,.18) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f6fff6 100%) !important;
  color:#1f3b1f !important;
  box-shadow:0 10px 24px rgba(22,163,74,.08) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  max-width:100%;
}

.category-menu-shell #menuToggle > span{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
}

.category-menu-shell #menuToggle .leaf-icon,
.category-menu-shell #menuToggle i{
  color:var(--primary) !important;
}

.category-menu-shell #menuToggle .fa-chevron-right{
  font-size:11px !important;
  opacity:.72;
}

.category-menu-shell #menuToggle:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(22,163,74,.28) !important;
  background:linear-gradient(180deg,#ffffff 0%,#effff0 100%) !important;
  box-shadow:0 14px 28px rgba(22,163,74,.12) !important;
}

.category-menu-shell #menuToggle:focus-visible{
  outline:2px solid rgba(22,163,74,.34) !important;
  outline-offset:3px !important;
}

#sideMenu.side-menu--categories{
  width:min(92vw,430px) !important;
  max-width:430px !important;
  overflow-y:auto !important;
  padding-bottom:18px;
}

#sideMenu.side-menu--categories .menu-header{
  align-items:flex-start !important;
  gap:16px;
}

#sideMenu.side-menu--categories .menu-header-copy{
  display:grid;
  gap:6px;
  min-width:0;
}

#sideMenu.side-menu--categories .menu-kicker{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(22,163,74,.10);
  color:#166534;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#sideMenu.side-menu--categories .menu-subcopy{
  margin:0;
  color:#64748b;
  font-size:12px;
  line-height:1.55;
}

#sideMenu.side-menu--categories .menu-content{
  padding:14px !important;
}

#sideMenu.side-menu--categories .category-menu-stats{
  display:flex;
  align-items:center;
  min-height:32px;
  margin:0 0 10px;
  padding:0 4px;
  color:#64748b;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#sideMenu.side-menu--categories .menu-featured-routes{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

#sideMenu.side-menu--categories .menu-featured-link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:15px 16px;
  border-radius:20px;
  text-decoration:none;
  border:1px solid rgba(22,163,74,.24);
  background:
    radial-gradient(160px 80px at 100% 0%, rgba(250,204,21,.18), transparent 68%),
    linear-gradient(135deg, rgba(22,163,74,.16), rgba(255,255,255,.98) 44%, rgba(240,253,244,.98) 100%);
  color:#12311e;
  box-shadow:0 16px 34px rgba(15,23,42,.11);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
}

#sideMenu.side-menu--categories .menu-featured-link:hover{
  transform:translateY(-1px);
  border-color:rgba(22,163,74,.34);
  color:#14532d;
  box-shadow:0 22px 40px rgba(15,23,42,.14);
}

#sideMenu.side-menu--categories .menu-featured-link:focus-visible{
  outline:2px solid rgba(22,163,74,.36);
  outline-offset:3px;
}

#sideMenu.side-menu--categories .menu-featured-link__icon,
#sideMenu.side-menu--categories .menu-featured-link__arrow{
  display:inline-grid;
  place-items:center;
  flex-shrink:0;
}

#sideMenu.side-menu--categories .menu-featured-link__icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,#166534,#22c55e);
  color:#fff;
  font-size:17px;
  box-shadow:0 10px 22px rgba(22,163,74,.28);
}

#sideMenu.side-menu--categories .menu-featured-link__copy{
  min-width:0;
  display:grid;
  gap:3px;
}

#sideMenu.side-menu--categories .menu-featured-link__copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  color:inherit;
}

#sideMenu.side-menu--categories .menu-featured-link__copy small{
  display:block;
  font-size:11.5px;
  line-height:1.35;
  color:#4b6354;
}

#sideMenu.side-menu--categories .menu-featured-link__arrow{
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  color:#166534;
  font-size:13px;
}

#sideMenu.side-menu--categories .category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

#sideMenu.side-menu--categories .category-menu-section{
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
  overflow:hidden;
}

#sideMenu.side-menu--categories .category-menu-section__summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:12px 13px;
  cursor:pointer;
  list-style:none;
}

#sideMenu.side-menu--categories .category-menu-section__summary::-webkit-details-marker{
  display:none;
}

#sideMenu.side-menu--categories .category-menu-section__summary::after{
  content:'';
  width:20px;
  height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  transition:transform 0.2s ease;
}

#sideMenu.side-menu--categories details[open] > .category-menu-section__summary::after{
  transform:rotate(180deg);
}

#sideMenu.side-menu--categories .category-menu-section__summary:focus-visible{
  outline:2px solid rgba(22,163,74,.34);
  outline-offset:-2px;
}

#sideMenu.side-menu--categories .category-menu-section__copy{
  display:grid;
  gap:2px;
  min-width:0;
}

#sideMenu.side-menu--categories .category-menu-section__copy strong{
  color:#17261c;
  font-size:13.5px;
  font-weight:850;
  line-height:1.25;
}

#sideMenu.side-menu--categories .category-menu-section__copy small{
  color:#6b7280;
  font-size:11.25px;
  font-weight:650;
  line-height:1.35;
}

#sideMenu.side-menu--categories .category-menu-section__count{
  display:inline-grid;
  place-items:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  background:#eef8ef;
  color:#166534;
  font-size:11px;
  font-weight:900;
}

#sideMenu.side-menu--categories .category-menu-section__links{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
  padding:0 10px 10px;
}

#sideMenu.side-menu--categories .cat-block{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.14);
  background:#f8faf8;
  color:#213729;
  text-decoration:none;
  font-weight:750;
  font-size:12px;
  line-height:1.3;
  box-shadow:none;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}

#sideMenu.side-menu--categories .cat-block:hover{
  border-color:rgba(22,163,74,.26);
  background:#f0f8ef;
  color:#166534;
}

#sideMenu.side-menu--categories .cat-block:focus-visible{
  outline:2px solid rgba(22,163,74,.34);
  outline-offset:3px;
}

#sideMenu.side-menu--categories .cat-label{
  min-width:0;
  overflow-wrap:anywhere;
}

#sideMenu.side-menu--categories .cat-icon,
#sideMenu.side-menu--categories .cat-count,
#sideMenu.side-menu--categories .cat-arrow{
  display:inline-grid;
  place-items:center;
  border-radius:999px;
}

#sideMenu.side-menu--categories .cat-icon{
  width:26px;
  height:26px;
  background:rgba(22,163,74,.08);
  color:#166534;
  font-size:12px;
}

#sideMenu.side-menu--categories .cat-count{
  min-width:26px;
  height:24px;
  padding:0 7px;
  background:#fff;
  border:1px solid rgba(148,163,184,.16);
  color:#64748b;
  font-size:10.5px;
  font-weight:900;
}

#sideMenu.side-menu--categories .cat-arrow{
  width:24px;
  height:24px;
  background:rgba(22,163,74,.08);
  color:#166534;
  font-size:11px;
}

@media (max-width:1023px){
  .category-menu-shell{
    padding:12px 16px 0;
  }
}

@media (max-width:640px){
  .category-menu-shell{
    padding:10px 12px 0;
  }

  .category-menu-shell #menuToggle{
    width:100% !important;
    min-height:40px !important;
    padding:9px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
  }

  .category-menu-bar.is-floating{
    top:12px;
    right:12px;
    left:12px;
  }

  .category-menu-bar.is-floating .category-menu-shell #menuToggle{
    width:100% !important;
  }

  #sideMenu.side-menu--categories{
    width:min(94vw,400px) !important;
  }

  #sideMenu.side-menu--categories .menu-featured-link{
    min-height:68px;
    padding:14px;
    border-radius:18px;
  }

  #sideMenu.side-menu--categories .category-grid{
    gap:8px;
  }

  #sideMenu.side-menu--categories .category-menu-section__summary{
    min-height:54px;
    padding:11px 12px;
  }

  #sideMenu.side-menu--categories .category-menu-section__links{
    gap:6px;
    padding:0 8px 8px;
    grid-template-columns:1fr;
  }

  #sideMenu.side-menu--categories .cat-block{
    min-height:42px;
    padding:8px 9px;
    font-size:11.75px;
    border-radius:10px;
  }
}

@media (max-width:380px){
  #sideMenu.side-menu--categories .menu-featured-link{
    grid-template-columns:auto minmax(0,1fr);
  }

  #sideMenu.side-menu--categories .menu-featured-link__arrow{
    display:none;
  }

  #sideMenu.side-menu--categories .category-menu-section__copy small{display:none}
}

@media (min-width:641px){
  .category-menu-shell #menuToggle{
    width:auto !important;
    min-width:220px;
  }
}

/* ===== Mobile Production Fixes ===== */
@media (max-width:768px){
  .contact-bar{
    padding:6px 0 !important;
  }

  .contact-bar-content{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px 12px !important;
    padding:0 12px !important;
  }

  .contact-items{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px 12px !important;
    max-width:100% !important;
  }

  .contact-bar-item{
    justify-content:center !important;
    text-align:center !important;
    font-size:11px !important;
    line-height:1.35 !important;
  }

  .main-header .header-top{
    grid-template-columns:minmax(0, 1fr) !important;
    grid-template-areas:
      "logo"
      "search"
      "actions" !important;
    gap:10px !important;
    padding:12px 14px !important;
    align-items:stretch !important;
  }

  .main-header .header-top .logo{
    grid-area:logo !important;
    justify-self:center !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    text-align:center !important;
    font-size:clamp(18px, 4.8vw, 22px) !important;
    line-height:1.12 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .main-header .header-top .logo::before{
    width:58px !important;
    flex:0 0 58px !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
  }

  .main-header .header-top .search-container{
    grid-area:search !important;
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }

  .main-header .header-top .header-actions{
    grid-area:actions !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:8px !important;
    row-gap:8px !important;
    overflow:visible !important;
  }

  .main-header .header-top .header-action{
    flex:0 0 54px !important;
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    min-height:48px !important;
    padding:6px 0 !important;
    gap:4px !important;
  }

  .main-header .header-top .action-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:28px !important;
    height:28px !important;
    font-size:21px !important;
    line-height:1 !important;
  }

  .main-header .header-top .badge{
    top:-6px !important;
    right:-6px !important;
    width:17px !important;
    height:17px !important;
    font-size:10px !important;
  }

  .main-header .header-top .header-category-entry{
    flex:1 0 100% !important;
    order:99 !important;
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    margin-top:2px !important;
  }

  .main-header .header-top .header-category-entry #menuToggle,
  .main-header .header-top .header-category-entry .menu-toggle,
  .main-header .header-top .header-category-entry .mobile-menu-btn{
    width:min(100%, 260px) !important;
  }

  .main-header .header-top .header-actions .header-action.header-action--inbox{
    flex:0 0 54px !important;
    width:54px !important;
    min-width:54px !important;
    min-height:48px !important;
    padding:6px 0 !important;
  }

  .main-header .header-top .header-actions .header-action.header-action--inbox .action-icon{
    width:28px !important;
    height:28px !important;
    font-size:19px !important;
  }

  .main-header .header-top .header-actions .header-action.header-action--inbox .action-label{
    display:none !important;
  }

  #sideMenu.side-menu--categories{
    width:min(96vw, 400px) !important;
  }

  #sideMenu.side-menu--categories .category-grid{
    grid-template-columns:1fr !important;
  }

  body .wishlist-panel{
    width:min(92vw, 380px) !important;
    max-width:100vw !important;
    overflow:hidden !important;
  }

  body .wishlist-panel .panel-content{
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain !important;
    padding:10px 10px 90px !important;
  }

  body .wishlist-panel .panel-footer{
    position:sticky;
    bottom:0;
    z-index:3;
    padding:12px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, #fff 52%);
  }

  body .wishlist-panel .wishlist-item-card{
    display:grid;
    grid-template-columns:60px minmax(0, 1fr) auto;
    align-items:start;
    gap:8px;
    padding:10px 0;
    content-visibility:auto;
    contain-intrinsic-size:110px;
  }

  body .wishlist-panel .wishlist-item-card img{
    width:60px !important;
    height:60px !important;
    aspect-ratio:auto !important;
  }

  body .wishlist-panel .wishlist-item-info{
    min-width:0;
  }

  body .wishlist-panel .btn-add-mini{
    min-height:32px;
    margin-top:6px;
    padding:7px 10px !important;
    font-size:11px !important;
  }

  body .wishlist-panel .remove-item-btn{
    align-self:start !important;
    justify-self:end;
    padding:4px;
  }

  body .cart-drawer .panel-content{
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain !important;
    padding:10px 10px 90px !important;
  }

  body .cart-drawer .cart-line,
  body .cart-drawer .cart-line.is-full{
    grid-template-columns:60px minmax(0, 1fr) !important;
    align-items:start !important;
    gap:8px !important;
    padding:10px 0 !important;
    content-visibility:auto;
    contain-intrinsic-size:108px;
  }

  body .cart-drawer .cart-line-media,
  body .cart-drawer .cart-line.is-full .cart-line-media{
    width:60px !important;
    max-width:60px !important;
    aspect-ratio:1 / 1 !important;
  }

  body .cart-drawer .cart-line-top,
  body .cart-drawer .cart-line-bottom{
    gap:6px !important;
  }

  body .cart-drawer .btn-cart-clear,
  body .cart-drawer .btn-cart-process,
  body .cart-drawer .btn-view-full-cart{
    min-height:34px !important;
    padding:8px 10px !important;
    font-size:11px !important;
  }

  body.cart-page .main-wrap,
  body.wishlist-page .main-wrap{
    margin:18px auto 56px !important;
    padding:0 12px 56px !important;
  }

  body.cart-page .cart-grid{
    gap:14px !important;
  }

  body.cart-page .cart-panel{
    padding:14px !important;
  }

  body.cart-page .cart-list{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  body.cart-page .cart-line.is-full{
    grid-template-columns:56px minmax(0, 1fr) !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px !important;
    min-height:56px !important;
    content-visibility:auto;
    contain-intrinsic-size:92px;
  }

  body.cart-page .cart-line.is-full .cart-line-media{
    width:56px !important;
    max-width:56px !important;
    aspect-ratio:1 / 1 !important;
  }

  body.cart-page .cart-line.is-full .cart-line-body{
    grid-column:auto;
    gap:6px;
  }

  body.cart-page .cart-line.is-full .cart-line-top,
  body.cart-page .cart-line.is-full .cart-line-bottom{
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
  }

  body.cart-page .cart-line.is-full .btn-cart-clear-top{
    position:static !important;
    top:auto !important;
    height:auto !important;
    min-height:34px !important;
    margin-left:0 !important;
    padding:8px 12px !important;
  }

  body.wishlist-page .wishlist-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  body.wishlist-page .wishlist-card{
    display:grid !important;
    grid-template-columns:64px minmax(0, 1fr) !important;
    align-items:start !important;
    gap:10px !important;
    padding:10px !important;
    max-width:none !important;
    content-visibility:auto;
    contain-intrinsic-size:144px;
  }

  body.wishlist-page .wishlist-card img{
    width:64px !important;
    height:64px !important;
  }

  body.wishlist-page .wishlist-info{
    min-width:0 !important;
    gap:6px !important;
  }

  body.wishlist-page .wishlist-actions{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
}

@media (max-width:420px){
  .main-header .header-top .logo{
    font-size:clamp(16px, 4.6vw, 19px) !important;
    gap:8px !important;
  }

  .main-header .header-top .logo::before{
    width:50px !important;
    flex:0 0 50px !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
  }

  .main-header .header-top .header-actions{
    gap:6px !important;
  }

  .main-header .header-top .header-action{
    flex-basis:48px !important;
    width:48px !important;
    min-width:48px !important;
    min-height:44px !important;
    padding:4px 0 !important;
  }

  .main-header .header-top .action-icon{
    width:26px !important;
    height:26px !important;
    font-size:19px !important;
  }

  body .wishlist-panel{
    width:100vw !important;
  }

  body.wishlist-page .wishlist-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:359px){
  body.cart-page .cart-list{
    gap:8px !important;
  }
}

/* Match the tighter login-page mobile header spacing on all other pages */
@media (max-width:640px){
  body:not(.login-page) .main-header .header-top{
    gap:8px !important;
    padding:10px 10px !important;
  }

  body:not(.login-page) .main-header .header-top .header-actions{
    justify-self:start !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:6px !important;
    row-gap:6px !important;
  }

  body:not(.login-page) .main-header .header-top .header-action{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:auto !important;
    max-width:none !important;
    min-height:40px !important;
    padding:4px 4px !important;
  }

  body:not(.login-page) .main-header .header-top .header-action .action-label,
  body:not(.login-page) .main-header .header-top .header-action .cart-price{
    display:none !important;
  }

  body:not(.login-page) .main-header .header-top .header-action .action-icon{
    width:24px !important;
    height:24px !important;
    font-size:20px !important;
  }

  body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox{
    min-height:40px !important;
    padding:4px !important;
    transform:none !important;
  }

  body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox .action-icon{
    width:24px !important;
    height:24px !important;
    font-size:18px !important;
    background:none !important;
    color:inherit !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox .action-label{
    display:none !important;
  }
}

@media (max-width:420px){
  body:not(.login-page) .main-header .header-top{
    gap:7px !important;
    padding:9px !important;
  }

  body:not(.login-page) .main-header .header-top .header-actions{
    gap:5px !important;
    row-gap:5px !important;
  }

  body:not(.login-page) .main-header .header-top .header-action{
    min-height:38px !important;
    padding:3px !important;
  }

  body:not(.login-page) .main-header .header-top .action-icon{
    width:22px !important;
    height:22px !important;
    font-size:18px !important;
  }
}

/* Final shared polish: instant-feeling drawers and premium inbox emphasis */
.menu-overlay{
  transition:opacity .12s ease, visibility .12s ease !important;
  will-change:opacity;
}

body .menu-overlay.active{
  z-index:var(--z-menu-overlay) !important;
}

.wishlist-panel,
.cart-drawer{
  transition:transform .14s cubic-bezier(.22,1,.36,1), opacity .12s ease, visibility 0s linear .14s !important;
}

.wishlist-panel.open,
.cart-drawer.open{
  transition-delay:0s !important;
}

.wishlist-panel{
  width:min(440px,calc(100vw - 32px)) !important;
}

.cart-drawer{
  width:min(456px,calc(100vw - 32px)) !important;
}

.account-drawer{
  width:min(432px,calc(100vw - 32px)) !important;
  transform:translate3d(-100%,0,0) !important;
  opacity:.01 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:transform .16s cubic-bezier(.22,1,.36,1),opacity .12s ease,visibility 0s linear .16s !important;
}

.account-drawer.open{
  transform:translate3d(0,0,0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition-delay:0s !important;
}

body .side-menu.active,
body .wishlist-panel.open,
body .cart-drawer.open,
body .account-drawer.open{
  z-index:var(--z-drawer) !important;
}

body .quick-auth-root.is-active{
  z-index:calc(var(--z-auth-dialog) + 20) !important;
}

body #offlineBanner{
  z-index:var(--z-network-banner) !important;
}

@media (max-width:768px){
  .wishlist-panel{
    width:min(88vw,380px) !important;
  }

  .account-drawer{
    width:min(90vw,392px) !important;
  }

  .cart-drawer{
    width:min(90vw,392px) !important;
  }
}

@media (max-width:640px){
  .wishlist-panel{
    width:min(90vw,372px) !important;
  }

  .account-drawer{
    width:min(92vw,388px) !important;
  }

  .cart-drawer{
    width:min(92vw,384px) !important;
  }
}

@media (max-width:420px){
  .wishlist-panel{
    width:calc(100vw - 14px) !important;
  }

  .account-drawer{
    width:calc(100vw - 10px) !important;
  }

  .cart-drawer{
    width:calc(100vw - 14px) !important;
  }
}

.header-actions .header-action.header-action--inbox,
body.login-page .main-header .header-actions .header-action.header-action--inbox,
body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox{
  position:relative !important;
  min-width:58px !important;
  padding:3px 6px !important;
  color:#1f2937 !important;
  font-weight:800 !important;
  filter:none !important;
}

.header-actions .header-action.header-action--inbox::before,
body.login-page .main-header .header-actions .header-action.header-action--inbox::before,
body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox::before{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:16px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.62) 42%),
    linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  box-shadow:
    0 6px 16px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  z-index:-1 !important;
}

.header-actions .header-action.header-action--inbox .action-icon,
body.login-page .main-header .header-actions .header-action.header-action--inbox .action-icon,
body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox .action-icon{
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.82), rgba(255,255,255,0) 34%),
    linear-gradient(145deg, #f8fafc 0%, #cbd5e1 100%) !important;
  color:#0f172a !important;
  font-size:19px !important;
  box-shadow:
    0 8px 18px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
  transform:none !important;
}

.header-actions .header-action.header-action--inbox .action-label,
body.login-page .main-header .header-actions .header-action.header-action--inbox .action-label,
body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox .action-label{
  display:inline-block !important;
  color:#334155 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.12px !important;
  text-transform:none !important;
  text-shadow:none !important;
}

.header-actions .header-action.header-action--inbox .badge,
.header-actions .header-action.header-action--inbox [data-support-unread]{
  background:linear-gradient(135deg,#14532d 0%, #16a34a 100%) !important;
  color:#fff !important;
  border-color:#fff8dc !important;
  box-shadow:0 6px 14px rgba(22,163,74,.34) !important;
}

@media (min-width:769px){
  .header-actions .header-action.header-action--inbox:hover .action-icon{
    transform:translateY(-1px) scale(1.02) !important;
    filter:saturate(1.02) brightness(1.01) !important;
    box-shadow:
      0 10px 22px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,.84) !important;
  }
}

@media (max-width:640px){
  .header-actions .header-action.header-action--inbox,
  body.login-page .main-header .header-actions .header-action.header-action--inbox,
  body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox{
    min-width:52px !important;
    min-height:42px !important;
    padding:3px !important;
  }

  .header-actions .header-action.header-action--inbox::before,
  body.login-page .main-header .header-actions .header-action.header-action--inbox::before,
  body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox::before{
    border-radius:15px !important;
  }

  .header-actions .header-action.header-action--inbox .action-icon,
  body.login-page .main-header .header-actions .header-action.header-action--inbox .action-icon,
  body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox .action-icon{
    width:32px !important;
    height:32px !important;
    font-size:17px !important;
    border-radius:11px !important;
  }

  .header-actions .header-action.header-action--inbox .action-label,
  body.login-page .main-header .header-actions .header-action.header-action--inbox .action-label,
  body:not(.login-page) .main-header .header-top .header-actions .header-action.header-action--inbox .action-label{
    display:block !important;
    font-size:8px !important;
    margin-top:2px !important;
    line-height:1 !important;
  }
}

@media (max-width:768px){
  body.mobile-header-actions-sticky{
    scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 54px);
  }

  .mobile-header-actions-dock{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 4px);
    left:50%;
    width:min(calc(100vw - 30px), 252px);
    max-width:min(calc(100vw - 30px), 252px);
    transform:translate3d(-50%, -10px, 0) scale(.96);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:calc(var(--z-header) + 12);
    will-change:transform, opacity;
    transition:
      opacity .18s ease-out,
      transform .22s cubic-bezier(.2,.8,.2,1),
      visibility 0s linear .22s;
  }

  body.mobile-header-actions-sticky .mobile-header-actions-dock{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(-50%, 0, 0) scale(1);
    transition-delay:0s;
  }

  .mobile-header-actions-dock__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:3px;
    min-height:36px;
    padding:4px;
    border-radius:14px;
    border:1px solid rgba(226,232,240,.88);
    background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.9) 100%);
    box-shadow:
      0 8px 20px rgba(15,23,42,.1),
      inset 0 1px 0 rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
    backdrop-filter:blur(14px) saturate(1.05);
  }

  .mobile-header-actions-dock__action{
    flex:1 1 0;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:28px !important;
    padding:2px 0 !important;
    gap:0 !important;
    border-radius:10px !important;
    transform:translateZ(0) !important;
    transition:
      transform .14s ease,
      opacity .14s ease,
      background-color .14s ease !important;
    opacity:1 !important;
    color:#0f172a !important;
    border:1px solid rgba(226,232,240,.72);
    background:rgba(255,255,255,.9) !important;
    box-shadow:0 3px 8px rgba(15,23,42,.04);
  }

  .mobile-header-actions-dock__action::before,
  .mobile-header-actions-dock__action .action-label,
  .mobile-header-actions-dock__action .cart-price{
    display:none !important;
  }

  .mobile-header-actions-dock__action .action-icon{
    width:20px !important;
    height:20px !important;
    margin:0 auto !important;
    border-radius:7px !important;
    font-size:13px !important;
    line-height:1 !important;
    box-shadow:none !important;
    background:transparent !important;
    opacity:1 !important;
    transition:
      transform .16s ease,
      background .16s ease,
      color .16s ease,
      box-shadow .16s ease !important;
  }

  .mobile-header-actions-dock__action.header-action--inbox{
    color:#0f172a !important;
  }

  .mobile-header-actions-dock__action--search{
    color:#0f172a !important;
  }

  .mobile-header-actions-dock__action--search .action-icon{
    background:linear-gradient(145deg,rgba(240,253,244,.98) 0%, rgba(220,252,231,.92) 100%) !important;
    color:rgba(15,118,110,.95) !important;
    box-shadow:inset 0 0 0 1px rgba(16,185,129,.12), 0 4px 10px rgba(15,23,42,.04) !important;
  }

  .mobile-header-actions-dock__action.header-action--inbox .action-icon{
    background:linear-gradient(145deg,rgba(239,246,255,.98) 0%, rgba(219,234,254,.92) 100%) !important;
    color:rgba(29,78,216,.96) !important;
    box-shadow:inset 0 0 0 1px rgba(59,130,246,.12), 0 4px 10px rgba(15,23,42,.04) !important;
  }

  .mobile-header-actions-dock__action .badge,
  .mobile-header-actions-dock__action [data-support-unread]{
    top:-6px !important;
    right:-7px !important;
    transform:scale(.72) !important;
    transform-origin:top right !important;
  }

  .mobile-header-actions-dock__action:active{
    transform:scale(.96) translateZ(0) !important;
    opacity:.94 !important;
  }

  .mobile-header-actions-dock__action:active .action-icon{
    transform:scale(.94) !important;
    opacity:.9 !important;
  }
}

@keyframes mobileHeaderActionsDockIn{
  0%{
    opacity:0;
    transform:translate3d(-50%, -10px, 0) scale(.96);
  }
  100%{
    opacity:1;
    transform:translate3d(-50%, 0, 0) scale(1);
  }
}

.mobile-header-actions-dock{
  display:none;
}

@media (max-width:768px){
  .mobile-header-actions-dock{
    display:block;
  }
}

.desktop-header-actions-rail{
  display:none;
}

@media (min-width:1024px){
  body.products-page .desktop-header-actions-rail,
  body.bundles-page .desktop-header-actions-rail,
  body.product-detail-page .desktop-header-actions-rail{
    position:fixed;
    top:50%;
    right:max(6px, env(safe-area-inset-right));
    display:block;
    z-index:calc(var(--z-header) + 18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(12px, -50%, 0);
    transition:
      opacity .2s ease,
      transform .24s cubic-bezier(.2,.8,.2,1),
      visibility 0s linear .22s;
  }

  body.products-page.desktop-header-actions-rail-sticky .desktop-header-actions-rail,
  body.bundles-page.desktop-header-actions-rail-sticky .desktop-header-actions-rail,
  body.product-detail-page.desktop-header-actions-rail-sticky .desktop-header-actions-rail{
    opacity:1;
    visibility:visible;
    pointer-events:none;
    transform:translate3d(0, -50%, 0);
    transition-delay:0s;
  }

  body.products-page .desktop-header-actions-rail__inner,
  body.bundles-page .desktop-header-actions-rail__inner,
  body.product-detail-page .desktop-header-actions-rail__inner{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    width:auto;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  body.products-page .desktop-header-actions-rail__action,
  body.bundles-page .desktop-header-actions-rail__action,
  body.product-detail-page .desktop-header-actions-rail__action{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    gap:0 !important;
    border-radius:14px 0 0 14px !important;
    border:1px solid rgba(226,232,240,.86) !important;
    border-right:0 !important;
    background:rgba(255,255,255,.94) !important;
    color:#0f172a !important;
    box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
    transform:none !important;
    pointer-events:auto !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
    backdrop-filter:blur(14px) saturate(1.1);
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      border-color .16s ease,
      background .16s ease,
      color .16s ease !important;
  }

  body.products-page .desktop-header-actions-rail__action::before,
  body.products-page .desktop-header-actions-rail__action .action-label,
  body.products-page .desktop-header-actions-rail__action .cart-price,
  body.bundles-page .desktop-header-actions-rail__action::before,
  body.bundles-page .desktop-header-actions-rail__action .action-label,
  body.bundles-page .desktop-header-actions-rail__action .cart-price,
  body.product-detail-page .desktop-header-actions-rail__action::before,
  body.product-detail-page .desktop-header-actions-rail__action .action-label,
  body.product-detail-page .desktop-header-actions-rail__action .cart-price{
    display:none !important;
  }

  body.products-page .desktop-header-actions-rail__action .action-icon,
  body.bundles-page .desktop-header-actions-rail__action .action-icon,
  body.product-detail-page .desktop-header-actions-rail__action .action-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:27px !important;
    height:27px !important;
    margin:0 auto !important;
    border-radius:10px !important;
    background:transparent !important;
    color:inherit !important;
    font-size:16px !important;
    line-height:1 !important;
    box-shadow:none !important;
  }

  body.products-page .desktop-header-actions-rail__action:hover,
  body.products-page .desktop-header-actions-rail__action:focus-visible,
  body.bundles-page .desktop-header-actions-rail__action:hover,
  body.bundles-page .desktop-header-actions-rail__action:focus-visible,
  body.product-detail-page .desktop-header-actions-rail__action:hover,
  body.product-detail-page .desktop-header-actions-rail__action:focus-visible{
    transform:translateX(-4px) !important;
    border-color:rgba(22,163,74,.24) !important;
    border-right:0 !important;
    background:linear-gradient(180deg,#ffffff 0%,#f0fdf4 100%) !important;
    color:#166534 !important;
    box-shadow:0 14px 28px rgba(15,23,42,.13) !important;
    outline:none !important;
  }

  body.products-page .desktop-header-actions-rail__action--search .action-icon,
  body.bundles-page .desktop-header-actions-rail__action--search .action-icon,
  body.product-detail-page .desktop-header-actions-rail__action--search .action-icon{
    background:linear-gradient(145deg,rgba(240,253,244,.98) 0%, rgba(220,252,231,.92) 100%) !important;
    color:#0f766e !important;
    box-shadow:inset 0 0 0 1px rgba(16,185,129,.12) !important;
  }

  body.products-page .desktop-header-actions-rail__action.header-action--inbox .action-icon,
  body.bundles-page .desktop-header-actions-rail__action.header-action--inbox .action-icon,
  body.product-detail-page .desktop-header-actions-rail__action.header-action--inbox .action-icon{
    background:linear-gradient(145deg,rgba(239,246,255,.98) 0%, rgba(219,234,254,.92) 100%) !important;
    color:#1d4ed8 !important;
    box-shadow:inset 0 0 0 1px rgba(59,130,246,.12) !important;
  }

  body.products-page .desktop-header-actions-rail__action .badge,
  body.products-page .desktop-header-actions-rail__action [data-support-unread],
  body.bundles-page .desktop-header-actions-rail__action .badge,
  body.bundles-page .desktop-header-actions-rail__action [data-support-unread],
  body.product-detail-page .desktop-header-actions-rail__action .badge,
  body.product-detail-page .desktop-header-actions-rail__action [data-support-unread]{
    top:-5px !important;
    right:-6px !important;
    transform:scale(.86) !important;
    transform-origin:top right !important;
  }
}

@media (min-width:1024px) and (max-width:1380px){
  body.products-page .desktop-header-actions-rail,
  body.bundles-page .desktop-header-actions-rail,
  body.product-detail-page .desktop-header-actions-rail{
    right:0;
  }

  body.products-page .desktop-header-actions-rail__inner,
  body.bundles-page .desktop-header-actions-rail__inner,
  body.product-detail-page .desktop-header-actions-rail__inner{
    gap:10px;
  }

  body.products-page .desktop-header-actions-rail__action,
  body.bundles-page .desktop-header-actions-rail__action,
  body.product-detail-page .desktop-header-actions-rail__action{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }
}

.chef-cart-fly-pill{
  position:fixed;
  left:0;
  top:0;
  width:64px;
  height:64px;
  border-radius:999px;
  z-index:calc(var(--z-toast) - 5);
  pointer-events:none;
  overflow:hidden;
  background:rgba(255,255,255,.96);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 18px 36px rgba(15,23,42,.18), 0 0 0 8px rgba(22,163,74,.08), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translate3d(-50%, -50%, 0) scale(.72);
  opacity:0;
  will-change:transform, opacity;
  transition:transform .82s cubic-bezier(.22,.82,.18,1), opacity .18s ease, filter .2s ease;
  backface-visibility:hidden;
}

.chef-cart-fly-pill img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

.chef-cart-fly-pill.is-moving{
  opacity:1;
}

.chef-cart-fly-pill.is-ending{
  opacity:0;
  transition:transform .2s ease, opacity .18s ease;
}

.chef-cart-count-pulse{
  display:inline-flex;
  animation:chefCartCountHeartbeat .48s cubic-bezier(.2,.72,.24,1);
  transform-origin:center;
}

@keyframes chefCartCountHeartbeat{
  0%{transform:scale(1)}
  28%{transform:scale(1.32)}
  52%{transform:scale(.94)}
  78%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .chef-cart-fly-pill{
    display:none !important;
  }

  .chef-cart-count-pulse{
    animation-duration:.01ms !important;
  }
}

.daily-gift-locker {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding:
    max(10px, env(safe-area-inset-top))
    10px
    max(10px, env(safe-area-inset-bottom))
    10px;
  overflow: auto;
  box-sizing: border-box;
}

.daily-gift-locker[hidden] {
  display: none !important;
}

.daily-gift-locker__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(9, 17, 11, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.daily-gift-locker__panel {
  position: relative;
  width: min(392px, calc(100% - 10px));
  max-height: min(760px, calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(201, 215, 197, 0.72);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,244,0.96));
  box-shadow: 0 28px 60px rgba(16, 34, 18, 0.18);
  margin: auto;
  contain: layout paint;
}

.daily-gift-locker.is-action-busy .daily-gift-locker__panel {
  cursor: progress;
}

.daily-gift-locker.is-action-busy .daily-gift-row,
.daily-gift-locker.is-action-busy .daily-gift-preview {
  opacity: 0.98;
}

.daily-gift-locker__head,
.daily-gift-locker__body,
.daily-gift-locker__preview,
.daily-gift-locker__footer {
  padding: 12px 14px;
}

.daily-gift-locker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(214, 226, 207, 0.9);
}

.daily-gift-locker__title {
  margin: 0;
  font-size: 1.05rem;
  color: #17351f;
}

.daily-gift-locker__subtitle {
  margin: 4px 0 0;
  color: #617264;
  font-size: 0.83rem;
  line-height: 1.4;
}

.daily-gift-locker__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(232, 239, 227, 0.96);
  color: #17351f;
  font-size: 1.35rem;
  cursor: pointer;
}

.gift-trigger-loading {
  position: relative;
}

.gift-trigger-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -4px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 999px;
  border: 2px solid rgba(47, 125, 50, 0.18);
  border-top-color: #2f7d32;
  animation: dailyGiftSpin .7s linear infinite;
  pointer-events: none;
}

.daily-gift-locker__banner,
.daily-gift-locker__state,
.daily-gift-locker__summary,
.daily-gift-locker__note {
  border-radius: 16px;
  border: 1px solid rgba(217, 227, 212, 0.94);
  background: rgba(248, 251, 246, 0.95);
  color: #425346;
  padding: 12px 13px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.daily-gift-locker__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.daily-gift-locker__state::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(47, 125, 50, 0.18);
  border-top-color: #2f7d32;
  animation: dailyGiftSpin .7s linear infinite;
  flex: 0 0 auto;
}

.daily-gift-locker__summary strong {
  display: block;
  margin-bottom: 4px;
  color: #17351f;
}

.daily-gift-locker__summary p {
  margin: 0;
}

.daily-gift-locker__rows {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.daily-gift-row {
  display: grid;
  grid-template-columns: auto 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(214, 226, 207, 0.94);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  cursor: pointer;
  text-align: left;
}

.daily-gift-row.is-selected,
.daily-gift-row:hover,
.daily-gift-row:focus-visible {
  border-color: rgba(84, 124, 73, 0.38);
  box-shadow: 0 10px 24px rgba(27, 55, 31, 0.08);
  transform: translateY(-1px);
}

.daily-gift-row__day {
  min-width: 38px;
  color: #506152;
  font-size: 0.7rem;
  font-weight: 800;
}

.daily-gift-row__thumb {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(244, 248, 241, 0.95);
}

.daily-gift-row__thumb img,
.daily-gift-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.daily-gift-row__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.daily-gift-row__title {
  color: #17351f;
  font-size: 0.83rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-gift-row__worth {
  color: #617264;
  font-size: 0.72rem;
}

.daily-gift-row__pill {
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(236, 242, 231, 0.98);
  color: #335638;
  font-size: 0.68rem;
  font-weight: 800;
}

.daily-gift-row__pill--available,
.daily-gift-row__pill--claimed,
.daily-gift-row__pill--cooldown {
  background: rgba(225, 241, 220, 0.98);
}

.daily-gift-row__pill--missed {
  background: rgba(255, 238, 224, 0.98);
  color: #b45309;
}

.daily-gift-row__cta,
.daily-gift-preview__btn,
.daily-gift-checkout__btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.daily-gift-row__cta,
.daily-gift-preview__btn.is-primary,
.daily-gift-checkout__btn {
  background: linear-gradient(135deg, #234b2c, #2f7d32);
  color: #fff;
}

.daily-gift-row__cta.is-active,
.daily-gift-checkout__btn.is-active {
  background: linear-gradient(135deg, #8d6b18, #c79a28);
}

.daily-gift-row__cta:disabled,
.daily-gift-preview__btn:disabled {
  cursor: default;
  opacity: 0.72;
  background: rgba(232, 239, 227, 0.98);
  color: #617264;
}

.daily-gift-row__cta.is-busy,
.daily-gift-preview__btn.is-busy {
  box-shadow: inset 0 0 0 1px rgba(47, 125, 50, 0.14);
}

.daily-gift-locker__preview {
  border-top: 1px solid rgba(214, 226, 207, 0.9);
  transition: background-color 360ms ease, border-color 360ms ease;
}

.daily-gift-locker__preview.is-preview-focus {
  border-top-color: rgba(47, 125, 50, 0.16);
  background: linear-gradient(180deg, rgba(253, 255, 252, 0.995), rgba(248, 252, 246, 0.988));
}

.daily-gift-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
}

.daily-gift-preview__media {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(244, 248, 241, 0.96);
}

.daily-gift-preview__copy {
  display: grid;
  gap: 6px;
}

.daily-gift-preview__title {
  color: #17351f;
  font-size: 0.94rem;
}

.daily-gift-preview__text,
.daily-gift-preview__status,
.daily-gift-preview__worth,
.daily-gift-preview__empty {
  margin: 0;
  color: #4f6052;
  font-size: 0.8rem;
  line-height: 1.45;
}

.daily-gift-preview__text.is-muted {
  color: #708173;
}

.daily-gift-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.daily-gift-preview__tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(243, 237, 216, 0.96);
  color: #7c5e1e;
  font-size: 0.7rem;
  font-weight: 800;
}

.daily-gift-preview__actions,
.daily-gift-checkout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-gift-preview__btn,
.daily-gift-checkout__btn.is-ghost {
  background: rgba(236, 242, 231, 0.98);
  color: #234b2c;
}

.daily-gift-checkout {
  margin: 12px 0;
}

.daily-gift-checkout__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(214, 226, 207, 0.92);
  background: linear-gradient(135deg, rgba(249, 252, 246, 0.98), rgba(242, 247, 239, 0.96));
}

.daily-gift-checkout__copy {
  display: grid;
  gap: 2px;
}

.daily-gift-checkout__copy strong {
  color: #17351f;
  font-size: 0.84rem;
}

.daily-gift-checkout__copy span {
  color: #5c6d5f;
  font-size: 0.78rem;
  line-height: 1.4;
}

.daily-gift-checkout__meta {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(214, 226, 207, 0.92);
  background: rgba(252, 255, 250, 0.98);
  color: #3b4b3f;
  font-size: 0.78rem;
  line-height: 1.35;
}

.chef-checkout-summary-price--gift {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.chef-checkout-summary-line--gift-muted {
  opacity: 0.92;
  background: linear-gradient(135deg, rgba(252, 252, 248, 0.98), rgba(248, 250, 244, 0.96));
}

.chef-checkout-gift-remove {
  border: 1px solid rgba(190, 24, 93, 0.14);
  background: rgba(255, 246, 249, 0.98);
  color: #9f1239;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.chef-checkout-gift-remove:hover,
.chef-checkout-gift-remove:focus-visible {
  background: rgba(255, 237, 244, 0.98);
  border-color: rgba(190, 24, 93, 0.24);
  color: #881337;
}

.chef-checkout-gift-remove:disabled {
  opacity: 0.7;
  cursor: default;
}

.chef-checkout-gift-reattach {
  border: 1px solid rgba(22, 101, 52, 0.14);
  background: rgba(244, 251, 244, 0.98);
  color: #166534;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.chef-checkout-gift-reattach:hover,
.chef-checkout-gift-reattach:focus-visible {
  background: rgba(232, 247, 233, 0.98);
  border-color: rgba(22, 101, 52, 0.24);
  color: #14532d;
}

.chef-checkout-gift-reattach:disabled {
  opacity: 0.7;
  cursor: default;
}

@keyframes dailyGiftSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .daily-gift-locker__backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .daily-gift-locker__panel {
    width: min(392px, calc(100% - 6px));
    max-height: calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 22px 22px 18px 18px;
  }

  .daily-gift-row {
    grid-template-columns: auto 34px minmax(0, 1fr) auto;
    padding: 8px 9px;
  }

  .daily-gift-row__cta {
    grid-column: 3 / -1;
    justify-self: flex-start;
  }

  .daily-gift-preview {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .daily-gift-preview__media {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .daily-gift-checkout__row {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) and (pointer: coarse) {
  .daily-gift-row:hover,
  .daily-gift-row:focus-visible {
    transform: none;
    box-shadow: 0 6px 16px rgba(27, 55, 31, 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-trigger-loading::after,
  .daily-gift-locker__state::before {
    animation-duration: 1.6s;
  }

  .daily-gift-locker__backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .daily-gift-locker__preview,
  .daily-gift-row,
  .daily-gift-row__cta,
  .daily-gift-preview__btn,
  .daily-gift-checkout__btn,
  .chef-checkout-gift-remove,
  .chef-checkout-gift-reattach {
    transition: none !important;
  }

  .daily-gift-row.is-selected,
  .daily-gift-row:hover,
  .daily-gift-row:focus-visible {
    transform: none;
  }
}

@media (min-width: 769px) {
  .main-header .header-top .search-container {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .main-header .header-top > .chef-search-feedback,
  .main-header .header-top > .chef-smart-search-panel {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* ===== Chef Select brand lockup ===== */
.main-header .header-top .logo{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1 !important;
  text-decoration:none !important;
  isolation:isolate !important;
}

.main-header .header-top .logo::before{
  flex-shrink:0 !important;
  position:relative !important;
  z-index:1 !important;
}

.main-header .header-top .logo::after{
  content:"";
  position:absolute;
  inset:-7px -10px;
  z-index:3;
  border-radius:999px;
  background:linear-gradient(112deg, rgba(15,23,42,0) 14%, rgba(100,116,139,.08) 35%, rgba(71,85,105,.22) 50%, rgba(100,116,139,.08) 65%, rgba(15,23,42,0) 86%);
  opacity:0;
  pointer-events:none;
  transform:translateX(-120%) skewX(-10deg);
  mix-blend-mode:multiply;
}

.main-header .header-top .logo.is-premium-shimmer::after{
  animation:chefSelectWholeLogoShimmer 2200ms cubic-bezier(.33,1,.68,1) 1;
}

@keyframes chefSelectWholeLogoShimmer{
  0%{opacity:0;transform:translateX(-120%) skewX(-10deg)}
  22%{opacity:.10}
  50%{opacity:.42}
  78%{opacity:.12}
  100%{opacity:0;transform:translateX(120%) skewX(-10deg)}
}

.main-header .header-top .logo i{
  display:none !important;
}

.main-header .header-top .logo-copy{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:2px !important;
  min-width:0 !important;
  line-height:1 !important;
  white-space:normal !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.main-header .header-top .logo-copy::after{
  content:"";
  position:absolute;
  inset:-20% -35%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.58) 48%, rgba(187,247,208,.52) 52%, transparent 64%);
  transform:translateX(-120%) skewX(-10deg);
  opacity:0;
  animation:chefSelectWholeLogoShimmer 6.5s ease-in-out infinite;
  will-change:transform, opacity;
}

.main-header .header-top .logo-brand-main,
.main-header .header-top .logo-brand-sub{
  display:block !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  transform-origin:left center;
  transition:none !important;
}

.main-header .header-top .logo-brand-main{
  color:var(--primary);
  font-size:clamp(17px, 1.35vw, 24px);
  font-weight:800;
  letter-spacing:0;
  line-height:1.02;
  transform:scale(1);
  opacity:1;
}

.main-header .header-top .logo-brand-sub{
  color:var(--primary-dark);
  font-size:clamp(8px, 0.64vw, 10px);
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  opacity:.94;
  transform:scale(1);
}

@media (max-width:768px){
  .main-header .header-top .logo{
    justify-self:center !important;
    justify-content:center !important;
    gap:10px !important;
  }

  .main-header .header-top .logo-copy{
    align-items:flex-start !important;
    gap:1px !important;
  }

  .main-header .header-top .logo-brand-main{
    font-size:clamp(15px, 5vw, 19px);
  }

  .main-header .header-top .logo-brand-sub{
    font-size:clamp(7px, 2.25vw, 9px);
    letter-spacing:0;
  }
}

@media (max-width:420px){
  .main-header .header-top .logo{
    gap:8px !important;
  }

  .main-header .header-top .logo::before{
    width:50px !important;
  }

  .main-header .header-top .logo-brand-main{
    font-size:clamp(14px, 4.8vw, 17px);
  }

  .main-header .header-top .logo-brand-sub{
    font-size:clamp(7px, 2vw, 8px);
    letter-spacing:0;
  }
}

@media (min-width:1024px){
  .main-header .header-top{
    grid-template-columns:minmax(250px, 290px) minmax(0, 1fr) auto !important;
    gap:20px !important;
  }

  .main-header .header-top .logo{
    justify-self:start !important;
    max-width:290px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .main-header .header-top .logo-copy::after{
    animation:none !important;
    opacity:0 !important;
  }

  .main-header .header-top .logo-brand-main,
  .main-header .header-top .logo-brand-sub{
    transition:none !important;
  }
}