/* ASKALÉ — requested responsive/font/navigation fixes only. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  max-width: 100%;
  overflow-x: hidden;
}
body, body * {
  font-family: Arial, Helvetica, sans-serif !important;
}

img {
  max-width: 100%;
}
button, input, textarea, select {
  font: inherit;
}

/* Shared top navigator: keep all controls vertically aligned and close together. */
header .wrap.nav,
header .nav {
  min-width: 0 !important;
  width: 92% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
}
header .logo {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
}
header .logo span {
  font-family: Arial, Helvetica, sans-serif !important;
}
header .nav nav {
  min-width: 0 !important;
  align-items: center !important;
}
header .nav nav a,
header .catalogue-trigger,
header .nav-actions,
header .site-search-wrap,
header .nav-btn,
header .mobile-menu-btn {
  align-items: center !important;
  vertical-align: middle !important;
}
header .site-search-wrap {
  flex: 0 1 178px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
header .site-search-wrap form {
  width: 100% !important;
  margin: 0 !important;
}
header .site-search {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
header .nav-actions {
  flex: 0 0 auto !important;
  margin-left: 10px !important;
  gap: 8px !important;
}
header .nav-actions .nav-btn[data-askale-cart],
header .nav-btn[data-askale-cart] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: 42px !important;
  white-space: nowrap !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
header .nav-actions .nav-btn[data-askale-cart] .badge,
header .nav-btn[data-askale-cart] .badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 16px !important;
  height: 16px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Tablet / narrow desktop: prevent the full navigator from becoming cramped. */
@media (max-width: 1100px) and (min-width: 861px) {
  header .nav nav { gap: 14px !important; }
  header .nav nav a { font-size: 9px !important; letter-spacing: 1.15px !important; }
  header .site-search-wrap { flex-basis: 140px !important; }
  header .nav-actions { margin-left: 8px !important; }
  header .nav-btn[data-askale-cart] { min-width: 40px !important; }
}

/* Mobile / small tablets: menu, logo, search and cart remain on one level. */
@media (max-width: 860px) {
  header .wrap.nav,
  header .nav {
    min-height: 68px !important;
    height: 68px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 5px !important;
    width: 100% !important;
  }
  header .mobile-menu-btn {
    display: inline-flex !important;
    order: 1 !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  header .logo {
    order: 2 !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    max-width: 135px !important;
    margin: 0 !important;
  }
  header .logo span {
    max-width: 135px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    display: block !important;
  }
  header .logo img {
    max-width: 135px !important;
    height: auto !important;
  }
  header .nav nav {
    display: none !important;
  }
  header .site-search-wrap {
    display: flex !important;
    order: 3 !important;
    flex: 1 1 80px !important;
    min-width: 60px !important;
    max-width: 180px !important;
    margin: 0 !important;
  }
  header .site-search {
    width: 100% !important;
    height: 36px !important;
    min-width: 0 !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 10px !important;
  }
  header .site-search::placeholder {
    font-size: 9px !important;
  }
  header .nav-actions {
    order: 4 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  header .nav-actions .nav-btn[data-askale-cart],
  header .nav-btn[data-askale-cart] {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  header .nav-actions .nav-btn[data-askale-cart] .badge,
  header .nav-btn[data-askale-cart] .badge {
    top: -5px !important;
    right: -5px !important;
  }
  .mobile-menu {
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 68px) !important;
    overflow-y: auto !important;
    z-index: 999 !important;
  }
  .mobile-menu.open { display: block !important; }
  .mobile-menu a {
    display: block !important;
  }
}

/* Very narrow phones: reduce the search field before allowing the row to crowd. */
@media (max-width: 360px) {
  header .wrap.nav,
  header .nav { padding-left: 9px !important; padding-right: 9px !important; gap: 4px !important; }
  header .logo { max-width: 112px !important; }
  header .logo span { max-width: 112px !important; }
  header .logo img { max-width: 112px !important; }
  header .site-search-wrap { min-width: 56px !important; max-width: 100% !important; }
  header .site-search { padding-left: 7px !important; padding-right: 7px !important; }
}

/* Common page-level responsive safety. */
.page, main, section, aside, .wrap, .layout, .checkout-grid, .product-grid, .hero, .projects-wrap {
  min-width: 0;
}
@media (max-width: 900px) {
  .checkout-grid,
  .layout,
  .product-grid,
  .project-page .hero,
  .contactgrid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .projects-grid,
  .recommended-grid,
  .catalogue .grid {
    grid-template-columns: 1fr !important;
  }
  .field-row { grid-template-columns: 1fr !important; }
  .foot { flex-direction: column !important; align-items: flex-start !important; }
  .foot-links { flex-wrap: wrap !important; }
}

/* Prevent fixed-size controls from creating horizontal overflow. */
input, textarea, select, button, .btn {
  max-width: 100%;
}


/* ASKALÉ DESIGN FIX — mobile top-nav search + lighter footer. Only requested UI fixes. */
.mobile-search-btn{display:none!important;border:1px solid #d8cec2!important;background:#fff!important;color:#1f1813!important;width:38px!important;height:38px!important;padding:0!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;cursor:pointer!important;}
.mobile-search-btn svg{width:19px!important;height:19px!important;display:block!important;}
.mobile-top-search{display:none!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;padding:10px 14px!important;background:#fff!important;border-top:1px solid #e7dfd5!important;border-bottom:1px solid #e7dfd5!important;box-shadow:0 8px 20px rgba(40,28,20,.08)!important;z-index:201!important;}
.mobile-top-search.open{display:block!important;}
.mobile-top-search form{margin:0!important;}
.mobile-top-search-input{width:100%!important;height:40px!important;box-sizing:border-box!important;border:1px solid #d8cec2!important;background:#fff!important;color:#1f1813!important;padding:0 12px!important;font:inherit!important;font-size:11px!important;outline:none!important;}
.mobile-top-search-input::placeholder{color:#8a7d70!important;}
.mobile-top-search-input:focus{border-color:#bda789!important;}

/* Make the footer visually lighter/thinner on every public page and viewport. */
footer{font-weight:300!important;}
footer .foot-links a, footer .foot a{font-weight:300!important;font-size:11px!important;line-height:1.5!important;}
footer .foot-social{font-weight:300!important;}
footer .social-logo{width:19px!important;height:19px!important;}
footer .copyright{font-weight:300!important;font-size:9px!important;line-height:1.5!important;letter-spacing:.45px!important;}
@media(max-width:700px){
  .mobile-search-btn{display:inline-flex!important;}
  header .nav{gap:6px!important;}
  header .nav-actions{margin-left:0!important;gap:5px!important;}
  header .mobile-menu-btn{width:38px!important;height:38px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
  header .nav-btn{padding:8px 8px!important;min-width:38px!important;height:38px!important;box-sizing:border-box!important;}
  header .nav-btn .cart-icon{width:18px!important;height:18px!important;}
  header .logo{margin-right:auto!important;}
  .mobile-top-search{position:fixed!important;top:68px!important;left:0!important;right:0!important;}
  footer{padding-top:28px!important;padding-bottom:80px!important;}
  footer .foot-links{gap:10px 18px!important;}
  footer .foot-links a, footer .foot a{font-size:10px!important;}
  footer .copyright{font-size:8.5px!important;margin-top:18px!important;}
}

/* ================================================================
   ASKALÉ NAV — FINAL CORRECTION 2026-09-28
   One consistent top navigator on desktop + mobile.
   Desktop: hamburger -> logo -> search field -> cart.
   Mobile:  hamburger -> logo -> search icon -> cart.
   Prevent duplicate hamburger rendering and keep search/cart aligned right.
   ================================================================ */
header .wrap.nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
}

/* Hamburger: show on desktop and mobile, with ONE icon only. */
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;
  margin:0!important;
  padding:0!important;
  border:1px solid #d8cec2!important;
  background:#fff!important;
  color:#1f1813!important;
  font-size:0!important;
  line-height:1!important;
  cursor:pointer!important;
}
/* Logo stays immediately after the hamburger. */
header .logo{
  order:2!important;
  flex:0 0 auto!important;
  min-width:180px!important;
  margin:0!important;
  padding:0!important;
}

/* Desktop search fills the space between logo and cart. */
header .site-search-wrap{
  order:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
}
header .site-search-wrap form{
  width:100%!important;
  max-width:375px!important;
  margin:0!important;
}

/* Cart remains the final item. */
header .nav-actions{
  order:5!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  gap:0!important;
}

/* Mobile: exact sequence hamburger -> logo -> search -> cart. */
@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;
    flex:0 0 54px!important;
    width:54px!important;
    height:54px!important;
  }
  header .logo{
    order:2!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
  }
  header .logo span{
    font-size:20px!important;
    letter-spacing:4.5px!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 54px!important;
    width:54px!important;
    height:54px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #d8cec2!important;
    background:#fff!important;
    color:#1f1813!important;
  }
  /* Search icon intentionally slightly smaller than the cart icon. */
  header .mobile-search-btn svg{
    width:24px!important;
    height:24px!important;
    display:block!important;
  }
  header .nav-actions{
    order:5!important;
    flex:0 0 64px!important;
    width:64px!important;
    margin:0!important;
  }
  header .nav-btn[data-askale-cart],
  header .nav-actions .nav-btn{
    width:64px!important;
    min-width:64px!important;
    height:54px!important;
    margin:0!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  header .nav-btn .cart-icon{
    width:27px!important;
    height:27px!important;
  }
  header .badge{
    min-width:20px!important;
    height:20px!important;
    font-size:10px!important;
  }
}