
/* =====================================================================
   SISSNUTS MOBILE MEGA MENU v5.22
   UI matched to approved 2026 mockup.
   ===================================================================== */
.siss-mobile-mega{display:none}

@media(max-width:1100px){
  html.siss-menu-open,
  html.siss-menu-open body{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  .siss-nav-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:99990!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    padding:0!important;
    background:rgba(18,25,20,.54)!important;
    backdrop-filter:blur(4px)!important;
    -webkit-backdrop-filter:blur(4px)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .26s ease!important;
  }
  html.siss-menu-open .siss-nav-backdrop{
    opacity:1!important;
    pointer-events:auto!important;
  }

  .siss-primary-nav{
    position:fixed!important;
    z-index:99999!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:10px!important;
    width:auto!important;
    height:min(94dvh,920px)!important;
    max-height:calc(100dvh - 20px)!important;
    padding:0!important;
    border:1px solid rgba(226,216,201,.92)!important;
    border-radius:30px!important;
    overflow:hidden!important;
    background:rgba(255,253,249,.985)!important;
    box-shadow:0 30px 80px rgba(18,26,20,.24)!important;
    transform:translateY(calc(100% + 30px))!important;
    opacity:1!important;
    visibility:visible!important;
    transition:transform .34s cubic-bezier(.22,.8,.26,1)!important;
  }
  .siss-primary-nav.is-open{
    transform:translateY(0)!important;
  }

  .siss-drawer-head{
    position:absolute!important;
    z-index:10!important;
    top:15px!important;
    right:15px!important;
    left:15px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:54px!important;
    padding:0!important;
    pointer-events:none!important;
  }
  .siss-drawer-brand{
    display:none!important;
  }
  .siss-drawer-close{
    pointer-events:auto!important;
    width:48px!important;
    height:48px!important;
    display:grid!important;
    place-items:center!important;
    margin-right:auto!important;
    border:0!important;
    border-radius:15px!important;
    background:#f4efe6!important;
    color:#D3AE6E!important;
  }
  .siss-drawer-close .siss-stockholm-svg{
    width:21px!important;height:21px!important;
  }

  .siss-drawer-back-row,
  .siss-menu-viewport,
  .siss-drawer-footer{
    display:none!important;
  }

  .siss-mobile-mega{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:16px 16px 24px!important;
    direction:rtl!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
  }
  .siss-mobile-mega::-webkit-scrollbar{display:none!important}

  .siss-mobile-mega__handle{
    width:44px!important;
    height:5px!important;
    margin:0 auto 12px!important;
    border-radius:999px!important;
    background:#aaa79f!important;
    opacity:.8!important;
  }

  .siss-mobile-mega__brand{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:108px!important;
    padding-top:4px!important;
  }
  .siss-mobile-mega__brand img{
    width:auto!important;
    height:96px!important;
    max-width:180px!important;
    object-fit:contain!important;
  }

  .siss-mobile-mega__account{
    min-height:96px!important;
    display:grid!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    align-items:center!important;
    gap:13px!important;
    padding:13px 14px!important;
    border:1px solid #F8F1E4!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,#fff,#faf7f1)!important;
    color:#39443d!important;
  }
  .siss-mobile-mega__account-icon{
    width:56px!important;
    height:56px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    background:#fbf3e5!important;
    color:#D3AE6E!important;
  }
  .siss-mobile-mega__account-icon .siss-stockholm-svg{width:26px!important;height:26px!important}
  .siss-mobile-mega__account strong{display:block!important;font-size:15px!important;line-height:1.5!important}
  .siss-mobile-mega__account small{display:block!important;margin-top:4px!important;color:#9a9a95!important;font-size:11px!important;line-height:1.6!important}

  .siss-mobile-mega__quick{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:12px!important;
  }
  .siss-mobile-mega__quick>a{
    min-height:100px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    padding:10px 5px!important;
    border:1px solid #F8F1E4!important;
    border-radius:14px!important;
    background:#fcfaf6!important;
    color:#404942!important;
    text-align:center!important;
  }
  .siss-mobile-mega__quick-icon{
    position:relative!important;
    width:31px!important;height:31px!important;
    display:grid!important;place-items:center!important;
    color:#D3AE6E!important;
  }
  .siss-mobile-mega__quick-icon .siss-stockholm-svg{width:23px!important;height:23px!important}
  .siss-mobile-mega__quick strong{font-size:10.5px!important;line-height:1.45!important}

  .siss-mobile-mega__divider{
    height:1px!important;
    margin:16px 0!important;
    background:#F8F1E4!important;
  }

  .siss-mobile-mega__links,
  .siss-mobile-mega__secondary{
    display:grid!important;
  }
  .siss-mobile-mega__links>a,
  .siss-mobile-mega__secondary>a{
    position:relative!important;
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 18px!important;
    align-items:center!important;
    gap:10px!important;
    color:#252e28!important;
    border-bottom:1px solid rgba(234,227,217,.45)!important;
  }
  .siss-mobile-mega__links>a:last-child,
  .siss-mobile-mega__secondary>a:last-child{border-bottom:0!important}
  .siss-mobile-mega__links>a>strong{font-size:15px!important;font-weight:800!important}
  .siss-mobile-mega__links>a>.siss-stockholm-svg:last-child,
  .siss-mobile-mega__secondary>a>.siss-stockholm-svg:last-child{
    width:12px!important;height:12px!important;color:#a9aea9!important;
  }
  .siss-mobile-mega__link-icon{
    width:34px!important;height:34px!important;
    display:grid!important;place-items:center!important;
    color:#D3AE6E!important;
  }
  .siss-mobile-mega__link-icon .siss-stockholm-svg{width:23px!important;height:23px!important}
  .siss-mobile-mega__links>a.is-current strong{color:#394536!important}
  .siss-mobile-mega__links>a.is-current .siss-mobile-mega__link-icon{color:#394536!important}

  .siss-mobile-mega__secondary>a{
    grid-template-columns:30px minmax(0,1fr) 18px!important;
    min-height:55px!important;
    font-size:14px!important;
  }
  .siss-mobile-mega__secondary>a>.siss-stockholm-svg:first-child{
    width:21px!important;height:21px!important;color:#D3AE6E!important;
  }

  .siss-mobile-mega__shipping{
    min-height:116px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-top:14px!important;
    padding:18px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 86% 42%,rgba(173,194,122,.36),transparent 28%),
      linear-gradient(135deg,#edf3df,#f9f5e9)!important;
    color:#273329!important;
  }
  .siss-mobile-mega__shipping strong{display:block!important;font-size:20px!important}
  .siss-mobile-mega__shipping small{display:block!important;margin-top:4px!important;max-width:190px!important;font-size:12px!important;line-height:1.6!important}
  .siss-mobile-mega__shipping-art{
    position:relative!important;
    width:105px!important;height:72px!important;
    display:grid!important;place-items:center!important;
    color:#394536!important;
  }
  .siss-mobile-mega__shipping-art>.siss-stockholm-svg{width:70px!important;height:70px!important}
  .siss-mobile-mega__nut{
    position:absolute!important;
    width:30px!important;
    height:30px!important;
    object-fit:contain!important;
    opacity:.92!important;
    filter:sepia(.12) saturate(.82)!important;
    pointer-events:none!important;
  }
  .siss-mobile-mega__nut--1{right:3px!important;top:1px!important;transform:rotate(18deg)!important}
  .siss-mobile-mega__nut--2{right:29px!important;top:-6px!important;width:24px!important;height:24px!important;transform:rotate(-22deg) scale(.9)!important;opacity:.76!important}
  .siss-mobile-mega__nut--3{right:7px!important;bottom:0!important;width:26px!important;height:26px!important;transform:rotate(51deg)!important;opacity:.82!important}

  .siss-mobile-mega__footer{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:17px 2px 4px!important;
  }
  .siss-mobile-mega__footer strong{display:block!important;font-size:15px!important;color:#2e3731!important}
  .siss-mobile-mega__footer small{display:block!important;margin-top:3px!important;font-size:10px!important;color:#aaa7a0!important}
  .siss-mobile-mega__socials{display:flex!important;gap:8px!important;direction:ltr!important}
  .siss-mobile-mega__socials>a{
    width:39px!important;height:39px!important;
    display:grid!important;place-items:center!important;
    border:1px solid #F8F1E4!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#394536!important;
  }
  .siss-mobile-mega__socials .siss-stockholm-svg{width:18px!important;height:18px!important}
}

@media(max-width:480px){
  .siss-primary-nav{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    border-radius:27px!important;
  }
  .siss-mobile-mega{padding:13px 13px 20px!important}
  .siss-mobile-mega__brand{min-height:96px!important}
  .siss-mobile-mega__brand img{height:84px!important}
  .siss-mobile-mega__account{min-height:88px!important}
  .siss-mobile-mega__quick{gap:6px!important}
  .siss-mobile-mega__quick>a{min-height:92px!important}
}


/* =====================================================================
   MOBILE MENU v5.23 — deterministic open/closed state
   ===================================================================== */
@media(max-width:1100px){
  #siss-primary-nav[aria-hidden="true"]{
    transform:translateY(calc(100% + 42px))!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #siss-primary-nav[aria-hidden="false"],
  #siss-primary-nav.is-open{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html:not(.siss-menu-open) #siss-primary-nav:not(.is-open){
    transform:translateY(calc(100% + 42px))!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html:not(.siss-menu-open) .siss-nav-backdrop{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html.siss-menu-open .siss-nav-backdrop:not([hidden]){
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}


/* =====================================================================
   MOBILE MEGA v5.24 — RIGHT SIDE DRAWER
   Replaces the bottom sheet completely.
   ===================================================================== */
@media(max-width:1100px){

  html.siss-menu-open,
  html.siss-menu-open body{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  .siss-nav-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:99990!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    padding:0!important;
    background:rgba(20,28,22,.54)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .22s ease, visibility .22s ease!important;
  }

  html.siss-menu-open .siss-nav-backdrop:not([hidden]){
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  #siss-primary-nav.siss-primary-nav{
    position:fixed!important;
    z-index:99999!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;

    width:min(88vw,430px)!important;
    height:100dvh!important;
    max-height:100dvh!important;

    padding:0!important;
    margin:0!important;

    border:0!important;
    border-left:1px solid rgba(226,216,201,.92)!important;
    border-radius:0!important;

    overflow:hidden!important;
    background:rgba(255,253,249,.99)!important;
    box-shadow:-30px 0 70px rgba(18,26,20,.20)!important;

    transform:translateX(105%)!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transition:
      transform .30s cubic-bezier(.22,.8,.26,1),
      visibility .30s ease!important;
  }

  #siss-primary-nav[aria-hidden="false"],
  #siss-primary-nav.is-open{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  #siss-primary-nav[aria-hidden="true"],
  html:not(.siss-menu-open) #siss-primary-nav:not(.is-open){
    transform:translateX(105%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .siss-drawer-head{
    position:absolute!important;
    z-index:30!important;
    top:12px!important;
    right:12px!important;
    left:12px!important;
    height:48px!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0!important;
    pointer-events:none!important;
  }

  .siss-drawer-close{
    pointer-events:auto!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    border:0!important;
    border-radius:14px!important;
    background:#f4efe6!important;
    color:#D3AE6E!important;
    box-shadow:none!important;
  }

  .siss-drawer-close .siss-stockholm-svg{
    width:20px!important;
    height:20px!important;
  }

  .siss-mobile-mega{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:14px 15px 24px!important;
    direction:rtl!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
  }

  .siss-mobile-mega::-webkit-scrollbar{display:none!important}

  /* No bottom-sheet handle in a side drawer */
  .siss-mobile-mega__handle{
    display:none!important;
  }

  .siss-mobile-mega__brand{
    min-height:112px!important;
    padding-top:2px!important;
    border-bottom:1px solid #F8F1E4!important;
  }

  .siss-mobile-mega__brand img{
    height:86px!important;
    max-width:170px!important;
  }

  .siss-mobile-mega__account{
    margin-top:14px!important;
  }

  /* Better density for a side drawer */
  .siss-mobile-mega__quick{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .siss-mobile-mega__quick>a{
    min-height:92px!important;
    padding:8px 3px!important;
  }

  .siss-mobile-mega__links>a{
    min-height:55px!important;
  }

  .siss-mobile-mega__secondary>a{
    min-height:52px!important;
  }

  .siss-mobile-mega__shipping{
    min-height:106px!important;
  }
}

@media(max-width:520px){
  #siss-primary-nav.siss-primary-nav{
    width:min(91vw,410px)!important;
  }

  .siss-mobile-mega{
    padding:12px 12px 20px!important;
  }

  .siss-mobile-mega__brand{
    min-height:102px!important;
  }

  .siss-mobile-mega__brand img{
    height:80px!important;
  }

  .siss-mobile-mega__quick>a{
    min-height:88px!important;
  }
}


/* =====================================================================
   MOBILE DRAWER v5.25 — BODY PORTAL / SAFARI STACKING FIX
   ===================================================================== */
@media(max-width:1100px){

  body > #siss-primary-nav.siss-primary-nav--portal{
    position:fixed!important;
    z-index:2147483646!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;

    width:min(91vw,430px)!important;
    height:100dvh!important;
    max-height:100dvh!important;

    margin:0!important;
    padding:0!important;

    contain:none!important;
    isolation:isolate!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    perspective:none!important;

    border:0!important;
    border-left:1px solid rgba(226,216,201,.92)!important;
    border-radius:0!important;

    overflow:hidden!important;
    background:#fffdf9!important;
    box-shadow:-28px 0 70px rgba(18,26,20,.25)!important;

    transform:translate3d(105%,0,0)!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transition:
      transform .30s cubic-bezier(.22,.8,.26,1),
      visibility .30s ease!important;
    will-change:transform!important;
  }

  body > #siss-primary-nav.siss-primary-nav--portal[aria-hidden="false"],
  body > #siss-primary-nav.siss-primary-nav--portal.is-open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body > #siss-primary-nav.siss-primary-nav--portal[aria-hidden="true"]{
    transform:translate3d(105%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body > .siss-nav-backdrop--portal{
    position:fixed!important;
    z-index:2147483645!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:rgba(18,25,20,.50)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html.siss-menu-open body > .siss-nav-backdrop--portal:not([hidden]){
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Ensure drawer content itself stays above every internal layer. */
  body > #siss-primary-nav.siss-primary-nav--portal .siss-mobile-mega{
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    display:block!important;
    background:#fffdf9!important;
  }

  body > #siss-primary-nav.siss-primary-nav--portal .siss-drawer-head{
    z-index:10!important;
  }
}


/* =====================================================================
   MOBILE MENU v5.26 — visual cleanup requested
   ===================================================================== */
@media(max-width:1100px){

  /* Legacy close lived outside the scroll container. Hide it completely. */
  body > #siss-primary-nav.siss-primary-nav--portal > .siss-drawer-head,
  #siss-primary-nav.siss-primary-nav--portal > .siss-drawer-head{
    display:none!important;
  }

  /* Close button now belongs to the normal scroll flow, never sticky/fixed. */
  .siss-mobile-mega__top{
    position:relative!important;
    z-index:3!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    height:54px!important;
    min-height:54px!important;
    margin:0!important;
    padding:0!important;
  }

  .siss-mobile-mega__close{
    position:static!important;
    inset:auto!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 46px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:14px!important;
    background:#f4efe6!important;
    color:#D3AE6E!important;
    box-shadow:none!important;
  }

  .siss-mobile-mega__close .siss-stockholm-svg{
    width:20px!important;
    height:20px!important;
  }

  /* Remove the faint horizontal separator above/below the logo. */
  .siss-mobile-mega__brand{
    min-height:105px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-top:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }

  .siss-mobile-mega__brand::before,
  .siss-mobile-mega__brand::after{
    content:none!important;
    display:none!important;
  }

  .siss-mobile-mega__brand img{
    border:0!important;
    box-shadow:none!important;
  }

  /* Tracking shortcut was removed; remaining three shortcuts fill the row. */
  .siss-mobile-mega__quick{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .siss-mobile-mega__quick>a{
    min-height:94px!important;
  }

  /* Main menu mirrors desktop; keep hierarchy clean and readable. */
  .siss-mobile-mega__links>a{
    min-height:58px!important;
  }

  /* Tracking icon in secondary area uses the position/tracking symbol. */
  .siss-mobile-mega__secondary>a:first-child>.siss-stockholm-svg:first-child{
    color:#D3AE6E!important;
    width:21px!important;
    height:21px!important;
  }
}
.siss-mobile-mega__account-icon .siss-header-pack-icon{width:26px!important;height:26px!important;object-fit:contain!important}

/* v5.13.6 — Control Panel managed secondary mobile-menu icons */
@media(max-width:1100px){
  .siss-mobile-mega__secondary-icon{
    width:21px!important;
    height:21px!important;
    object-fit:contain!important;
    display:block!important;
    opacity:.92!important;
  }
}
