/* ASIGNA PROXIMA — Unified Design System v1
   Visual layer only: keeps existing PHP/JS behavior intact. */
:root{
  --text:#0f172a;
  --ink:#0f172a;
  --ink2:#1e293b;
  --muted:#64748b;
  --muted2:#94a3b8;
  --bg:#f7fafc;
  --card:#ffffff;
  --card2:#f8fafc;
  --stroke:#e2e8f0;
  --stroke2:#edf2f7;
  --brand:#2563eb;
  --brand-2:#60a5fa;
  --brand-3:#14b8a6;
  --success:#16a34a;
  --amber:#f59e0b;
  --orange:#f59e0b;
  --danger:#dc2626;
  --rose:#dc2626;
  --shadow1:0 8px 24px rgba(15,23,42,.08);
  --shadow:0 12px 32px rgba(15,23,42,.09);
  --shadow2:0 6px 18px rgba(15,23,42,.06);
  --radius:18px;
  --radius2:14px;
  --hdr-text-strong:#0f172a;
  --hdr-text:#334155;
  --hdr-text-muted:#64748b;
}

html{background:#f7fafc}
body{
  color:var(--text);
  background:
    radial-gradient(900px 420px at 5% 0%, rgba(96,165,250,.12), transparent 62%),
    radial-gradient(760px 420px at 98% 8%, rgba(20,184,166,.08), transparent 64%),
    linear-gradient(180deg,#fbfdff 0%,#f7fafc 55%,#f5f8fb 100%);
}

/* Header */
.topbar{
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid #e7edf5 !important;
  box-shadow:0 4px 18px rgba(15,23,42,.045) !important;
  backdrop-filter:blur(14px);
}
.topbar::after{
  height:2px !important;
  background:linear-gradient(90deg,#60a5fa,#2563eb,#14b8a6) !important;
  opacity:.8;
}
.topbar .container.nav{padding-top:12px;padding-bottom:12px}
.brand{gap:11px}
.brand img,.brandLogo{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 5px 16px rgba(37,99,235,.10) !important;
  filter:none !important;
}
.brand:hover img{transform:translateY(-1px) !important;box-shadow:0 8px 20px rgba(37,99,235,.14) !important;filter:none !important}
.brand .title{
  color:#0f3d7a !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
}

.link{
  border-radius:11px !important;
  padding:8px 11px !important;
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  color:#334155 !important;
  font-weight:800 !important;
}
.link:hover{transform:none !important;background:#f1f5f9 !important;border-color:#e2e8f0 !important;box-shadow:none !important;color:#1d4ed8 !important}
.link.active{background:#eff6ff !important;border-color:#bfdbfe !important;color:#1d4ed8 !important}

.topActions{gap:8px !important}
.topPill,.topbar .topPill{
  min-height:38px;
  height:38px;
  border-radius:11px !important;
  padding:0 12px !important;
  border:1px solid #dbe4ef !important;
  background:#fff !important;
  color:#334155 !important;
  box-shadow:0 3px 10px rgba(15,23,42,.045) !important;
  font-size:14px !important;
  font-weight:850 !important;
}
.topPill:hover{filter:none !important;background:#f8fafc !important;border-color:#cbd5e1 !important}
.topPill.primary,
:is(body.mnav-enabled,html.mnav-enabled) .mnav-topbtn{
  border-radius:11px !important;
  border:1px solid #2563eb !important;
  background:#2563eb !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(37,99,235,.18) !important;
  min-width:auto !important;
  overflow:visible !important;
}
.topbar .mnav-topbtn-text{color:#fff !important;font-size:14px !important}
.mnav-topbtn::before,.mnav-topbtn::after{display:none !important}
.topActions svg.icoCart,.topActions .cartIco{color:#2563eb !important;filter:none !important}
.topBadge{background:#eff6ff !important;color:#1d4ed8 !important;border:1px solid #bfdbfe !important;box-shadow:none !important}


/* Cards and layout */
.card{
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid #e3eaf3 !important;
  box-shadow:0 7px 22px rgba(15,23,42,.055) !important;
  overflow:hidden;
}
.card::before{
  left:0 !important;right:0 !important;top:0 !important;height:3px !important;border-radius:0 !important;
  background:linear-gradient(90deg,#60a5fa,#2563eb,#14b8a6) !important;
  opacity:.58 !important;
}
.card:hover{box-shadow:0 9px 26px rgba(15,23,42,.07)}
.h1,.section-head h2,.section-title h2{color:#0f172a}
.p,.small,.muted{color:#64748b !important}
.hr{background:#edf2f7 !important}

/* Buttons */
.btn{
  border-radius:12px !important;
  min-height:40px;
  padding:9px 14px !important;
  background:#2563eb !important;
  border:1px solid #2563eb !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(37,99,235,.15) !important;
  font-weight:850 !important;
  filter:none !important;
}
.btn::before,.btn::after{display:none !important}
.btn:hover{transform:translateY(-1px) !important;box-shadow:0 7px 18px rgba(37,99,235,.20) !important;filter:none !important}
.btn:active{transform:translateY(0) !important}
.btn.ghost,.btn.secondary{
  background:#fff !important;
  color:#334155 !important;
  border-color:#dbe4ef !important;
  box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
}
.btn.ghost:hover,.btn.secondary:hover{background:#f8fafc !important;border-color:#cbd5e1 !important;color:#1d4ed8 !important;box-shadow:0 3px 10px rgba(15,23,42,.06) !important}
.btn.danger{
  background:#fff !important;
  color:#dc2626 !important;
  border-color:#fecaca !important;
  box-shadow:none !important;
}
.btn.danger:hover{background:#fef2f2 !important;border-color:#fca5a5 !important;box-shadow:none !important}
.btn.warn{background:#fff7ed !important;color:#b45309 !important;border-color:#fed7aa !important;box-shadow:none !important}

/* Forms */
.input,.select,textarea,
input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],select,textarea{
  border-radius:12px !important;
  background:#fff !important;
  border:1px solid #dbe4ef !important;
  color:#0f172a !important;
  box-shadow:none !important;
}
.input:focus,.select:focus,textarea:focus,
input:focus,select:focus{
  outline:none !important;
  border-color:#60a5fa !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
  background:#fff !important;
}
::placeholder{color:#94a3b8 !important;opacity:1}

.badge,.pill,.chip,.p-pill{
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  color:#475569 !important;
  box-shadow:none !important;
}

/* Tables */
.table{border-radius:14px !important;border-color:#e2e8f0 !important;background:#fff !important}
.table thead th{background:#f8fafc !important;color:#475569 !important;border-color:#e2e8f0 !important}
.table th,.table td{border-color:#edf2f7 !important}
.table tbody tr:hover{background:#f8fbff}

/* Product presentation */
.product-card img,.p-card .p-img,.qv .qv-img{
  border-radius:14px !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
}
.product-card:hover img{transform:none !important;box-shadow:none !important;filter:none !important}
.p-card .p-title,.product-card .name{color:#0f172a}
.p-card .p-desc{color:#64748b}

/* Catalog legacy-dark cleanup */
.cat-toolbar,.cat-mbarPro,.msheet-panel,.qv .panel{background:#fff !important;color:#0f172a !important}
.p-pill,.mchip button,.cat-mbarPro .mpro-bubble{
  background:#f8fafc !important;
  border-color:#e2e8f0 !important;
  color:#334155 !important;
}
.mchip button.active{background:#eff6ff !important;border-color:#bfdbfe !important;color:#1d4ed8 !important}
.mchipsWrap::before{background:linear-gradient(to right,#fff,rgba(255,255,255,0)) !important}
.mchipsWrap::after{background:linear-gradient(to left,#fff,rgba(255,255,255,0)) !important}
[dir="rtl"] .mchipsWrap::before{background:linear-gradient(to left,#fff,rgba(255,255,255,0)) !important}
[dir="rtl"] .mchipsWrap::after{background:linear-gradient(to right,#fff,rgba(255,255,255,0)) !important}
.mchipsArrow{background:#fff !important;border-color:#e2e8f0 !important;color:#2563eb !important}
.skeleton .sk,.sk{background:#f1f5f9 !important;border-color:#e2e8f0 !important}
.sk:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent) !important}
.qv,.msheet{background:rgba(15,23,42,.48) !important}

/* Modals / sheets */
.search-sheet,.mnav-sheet,.modalCard,.homeQuickDialog{
  background:#fff !important;
  color:#0f172a !important;
  border-color:#e2e8f0 !important;
}

/* Footer */
.footer{color:#64748b}
.footer .card{background:#fff !important}

/* Mobile */
@media (max-width:720px){
  .container{padding-left:12px !important;padding-right:12px !important}
  .topbar .container.nav{padding-top:9px !important;padding-bottom:9px !important}
  .brand img,.brandLogo{width:38px !important;height:38px !important}
  .topActions .topPill,.topActions .mnav-topbtn{height:36px !important;min-height:36px !important;padding:0 10px !important;border-radius:10px !important}
  .card{border-radius:16px !important}
  .btn{min-height:39px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}


/* =========================================================
   v2 — UNIFIED COMPACT NAVIGATION
   One small menu; no repeated catalog/search/cart/lang dock.
   ========================================================= */
.topbar .topActions [data-open-catalog],
.topbar .topActions [data-open-search]{
  display:none !important;
}

.mnav-overlay.compact{
  position:fixed !important;
  inset:0 !important;
  z-index:10000 !important;
  opacity:0 !important;
  pointer-events:none !important;
  background:rgba(15,23,42,.12) !important;
  backdrop-filter:blur(2px);
  transition:opacity .14s ease !important;
}
.mnav-overlay.compact.open{
  opacity:1 !important;
  pointer-events:auto !important;
}
.mnav-overlay.compact .mnav-sheet{
  position:fixed !important;
  top:76px !important;
  bottom:auto !important;
  width:min(310px,calc(100vw - 24px)) !important;
  max-width:310px !important;
  max-height:none !important;
  margin:0 !important;
  padding:9px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 18px 48px rgba(15,23,42,.18) !important;
  overflow:visible !important;
  transform:translateY(-6px) scale(.985) !important;
  transition:transform .14s ease,opacity .14s ease !important;
}
html[dir="rtl"] .mnav-overlay.compact .mnav-sheet{
  left:12px !important;
  right:auto !important;
}
html:not([dir="rtl"]) .mnav-overlay.compact .mnav-sheet,
html[dir="ltr"] .mnav-overlay.compact .mnav-sheet{
  right:12px !important;
  left:auto !important;
}
.mnav-overlay.compact.open .mnav-sheet{
  transform:translateY(0) scale(1) !important;
}
.mnav-overlay.compact .mnav-sheet::before,
.mnav-overlay.compact .mnav-sheet::after,
.mnav-overlay.compact .mnav-rain{
  display:none !important;
}
.mnav-overlay.compact .mnav-head{
  min-height:34px !important;
  padding:2px 4px 7px !important;
  margin:0 0 3px !important;
  border-bottom:1px solid #eef2f7 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.mnav-overlay.compact .mnav-title{
  font-size:12px !important;
  font-weight:800 !important;
  color:#64748b !important;
  letter-spacing:0 !important;
}
.mnav-overlay.compact .mnav-close{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:9px !important;
  border:0 !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
.mnav-overlay.compact .mnav-close::before,
.mnav-overlay.compact .mnav-close::after{
  background:#64748b !important;
}
.mnav-overlay.compact .mnav-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  overflow:visible !important;
  padding:0 !important;
}
.mnav-overlay.compact .mnav-card{
  min-height:44px !important;
  width:100% !important;
  padding:6px 8px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  border:0 !important;
  border-radius:11px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  color:#0f172a !important;
}
html[dir="rtl"] .mnav-overlay.compact .mnav-card{direction:rtl !important;}
.mnav-overlay.compact .mnav-card::before,
.mnav-overlay.compact .mnav-card::after{display:none !important;}
.mnav-overlay.compact .mnav-card:hover{
  background:#f1f5f9 !important;
  transform:none !important;
}
.mnav-overlay.compact .mnav-card.active{
  background:#eff6ff !important;
  color:#1d4ed8 !important;
}
.mnav-overlay.compact .mnav-ico{
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  border-radius:9px !important;
  border:1px solid #e2e8f0 !important;
  background-color:#f8fafc !important;
  box-shadow:none !important;
  background-size:16px 16px !important;
}
.mnav-overlay.compact .mnav-card.active .mnav-ico{
  background-color:#dbeafe !important;
  border-color:#bfdbfe !important;
}
.mnav-overlay.compact .mnav-card-title{
  flex:1 !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-align:start !important;
  color:inherit !important;
  opacity:1 !important;
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.topbar .mnav-topbtn{
  min-width:auto !important;
  padding-inline:11px !important;
}
@media (max-width:560px){
  .topbar .mnav-topbtn-text{display:none !important;}
  .topbar .mnav-topbtn{width:40px !important;padding:0 !important;}
  .topbar .topActions{gap:6px !important;}
  .mnav-overlay.compact .mnav-sheet{top:68px !important;}
}

/* Homepage: fewer, clearer primary modules */
.ap-odoo-home .odooApps{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  max-width:900px !important;
}
.ap-odoo-home .odooHomeTools{display:none !important;}
@media (max-width:820px){
  .ap-odoo-home .odooApps{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* =========================================================
   V3 — RESPONSIVE NAVIGATION
   Desktop = direct header navigation.
   Tablet/phone = slim right-side drawer.
   No duplicated cart/language/search entries inside the menu.
   ========================================================= */

/* The old page-specific link row remains in the markup only as a fallback/data source. */
.ap-nav-v3 .topbar .links{display:none !important;}

/* Header geometry */
.ap-nav-v3 .topbar .container.nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}
.ap-nav-v3 .topbar .brand{
  flex:0 1 245px !important;
  min-width:0 !important;
}
.ap-nav-v3 .topbar .topActions{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex:0 0 auto !important;
}

/* Clean action order: Cart, language, then hamburger on mobile. */
.ap-nav-v3 .topActions a.topPill[href*="cart"]{order:1 !important;}
.ap-nav-v3 .topActions #langSwitch{order:2 !important;}
.ap-nav-v3 .topActions .mnav-topbtn{order:3 !important;}

/* Cart is an icon action, not a wide text pill. */
.ap-nav-v3 .topActions a.topPill[href*="cart"]{
  position:relative !important;
  width:40px !important;
  min-width:40px !important;
  height:38px !important;
  padding:0 !important;
  justify-content:center !important;
}
.ap-nav-v3 .topActions a.topPill[href*="cart"] .topBadge{
  position:absolute !important;
  top:-5px !important;
  inset-inline-end:-5px !important;
  min-width:18px !important;
  width:auto !important;
  height:18px !important;
  padding:0 4px !important;
  font-size:10px !important;
  line-height:18px !important;
}
.ap-nav-v3 .topActions #langSwitch{
  min-width:40px !important;
  width:40px !important;
  padding:0 !important;
  justify-content:center !important;
}

/* ---------- Desktop: direct nav; absolutely no popup menu ---------- */
.ap-desktop-nav{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  white-space:nowrap;
}
.ap-desktop-nav .ap-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:#334155;
  text-decoration:none;
  font-size:13.5px;
  font-weight:800;
  line-height:1;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.ap-desktop-nav .ap-nav-link:hover{
  background:#f8fafc;
  border-color:#e2e8f0;
  color:#1d4ed8;
}
.ap-desktop-nav .ap-nav-link.active{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}

@media (min-width:981px){
  .ap-nav-v3 .topActions .mnav-topbtn{display:none !important;}
  .ap-nav-v3 .mnav-overlay{display:none !important;}
  .ap-nav-v3 .topbar .brand .title{font-size:15px !important;}
}

/* Slightly tighter desktop before switching to drawer. */
@media (min-width:981px) and (max-width:1160px){
  .ap-nav-v3 .topbar .brand{flex-basis:205px !important;}
  .ap-desktop-nav .ap-nav-link{padding-inline:7px;font-size:12.5px;}
  .ap-nav-v3 .topbar .container.nav{gap:8px !important;}
}

/* ---------- Tablet/phone: compact header + side drawer ---------- */
@media (max-width:980px){
  .ap-desktop-nav{display:none !important;}

  /* Override the old rule that hid all top actions on phones. */
  .ap-nav-v3 .topbar .topActions{display:flex !important;}
  .ap-nav-v3 .topbar .container.nav{
    justify-content:space-between !important;
    gap:8px !important;
  }
  .ap-nav-v3 .topbar .brand{
    flex:1 1 auto !important;
    max-width:none !important;
  }

  .ap-nav-v3 .topActions .mnav-topbtn{
    display:inline-flex !important;
    width:40px !important;
    min-width:40px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:11px !important;
  }
  .ap-nav-v3 .topActions .mnav-topbtn-text{display:none !important;}
  .ap-nav-v3 .topActions .mnav-topbtn-ico{
    width:20px !important;
    height:20px !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:#fff !important;
  }
  .ap-nav-v3 .topActions .mnav-topbtn-ico svg{
    display:block !important;
    width:20px !important;
    height:20px !important;
    color:currentColor !important;
  }
  .ap-nav-v3 .topActions .mnav-topbtn-ico::before,
  .ap-nav-v3 .topActions .mnav-topbtn-ico::after{display:none !important;}

  /* Overlay covers the page, drawer itself stays narrow. */
  .ap-nav-v3 .mnav-overlay.compact.ap-mobile-drawer{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    background:rgba(15,23,42,.28) !important;
    backdrop-filter:blur(2px) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .18s ease !important;
  }
  .ap-nav-v3 .mnav-overlay.compact.ap-mobile-drawer.open{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* Always open from the physical right side for consistent muscle memory. */
  .ap-nav-v3 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(300px,calc(100vw - 52px)) !important;
    max-width:300px !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:10px 10px calc(14px + env(safe-area-inset-bottom)) !important;
    border:0 !important;
    border-left:1px solid #e2e8f0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:-18px 0 48px rgba(15,23,42,.18) !important;
    overflow-y:auto !important;
    transform:translateX(104%) !important;
    transition:transform .22s cubic-bezier(.2,.8,.2,1) !important;
  }
  .ap-nav-v3 .mnav-overlay.compact.ap-mobile-drawer.open .mnav-sheet{
    transform:translateX(0) !important;
  }

  .ap-nav-v3 .mnav-overlay.compact .mnav-head{
    min-height:54px !important;
    padding:4px 4px 10px !important;
    margin:0 0 6px !important;
    border-bottom:1px solid #edf2f7 !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-title{
    color:#0f172a !important;
    font-size:15px !important;
    font-weight:900 !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-close{
    position:relative !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    border-radius:10px !important;
    border:1px solid #e2e8f0 !important;
    background:#f8fafc !important;
    box-shadow:none !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-close::before,
  .ap-nav-v3 .mnav-overlay.compact .mnav-close::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:10px !important;
    top:16px !important;
    width:14px !important;
    height:2px !important;
    border:0 !important;
    background:#475569 !important;
    box-shadow:none !important;
    transform-origin:center !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-close::before{transform:rotate(45deg) !important;}
  .ap-nav-v3 .mnav-overlay.compact .mnav-close::after{transform:rotate(-45deg) !important;}

  .ap-nav-v3 .mnav-overlay.compact .mnav-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    padding:2px 0 !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-card{
    min-height:48px !important;
    padding:7px 8px !important;
    gap:10px !important;
    border:1px solid transparent !important;
    border-radius:11px !important;
    background:transparent !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-card:hover{
    background:#f8fafc !important;
    border-color:#e2e8f0 !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-card.active{
    background:#eff6ff !important;
    border-color:#bfdbfe !important;
    color:#1d4ed8 !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-ico{
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    border-radius:9px !important;
  }
  .ap-nav-v3 .mnav-overlay.compact .mnav-card-title{
    font-size:14px !important;
    font-weight:800 !important;
  }
}

/* Phone proportions: keep the full ASIGNA brand and all 3 actions without overflow. */
@media (max-width:560px){
  .ap-nav-v3 .topbar .container.nav{
    padding:8px 9px !important;
    border-radius:15px !important;
  }
  .ap-nav-v3 .topbar .brand{gap:6px !important;}
  .ap-nav-v3 .topbar .brand img,
  .ap-nav-v3 .topbar .brandLogo{
    width:34px !important;
    height:34px !important;
    border-radius:10px !important;
  }
  .ap-nav-v3 .topbar .brand .title{
    font-size:12.5px !important;
    letter-spacing:.15px !important;
    white-space:nowrap !important;
  }
  .ap-nav-v3 .topbar .topActions{gap:5px !important;}
  .ap-nav-v3 .topActions a.topPill[href*="cart"],
  .ap-nav-v3 .topActions #langSwitch,
  .ap-nav-v3 .topActions .mnav-topbtn{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
  }
  .ap-nav-v3 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
    width:min(276px,calc(100vw - 56px)) !important;
    max-width:276px !important;
  }
}

@media (max-width:350px){
  .ap-nav-v3 .topbar .brand .title{font-size:11.5px !important;}
  .ap-nav-v3 .topbar .brand img,
  .ap-nav-v3 .topbar .brandLogo{width:32px !important;height:32px !important;}
  .ap-nav-v3 .topActions a.topPill[href*="cart"],
  .ap-nav-v3 .topActions #langSwitch,
  .ap-nav-v3 .topActions .mnav-topbtn{
    width:34px !important;min-width:34px !important;height:34px !important;min-height:34px !important;
  }
}


/* =========================================================
   V4 — UNIVERSAL MINIMAL HEADER
   All devices: brand + Menu + Cart + Language only.
   No direct navigation links in the header at any viewport.
   The menu always opens as the same slim right-side drawer.
   ========================================================= */

/* Never expose direct navigation links, regardless of viewport. */
.ap-nav-v4 .topbar .links,
.ap-nav-v4 .ap-desktop-nav{
  display:none !important;
}

/* The three controls are always visible. */
.ap-nav-v4 .topbar .topActions{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex:0 0 auto !important;
}
.ap-nav-v4 .topActions .mnav-topbtn{
  display:inline-flex !important;
  width:40px !important;
  min-width:40px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
}
.ap-nav-v4 .topActions .mnav-topbtn-text{
  display:none !important;
}
.ap-nav-v4 .topActions .mnav-topbtn-ico{
  width:20px !important;
  height:20px !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#fff !important;
}
.ap-nav-v4 .topActions .mnav-topbtn-ico svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  color:currentColor !important;
}
.ap-nav-v4 .topActions .mnav-topbtn-ico::before,
.ap-nav-v4 .topActions .mnav-topbtn-ico::after{
  display:none !important;
}

/* Universal order: Menu, Cart, Language in the actions group. */
.ap-nav-v4 .topActions .mnav-topbtn{order:1 !important;}
.ap-nav-v4 .topActions a.topPill[href*="cart"]{order:2 !important;}
.ap-nav-v4 .topActions #langSwitch{order:3 !important;}

/* Keep the header balanced now that there is no center navigation. */
.ap-nav-v4 .topbar .container.nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.ap-nav-v4 .topbar .brand{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:none !important;
}

/* The side drawer is used on EVERY device, not only <= 980px. */
.ap-nav-v4 .mnav-overlay.compact.ap-mobile-drawer{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:10000 !important;
  background:rgba(15,23,42,.28) !important;
  backdrop-filter:blur(2px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .18s ease !important;
}
.ap-nav-v4 .mnav-overlay.compact.ap-mobile-drawer.open{
  opacity:1 !important;
  pointer-events:auto !important;
}
.ap-nav-v4 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  bottom:0 !important;
  width:min(300px,calc(100vw - 52px)) !important;
  max-width:300px !important;
  height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:10px 10px calc(14px + env(safe-area-inset-bottom)) !important;
  border:0 !important;
  border-left:1px solid #e2e8f0 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:-18px 0 48px rgba(15,23,42,.18) !important;
  overflow-y:auto !important;
  transform:translateX(104%) !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1) !important;
}
.ap-nav-v4 .mnav-overlay.compact.ap-mobile-drawer.open .mnav-sheet{
  transform:translateX(0) !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-head{
  min-height:54px !important;
  padding:4px 4px 10px !important;
  margin:0 0 6px !important;
  border-bottom:1px solid #edf2f7 !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-title{
  color:#0f172a !important;
  font-size:15px !important;
  font-weight:900 !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-close{
  position:relative !important;
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  border:1px solid #e2e8f0 !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-close::before,
.ap-nav-v4 .mnav-overlay.compact .mnav-close::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:10px !important;
  top:16px !important;
  width:14px !important;
  height:2px !important;
  border:0 !important;
  background:#475569 !important;
  box-shadow:none !important;
  transform-origin:center !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-close::before{transform:rotate(45deg) !important;}
.ap-nav-v4 .mnav-overlay.compact .mnav-close::after{transform:rotate(-45deg) !important;}
.ap-nav-v4 .mnav-overlay.compact .mnav-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  padding:2px 0 !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-card{
  min-height:48px !important;
  padding:7px 8px !important;
  gap:10px !important;
  border:1px solid transparent !important;
  border-radius:11px !important;
  background:transparent !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-card:hover{
  background:#f8fafc !important;
  border-color:#e2e8f0 !important;
}
.ap-nav-v4 .mnav-overlay.compact .mnav-card.active{
  background:#eff6ff !important;
  border-color:#bfdbfe !important;
  color:#1d4ed8 !important;
}

@media (max-width:560px){
  .ap-nav-v4 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
    width:min(276px,calc(100vw - 56px)) !important;
    max-width:276px !important;
  }
  .ap-nav-v4 .topActions .mnav-topbtn,
  .ap-nav-v4 .topActions a.topPill[href*="cart"],
  .ap-nav-v4 .topActions #langSwitch{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
  }
}

/* V4 pre-init guarantee: legacy topbar links never flash on screen. */
.topbar .links,.ap-desktop-nav{display:none !important;}


/* =========================================================
   V5 — UTILITY-ONLY HEADER
   No logo, no site name and no navigation links in the header.
   Every device shows only: Menu + Cart + Language.
   Brand identity lives in the homepage Hero and in the drawer.
   ========================================================= */

/* Pre-init guarantee: the old brand/direct shortcuts never flash. */
html.ap-nav-v5 .topbar .brand,
html.ap-nav-v5 .topbar .links,
html.ap-nav-v5 .ap-desktop-nav{
  display:none !important;
}

/* A thin, modern sticky utility rail. */
html.ap-nav-v5 .topbar{
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 6px 20px rgba(15,23,42,.045) !important;
  backdrop-filter:saturate(1.2) blur(16px) !important;
  -webkit-backdrop-filter:saturate(1.2) blur(16px) !important;
  transition:background .18s ease,box-shadow .18s ease !important;
}
html.ap-nav-v5 .topbar::after{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.34),rgba(20,184,166,.28),transparent) !important;
}
html.ap-nav-v5 .topbar .container.nav{
  display:flex !important;
  align-items:center !important;
  min-height:58px !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
  gap:0 !important;
  transition:min-height .18s ease,padding .18s ease !important;
}

/* Only the 3 utility controls are allowed in the customer header. */
html.ap-nav-v5 .topbar .topActions{
  width:100% !important;
  max-width:none !important;
  flex:1 1 100% !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  direction:ltr !important;
}
html.ap-nav-v5 .topbar .topActions > *{
  display:none !important;
}
html.ap-nav-v5 .topbar .topActions > #langSwitch,
html.ap-nav-v5 .topbar .topActions > a[href*="cart"],
html.ap-nav-v5 .topbar .topActions > .mnav-topbtn{
  display:inline-flex !important;
}

/* Physical layout: one control at one edge, Cart + language at the other. */
html[dir="ltr"].ap-nav-v5 .topActions > .mnav-topbtn{
  order:1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
}
html[dir="ltr"].ap-nav-v5 .topActions > a[href*="cart"]{order:2 !important;}
html[dir="ltr"].ap-nav-v5 .topActions > #langSwitch{order:3 !important;}

html[dir="rtl"].ap-nav-v5 .topActions > #langSwitch{order:1 !important;}
html[dir="rtl"].ap-nav-v5 .topActions > a[href*="cart"]{order:2 !important;}
html[dir="rtl"].ap-nav-v5 .topActions > .mnav-topbtn{
  order:3 !important;
  margin-left:auto !important;
  margin-right:0 !important;
}

/* Uniform touch targets. */
html.ap-nav-v5 .topActions > #langSwitch,
html.ap-nav-v5 .topActions > a[href*="cart"],
html.ap-nav-v5 .topActions > .mnav-topbtn{
  position:relative !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  border-radius:12px !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  color:#334155 !important;
  box-shadow:0 3px 10px rgba(15,23,42,.045) !important;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease !important;
}
html.ap-nav-v5 .topActions > .mnav-topbtn{
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(37,99,235,.18) !important;
}
html.ap-nav-v5 .topActions > #langSwitch:hover,
html.ap-nav-v5 .topActions > a[href*="cart"]:hover{
  border-color:#bfdbfe !important;
  background:#f8fbff !important;
  color:#1d4ed8 !important;
}
html.ap-nav-v5 .topActions > .mnav-topbtn:hover{
  background:#1d4ed8 !important;
  border-color:#1d4ed8 !important;
}
html.ap-nav-v5 .topActions > #langSwitch:active,
html.ap-nav-v5 .topActions > a[href*="cart"]:active,
html.ap-nav-v5 .topActions > .mnav-topbtn:active{transform:scale(.96) !important;}
html.ap-nav-v5 .topActions .mnav-topbtn-text{display:none !important;}
html.ap-nav-v5 .topActions .mnav-topbtn-ico,
html.ap-nav-v5 .topActions .mnav-topbtn-ico svg{
  width:21px !important;
  height:21px !important;
  display:block !important;
  color:currentColor !important;
}
html.ap-nav-v5 .topActions .mnav-topbtn-ico::before,
html.ap-nav-v5 .topActions .mnav-topbtn-ico::after{display:none !important;}
html.ap-nav-v5 .topActions svg.icoCart,
html.ap-nav-v5 .topActions .cartIco{
  width:20px !important;
  height:20px !important;
  color:#2563eb !important;
  filter:none !important;
}
html.ap-nav-v5 .topActions .topBadge{
  position:absolute !important;
  top:-5px !important;
  right:-5px !important;
  min-width:18px !important;
  width:auto !important;
  height:18px !important;
  padding:0 4px !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  background:#0f172a !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Shrink subtly after scroll; keep mobile targets comfortably tappable. */
body.ap-topbar-scrolled.ap-nav-v5 .topbar{
  background:rgba(255,255,255,.965) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.07) !important;
}
body.ap-topbar-scrolled.ap-nav-v5 .topbar .container.nav{
  min-height:50px !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
}
@media (min-width:721px){
  body.ap-topbar-scrolled.ap-nav-v5 .topActions > #langSwitch,
  body.ap-topbar-scrolled.ap-nav-v5 .topActions > a[href*="cart"],
  body.ap-topbar-scrolled.ap-nav-v5 .topActions > .mnav-topbtn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
  }
}

/* Branded drawer header: the brand appears only after opening the menu. */
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer{
  background:rgba(15,23,42,.34) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
}
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
  width:min(304px,calc(100vw - 48px)) !important;
  max-width:304px !important;
  padding:12px 11px calc(16px + env(safe-area-inset-bottom)) !important;
  border-left:1px solid #e2e8f0 !important;
  background:#fff !important;
}
html.ap-nav-v5 .mnav-overlay.compact .mnav-head{
  min-height:64px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:4px 3px 12px !important;
  margin:0 0 9px !important;
  border-bottom:1px solid #edf2f7 !important;
}
html.ap-nav-v5 .mnav-brand{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  color:#0f172a !important;
  text-decoration:none !important;
}
html.ap-nav-v5 .mnav-brand-logo{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  object-fit:contain !important;
  border-radius:10px !important;
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 3px 10px rgba(15,23,42,.055) !important;
}
html.ap-nav-v5 .mnav-brand-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
  line-height:1.2 !important;
}
html.ap-nav-v5 .mnav-brand-copy strong{
  max-width:180px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:13.5px !important;
  letter-spacing:.02em !important;
  font-weight:900 !important;
}
html.ap-nav-v5 .mnav-brand-copy small{
  color:#94a3b8 !important;
  font-size:10.5px !important;
  font-weight:700 !important;
}
html.ap-nav-v5 .mnav-section-label{
  padding:5px 8px 7px !important;
  color:#94a3b8 !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
}
html.ap-nav-v5 .mnav-overlay.compact .mnav-card{
  min-height:48px !important;
  border-radius:11px !important;
}

@media (max-width:560px){
  html.ap-nav-v5 .topbar .container.nav{
    min-height:54px !important;
    padding:6px 10px !important;
  }
  html.ap-nav-v5 .topActions > #langSwitch,
  html.ap-nav-v5 .topActions > a[href*="cart"],
  html.ap-nav-v5 .topActions > .mnav-topbtn{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:11px !important;
  }
  html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
    width:min(286px,calc(100vw - 44px)) !important;
    max-width:286px !important;
  }
}

@media (max-width:340px){
  html.ap-nav-v5 .topbar .container.nav{padding-inline:8px !important;}
  html.ap-nav-v5 .topbar .topActions{gap:5px !important;}
  html.ap-nav-v5 .topActions > #langSwitch,
  html.ap-nav-v5 .topActions > a[href*="cart"],
  html.ap-nav-v5 .topActions > .mnav-topbtn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }
}