/* Delade komponenter (mega-panel, mobilmeny, sök, språkväljare) — utbrutet oförändrat ur index.html */
/* Language switcher */

.lang-switch{position:relative;}
.lang-current{display:flex;align-items:center;gap:6px;font-size:13px;letter-spacing:.03em;padding:6px 8px;border:1px solid var(--gray-300);border-radius:100px;}
.lang-current svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--white);border:1px solid var(--gray-150);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.08);min-width:168px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .3s var(--ease);z-index:50;}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu button{width:100%;text-align:left;padding:10px 12px;border-radius:999px;font-size:13px;display:flex;justify-content:space-between;align-items:center;}
.lang-menu button:hover{background:var(--gray-50);}
.lang-menu button.active{font-weight:700;}
#mobile-menu{position:fixed;inset:0;background:var(--black);color:var(--white);z-index:600;display:flex;flex-direction:column;justify-content:center;padding:48px;transform:translateY(-100%);transition:transform .55s var(--ease);}
#mobile-menu.open{transform:translateY(0);}
body.mobile-menu-open{overflow:hidden;}
#mobile-menu{overflow-y:auto;-webkit-overflow-scrolling:touch;}
#mobile-menu a{font-family:var(--display);font-size:30px;font-weight:600;display:block;margin:12px 0;}
#mobile-menu .close-btn{position:absolute;top:28px;right:28px;width:22px;height:22px;}
#mobile-menu .mm-foot{position:absolute;bottom:40px;left:48px;right:48px;font-size:13px;color:var(--gray-300);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
#mobile-menu .mm-langs{display:flex;gap:14px;margin-top:36px;}
#mobile-menu .mm-langs button{border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:8px 16px;font-size:13px;}
#mobile-menu .mm-langs button.active{background:var(--white);color:var(--black);}
@media(max-width:480px){
#mobile-menu{padding:36px 28px;justify-content:flex-start;padding-top:96px;}
#mobile-menu a{font-size:26px;margin:10px 0;}
#mobile-menu .mm-langs{flex-wrap:wrap;gap:10px;}
#mobile-menu .mm-langs button{min-width:44px;min-height:44px;padding:8px 12px;}
#mobile-menu .close-btn{width:44px;height:44px;top:18px;right:18px;padding:11px;}
#mobile-menu .mm-foot{position:static;margin-top:36px;}
}
.mega-col .mega-photo img{transition:transform .7s var(--ease);}
.mega-col .mega-photo:hover img{transform:scale(1.05);}
/* ===================== Mega menu ===================== */

.has-mega{position:relative;}
.mega-panel{

  position:fixed;top:0;left:0;right:0;background:var(--white);border-bottom:1px solid var(--gray-150);

  box-shadow:0 30px 60px rgba(0,0,0,.12);padding:100px 0 44px;

  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;

  z-index:390;

}
header:has(#productsMegaTrigger:hover) ~ #megaPanel,

header:has(a[href*="produkter"]:hover) ~ #megaPanel,

#productsMegaTrigger:hover ~ #megaPanel,

#megaPanel:hover,

.mega-panel.open {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateY(0) !important;

  pointer-events: auto !important;

}
header:has(#productsMegaTrigger:hover) ~ #megaOverlay,

header:has(a[href*="produkter"]:hover) ~ #megaOverlay,

#megaPanel:hover ~ #megaOverlay,

.mega-close-overlay.open {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;}
@media(max-width:900px){
.mega-grid{grid-template-columns:repeat(2,1fr);}
}
.mega-col a.mega-brand{display:block;margin-bottom:16px;}
.mega-col .mega-photo{width:100%;aspect-ratio:4/3;overflow:hidden;margin-bottom:14px;background:var(--gray-50);border-radius:4px;}
.mega-col .mega-photo img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.mega-col:hover .mega-photo img{transform:scale(1.05);}
.mega-col h4{font-family:var(--display);font-size:17px;font-weight:700;margin-bottom:6px;color:#111;}
.mega-col p{font-size:13.5px;color:var(--gray-500);line-height:1.5;margin-bottom:10px;}
.mega-col ul{margin-top:8px;}
.mega-col ul li{margin-bottom:7px;font-size:14px;}
.mega-col ul li a{color:var(--gray-700);}
.mega-col ul li a:hover{color:var(--black);text-decoration:underline;}
.mega-close-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:380;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;}
/* ===================== Global product search ===================== */

.site-search{position:relative;}
.site-search-panel{

  position:fixed;top:0;left:0;right:0;background:var(--white);z-index:450;padding:130px 0 60px;

  transform:translateY(-100%);transition:transform .4s var(--ease);border-bottom:1px solid var(--gray-150);

  box-shadow:0 30px 60px rgba(0,0,0,.1);

}
.site-search-panel.open{transform:translateY(0);}
.site-search-panel input{

  width:100%;border:none;border-bottom:2px solid var(--black);padding:16px 4px;font-family:var(--display);

  font-size:clamp(24px,4vw,40px);font-weight:600;background:transparent;

}
.site-search-panel input:focus{outline:none;}
.search-results{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:768px){
.search-results{grid-template-columns:1fr;}
.site-search-panel{bottom:0;min-height:100vh;padding:96px 0 36px;overflow-y:auto;}
.site-search-panel input{font-size:24px;}
.search-close{top:24px;right:24px;width:44px;height:44px;padding:10px;}
}
.search-hit{border:1px solid var(--gray-150);padding:20px;display:flex;gap:16px;align-items:center;transition:border-color .3s var(--ease);}
.search-hit:hover{border-color:var(--black);}
.search-hit img{width:56px;height:56px;object-fit:cover;flex-shrink:0;background:var(--gray-50);}
.search-hit .sh-cat{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);}
.search-hit .sh-title{font-family:var(--display);font-weight:700;font-size:15px;margin-top:2px;}
.search-empty{color:var(--gray-500);font-size:15px;margin-top:24px;}
.search-close{position:absolute;top:32px;right:48px;width:24px;height:24px;}
.search-close svg{width:100%;height:100%;stroke:var(--black);fill:none;stroke-width:1.4;}

/* =====================================================================
   MEGAMENY v2 (2026-09-03): translucent panel, stenfärgade fotoplattor,
   listor utan punkter, en fotrad med genvägar. Öppna/stäng-logiken ovan
   lämnas orörd — bara utseendet skrivs över här.
   ===================================================================== */
.mega-panel{
  background:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.18) !important;
  padding:calc(64px + 36px) 0 0 !important;
  transform:translateY(-8px);
  transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1),visibility .28s !important;
}
.mega-close-overlay{background:rgba(0,0,0,.18) !important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mega-grid{gap:clamp(20px,2.4vw,36px) !important;padding-bottom:36px}
.mega-col a.mega-brand{margin-bottom:12px !important}
.mega-col .mega-photo{aspect-ratio:4/3 !important;border-radius:16px !important;background:#f5f5f7 !important;margin-bottom:14px !important}
.mega-col .mega-photo img{transition:transform 1s cubic-bezier(.22,1,.36,1) !important}
.mega-col:hover .mega-photo img{transform:scale(1.04) !important}
/* Neutralisera header.css "ENVIROguard contain-fix" (sista kolumnen tvingades till object-fit:contain + padding).
   I v2 är alla fyra plattor riktiga foton och ska fylla ramen. */
body.home-v2 .mega-col .mega-photo,
body.home-v2 .mega-col:last-child .mega-photo{display:block !important;padding:0 !important;background:#f5f5f7 !important}
body.home-v2 .mega-col .mega-photo img,
body.home-v2 .mega-col:last-child .mega-photo img{object-fit:cover !important;width:100% !important;height:100% !important;padding:0 !important;background:transparent !important}
body.home-v2 .mega-photo img[src*="hydrotec-bilster-berg"]{object-position:60% 50% !important}
body.home-v2 .mega-photo img[src*="enviroguard-parkering"]{object-position:62% 70% !important}
.mega-col h4{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,sans-serif !important;font-size:17px !important;font-weight:600 !important;letter-spacing:-.01em;color:#0a0a0a !important;margin-bottom:4px !important}
.mega-col p{font-size:14px !important;color:#6e6e73 !important;line-height:1.5 !important;margin-bottom:12px !important}
.mega-col ul{list-style:none !important;margin:0 !important;padding:0 !important}
.mega-col ul li{margin:0 !important;font-size:14.5px !important}
.mega-col ul li a{display:block;padding:7px 0;color:#0a0a0a !important;text-decoration:none !important;border-top:1px solid rgba(0,0,0,.06);transition:color .2s,transform .12s ease-out}
.mega-col ul li:first-child a{border-top:0}
.mega-col ul li a:hover{color:#1d4e89 !important;text-decoration:none !important}
.mega-col ul li a:active{transform:scale(.98)}
.mega-foot{border-top:1px solid rgba(0,0,0,.08);background:rgba(245,245,247,.7)}
.mega-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:14px;padding-bottom:14px}
.mega-foot a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#0a0a0a;padding:6px 0;transition:color .2s}
.mega-foot a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.mega-foot a:hover{color:#1d4e89}
.mega-foot a:hover svg{transform:translateX(3px)}
@media(prefers-reduced-transparency:reduce){.mega-panel{background:#fff !important;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.mega-panel{transition:none !important}}

/* Sökpanel och språkmeny i samma anda */
.site-search-panel{-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
.lang-menu{border-radius:16px !important;box-shadow:0 24px 60px -12px rgba(0,0,0,.18) !important;border:1px solid rgba(0,0,0,.06) !important}