/* ===========================================================
   stil-f.css – faceliftets steg 2: stil F över hela shoppen (2026-10-30)

   Startsidan (AO #7811) fick stil F: skogstoner, DM Sans, Johans våg och den
   gula linjen ur Absoflex grafiska profil (PMS 7548C) bara i sidfoten. Den här
   filen för ut samma stil till resten av sajten.

   ETT LAGER OVANPÅ, INTE EN OMSKRIVNING. tokens.css, base.css och webshop.css
   är orörda – det gamla utseendet ("klassisk") finns alltså kvar exakt som det
   var. Filen laddas sist av decorators/shop.jsp, och bara när ny stil är vald:
     ?stil=ny / ?stil=klassisk  sparas i kakan ws_stil (180 dagar)
     utan val                   ny utanför produktionen, klassisk i produktionen
   Utanför produktionen finns en växlingsknapp nere till vänster (.sf-vaxla).

   Det mesta följer av att designtokens (tokens.css) får nya värden – knappar,
   länkar, kort, kassan och dialogerna läser dem redan. Resten är sidchromen:
   sidhuvud med vågloggan, menyraden, sidokolumnernas rutor och sidfoten.
   =========================================================== */

:root {
  /* Stil F (samma värden som --ss-* i startsida.css) */
  --sf-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sf-bg: #ffffff;   /* F2 (Johan 2026-10-31): ljusare sidhuvud och sidfot, sanden var murrig */
  --sf-yta: #f3f4f0;
  --sf-kort: #ffffff;
  --sf-text: #1c2420;
  --sf-dov: #5f6a63;
  --sf-linje: #e4e6e0;
  --sf-accent: #2f6a4f;
  --sf-accent-mork: #2f5543;
  --sf-accent-mjuk: #e2ebe4;
  --sf-gul: #FFC600;
  /* Sidhuvudets höjd på mobil: loggan, sökningen och ikonraden (mätt, se Mobil nedan). */
  --sf-mobilhuvud: 176px;

  /* De befintliga tokens får stil F:s värden */
  --ws-color-primary: var(--sf-accent);
  --ws-color-primary-hover: var(--sf-accent-mork);
  --ws-color-text: var(--sf-text);
  --ws-color-surface: var(--sf-kort);
  --ws-color-muted: var(--sf-yta);
  --ws-color-border: var(--sf-linje);
  --ws-radius-md: 10px;
  --ws-shadow-sm: 0 1px 2px rgba(28, 36, 32, 0.06);
}

/* ---------- Grund ---------- */
body,
#superBody {
  font-family: var(--sf-font);
  background: var(--sf-bg);
  color: var(--sf-text);
  border-top: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font);
  color: var(--sf-text);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
a:hover { color: var(--sf-accent-mork); }

/* ---------- Sidhuvud ---------- */
#header,
.rk-1,
#headerTop {
  background: var(--sf-bg);
}
#headerTop { gap: 20px; }
#headline a.sf-logga {
  /* Nollställ den gamla sajtnamnsregeln (#headline a: 35px, grå, versal spärrning) */
  font-size: inherit;
  letter-spacing: normal;
  color: var(--sf-text);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
}
.sf-logga img.sf-vag {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 -2px 18px;
}
.sf-logga .sf-namn {
  font: 700 1.5rem/1 var(--sf-font);
  letter-spacing: -0.02em;
  color: var(--sf-text);
}
.sf-logga .sf-namn span { color: var(--sf-accent); }
.sf-logga .sf-slogan {
  display: block;
  font: 600 0.62rem/1.2 var(--sf-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-dov);
  margin-top: 5px;
}
#headline a.sf-logga:hover { text-decoration: none; }
#headline a.sf-logga:hover .sf-namn span { color: var(--sf-accent-mork); }

/* B&L Lunds stora logobild (#logo) hör till den gamla stilen; bolaget står i sidfoten. */
#headerTop .nounder { display: none; }

/* ---------- Menyraden ---------- */
#horiz-menu {
  background: var(--sf-accent);
}
#horiz-menu a:link,
#horiz-menu a:visited {
  font-family: var(--sf-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
#horiz-menu a:hover {
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}
div.bread-crumbs a:hover { background: var(--sf-accent-mork); }

/* ---------- Ytorna ---------- */
#iframe,
#verticalMenuLeft,
#verticalMenuRight {
  background: var(--sf-bg);
}
.roundcontainer {
  background: var(--sf-kort);
  border-color: var(--sf-linje);
  border-radius: 10px;
}
#bestSellers li a,
#fTree a { color: var(--sf-text); }
#bestSellers li a:hover,
#fTree a:hover { color: var(--sf-accent); }

/* ---------- Formulär och knappar ---------- */
button,
input[type="submit"],
input[type="SUBMIT"],
input[type="button"],
input[type="BUTTON"] {
  font-family: var(--sf-font);
  font-weight: 600;
  padding: 7px 14px;
}
input[type="text"],
input[type="TEXT"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border-color: var(--sf-linje);
  border-radius: 8px;
}
/* Fokus: grön ring i stället för den mörkblå och den ljusblå bakgrunden */
button:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 2px var(--sf-accent);
  background: var(--sf-accent-mjuk);
}
button:not(.ws-dialog-btn):focus,
input[type="submit"]:focus,
input[type="SUBMIT"]:focus,
input[type="button"]:focus,
input[type="BUTTON"]:focus {
  color: var(--sf-text) !important;
  background: var(--sf-accent-mjuk) !important;
  box-shadow: 0 0 0 2px var(--sf-accent);
}

/* ---------- Flikarna (jQuery UI) ---------- */
#tabs,
.ui-tabs {
  font-family: var(--sf-font);
  border-color: var(--sf-linje);
  background: var(--sf-kort);
}
.ui-tabs .ui-tabs-nav {
  background: var(--sf-yta);
  border-color: var(--sf-linje);
}
.ui-tabs .ui-tabs-nav li.ui-state-default {
  background: transparent;
  border-color: transparent;
}
.ui-tabs .ui-tabs-nav li.ui-state-default a { color: var(--sf-dov); }
#tabs .ui-state-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
  background: var(--sf-kort);
  border-color: var(--sf-linje);
  border-bottom-color: var(--sf-kort);
}
#tabs .ui-state-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
  background: transparent;
  color: var(--sf-accent);
}

/* Webshoppens egna flikregler (#tabs, webshop.css) har den ljusblå #55bbe5 hårdkodad,
   och den aktiva fliken har vit text - därför samma specificitet här. */
#tabs { border-color: var(--sf-linje); }
#tabs .ui-tabs-nav { background: var(--sf-yta); border: 0; }
#tabs .ui-state-default a { color: var(--sf-dov); font-weight: 600; }
#tabs .ui-state-default a:hover { background: var(--sf-accent-mjuk) !important; color: var(--sf-accent); }
#tabs .ui-state-active a,
#tabs .ui-state-active a:hover {
  background: var(--sf-accent) !important;
  color: #fff !important;
}

/* ---------- Produktkortet ---------- */
/* div.item hade en svart ram och en hård skugga 10px snett nedåt – det ser ut som ett
   kort från tidigt 2000-tal bredvid de nya rutorna. */
div.item {
  border: 1px solid var(--sf-linje);
  box-shadow: 0 2px 10px rgba(28, 36, 32, 0.07);
  background: var(--sf-kort);
}

/* ---------- Artikellistan ---------- */
/* DM Sans är bredare än systemtypsnittet. Artikelnumret är nowrap med flit, och
   "7532-25-0000" blev 101px i en kolumn på 97 vid 800px och 96 på 95 vid 1440px (Flex). */
.plist-code {
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Snabbsökningen i vänsterkolumnen ---------- */
#searchLooseForm { border-color: var(--sf-linje); }
#searchLooseForm input[type="SUBMIT"] {
  /* Förstoringsglaset var en blå bild (images/search-icon.png). */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233d6b55' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat center center;
}

/* ---------- Sidfoten: den gula linjen ---------- */
.footerLeft,
.footerRight,
.footer,
#footer,
#footer td {
  background: var(--sf-yta);
  color: var(--sf-text);
}
#footer { border-top: 3px solid var(--sf-gul); }
#footer td { border-top: 0; }
.footer a,
#footer a { color: var(--sf-accent); }

/* ---------- Sidokolumnernas rutor som utgått (2026-10-30) ---------- */
/* Johan: "Skulle vi inte ta bort bästsäljare och flytta/ändra på texten akustik i Xår".
   Bästsäljare uppdaterades aldrig, välkomstrutan ersätts av raden i menyraden och
   snabbsökningen ligger nu i sidhuvudet. Markupen finns kvar för den klassiska stilen. */
#intro,
#srch,
#bestSellers { display: none; }

/* ---------- Sökningen i sidhuvudet ---------- */
.sf-sok {
  flex: 1 1 320px;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.sf-sok #searchLooseForm {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.sf-sok #searchLooseForm input[type="TEXT"] {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  margin: 0;
  padding: 0 46px 0 16px;
  font: 400 15px/1 var(--sf-font);
  color: var(--sf-text);
  background: var(--sf-kort);
  border: 1px solid var(--sf-linje);
  border-radius: 999px;
}
.sf-sok #searchLooseForm input[type="TEXT"]:focus {
  outline: none;
  background: var(--sf-kort);
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 3px var(--sf-accent-mjuk);
}
.sf-sok #searchLooseForm input[type="SUBMIT"] {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  vertical-align: middle;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
}
.sf-sok #searchLooseForm input[type="SUBMIT"]:hover,
.sf-sok #searchLooseForm input[type="SUBMIT"]:focus { background-color: var(--sf-accent-mjuk) !important; }
.sf-sok #searchAdvLink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  font: 600 14px/1 var(--sf-font);
  color: var(--sf-accent);
  text-decoration: none;
  background: var(--sf-kort);
  border: 1px solid var(--sf-linje);
  border-radius: 999px;
  white-space: nowrap;
}
.sf-sok #searchAdvLink:hover { border-color: var(--sf-accent); background: var(--sf-accent-mjuk); }

/* Den avancerade sökpanelen bor i body sedan flytten, under sidhuvudet. */
.stil-ny #main-search-div {
  position: fixed;
  top: 84px;
  right: max(12px, calc((100vw - 1100px) / 2));
  width: min(420px, calc(100vw - 24px));
  z-index: 1001;
  background: var(--sf-kort);
  border-color: var(--sf-linje) !important;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(28, 36, 32, 0.18);
}

/* ---------- Raden i sidhuvudet (ersätter "Akustik i NN år!") ---------- */
/* Låg först i den gröna menyraden, men där ligger brödsmulorna centrerade. */
.sf-fortroende {
  flex: 0 1 230px;
  margin: 0 0 0 auto;
  font: 400 12.5px/1.35 var(--sf-font);
  color: var(--sf-dov);
  text-align: right;
}
.sf-fortroende strong {
  display: block;
  font-weight: 700;
  color: var(--sf-text);
}
.sf-fortroende a {
  font-weight: 700;
  color: var(--sf-accent);
  white-space: nowrap;
}
@media (max-width: 1280px) { .sf-fortroende { display: none; } }
/* 1281-1440 sedan moms-vaxeln (2026-11-02): loggan klamdes vid 1366 - "46 ar i branschen" bort, numret kvar */
@media (min-width: 1281px) and (max-width: 1440px) { .sf-fortroende strong { display: none; } .sf-fortroende { font-size: 11.5px; max-width: 150px; } }

/* ---------- Ingen högerkolumn: ikonraden i sidhuvudet (2026-10-30) ---------- */
/* Högerkolumnen (15 %) bar bara ikonerna och Bästsäljare, och tog bredd från artikellistan.
   #topMenu flyttas in i #headerTop i alla bredder (shop.jsp + repositionTopMenu i ws_top.js).
   Mobilens kompakta ikoner står i webshop.css; här är skrivbordets, med etikett under. */
@media (min-width: 801px) {
  .stil-ny #verticalMenuRight { display: none; }
  .stil-ny #headerTop .nounder { display: none; }
  .stil-ny #headerTop .threeLines { display: none; }   /* menyn ligger i den gröna raden */
  .stil-ny #headerTop .accountLinks {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    gap: 2px;
    background: transparent;
  }
  .stil-ny #headerTop .accountLink {
    float: none;
    width: 66px;
    padding: 4px 0 0;
    border-radius: 10px;
  }
  .stil-ny #headerTop .accountLink:hover { background: var(--sf-accent-mjuk); }
  .stil-ny #headerTop .accountLink a { text-decoration: none; color: var(--sf-text); }
  .stil-ny #headerTop .accountLink img {
    width: auto;
    height: 28px;
    max-width: 32px;
  }
  .stil-ny #headerTop .accountLink .tiny {
    display: block;
    font: 500 11px/1.2 var(--sf-font);
    color: var(--sf-dov);
    white-space: nowrap;
  }
  .stil-ny #headerTop .accountLink .tiny br { display: none; }
  /* Innehållet låg an mot fönsterkanten när högerkolumnen inte längre gav luft. */
  .stil-ny #iframe { padding-right: 16px; }
}
/* Smal skrivbordsbredd: etiketterna bort, annars blir sökfältet bara ~150px. */
@media (min-width: 801px) and (max-width: 1100px) {
  .stil-ny #headerTop .accountLink { width: 46px; padding: 8px 0 4px; }
  .stil-ny #headerTop .accountLink .tiny { display: none; }
}
/* Två saker som positioneras av skript och utgick från högerkolumnen:
   - brödsmulorna får #iframes bredd (ws_top.js) men börjar längre in - med den bredare
     innehållsytan stack de ut 7px och gav sidledsscroll. Innehållsbredd räcker.
   - tipspanelen placerades vid tipslänken, som nu sitter längst till höger i sidhuvudet. */
.stil-ny #bread-crumbs-div { width: auto !important; }
.stil-ny #main-tip-div {
  position: fixed;
  left: auto !important;
  right: 12px;
  top: var(--sf-panel-topp, 84px) !important;
  max-width: calc(100vw - 24px);
  z-index: 1001;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(28, 36, 32, 0.18);
}
@media (max-width: 800px) { .stil-ny #main-tip-div { --sf-panel-topp: var(--sf-mobilhuvud); } }

/* ---------- Produktsidan: tillbehörskorten och köpbaren (script/stil-f.js) ---------- */
.stil-ny div.acc { cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.stil-ny div.acc:hover { border-color: var(--sf-accent); }
.stil-ny div.acc:has(input:checked) {
  border-color: var(--sf-accent);
  background: var(--sf-accent-mjuk);
  box-shadow: 0 0 0 2px var(--sf-accent);
}
.stil-ny div.acc .acc-ctrl label {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--sf-accent);
  cursor: pointer;
}
.stil-ny div.acc:has(input:checked) .acc-ctrl label { background: var(--sf-accent); color: #fff; }
.stil-ny div.acc input[type="CHECKBOX"],
.stil-ny div.acc input[type="checkbox"] { accent-color: var(--sf-accent); width: 18px; height: 18px; vertical-align: middle; }

.sf-kopbar {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(720px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;
  font-family: var(--sf-font);
  background: var(--sf-kort);
  border: 1px solid var(--sf-linje);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(28, 36, 32, 0.22);
  transform: translate(-50%, 160%);
  transition: transform .2s ease;
}
.sf-kopbar.sf-kopbar-pa { transform: translate(-50%, 0); }
.sf-kopbar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sf-kopbar-namn {
  font: 500 13px/1.3 var(--sf-font);
  color: var(--sf-dov);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-kopbar-summa { font: 700 17px/1.2 var(--sf-font); color: var(--sf-text); }
.sf-kopbar-knapp {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 26px !important;
  border: 0;
  border-radius: 999px;
  font: 700 15px/1 var(--sf-font) !important;
  color: #fff !important;
  background: var(--sf-accent) !important;
  cursor: pointer;
}
.sf-kopbar-knapp:hover { background: var(--sf-accent-mork) !important; }
/* Växlingsknappen och baren delar nederkant. */
body.sf-kopbar-visas .sf-vaxla { bottom: 100px !important; }

/* ---------- Produktguiderna (ws_top.js showGuide, produktguide.js i innehållsträdet) ---------- */
/* Navigeringen byggs som <div id="<steg>_guideNav"> med två knappar: Avbryt/Föregående och
   Nästa/Färdig. De satt ihop och såg likadana ut - nu luft emellan och bakåt som sekundär. */
.stil-ny [id$="_guideNav"] { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.stil-ny [id$="_guideNav"] input { margin: 0; min-height: 42px; }
.stil-ny [id$="_guideNav"] input:first-child:not(:last-child) {
  background: var(--sf-kort) !important;
  color: var(--sf-accent) !important;
  border: 1px solid var(--sf-linje) !important;
}
.stil-ny [id$="_guideNav"] input:first-child:not(:last-child):hover { background: var(--sf-accent-mjuk) !important; }
/* Undertaksguidens rumsmått (Gemensamt/Undertak/produktguide.js). */
.stil-ny form[name="areaForm"] input[type="TEXT"],
.stil-ny form[name="areaForm"] input[type="text"] { width: 110px; margin: 4px 0 4px 8px; }

/* ---------- Guidens och köpformulärens besked i #messCell ---------- */
/* Gamla skript (skärmguiden "närmsta längd …", åtgångsberäkningen) skriver text i
   laddningscellen i sidhuvudet. I stil F delar den rad med sökfältet och tryckte ihop både
   sök och logga. Här blir den en svävande ruta under sidhuvudet när den har text;
   laddningsikonen (en ensam bild) och en tom cell syns inte. */
.stil-ny #headerTop #messCell:empty,
.stil-ny #headerTop #messCell:has(> img:only-child) { display: none; }
.stil-ny #headerTop #messCell:not(:empty):not(:has(> img:only-child)) {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1002;
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  padding: 12px 18px;
  font: 500 14px/1.45 var(--sf-font);
  color: var(--sf-text);
  background: var(--sf-kort);
  border: 1px solid var(--sf-linje);
  border-left: 4px solid var(--sf-accent);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(28, 36, 32, 0.18);
}
@media (max-width: 800px) {
  .stil-ny #headerTop #messCell:not(:empty):not(:has(> img:only-child)) { top: var(--sf-mobilhuvud); }
}

/* ---------- Växlingsknappen (bara utanför produktionen) ---------- */
.sf-vaxla {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 900;
  display: flex;
  gap: 0;
  font: 600 12px/1 var(--sf-font, system-ui);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--sf-linje, #ddd);
  background: #fff;
}
.sf-vaxla a {
  display: block;
  padding: 9px 12px;
  color: #444 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.sf-vaxla a.sf-vald {
  background: var(--sf-accent, #0ea5e9);
  color: #fff !important;
}

/* ---------- Mobil ---------- */
@media (max-width: 800px) {
  /* Två rader under .rk-1:s tak på 111px: loggan överst, ikonraden under.
     Vågen och sloganen ryms inte – bara namnet. */
  /* Tre rader: loggan med en liten våg, sökningen, ikonraden. Taket i webshop.css
     (#header 111px, .rk-1 max-height 111px, #fTree på top:111px) räcker till två -
     alla tre värdena måste upp TILLSAMMANS, annars klipps ikonraden utan ett ord. */
  #header { height: auto; max-height: var(--sf-mobilhuvud); }
  .rk-1 { max-height: var(--sf-mobilhuvud); }
  #headerTop #fTree { top: var(--sf-mobilhuvud); }
  .stil-ny #main-search-div { top: var(--sf-mobilhuvud); right: 12px; }
  .sf-logga img.sf-vag { width: 92px; margin: 0 0 -1px 11px; }
  .sf-logga .sf-slogan { display: none; }
  .sf-logga .sf-namn { font-size: 1.3rem; }
  .sf-sok { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .sf-sok #searchLooseForm input[type="TEXT"],
  .sf-sok #searchAdvLink { height: 40px; }
  /* 16px förhindrar att iOS zoomar in när fältet får fokus. */
  .sf-sok #searchLooseForm input[type="TEXT"] { font-size: 16px; }
  .sf-vaxla { bottom: 64px; }
}

/* ---------- Menyn i den gröna raden (AO #7846, 2026-10-31) ---------- */
/* Produkter och Lokaltyper fälls ned med hover/focus-within - ingen JS. Brödsmulorna
   låg förut centrerade ovanpå raden (position:absolute + positionBreadCrumbs); i stil F
   flyttar de ned ovanför innehållet som en liten grå rad, så att raden är fri för menyn. */
.stil-ny #horiz-menu { position: relative; z-index: 20; padding: 0 12px; }
.stil-ny #horiz-menu a:link,
.stil-ny #horiz-menu a:visited { padding: 0 14px; height: 46px; line-height: 46px; }
.stil-ny .sf-meny > li,
.stil-ny .sf-hoger > li { position: relative; }
.stil-ny .sf-meny .sf-ned,
.stil-ny .sf-hoger .sf-ned {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 620px;
  padding: 16px 20px 10px;
  background: var(--sf-kort);
  color: var(--sf-text);
  border: 1px solid var(--sf-linje);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(28, 36, 32, 0.16);
  columns: 3;
  column-gap: 22px;
  z-index: 30;
  text-align: left;
}
.stil-ny .sf-meny > li:hover > .sf-ned,
.stil-ny .sf-meny > li:focus-within > .sf-ned,
.stil-ny .sf-hoger > li:hover > .sf-ned,
.stil-ny .sf-hoger > li:focus-within > .sf-ned { display: block; }
.stil-ny .sf-ned .sf-grp { break-inside: avoid; margin: 0 0 12px; }
.stil-ny .sf-ned b { display: block; margin: 0 0 3px; font: 700 13px/1.4 var(--sf-font); color: var(--sf-text); }
.stil-ny #horiz-menu .sf-ned a:link,
.stil-ny #horiz-menu .sf-ned a:visited {
  display: block;
  height: auto;
  padding: 2px 0;
  font: 500 14px/1.45 var(--sf-font);
  color: var(--sf-dov);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 4px;
}
.stil-ny #horiz-menu .sf-ned b a:link,
.stil-ny #horiz-menu .sf-ned b a:visited { font-weight: 700; color: var(--sf-text); padding: 0; }
.stil-ny #horiz-menu .sf-ned a:hover { background: none; color: var(--sf-accent); text-decoration: underline; }
@media (min-width: 801px) and (max-width: 1100px) {
  .stil-ny #horiz-menu a:link, .stil-ny #horiz-menu a:visited { padding: 0 9px; font-size: 12px; letter-spacing: 0.03em; }
  .stil-ny .sf-meny .sf-ned { min-width: 520px; columns: 2; }
}

/* Brödsmulorna: en smal rad direkt under den gröna raden, med samma kanter (Johan 2026-11-02:
   "ligger lite skumt en bit ner och följer inte gröna linjen som tidigare"). Förr låg de inne i den
   gröna raden; nu när menyn bor där flyttar positionBreadCrumbs (webshop.js) in dem direkt efter
   #horiz-menu. Vänsterkanten 26px = radens 12px + menylänkens 14px, så sökvägen börjar under
   PRODUKTER och inloggningen slutar under BESTÄLLNINGSVILLKOR. */
.stil-ny div.bread-crumbs {
  position: static !important;
  top: auto !important;
  width: auto !important;
  padding: 7px 26px;
  font: 13px/1.5 var(--sf-font);
  color: var(--sf-dov);
  background: var(--sf-kort);
  border-bottom: 1px solid var(--sf-linje);
}
.stil-ny div.bread-crumbs table { width: 100%; }
/* TopMenu skriver en tom distansrad (66 % / *) först - den gav raden dess "en bit ner". */
.stil-ny div.bread-crumbs tr:not(:has(#breadCrumbs)):not(#sameLevelNavi) { display: none; }
.stil-ny div.bread-crumbs td { padding: 0; vertical-align: middle; }
.stil-ny div.bread-crumbs td[align="right" i] { text-align: right; white-space: nowrap; padding-left: 16px; }
/* Pilarna mitt för texten: en flexrad centrerar bilderna mot raden oavsett teckenstorlek -
   vertical-align: text-top (webshop.css) lade dem i överkant. */
.stil-ny #breadCrumbs > b { display: inline-flex; align-items: center; flex-wrap: wrap; column-gap: 6px; }
.stil-ny #breadCrumbs > b > br { display: none; }
.stil-ny div.bread-crumbs #breadCrumbs b { font-weight: 400; }
.stil-ny div.bread-crumbs a:link,
.stil-ny div.bread-crumbs a:visited { color: var(--sf-dov); text-decoration: none; padding: 0; }
.stil-ny div.bread-crumbs a:hover { background: none; color: var(--sf-accent); text-decoration: underline; }
.stil-ny div.bread-crumbs #breadCrumbs a:last-of-type { color: var(--sf-text); font-weight: 700; }
.stil-ny div.bread-crumbs img { filter: invert(0.55); height: 9px; width: auto; margin: 0; vertical-align: middle; }
.stil-ny div.bread-crumbs td { color: var(--sf-dov); }
.stil-ny div.bread-crumbs td[align="RIGHT"] b { font-weight: 600; }
.stil-ny #breadCrumbs img:last-child { opacity: 0.7; }
/* Nedfallningen klipptes av sidhuvudets cell (td#header har overflow:hidden i webshop.css). */
.stil-ny td#header { overflow: visible; }

/* ---------- Moms-växeln i sidhuvudet (Momsvisning, 2026-11-02) ---------- */
/* Företag ser exkl. moms som alltid, privatpersoner inkl. Valet sparas i kakan ws_moms. */
.sf-moms {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--sf-linje);
  border-radius: 999px;
  overflow: hidden;
  font: 600 12px/1.15 var(--sf-font);
  background: var(--sf-kort);
}
.sf-moms a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 11px;
  color: var(--sf-dov) !important;
  text-decoration: none;
  white-space: nowrap;
}
.sf-moms a small { font-weight: 400; font-size: 10.5px; }
.sf-moms a.sf-vald { background: var(--sf-accent); color: #fff !important; }
.sf-moms a:hover:not(.sf-vald) { background: var(--sf-accent-mjuk); }
.pcard-moms { color: var(--sf-dov); font-weight: 400; }
@media (max-width: 800px) {
  .sf-moms { order: 5; }
  .sf-moms a { padding: 4px 9px; }
}
/* Skrivbord: utan den lilla raden ("exkl. moms") - vid 801 px blev sidan annars 29 px för bred, och
   vid 1366 px klämdes loggan ("Akustikshoper"). Raden står i title och i sidfoten. */
@media (min-width: 801px) {
  .sf-moms a small { display: none; }
  .sf-moms a { padding: 7px 8px; }
}

/* ---------- Adminmenyn: en nedfällning längst till höger i den gröna raden (Johan 2026-11-02) ----------
   Den gamla raden överst (decorators/admin.jsp) radbröts till två rader och sköt ned hela sidan. Här tar
   menyn ingen höjd alls; raden visas bara på mobil, där den gröna raden är dold. Alternativen kommer ur
   se.conditio.webshop.sessions.Adminmeny, så de två ritningarna kan inte glida isär. */
@media (min-width: 801px) {
  .stil-ny #adminMenu { display: none; }
}
/* Mobil: den gamla raden (h3 + h4) doljs och ersatts av knappen Admin (details#adminMobil i decorators/admin.jsp),
   som faller ut alternativen grupperade (Johan 2026-11-07). Klassiskt utseende har kvar den gamla raden. */
#adminMobil { display: none; }
.stil-ny #adminMenu > h3, .stil-ny #adminMenu > h4 { display: none; }
.stil-ny #adminMobil { display: block; margin: 6px 10px; }
.stil-ny #adminMobil > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border-radius: 999px;
  background: var(--ws-color-primary, #2e6a4f); color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.stil-ny #adminMobil > summary::-webkit-details-marker { display: none; }
.stil-ny #adminMobil > summary::after { content: "\25BE"; font-size: .9em; }
.stil-ny #adminMobil[open] > summary::after { content: "\25B4"; }
.stil-ny #adminMobil .am-grupper { margin-top: 8px; background: #fff; border: 1px solid var(--ws-color-border, #ddd); border-radius: 10px;
  padding: 6px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.stil-ny #adminMobil .am-grupp { padding: 6px 0; border-bottom: 1px solid #eee; }
.stil-ny #adminMobil .am-grupp:last-child { border-bottom: 0; }
.stil-ny #adminMobil .am-grupp > b:first-child { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin: 2px 0 4px; }
.stil-ny #adminMobil .am-grupp a, .stil-ny #adminMobil .am-grupp .sf-nu { display: block; padding: 9px 4px; min-height: 24px; text-decoration: none; }
.stil-ny #horiz-menu .sf-admin > a:link,
.stil-ny #horiz-menu .sf-admin > a:visited { background: rgba(255, 255, 255, 0.12); }
.stil-ny #horiz-menu .sf-admin.sf-har > a { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.85); }
.stil-ny .sf-hoger .sf-admin .sf-ned { left: auto; right: 0; min-width: 440px; columns: 2; }
/* Sidan man står på: fet och grön, inte en rubrik (rubrikerna är också <b>). */
.stil-ny .sf-ned b.sf-nu { display: block; margin: 0; padding: 2px 0; font: 700 14px/1.45 var(--sf-font); color: var(--sf-accent); }
/* Raden ska vara exakt lika bred som den gröna. Adminsidornas egna
   max-width (fanns för att inloggningen inte skulle täcka menyn när den låg I den gröna raden) gäller inte här. */
.stil-ny #horiz-menu + #bread-crumbs-div { flex: 0 0 100%; width: 100% !important; max-width: none !important; box-sizing: border-box; }

/* ---------- Ingen sidomeny: filträdet är borta i stil F (Johan 2026-11-02) ----------
   "den gamla sidomenyn med filträdet ska tas bort överallt ... en meny för mycket". I stil F var trädet
   det enda som syntes i vänsterkolumnen (intro, snabbsök och Bästsäljare döljs ovan; sökningen och
   Filter ligger i sidhuvudet). Navigeringen är den gröna raden, brödsmulorna och mapparnas egna kort.
   ws_top.js gör inte heller fileTree-anropet mot /TreeMenu i stil F. Klassisk stil är orörd. */
.stil-ny #verticalMenuLeft { display: none !important; }
.stil-ny #iframe { width: 100% !important; }

/* Mobil: hamburgaren öppnar DEN GRÖNA MENYN som en utfällbar lista (i stället för trädet) -
   body.sf-mobilmeny-oppen sätts av hamburgaren (shop.jsp), stängs av stil-f.js. Produkter,
   Lokaltyper och Admin fälls ut med ett tryck (li.sf-oppen); hovringen gäller bara ≥801 px. */
@media (max-width: 800px) {
  .stil-ny #headerTop .threeLines { display: block; }
  .stil-ny #horiz-menu { display: none; }
  .stil-ny.sf-mobilmeny-oppen #horiz-menu {
    display: block;
    position: fixed;
    top: var(--sf-mobilhuvud);
    left: 0;
    right: 0;
    height: auto;   /* base.css ger raden 54px */
    max-height: calc(100vh - var(--sf-mobilhuvud));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    padding: 4px 0 14px;
    box-shadow: 0 14px 30px rgba(28, 36, 32, 0.25);
  }
  .stil-ny #horiz-menu ul.horiz-menu-list { display: block; float: none; width: auto; margin: 0; padding: 0; }
  .stil-ny #horiz-menu ul.horiz-menu-list > li { display: block; float: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .stil-ny #horiz-menu ul.horiz-menu-list > li > a:link,
  .stil-ny #horiz-menu ul.horiz-menu-list > li > a:visited {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    line-height: 1.3;
    padding: 14px 20px;
    font-size: 15px;
  }
  .stil-ny #horiz-menu .sf-admin > a:link,
  .stil-ny #horiz-menu .sf-admin > a:visited { background: rgba(255, 255, 255, 0.10); }
  .stil-ny #horiz-menu li > .sf-ned { display: none !important; }
  .stil-ny #horiz-menu li.sf-oppen > .sf-ned {
    display: block !important;
    position: static;
    min-width: 0;
    columns: 1;
    margin: 0 10px 10px;
    padding: 12px 16px 4px;
    border-radius: 10px;
    box-shadow: none;
  }
  .stil-ny #horiz-menu li.sf-oppen > a span[aria-hidden] { display: inline-block; transform: rotate(180deg); }
  .stil-ny #horiz-menu .sf-ned a:link,
  .stil-ny #horiz-menu .sf-ned a:visited { padding: 6px 0; font-size: 15px; }
}

/* ---------- Tipsa och Avancerad sökning (2026-11-04) ---------- */
/* Johan: "pilen uppåt som kör animeringen som jag gjorde för hundra år sen ... borde nog snyggas
   till". Panelerna öppnas med en kort toning (ws_top.js oppnaPanel), stängs med en riktig knapp. */
.stil-ny #main-tip-div,
.stil-ny #main-search-div { border: 1px solid var(--sf-linje) !important; }
.stil-ny #main-tip-div:not(.ws-panel-oppen) { border-width: 0 !important; }
.stil-ny .ws-panel-oppen { animation: wsPanelIn .14s ease-out; }
@keyframes wsPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stil-ny .ws-panel-oppen { animation: none; } }
.stil-ny #main-tip-div { width: min(380px, calc(100vw - 24px)); background: var(--sf-kort); }
.stil-ny #main-search-div h4,
.stil-ny #main-tip-div h4 { margin: 0; font: 700 1.05rem/1.3 var(--sf-font); color: var(--sf-text); }
.stil-ny .ws-panel { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; font: 400 15px/1.4 var(--sf-font); }
.stil-ny .ws-panel-huvud { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.stil-ny .ws-panel label { font-weight: 600; font-size: 14px; color: var(--sf-text); margin-top: 4px; }
.stil-ny .ws-panel input[type="TEXT"],
.stil-ny .ws-panel textarea {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px;
  font: 400 16px/1.3 var(--sf-font); border: 1px solid var(--sf-linje); border-radius: 8px; background: #fff;
}
.stil-ny .ws-panel textarea { min-height: 96px; resize: vertical; }
.stil-ny .ws-panel .tiny { margin: 4px 0 0; color: var(--sf-dov); font-size: 13px; }
.stil-ny .ws-panel-knappar { display: flex; justify-content: flex-end; margin-top: 6px; }
.stil-ny .ws-panel-knappar input[type="SUBMIT"] { min-height: 44px; padding: 0 22px; border-radius: 999px; }
.stil-ny .ws-panel-stang { color: var(--sf-dov); }
.stil-ny .ws-panel-stang:hover { color: var(--sf-text); background: var(--sf-accent-mjuk); }

/* ---------- Sidfoten på mobil (2026-11-04) ---------- */
/* Johan: "sidfoten på mobil skärm blir helkass". Tre tabellceller sida vid sida gav centrerad
   text i en smal kolumn med LinkedIn bredvid. Under 800 px staplas de, vänsterställt. */
@media (max-width: 800px) {
  #footer, #footer > tbody, #footer > tbody > tr, #footer > tbody > tr > td { display: block; width: auto !important; }
  #footer td.footerLeft { display: none; }
  #footer td.footer { padding: 20px 16px 6px; text-align: left; font-size: 15px; line-height: 1.6; }
  #footer td.footer a { padding: 0; }
  #footer td.footerRight { padding: 0 16px 20px; text-align: left; }
}
/* Stilväxlaren (bara utanför produktionen) ligger fast nere till vänster - lämna plats för den. */
body:has(.sf-vaxla) #footer td.footerRight { padding-bottom: 72px; }

/* Länken till undertaksguiden på Undertaksskivor (osaker.rio i trädet, AO #7854) */
.sf-guidelank { margin: 0 0 10px; }
.sf-guidelank a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--sf-accent); }

/* ---------- En sidbredd för hela sajten (Johan 2026-11-05) ----------
   "Ljudproblem-sidorna ligger i en smal spalt till vänster, medan startsidan är centrerad och familjesidan
   går över hela bredden." Allt innehåll ligger nu i samma centrerade yta som startsidans sektioner
   (--ss-max 1180px + 16px luft), så att rubrikerna börjar på samma linje oavsett sidtyp. Startsidan
   (body.helbred) har sin egen hela bredd för startbilden och sina sektioner centrerade på samma mått. */
/* RÄTTAT 2026-11-05 em (Johan: "sidan har blivit mycket smalare ... sidhuvud och sidfot är ju mycket bredare", och
   filterraden på Undertaksskivor bröts i två rader): innehållet låstes till 1180 px, medan sidhuvudet, menyn och
   sidfoten gick över hela fönstret minus en tom kolumn på 5 % till vänster (#verticalSpaceLeft). Nu har ALLT samma
   bredd, --sf-sida, centrerat: kolumnerna på sidorna är borta, och sidhuvudets, menyns och sidfotens innehåll får
   samma inre marginal som innehållet. Bakgrunderna (den gröna menyraden, den gula linjen) går fortfarande kant i kant. */
/* CLS (2026-11-06): pa mobil flyttas sokfaltet och ikonraden in i sidhuvudet av ett skript efter innehallet - har
   sidan hunnit malas forsta gangen vaxer huvudet 129 -> 176 px och allt under hoppar. Hojden reserveras fran borjan. */
@media (max-width: 800px) { .stil-ny #headerTop { min-height: 176px; box-sizing: border-box; } }
:root { --sf-sida: 1400px; --sf-sidmarg: max(16px, calc((100% - var(--sf-sida)) / 2)); }
@media (min-width: 801px) {
  .stil-ny #verticalSpaceLeft, .stil-ny #verticalSpaceRight { display: none; }
  .stil-ny #headerTop { padding-left: var(--sf-sidmarg); padding-right: var(--sf-sidmarg); box-sizing: border-box; }
  .stil-ny #horiz-menu { padding-left: var(--sf-sidmarg); padding-right: var(--sf-sidmarg); box-sizing: border-box; }
  .stil-ny #footer { padding-left: var(--sf-sidmarg); padding-right: var(--sf-sidmarg); box-sizing: border-box; }
  /* div.bread-crumbs ar elementet brodsmulorna faktiskt ligger i - utan den stod de i fonstrets vansterkant medan
     sidan var centrerad (Johan 2026-11-06). */
  .stil-ny div.bread-crumbs, .stil-ny .sf-brodsmulor, .stil-ny #topMenuPath { padding-left: var(--sf-sidmarg); padding-right: var(--sf-sidmarg); box-sizing: border-box; }
  .stil-ny #iframe { padding-left: 0; padding-right: 0; }
  .stil-ny:not(.helbred) #iframe-content { max-width: none; margin: 0; padding-left: var(--sf-sidmarg); padding-right: var(--sf-sidmarg); box-sizing: border-box; }
}