/* LAVI v1.14 — compact mobile header + reliable CSS hamburger drawer
   Desktop header/navigation remain unchanged. */

.mobile-nav-state,
.mobile-nav-backdrop,
.mobile-menu-head,
.mobile-menu-settings{
  display:none;
}

@media (max-width:700px){
  body.nav-open,
  body:has(.mobile-nav-state:checked){
    overflow:hidden;
  }

  .site-header{
    min-height:68px;
    background:rgba(255,255,255,.97);
  }

  .site-header .container.header-row{
    width:calc(100% - 20px);
    height:68px!important;
    min-height:68px;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 92px;
    grid-template-areas:"menu actions brand";
    align-items:center;
    gap:7px!important;
    padding:0!important;
    direction:ltr;
  }

  .brand{
    grid-area:brand;
    margin:0!important;
    position:relative;
    z-index:106;
    justify-self:end;
  }

  .brand img{
    width:92px!important;
    max-height:30px;
    object-fit:contain;
  }

  .mobile-nav-state{
    position:absolute!important;
    inline-size:1px!important;
    block-size:1px!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .nav-toggle{
    grid-area:menu;
    display:grid!important;
    width:42px;
    height:42px;
    place-content:center;
    margin:0!important;
    padding:6px!important;
    border:1px solid #d8d3c9!important;
    background:#fff!important;
    position:relative;
    z-index:106;
    cursor:pointer;
    user-select:none;
  }

  .nav-toggle span{
    display:block;
    width:22px;
    height:1.5px;
    margin:3px 0;
    background:#111;
    transition:transform .22s ease,opacity .22s ease;
  }

  .nav-toggle b{
    display:none!important;
  }

  .mobile-nav-state:checked + .nav-toggle span:nth-child(1){
    transform:translateY(7.5px) rotate(45deg);
  }

  .mobile-nav-state:checked + .nav-toggle span:nth-child(2){
    opacity:0;
  }

  .mobile-nav-state:checked + .nav-toggle span:nth-child(3){
    transform:translateY(-7.5px) rotate(-45deg);
  }

  /* Keep the three requested quick actions visible in the mobile header. */
  .header-actions{
    grid-area:actions;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-direction:row!important;
    gap:5px!important;
    min-width:0;
    position:relative;
    z-index:106;
    direction:ltr;
  }

  .header-actions .theme-toggle,
  .header-actions .language-switcher{
    display:none!important;
  }

  .header-actions .header-cta{
    order:1;
    min-height:36px!important;
    height:36px;
    min-width:0;
    max-width:96px;
    padding:0 9px!important;
    font-size:9px!important;
    line-height:1.25!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-radius:1px;
  }

  .header-actions .header-call{
    order:2;
  }

  .header-actions .header-catalog{
    order:3;
  }

  .header-actions .header-call,
  .header-actions .header-catalog{
    display:grid!important;
    place-items:center;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    border:1px solid #d8d3c9!important;
    border-radius:50%;
    background:#fff;
  }

  .header-actions .header-call{
    border-color:#701d20!important;
    background:#701d20!important;
    color:#fff!important;
  }

  .header-actions .header-call svg,
  .header-actions .header-catalog svg{
    width:17px!important;
    height:17px!important;
  }

  .header-actions .header-catalog span{
    display:none!important;
  }

  /* Full-screen drawer. Pure CSS checkbox is the primary open/close mechanism. */
  .main-nav{
    position:fixed!important;
    inset:68px 0 0!important;
    z-index:105!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
    padding:14px 20px 30px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    white-space:normal!important;
    background:rgba(255,255,255,.99)!important;
    border-top:1px solid #e5dfd5!important;
    box-shadow:0 24px 60px rgba(0,0,0,.08);
  }

  .mobile-nav-state:checked ~ .main-nav,
  .main-nav.open{
    display:flex!important;
  }

  .mobile-nav-backdrop{
    position:fixed;
    inset:68px 0 0;
    z-index:104;
    background:rgba(0,0,0,.22);
  }

  .mobile-nav-state:checked ~ .mobile-nav-backdrop{
    display:block;
  }

  .mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 0 12px;
    margin-bottom:4px;
    border-bottom:1px solid #e2ddd4;
  }

  .mobile-menu-head strong{
    font-size:14px;
  }

  .mobile-menu-close{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid #d8d3c9;
    background:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    user-select:none;
  }

  .main-nav>a{
    width:100%;
    flex:0 0 auto;
    padding:12px 2px!important;
    border-bottom:1px solid #eee9e1;
    font-size:14px!important;
    font-weight:650;
  }

  .main-nav>a:after{
    display:none!important;
  }

  /* Only language and theme controls are placed in the hamburger drawer. */
  .mobile-menu-settings{
    display:grid;
    gap:17px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #d9d3ca;
  }

  .mobile-setting-group{
    display:grid;
    gap:9px;
  }

  .mobile-setting-label{
    font-size:10px;
    color:#777;
    letter-spacing:.04em;
  }

  .mobile-language-options{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .mobile-language-options a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    min-height:42px;
    padding:8px 10px!important;
    border:1px solid #d8d3c9!important;
    background:#fff;
    font-size:11px!important;
  }

  .mobile-language-options a.active{
    border-color:#701d20!important;
    box-shadow:inset 0 0 0 1px #701d20;
    color:#701d20;
  }

  .mobile-language-options small{
    font-size:8px;
    color:#888;
  }

  .mobile-theme-control{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:9px 12px;
    border:1px solid #d8d3c9;
    background:#fff;
    color:#111;
    cursor:pointer;
    text-align:start;
  }

  .mobile-theme-icons{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border:1px solid #ded8cf;
    flex:0 0 26px;
  }

  .mobile-theme-control .theme-icon{
    width:16px;
    height:16px;
  }

  html[data-theme="texture"] .main-nav{
    background:rgba(244,240,232,.99)!important;
  }

  html[data-theme="texture"] .nav-toggle,
  html[data-theme="texture"] .mobile-menu-close,
  html[data-theme="texture"] .mobile-language-options a,
  html[data-theme="texture"] .mobile-theme-control,
  html[data-theme="texture"] .header-actions .header-catalog{
    background:rgba(255,255,255,.9)!important;
  }
}

@media (max-width:390px){
  .site-header .container.header-row{
    grid-template-columns:40px minmax(0,1fr) 84px;
    gap:5px!important;
  }

  .brand img{
    width:84px!important;
  }

  .header-actions{
    gap:4px!important;
  }

  .header-actions .header-cta{
    max-width:82px;
    padding-inline:7px!important;
    font-size:8px!important;
  }

  .header-actions .header-call,
  .header-actions .header-catalog{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
}

@media (max-width:340px){
  .site-header .container.header-row{
    width:calc(100% - 12px);
    grid-template-columns:38px minmax(0,1fr) 76px;
    gap:4px!important;
  }

  .brand img{
    width:76px!important;
  }

  .header-actions .header-cta{
    max-width:68px;
    padding-inline:5px!important;
    font-size:7px!important;
  }

  .header-actions .header-call,
  .header-actions .header-catalog{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
  }

  .mobile-language-options{
    grid-template-columns:1fr;
  }
}
/* LAVI v1.15 — locale-aware physical placement in the mobile header */
@media (max-width:700px){
  /* Use physical grid placement so RTL and LTR match the requested layout exactly. */
  html[dir="rtl"] .site-header .container.header-row{
    direction:ltr;
    grid-template-columns:max-content minmax(0,1fr) 92px 42px;
    grid-template-areas:"actions . brand menu";
  }

  html[dir="ltr"] .site-header .container.header-row{
    direction:ltr;
    grid-template-columns:42px 92px minmax(0,1fr) max-content;
    grid-template-areas:"menu brand . actions";
  }

  html[dir="rtl"] .brand{
    justify-self:end;
  }

  html[dir="ltr"] .brand{
    justify-self:start;
  }

  /* RTL: consultation, call, download from the far left toward the centre.
     LTR: consultation, call, download from the far right toward the centre. */
  html[dir="rtl"] .header-actions{
    justify-self:start;
    flex-direction:row-reverse!important;
  }

  html[dir="ltr"] .header-actions{
    justify-self:end;
    flex-direction:row!important;
  }

  .header-actions .header-cta,
  .header-actions .header-call,
  .header-actions .header-catalog{
    order:initial!important;
  }

  html[dir="rtl"] .main-nav{
    direction:rtl;
    text-align:right;
  }

  html[dir="ltr"] .main-nav{
    direction:ltr;
    text-align:left;
  }
}

@media (max-width:390px){
  html[dir="rtl"] .site-header .container.header-row{
    grid-template-columns:max-content minmax(0,1fr) 84px 40px;
  }

  html[dir="ltr"] .site-header .container.header-row{
    grid-template-columns:40px 84px minmax(0,1fr) max-content;
  }
}

@media (max-width:340px){
  html[dir="rtl"] .site-header .container.header-row{
    grid-template-columns:max-content minmax(0,1fr) 76px 38px;
  }

  html[dir="ltr"] .site-header .container.header-row{
    grid-template-columns:38px 76px minmax(0,1fr) max-content;
  }
}

/* LAVI v1.16 — reliable full-height mobile menu */
@media (max-width:700px){
  /*
   * backdrop-filter on a sticky ancestor can turn position:fixed descendants
   * into header-relative elements on some mobile browsers. Disable it here so
   * the menu is always positioned against the viewport.
   */
  .site-header{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    transform:none!important;
    contain:none!important;
    overflow:visible!important;
  }

  .site-header .header-row{
    overflow:visible!important;
  }

  .main-nav{
    position:fixed!important;
    top:68px!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    inset:auto 0 auto 0!important;
    width:100vw!important;
    height:calc(100vh - 68px)!important;
    height:calc(100dvh - 68px)!important;
    min-height:calc(100vh - 68px)!important;
    min-height:calc(100dvh - 68px)!important;
    max-height:calc(100vh - 68px)!important;
    max-height:calc(100dvh - 68px)!important;
    display:flex!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    z-index:1002!important;
  }

  .mobile-nav-state:checked ~ .main-nav,
  .main-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition-delay:0s;
  }

  .mobile-nav-backdrop{
    position:fixed!important;
    top:68px!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100vw!important;
    height:calc(100vh - 68px)!important;
    height:calc(100dvh - 68px)!important;
    z-index:1001!important;
  }

  .mobile-menu-head,
  .main-nav>a,
  .mobile-menu-settings{
    flex:0 0 auto;
  }

  .main-nav>a{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .mobile-menu-settings{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* LAVI v1.18 — mobile menu viewport layer repair */
@media (max-width:700px){
  /*
   * Keep the entire header stacking context above every hero, product image,
   * badge and slider layer.
   */
  body > .site-header{
    position:sticky!important;
    top:0!important;
    z-index:2147483000!important;
    isolation:isolate!important;
    overflow:visible!important;
    transform:none!important;
    filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  body > .site-header .header-row{
    position:relative!important;
    z-index:2147483002!important;
    overflow:visible!important;
  }

  /*
   * The previous inset shorthand reset top to auto on some mobile browsers.
   * Anchor the drawer explicitly to all four viewport edges below the header.
   */
  body > .site-header .main-nav{
    position:fixed!important;
    inset:68px 0 0 0!important;
    top:68px!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    z-index:2147483004!important;
    background:#fff!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    transform:translateY(-6px);
  }

  body > .site-header .mobile-nav-state:checked ~ .main-nav,
  body > .site-header .main-nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    display:flex!important;
  }

  body > .site-header .mobile-nav-backdrop{
    position:fixed!important;
    inset:68px 0 0 0!important;
    top:68px!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100vw!important;
    height:auto!important;
    z-index:2147483003!important;
  }

  body > .site-header .mobile-nav-state:checked ~ .mobile-nav-backdrop{
    display:block!important;
  }

  /*
   * Guarantee that no page section can paint above the open drawer.
   * The content remains in place underneath, so closing the menu restores
   * the exact scroll position.
   */
  body:has(.mobile-nav-state:checked) main,
  body.nav-open main{
    position:relative!important;
    z-index:0!important;
    pointer-events:none!important;
  }

  body > .site-header .main-nav > *{
    position:relative;
    z-index:1;
  }

  html[data-theme="texture"] body > .site-header .main-nav{
    background:#f4f0e8!important;
  }
}