@media (max-width:620px){
html,body{max-width:100%;overflow-x:hidden}
.notice{display:none!important}
.topbar.compact{
display:grid!important;
grid-template-columns:48px minmax(0,1fr) 50px!important;
align-items:center!important;
gap:7px!important;
width:100%!important;
max-width:100%!important;
height:66px!important;
padding:7px 10px!important;
margin:0!important;
box-sizing:border-box!important;
overflow:visible!important
}
.brand-lockup-header{
display:flex!important;align-items:center!important;justify-content:center!important;
width:48px!important;min-width:48px!important;max-width:48px!important;
margin:0!important;padding:0!important;overflow:visible!important
}
.brand-lockup-header .brand-icon{
display:grid!important;place-items:center!important;width:44px!important;height:44px!important;
min-width:44px!important;border-radius:12px!important;margin:0!important;font-size:25px!important
}
.brand-lockup-header .brand-name{display:none!important}
.head-search{
display:grid!important;grid-template-columns:24px minmax(0,1fr) 40px!important;
align-items:center!important;width:100%!important;min-width:0!important;max-width:none!important;
height:48px!important;margin:0!important;padding:2px 3px 2px 10px!important;box-sizing:border-box!important
}
.head-search>span{display:grid!important;place-items:center!important;width:24px!important}
.head-search input{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:0 5px!important;font-size:16px!important}
.head-search button{
display:grid!important;place-items:center!important;width:40px!important;min-width:40px!important;height:40px!important;
padding:0!important;border-radius:11px!important;font-size:0!important;color:#fff!important
}
.head-search button:after{content:'→';font-size:20px;font-weight:800;line-height:1}
.head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;width:50px!important;min-width:50px!important;margin:0!important}
.head-actions>button{display:none!important}
.lang-menu{display:block!important;width:50px!important;min-width:50px!important}
.lang-menu summary{padding:0!important;justify-content:center!important;font-size:16px!important}
.lang-menu summary span{display:none!important}
.lang-menu>div{position:absolute!important;right:7px!important;left:auto!important;top:54px!important;width:190px!important;z-index:100002!important}
.mainnav.mega-nav{
display:block!important;position:relative!important;width:100%!important;max-width:100%!important;
height:54px!important;padding:5px 12px!important;margin:0!important;overflow:visible!important;box-sizing:border-box!important
}
.mainnav.mega-nav>details{display:block!important;position:static!important;width:max-content!important;max-width:100%!important}
.mainnav.mega-nav>details>summary{
display:flex!important;align-items:center!important;width:max-content!important;max-width:100%!important;
height:44px!important;padding:0 16px!important;margin:0!important;border-radius:12px!important;
font-size:16px!important;box-sizing:border-box!important;white-space:nowrap!important
}
.mainnav.mega-nav .mega-menu{
display:none!important;position:absolute!important;top:54px!important;left:8px!important;right:8px!important;
width:auto!important;max-width:none!important;max-height:calc(100vh - 130px)!important;overflow-y:auto!important;
padding:12px!important;background:#fff!important;border:1px solid #dfe3ee!important;border-radius:0 0 18px 18px!important;
box-shadow:0 18px 42px rgba(15,23,42,.18)!important;z-index:100001!important
}
.mainnav.mega-nav>details.mobile-menu-open .mega-menu{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
.mainnav.mega-nav .mega-menu>header{grid-column:1/-1!important;padding:4px 4px 10px!important}
.mainnav.mega-nav .mega-menu>a{min-width:0!important;padding:12px 10px!important;font-size:13px!important}
}
@media (max-width:360px){
.topbar.compact{grid-template-columns:44px minmax(0,1fr) 45px!important;padding-left:6px!important;padding-right:6px!important;gap:5px!important}
.brand-lockup-header{width:44px!important;min-width:44px!important}.brand-lockup-header .brand-icon{width:42px!important;height:42px!important;min-width:42px!important}
.head-actions,.lang-menu{width:45px!important;min-width:45px!important}
}

/* v35 mobile category menu: compact 2-column layout */
@media (max-width:620px){
.mainnav.mega-nav .mega-menu{
padding:14px!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
align-items:start!important;
}
.mainnav.mega-nav .mega-menu>header{
grid-column:1/-1!important;
display:block!important;
padding:2px 2px 12px!important;
margin:0!important;
border-bottom:1px solid #eef1f6!important;
}
.mainnav.mega-nav .mega-menu>header b{
display:block!important;
font-size:18px!important;
line-height:1.1!important;
margin:0 0 4px!important;
}
.mainnav.mega-nav .mega-menu>header span{
display:block!important;
font-size:11px!important;
line-height:1.35!important;
color:#7b8497!important;
}
.mainnav.mega-nav .mega-menu>a{
display:grid!important;
grid-template-columns:18px minmax(0,1fr)!important;
align-items:center!important;
gap:9px!important;
min-height:74px!important;
padding:12px!important;
border:1px solid #e5e9f2!important;
border-radius:16px!important;
background:#fff!important;
box-sizing:border-box!important;
}
.mainnav.mega-nav .mega-menu>a span{
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
overflow:hidden!important;
white-space:normal!important;
font-size:14px!important;
line-height:1.22!important;
font-weight:800!important;
}
.mainnav.mega-nav .mega-menu .mega-icon{
width:18px!important;
height:18px!important;
align-self:start!important;
margin-top:2px!important;
}
.mainnav.mega-nav .mega-menu a small{display:none!important}
}
@media (max-width:360px){
.mainnav.mega-nav .mega-menu{
grid-template-columns:1fr!important;
}
.mainnav.mega-nav .mega-menu>a{
min-height:62px!important;
}
}

/* v36 mobile country switch: show active market flag */
@media (max-width:620px){
.head-actions .country-switch>summary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  width:50px!important;
  min-width:50px!important;
  height:44px!important;
  padding:0!important;
}
.head-actions .country-switch>summary span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:23px!important;
  line-height:1!important;
}
.head-actions .country-switch>summary i{
  display:inline-block!important;
  font-size:10px!important;
  line-height:1!important;
  color:#1b2438!important;
}
}


/* v38 definitive mobile category positioning fix */
@media (max-width:620px){
.mainnav.mega-nav .mega-menu{
  left:10px!important;
  right:10px!important;
  top:54px!important;
  width:calc(100vw - 20px)!important;
  max-width:calc(100vw - 20px)!important;
  transform:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.mainnav.mega-nav>details.mobile-menu-open .mega-menu{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.mainnav.mega-nav .mega-menu>a{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
}
@media (max-width:360px){
.mainnav.mega-nav .mega-menu,
.mainnav.mega-nav>details.mobile-menu-open .mega-menu{
  grid-template-columns:1fr!important;
}
}


/* v38: hard fix for mobile category drawer */
@media (max-width:620px){
  .mainnav.mega-nav{z-index:10020!important}
  .mainnav.mega-nav>details{position:static!important}
  .mainnav.mega-nav>details.mobile-menu-open>.mega-menu,
  .mainnav.mega-nav>details[open]>.mega-menu{
    display:grid!important;
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:126px!important;
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    margin:0!important;
    transform:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    padding:14px!important;
    max-height:calc(100vh - 150px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    border-radius:18px!important;
    box-shadow:0 24px 56px rgba(17,24,45,.22)!important;
    z-index:10040!important;
  }
  .mainnav.mega-nav .mega-menu>header{grid-column:1/-1!important}
  .mainnav.mega-nav .mega-menu>a{min-width:0!important;width:100%!important}
  body.mega-menu-active::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(10,15,29,.12);
    z-index:10030;
  }
  body.mega-menu-active{overflow:hidden!important}
}
@media (max-width:360px){
  .mainnav.mega-nav>details.mobile-menu-open>.mega-menu,
  .mainnav.mega-nav>details[open]>.mega-menu{
    grid-template-columns:1fr!important;
  }
}


/* v39: premium mobile menu animation */
@media (max-width:620px){
  .mainnav.mega-nav>details>.mega-menu{
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(14px)!important;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease!important;
  }
  .mainnav.mega-nav>details.mobile-menu-open>.mega-menu,
  .mainnav.mega-nav>details[open]>.mega-menu{
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
  }
  .mainnav.mega-nav .mega-menu{
    backdrop-filter:blur(10px)!important;
    background:rgba(255,255,255,.98)!important;
  }
  .mainnav.mega-nav .mega-menu>a{
    background:#fbfcff!important;
  }
}


/* v40: ultra-compact mobile category drawer */
@media (max-width:620px){
  .mainnav.mega-nav>details.mobile-menu-open>.mega-menu,
  .mainnav.mega-nav>details[open]>.mega-menu{
    left:6px!important;
    right:6px!important;
    top:118px!important;
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - 130px)!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .mainnav.mega-nav .mega-menu>header{
    padding:0 2px 8px!important;
    margin:0 0 2px!important;
  }
  .mainnav.mega-nav .mega-menu>header b{
    font-size:15px!important;
    line-height:1.08!important;
  }
  .mainnav.mega-nav .mega-menu>header span{
    font-size:10px!important;
    line-height:1.25!important;
  }
  .mainnav.mega-nav .mega-menu>a{
    grid-template-columns:16px minmax(0,1fr)!important;
    gap:8px!important;
    min-height:60px!important;
    padding:10px!important;
    border-radius:14px!important;
  }
  .mainnav.mega-nav .mega-menu>a span{
    font-size:12px!important;
    line-height:1.18!important;
  }
  .mainnav.mega-nav .mega-menu .mega-icon{
    width:16px!important;
    height:16px!important;
    margin-top:1px!important;
  }
}
@media (max-width:390px){
  .mainnav.mega-nav>details.mobile-menu-open>.mega-menu,
  .mainnav.mega-nav>details[open]>.mega-menu{
    top:116px!important;
    max-height:calc(100dvh - 126px)!important;
    gap:7px!important;
    padding:8px!important;
  }
  .mainnav.mega-nav .mega-menu>a{
    min-height:56px!important;
    padding:9px!important;
  }
  .mainnav.mega-nav .mega-menu>a span{font-size:11.5px!important}
}


/* v41: clickable white mobile menu */
@media (max-width:620px){
  body.mega-menu-active::before{pointer-events:none!important;background:rgba(10,15,29,.08)!important}
  .mainnav.mega-nav .mega-menu,
  .mainnav.mega-nav>details.mobile-menu-open>.mega-menu,
  .mainnav.mega-nav>details[open]>.mega-menu{
    background:#ffffff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .mainnav.mega-nav .mega-menu>a{
    background:#ffffff!important;
    cursor:pointer!important;
  }
}


/* v42: mobile category drawer design polish + larger font */
@media (max-width:620px){
  .mainnav.mega-nav>details.mobile-menu-open>.mega-menu,
  .mainnav.mega-nav>details[open]>.mega-menu{
    border:1px solid #e3e8f2!important;
    box-shadow:0 18px 42px rgba(19,30,58,.12)!important;
  }
  .mainnav.mega-nav .mega-menu>header{
    padding:2px 4px 10px!important;
    margin:0 0 4px!important;
    border-bottom:1px solid #eef2f7!important;
  }
  .mainnav.mega-nav .mega-menu>header b{
    font-size:18px!important;
    line-height:1.08!important;
    font-weight:800!important;
    color:#11182d!important;
    letter-spacing:-.02em!important;
  }
  .mainnav.mega-nav .mega-menu>header span{
    font-size:11.5px!important;
    line-height:1.32!important;
    color:#7a8498!important;
    font-weight:700!important;
  }
  .mainnav.mega-nav .mega-menu>a{
    grid-template-columns:18px minmax(0,1fr)!important;
    gap:10px!important;
    min-height:66px!important;
    padding:12px 12px!important;
    border-radius:16px!important;
    border:1px solid #dfe5f1!important;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(20,28,52,.03)!important;
  }
  .mainnav.mega-nav .mega-menu>a span{
    font-size:14px!important;
    line-height:1.22!important;
    font-weight:800!important;
    color:#182136!important;
  }
  .mainnav.mega-nav .mega-menu .mega-icon{
    width:18px!important;
    height:18px!important;
    margin-top:1px!important;
    color:#63708a!important;
  }
}
@media (max-width:390px){
  .mainnav.mega-nav .mega-menu>header b{font-size:17px!important}
  .mainnav.mega-nav .mega-menu>header span{font-size:11px!important}
  .mainnav.mega-nav .mega-menu>a{
    min-height:62px!important;
    padding:11px 10px!important;
    gap:9px!important;
  }
  .mainnav.mega-nav .mega-menu>a span{font-size:13px!important}
  .mainnav.mega-nav .mega-menu .mega-icon{width:17px!important;height:17px!important}
}


/* v43: force two related products per row on product pages */
@media (max-width:620px){
  .product30 .related-products .related-grid,
  .product30 .related-products .product-grid.related-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .product30 .related-products .related-grid>.catalog-product{
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
  }
}
