/* ==========================================================================
   bi-meny.css — Badrumsinspiration.se
   Två-panels meny: kategori till vänster, varumärken till höger.
   Fungerar i båda mallvarianterna (.top/.menu och .site-head/.site-nav).
   2026-08-22
   ========================================================================== */

.mnu{
  --m-bg:rgba(10,18,16,.94);
  --m-fg:#F2EFE9;
  --m-linje:rgba(242,239,233,.14);
  --m-brons:#B08A57;
  --m-hover:rgba(242,239,233,.08);
  --m-aktiv:rgba(242,239,233,.10);
  --m-skugga:0 28px 64px rgba(0,0,0,.46);
  position:relative;display:inline-flex;
}

/* Ljus variant på de sidor som fortfarande använder style.css */
.site-nav .mnu{
  --m-bg:#ffffff;
  --m-fg:#1c1a17;
  --m-linje:#e3ded4;
  --m-brons:#8c7a66;
  --m-hover:#f4f1ea;
  --m-aktiv:#ece7dd;
  --m-skugga:0 24px 56px rgba(28,26,23,.16);
  display:block;
}

/* Header med egen botten på sidor utan mörk hero */
.top.fast{
  background:rgba(14,25,23,.94);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
}

/* ---------------------------------------------------------- Trigger ---- */
.mnu-t{position:relative;display:inline-flex;align-items:center;gap:.42em}
.menu .mnu-t::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:currentColor;opacity:0;transform:scaleX(.4);transform-origin:left;
  transition:opacity .28s ease,transform .28s ease;
}
.menu .mnu-t:hover::after,.menu .mnu.open .mnu-t::after{opacity:.55;transform:scaleX(1)}

.mnu-pil{
  width:.42em;height:.42em;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);
  transition:transform .28s ease;
}
.mnu.open .mnu-pil{transform:rotate(-135deg) translateY(-.12em)}

.menu .mnu-s{opacity:.62}
.menu .mnu-s:hover{opacity:1}

/* ------------------------------------------------------------ Panel ---- */
.mnu-d{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translate(-50%,-6px);
  display:flex;align-items:stretch;
  padding:10px;border-radius:16px;
  background:var(--m-bg);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--m-linje);
  box-shadow:var(--m-skugga);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  z-index:60;
}
.mnu.open .mnu-d{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* osynlig brygga så musen inte tappar menyn på vägen ner */
.mnu-d::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}

/* -------------------------------------------------- Vänsterkolumn ------ */
.mnu-kol{
  display:flex;flex-direction:column;
  min-width:214px;padding-right:10px;
  border-right:1px solid var(--m-linje);
}
.mnu-lista{display:flex;flex-direction:column;gap:2px}
.mnu-k{
  appearance:none;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;min-height:44px;padding:10px 12px;border-radius:10px;
  font:inherit;font-size:.9rem;line-height:1.25;text-align:left;
  color:var(--m-fg);opacity:.78;
  transition:background .18s ease,opacity .18s ease;
}
.mnu-k i{
  width:.36em;height:.36em;flex:none;opacity:.5;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .22s ease,opacity .22s ease;
}
.mnu-k:hover,.mnu-k:focus-visible{background:var(--m-hover);opacity:1;outline:none}
.mnu-k[aria-selected="true"]{background:var(--m-aktiv);opacity:1}
.mnu-k[aria-selected="true"] i{opacity:.9;transform:rotate(-45deg) translate(2px,2px)}

.mnu-alla{
  margin-top:auto;padding:12px 12px 8px;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--m-brons);opacity:.9;text-decoration:none;
  transition:opacity .2s ease;
}
.mnu-alla:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------- Högerpanel ------- */
.mnu-pan{position:relative;min-width:286px;padding:4px 4px 4px 10px}
.mnu-p{display:none}
.mnu-p[data-aktiv]{display:block;animation:mnuIn .24s ease both}
@keyframes mnuIn{from{opacity:0;transform:translateX(5px)}to{opacity:1;transform:none}}

.mnu-p .mnu-e{
  display:block;padding:6px 12px 10px;
  font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--m-brons);
}
.mnu-p a{
  display:block;min-height:44px;padding:9px 12px;border-radius:10px;
  text-decoration:none;color:var(--m-fg);
  transition:background .18s ease;
}
.mnu-p a:hover,.mnu-p a:focus-visible{background:var(--m-hover);outline:none}
.mnu-p a b{display:block;font-weight:500;font-size:.92rem;line-height:1.3}
.mnu-p a span{display:block;font-size:.76rem;line-height:1.4;opacity:.55;margin-top:2px}

/* ------------------------------ Gamla mallen (style.css) behöver plats -- */
.site-nav ul{overflow:visible;flex-wrap:wrap}
.site-nav .mnu-t{
  display:inline-flex;padding:.5rem .7rem;border-radius:999px;
  font-size:.9375rem;text-decoration:none;color:var(--ink-2,#45413a);
}
.site-nav .mnu-t:hover{background:var(--paper-2,#f4f1ea);color:var(--ink,#1c1a17)}
.site-nav .mnu-d{left:0;transform:translate(0,-6px)}
.site-nav .mnu.open .mnu-d{transform:translate(0,0)}
/* nollställ style.css pillerlänkar inne i panelen */
.site-nav .mnu-d a{
  display:block;white-space:normal;background:none;border-radius:10px;
  padding:9px 12px;color:var(--m-fg);font-size:inherit;
}
.site-nav .mnu-d a:hover{background:var(--m-hover);color:var(--m-fg)}
.site-nav .mnu-alla{
  padding:12px 12px 8px;color:var(--m-brons);
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
}
.site-nav .mnu-alla:hover{background:none;color:var(--m-brons)}
.site-nav li.mnu-wrap{list-style:none}

/* --------------------------------------------------------- Mobil ------- */
@media (max-width:900px){
  .mnu,.mnu-d{display:block;width:100%}
  .mnu-d{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    padding:0;border:0;box-shadow:none;background:none;backdrop-filter:none;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .mnu.open .mnu-d{max-height:1400px;padding:2px 0 12px;transform:none;left:auto;right:auto}
  .mnu-d::before{display:none}
  .mnu-kol{border-right:0;padding-right:0;min-width:0}
  .mnu-k{display:none}
  .mnu-alla{margin-top:8px;padding-left:0}
  .mnu-pan{min-width:0;padding:0}
  .mnu-p{display:block !important;animation:none;margin-bottom:6px}
  .mnu-p .mnu-e{padding-left:0}
  .mnu-p a{padding-left:0;padding-right:0}
}

/* ================================================== Huvudmeny + mobil === */
.hoger{display:flex;align-items:center;gap:clamp(16px,2.3vw,32px)}
.hoger .shop{
  border:1px solid currentColor;border-radius:999px;padding:9px 17px;
  text-decoration:none;font-size:13.5px;line-height:1;white-space:nowrap;opacity:1;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.hoger .shop:hover{background:var(--porslin,#F3EFE8);color:var(--djup,#0E1917);border-color:var(--porslin,#F3EFE8)}
.mnu-mob{display:none}

.burger{
  display:none;appearance:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:11px 9px;flex-direction:column;justify-content:space-between;
}
.burger span{display:block;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .3s ease,opacity .25s ease}
.top.oppen .burger span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.top.oppen .burger span:nth-child(2){opacity:0}
.top.oppen .burger span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:flex}
  .top .menu{
    position:absolute;top:100%;left:0;right:0;
    display:block;gap:0;
    background:#0b1310;
    border-top:1px solid rgba(242,239,233,.12);
    max-height:0;overflow:hidden;
    transition:max-height .34s cubic-bezier(.2,.7,.2,1);
  }
  .top.oppen .menu{max-height:84svh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .top .menu a{display:block !important}
  .top .menu > a{
    opacity:.88;font-size:15.5px;
    padding:15px 20px;
    border-bottom:1px solid rgba(242,239,233,.08);
  }
  .top .menu > a::after{display:none}
  .top .menu .mnu-mob{display:block !important}
  .top .menu .mnu{padding:0 20px;border-bottom:1px solid rgba(242,239,233,.08)}
  .top .menu .mnu-d{display:flex;flex-direction:column}
  .top .menu .mnu-kol{order:2}
  .top .menu .mnu > .mnu-t{padding:15px 0;width:100%;justify-content:space-between;font-size:15.5px;opacity:.88}
  .top .menu .mnu-p .mnu-e{padding:10px 0 4px}
  .top .menu .mnu-p a{font-size:14.5px;min-height:40px}
  .top .menu .mnu-alla{display:block;padding:4px 0 16px}
}
@media (max-width:420px){
  .hoger .shop{padding:8px 13px;font-size:12.5px}
}