/* Shared ASKALÉ top navigation additions */
.nav { position:relative; }
.nav nav { position:relative; }
.nav .catalogue-nav { position:relative; }
.nav .catalogue-trigger { display:inline-flex; align-items:center; gap:6px; }
.catalogue-dropdown { position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%); min-width:190px; padding:10px 0; background:var(--ivory,#fffaf2); border:1px solid rgba(112,72,44,.18); box-shadow:0 14px 35px rgba(36,27,22,.16); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, transform .16s ease, visibility .16s ease; z-index:100; }
.catalogue-nav:hover .catalogue-dropdown,.catalogue-nav:focus-within .catalogue-dropdown,.catalogue-nav.open .catalogue-dropdown { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.catalogue-dropdown a { display:block!important; margin:0!important; padding:10px 18px; color:var(--brown,#3b281d)!important; font-size:10px!important; letter-spacing:1px!important; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.catalogue-dropdown a:hover,.catalogue-dropdown a:focus { background:var(--cream,#f3eadc); }
.site-search-wrap { display:flex; align-items:center; margin-left:auto; margin-right:12px; }
.site-search { width:150px; height:34px; box-sizing:border-box; border:1px solid rgba(255,250,242,.35); background:rgba(255,250,242,.10); color:var(--ivory,#fffaf2); padding:0 12px; outline:none; font:inherit; font-size:10px; letter-spacing:.7px; }
.site-search::placeholder { color:rgba(255,250,242,.72); }
.site-search:focus { border-color:rgba(255,250,242,.72); background:rgba(255,250,242,.16); }
.mobile-search-form { display:none; padding:8px 0 4px; }
.mobile-search { width:100%; height:40px; box-sizing:border-box; border:1px solid var(--line,#d7c4aa); background:var(--ivory,#fffaf2); color:var(--ink,#241b16); padding:0 12px; font:inherit; }
.mobile-catalogue { display:none; }
@media (max-width:1100px) and (min-width:801px) { .site-search{width:125px}.nav a{margin-left:16px}.site-search-wrap{margin-right:8px} }
@media (max-width:800px) {
  .site-search-wrap { display:none; }
  .mobile-search-form { display:block; }
  .mobile-catalogue { display:block; }
  .mobile-catalogue .mobile-cat-trigger { display:flex; justify-content:space-between; align-items:center; width:100%; }
  .mobile-categories { display:none; padding:2px 0 8px 14px; }
  .mobile-catalogue.open .mobile-categories { display:block; }
  .mobile-categories a { display:block!important; padding:8px 0; margin:0!important; font-size:10px!important; letter-spacing:1px!important; text-transform:uppercase; }
  .mobile-menu .mobile-catalogue > a { margin:0; }
}

/* MOBILE ONLY — ASKALÉ brand wordmark from supplied logo */
@media (max-width:800px) {
  .nav .logo img {
    content:url("askale-logo-mobile.png") !important;
    height:36px !important;
    width:auto !important;
    object-fit:contain !important;
    display:block !important;
  }
}


/* ASKALÉ FINAL SHARED TOP NAV — navigation only */
header{background:#111 !important;color:#fff !important;border-bottom:1px solid rgba(255,255,255,.16) !important;box-shadow:0 4px 18px rgba(0,0,0,.16) !important;z-index:200 !important;}
header .nav{min-height:78px !important;gap:14px !important;}
header .logo{flex:0 0 auto !important;display:flex !important;align-items:center !important;}
header .logo img{content:url("askale-logo-mobile.png") !important;height:48px !important;width:auto !important;display:block !important;object-fit:contain !important;filter:none !important;}
header .nav nav{display:flex !important;align-items:center !important;gap:24px !important;}
header .nav nav a,header .nav>a,header .nav a{color:#fff !important;text-decoration:none !important;}
header .nav nav a{margin-left:0 !important;font-size:11px !important;text-transform:uppercase !important;letter-spacing:1.5px !important;white-space:nowrap !important;}
header .catalogue-nav{position:relative !important;}
header .catalogue-trigger{display:inline-flex !important;align-items:center !important;gap:6px !important;}
header .catalogue-dropdown{background:#111 !important;border:1px solid rgba(255,255,255,.16) !important;box-shadow:0 14px 35px rgba(0,0,0,.28) !important;}
header .catalogue-dropdown a{color:#fff !important;}
header .catalogue-dropdown a:hover,header .catalogue-dropdown a:focus{background:#262626 !important;}
header .site-search-wrap{display:flex !important;align-items:center !important;margin-left:auto !important;margin-right:0 !important;}
header .site-search{width:155px !important;height:34px !important;border:1px solid rgba(255,255,255,.30) !important;background:rgba(255,255,255,.08) !important;color:#fff !important;padding:0 12px !important;outline:none !important;font-size:10px !important;}
header .site-search::placeholder{color:rgba(255,255,255,.68) !important;}
header .site-search:focus{border-color:rgba(255,255,255,.72) !important;background:rgba(255,255,255,.12) !important;}
header .nav-actions{display:flex !important;align-items:center !important;gap:8px !important;}
header .nav-btn{border:1px solid rgba(255,255,255,.34) !important;background:transparent !important;color:#fff !important;padding:10px 14px !important;font-size:11px !important;white-space:nowrap !important;}
header .badge{background:#cbb293 !important;color:#17120f !important;}
header .mobile-menu-btn{display:none !important;border:1px solid rgba(255,255,255,.34) !important;background:transparent !important;color:#fff !important;}
.mobile-menu{background:#111 !important;color:#fff !important;border-bottom:1px solid rgba(255,255,255,.16) !important;z-index:199 !important;}
.mobile-menu a{color:#fff !important;}
.mobile-search{background:#1b1b1b !important;color:#fff !important;border:1px solid rgba(255,255,255,.22) !important;}
.mobile-search::placeholder{color:rgba(255,255,255,.64) !important;}
.mobile-categories a{color:#fff !important;}
@media(max-width:950px) and (min-width:701px){header .nav nav{gap:12px !important;}header .nav nav a{font-size:9px !important;}header .site-search{width:125px !important;}header .nav-btn{padding:9px 9px !important;font-size:9px !important;}}
@media(max-width:700px){
  header .nav{min-height:68px !important;gap:8px !important;}
  header .logo img{height:40px !important;}
  header .nav nav{display:none !important;}
  header .site-search-wrap{display:none !important;}
  header .mobile-menu-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;flex:0 0 auto !important;width:auto !important;}
  header .nav-actions{margin-left:auto !important;gap:5px !important;}
  header .nav-btn{padding:8px 7px !important;font-size:9px !important;}
  .mobile-menu{top:68px !important;left:0 !important;right:0 !important;padding:12px 18px !important;box-shadow:0 8px 20px rgba(0,0,0,.30) !important;}
  .mobile-menu.open{display:block !important;}
  .mobile-menu a{display:block !important;padding:14px 0 !important;border-bottom:1px solid rgba(255,255,255,.10) !important;}
  .mobile-menu .mobile-search-form{display:block !important;padding:0 0 6px !important;}
  .mobile-menu .mobile-search{width:100% !important;height:40px !important;box-sizing:border-box !important;}
}

/* ASKALÉ top-navigation logo — standardized across all pages */
.logo,
.logo span {
    color: #000000 !important;
}

/* Final mobile cart: the HTML already contains the cart icon. */
@media(max-width:700px){header .nav-btn::before,header .nav-btn::after{content:none !important;display:none !important;}}


/* ASKALÉ — cart icon + floating WhatsApp */
.cart-icon{width:18px!important;height:18px!important;display:inline-block!important;flex:0 0 auto!important;color:#111!important;vertical-align:middle!important;}
header .nav-btn .cart-icon{color:#111!important;}
header .nav-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;}
header .badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;line-height:1!important;}
.wa-float{position:fixed!important;right:22px!important;bottom:22px!important;width:auto!important;min-width:145px!important;height:50px!important;padding:0 16px!important;border-radius:28px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;background:#25D366!important;color:#fff!important;z-index:9999!important;box-shadow:0 8px 25px rgba(0,0,0,.20)!important;text-decoration:none!important;cursor:pointer!important;}
.wa-float .wa-icon{width:25px!important;height:25px!important;display:block!important;fill:currentColor!important;flex:0 0 auto!important;}
.wa-float .wa-label{font-size:12px!important;font-weight:600!important;letter-spacing:.2px!important;white-space:nowrap!important;}
@media(max-width:550px){.wa-float{right:14px!important;bottom:14px!important;min-width:132px!important;height:46px!important;padding:0 14px!important;}.wa-float .wa-icon{width:23px!important;height:23px!important}.wa-float .wa-label{font-size:11px!important}}


/* ================================================================
   ASKALÉ FINAL SHARED TOP NAV — MATCH SUPPLIED DESKTOP + MOBILE
   Applied to every public page. No page-content/layout changes.
   Desktop: menu -> logo -> wide search -> cart.
   Mobile:  menu -> logo -> search icon -> cart.
   ================================================================ */
header{background:#fff!important;color:#1f1813!important;border-bottom:1px solid #e5ddd4!important;box-shadow:0 3px 16px rgba(40,28,20,.07)!important;position:relative!important;z-index:200!important;}
header .wrap.nav{max-width:1600px!important;width:calc(100% - 72px)!important;min-height:96px!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;gap:18px!important;}
header .mobile-menu-btn{order:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 58px!important;width:58px!important;height:58px!important;padding:0!important;border:1px solid #d8cec2!important;background:#fff!important;color:#1f1813!important;font-size:0!important;line-height:1!important;}
header .mobile-menu-btn::before{content:'☰'!important;font-size:27px!important;font-family:Arial,sans-serif!important;font-weight:400!important;}
header .mobile-menu-btn[aria-expanded="true"]::before{content:'×'!important;font-size:34px!important;}
header .logo{order:2!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;flex:0 0 auto!important;min-width:180px!important;margin:0!important;padding:0!important;text-decoration:none!important;}
header .logo span{color:#17120f!important;font-family:Arial,sans-serif!important;font-weight:800!important;font-size:24px!important;letter-spacing:6px!important;text-transform:uppercase!important;white-space:nowrap!important;}
header .logo img{height:46px!important;width:auto!important;filter:none!important;}
header .nav nav{display:none!important;}
header .site-search-wrap{order:3!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:1 1 auto!important;margin:0!important;}
header .site-search-wrap form{width:100%!important;max-width:375px!important;margin:0!important;}
header .site-search{display:block!important;width:100%!important;height:68px!important;box-sizing:border-box!important;border:1px solid #d8cec2!important;background:#fff!important;color:#241b16!important;padding:0 18px!important;outline:none!important;font-family:Arial,sans-serif!important;font-size:16px!important;letter-spacing:.2px!important;}
header .site-search::placeholder{color:#8a7d70!important;opacity:1!important;}
header .site-search:focus{border-color:#b9aa9b!important;background:#fff!important;}
header .mobile-search-btn{order:4!important;display:none!important;}
header .nav-actions{order:5!important;display:flex!important;align-items:center!important;gap:0!important;margin:0!important;}
header .nav-btn{width:74px!important;height:68px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;border:1px solid #d8cec2!important;background:#fff!important;color:#1f1813!important;}
header .nav-btn .cart-icon{width:30px!important;height:30px!important;color:#1f1813!important;}
header .badge{position:relative!important;min-width:22px!important;height:22px!important;padding:0 6px!important;background:#d8c4ab!important;color:#241b16!important;border-radius:999px!important;font-size:12px!important;}
.mobile-top-search{display:none!important;}
.mobile-menu{background:#fff!important;color:#1f1813!important;border-bottom:1px solid #e5ddd4!important;z-index:199!important;}
.mobile-menu a{color:#1f1813!important;border-bottom-color:#eee7df!important;}
.mobile-menu .mobile-search-form{display:block!important;}
.mobile-menu .mobile-search{background:#fff!important;color:#241b16!important;border-color:#d8cec2!important;}

@media(max-width:700px){
  header .wrap.nav{width:100%!important;min-height:68px!important;padding:0 14px!important;gap:9px!important;}
  header .mobile-menu-btn{order:1!important;flex:0 0 58px!important;width:58px!important;height:58px!important;}
  header .logo{order:2!important;min-width:0!important;flex:1 1 auto!important;}
  header .logo span{font-size:20px!important;letter-spacing:4.5px!important;}
  header .logo img{height:38px!important;}
  header .site-search-wrap{display:none!important;}
  header .mobile-search-btn{order:4!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 58px!important;width:58px!important;height:58px!important;padding:0!important;border:1px solid #d8cec2!important;background:#fff!important;color:#1f1813!important;}
  header .mobile-search-btn svg{width:29px!important;height:29px!important;}
  header .nav-actions{order:5!important;flex:0 0 auto!important;}
  header .nav-btn{width:74px!important;height:58px!important;}
  header .nav-btn .cart-icon{width:28px!important;height:28px!important;}
  header .badge{min-width:21px!important;height:21px!important;font-size:11px!important;}
  .mobile-top-search{display:none!important;position:relative!important;padding:10px 14px!important;background:#fff!important;border-bottom:1px solid #e5ddd4!important;}
  .mobile-top-search.open{display:block!important;}
  .mobile-top-search-input{width:100%!important;height:44px!important;border:1px solid #d8cec2!important;background:#fff!important;color:#241b16!important;padding:0 12px!important;box-sizing:border-box!important;}
  .mobile-menu{top:68px!important;left:0!important;right:0!important;padding:12px 18px!important;box-shadow:0 8px 20px rgba(0,0,0,.12)!important;}
}

/* ================================================================
   ASKALÉ FINAL NAVIGATION CORRECTION — 2026-09-28
   Navigation only. Keep all page content/layout untouched.
   Desktop: hamburger -> ASKALÉ -> search -> cart.
   Mobile: hamburger -> ASKALÉ -> search icon -> cart.
   ================================================================ */
@media(min-width:701px){
  header .wrap.nav{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
  }
  header .mobile-menu-btn{
    order:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    font-size:0!important;
    border:1px solid #d8cec2!important;
    background:#fff!important;
    color:#1f1813!important;
    line-height:1!important;
    cursor:pointer!important;
  }
  header .mobile-menu-btn::before{
    content:'☰'!important;
    font-family:Arial,sans-serif!important;
    font-size:22px!important;
    font-weight:400!important;
    line-height:1!important;
  }
  header .mobile-menu-btn[aria-expanded="true"]::before{
    content:'×'!important;
    font-size:28px!important;
  }
  header .logo{
    order:2!important;
    min-width:0!important;
    flex:0 0 auto!important;
    margin:0 8px 0 0!important;
    padding:0!important;
  }
  header .logo span{font-size:23px!important;letter-spacing:5px!important;}
  header .logo img{height:44px!important;width:auto!important;}
  header .site-search-wrap{
    order:3!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:1 1 auto!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
  header .site-search-wrap form{width:100%!important;max-width:375px!important;margin:0!important;}
  header .site-search{height:58px!important;width:100%!important;}
  header .mobile-search-btn{display:none!important;}
  header .nav-actions{
    order:4!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
  header .nav-btn{
    width:58px!important;
    height:58px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  header .nav-btn .cart-icon{width:24px!important;height:24px!important;}
  header .badge{min-width:20px!important;height:20px!important;font-size:10px!important;}
  header .mobile-menu{display:none!important;}
}

@media(max-width:700px){
  header .wrap.nav{
    width:100%!important;
    min-height:68px!important;
    padding:0 12px!important;
    gap:8px!important;
  }
  header .mobile-menu-btn{
    order:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    font-size:0!important;
    line-height:1!important;
  }
  header .mobile-menu-btn::before{
    content:'☰'!important;
    font-family:Arial,sans-serif!important;
    font-size:22px!important;
    font-weight:400!important;
  }
  header .mobile-menu-btn[aria-expanded="true"]::before{content:'×'!important;font-size:27px!important;}
  header .logo{
    order:2!important;
    min-width:0!important;
    flex:1 1 auto!important;
    margin:0!important;
    padding:0!important;
  }
  header .logo span{font-size:19px!important;letter-spacing:4px!important;}
  header .logo img{height:37px!important;width:auto!important;}
  header .site-search-wrap{display:none!important;}
  header .mobile-search-btn{
    order:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #d8cec2!important;
    background:#fff!important;
    color:#1f1813!important;
    line-height:1!important;
  }
  header .mobile-search-btn svg{width:21px!important;height:21px!important;}
  header .nav-actions{
    order:4!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    margin:0!important;
  }
  header .nav-btn{
    width:50px!important;
    height:44px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
  }
  header .nav-btn .cart-icon{width:23px!important;height:23px!important;}
  header .badge{min-width:19px!important;height:19px!important;font-size:10px!important;}
  .mobile-top-search{display:none!important;}
}

/* ASKALÉ FIX — use the existing button text only; prevent duplicate hamburger pseudo-icon. */
header .mobile-menu-btn::before,
header .mobile-menu-btn::after{content:none!important;display:none!important;}
header .mobile-menu-btn{font-size:27px!important;}
header .mobile-menu-btn[aria-expanded="true"]{font-size:34px!important;}


/* ASKALÉ DESKTOP SECONDARY NAV — static HTML for reliable cross-browser rendering. */
.askale-desktop-subnav{
  display:none;
  box-sizing:border-box;
  width:100%;
  height:38px;
  align-items:center;
  justify-content:center;
  gap:30px;
  background:rgba(59,40,29,.97);
  border-bottom:1px solid rgba(255,250,242,.18);
  z-index:19;
  font-family:inherit;
}
.askale-desktop-subnav a{
  color:#fffaf2;
  text-decoration:none;
  font-size:10px;
  line-height:1;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap;
}
.askale-desktop-subnav a:hover{opacity:.72;}
@media (min-width:701px){
  .askale-desktop-subnav{display:flex!important;position:-webkit-sticky!important;position:sticky!important;top:74px!important;z-index:100!important;}
  .askale-desktop-subnav a{display:inline-flex;align-items:center;height:38px;}
  header .mobile-menu-btn{display:none!important;visibility:hidden!important;pointer-events:none!important;}
}
@media (max-width:700px){
  .askale-desktop-subnav{display:none!important;}
}