/* ==========================================================================
   Design-lyft: sidhuvud + kategorirad (endast preview). Laddas efter style.css.
   ========================================================================== */
:root{--g-dk:#0f4d2c;--g-md:#15703f;--gold:#c9a227;--gold-dk:#9a7618;--gold-l:#f6edd2;--cream:#fbf8ef;--tb-h:60px}

/* ---- Sidhuvud ---- */
.topbar{background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(15,77,44,.08);padding-top:12px;padding-bottom:12px;transition:padding .28s ease,box-shadow .28s ease,background .28s ease}
.topbar.is-scrolled{padding-top:6px;padding-bottom:6px;background:rgba(255,255,255,.86);box-shadow:0 10px 28px -20px rgba(10,40,25,.55)}
.brand{gap:11px;line-height:1}
.brand-mark{width:40px;height:40px;background:radial-gradient(circle at 30% 25%,#1f8a52,var(--g-dk) 70%);color:#fff;font:700 .78rem/1 var(--serif);letter-spacing:.06em;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold),0 6px 14px -6px rgba(15,77,44,.7);transition:transform .28s ease,width .28s,height .28s}
.topbar.is-scrolled .brand-mark{width:34px;height:34px}
.brand-txt{display:flex;flex-direction:column;gap:3px}
.brand-txt b{font:700 1.18rem/1 var(--serif);color:var(--g-dk);letter-spacing:.005em}
.brand-txt b em{color:var(--gold-dk);font-weight:600}
.brand-txt small{font:600 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#7b8a80;transition:opacity .25s,max-height .25s;max-height:1em;overflow:hidden}
.topbar.is-scrolled .brand-txt small{opacity:0;max-height:0}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.04)}
.topbar nav{gap:6px}
.topbar nav a:not(.btn){position:relative;padding:8px 10px;border-radius:10px;color:#24302a;font-weight:600;font-size:.92rem;white-space:nowrap;transition:color .2s,background .2s}
.topbar nav a:not(.btn)::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),#e6c65a);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.topbar nav a:not(.btn):hover{color:var(--g-dk);background:rgba(15,77,44,.05)}
.topbar nav a:not(.btn):hover::after,.topbar nav a.is-active::after{transform:scaleX(1)}
.topbar nav a.is-active{color:var(--g-dk)}
.topbar nav .btn{position:relative;overflow:hidden;margin-left:8px;background:linear-gradient(135deg,#e5482f,#c92f1e);box-shadow:0 8px 18px -10px rgba(201,47,30,.9),inset 0 1px 0 rgba(255,255,255,.25);letter-spacing:.01em}
.topbar nav .btn::after{content:"";position:absolute;top:-50%;bottom:-50%;width:38%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:tbShine 7s ease-in-out 2.5s infinite}
.topbar nav .btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(201,47,30,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.topbar nav .btn:hover::after{animation:tbShine 1s ease-out}

/* Omdömeslänk: gul pill, inte samma röda som Begär offert. Synlig på mobil. */
.topbar nav .btn.top-review{margin-left:4px;background:linear-gradient(180deg,#ffd35a,var(--mango));color:var(--ink);box-shadow:0 6px 14px -8px rgba(201,162,39,.8),inset 0 1px 0 rgba(255,255,255,.45);letter-spacing:0}
.topbar nav .btn.top-review::after{display:none}
.topbar nav .btn.top-review:hover{background:linear-gradient(180deg,#ffe084,#ffc933);transform:translateY(-1px);box-shadow:0 10px 18px -10px rgba(201,162,39,.9),inset 0 1px 0 rgba(255,255,255,.5);color:var(--ink)}
@media (max-width:860px){
  .topbar nav .btn.top-review{margin-left:0;padding:.4em .7em}
  .topbar{gap:6px}
  .topbar nav{gap:6px}
}
@media (max-width:430px){
  .brand-mark{display:none}
  .topbar{padding-left:12px;padding-right:12px;gap:6px}
  .brand-txt b{font-size:.98rem}
  .topbar nav .btn{padding:.4em .62em;font-size:.8rem}
  .nav-toggle{width:36px;height:36px}
}
@keyframes tbShine{0%,82%{left:-60%}100%{left:130%}}
.topbar a:focus-visible,.nav-toggle:focus-visible,.chip:focus-visible,.chips-arrow:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Hamburger */
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(15,77,44,.14);background:#fff;cursor:pointer;position:relative;flex:none}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--g-dk);transition:transform .3s,opacity .2s,top .3s}
.nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:20px}.nav-toggle span:nth-child(3){top:26px}
body.nav-open .nav-toggle span:nth-child(1){top:20px;transform:rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){top:20px;transform:rotate(-45deg)}
.nav-sheet{position:fixed;left:10px;right:10px;top:calc(var(--tb-top,0px) + var(--tb-h) + 8px);z-index:45;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(15,77,44,.1);border-radius:18px;box-shadow:0 24px 50px -20px rgba(10,40,25,.5);padding:8px;display:grid;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .22s,transform .22s}
body.nav-open .nav-sheet{opacity:1;transform:none;pointer-events:auto}
.nav-sheet a{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-radius:12px;color:#1c2420;font-weight:600;text-decoration:none;font-size:1.02rem}
.nav-sheet a::after{content:"›";color:var(--gold-dk);font-size:1.3rem;line-height:1}
.nav-sheet a:hover,.nav-sheet a:focus-visible{background:var(--cream)}
.nav-sheet a+a{border-top:1px solid #f1ece0}
@media (max-width:860px){
  .nav-toggle{display:block}
  .topbar nav{gap:8px}
  .topbar nav .btn{margin-left:0}
  .brand-txt small{display:none}
}
@media (min-width:861px){.nav-sheet{display:none}}
@media (max-width:380px){.brand-txt b{font-size:1.02rem}.topbar nav .btn{padding:.5em .85em;font-size:.85rem}}

/* ---- Kategorirad ---- */
.chips{top:var(--tb-h);background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid rgba(15,77,44,.08);box-shadow:0 10px 24px -22px rgba(10,40,25,.6);transition:top .28s ease}
.chips-inner{position:relative;gap:6px;padding-top:10px;padding-bottom:10px;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.chips.at-start .chips-inner{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
.chips.at-end .chips-inner{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%)}
.chips.at-start.at-end .chips-inner{-webkit-mask-image:none;mask-image:none}
.chips .chip,.chips .chip[class*="chip-c"],.chips .chip[data-cat="alla"]{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 11px;border-radius:99px;background:#fff;color:var(--g-dk);border:1px solid #e9e1c9;font:650 .86rem/1.1 var(--sans);box-shadow:0 1px 0 rgba(15,77,44,.04);transition:transform .2s,box-shadow .2s,border-color .2s,color .25s,background .25s;filter:none}
.chips .chip:hover{transform:translateY(-1px);border-color:var(--gold);box-shadow:0 8px 16px -12px rgba(15,77,44,.55)}
.chips .chip .ci{width:16px;height:16px;flex:none;color:var(--gold-dk);transition:color .25s}
.chips .chip-star{width:15px;height:15px;fill:var(--gold)}
.chips .chip-range{margin-left:2px;padding:2px 6px;border-radius:99px;background:#f5f1e6;color:#7a6c4b;font:600 .68rem/1 var(--sans);letter-spacing:.02em;opacity:1;transition:background .25s,color .25s}
.chips .chip.active,.chips .chip.active[class*="chip-c"],.chips .chip.active[data-cat="alla"]{background:var(--g-dk);color:#fff;border-color:var(--g-dk);box-shadow:0 8px 18px -10px rgba(15,77,44,.8)}
.chips.has-ind .chip.active,.chips.has-ind .chip.active[class*="chip-c"],.chips.has-ind .chip.active[data-cat="alla"]{background:transparent;border-color:transparent;box-shadow:none}
.chips .chip.active .ci{color:#f1d27a}
.chips .chip.active .chip-range{background:rgba(255,255,255,.16);color:#f3e7c2}
.chip-ind{position:absolute;z-index:0;top:0;left:0;height:0;width:0;border-radius:99px;background:linear-gradient(135deg,#17653b,var(--g-dk));box-shadow:0 8px 18px -10px rgba(15,77,44,.85),inset 0 0 0 1px rgba(201,162,39,.55);transition:transform .42s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.2,.8,.2,1),opacity .2s;pointer-events:none;opacity:0}
.chips.has-ind .chip-ind{opacity:1}
.chips-arrow{display:none;position:absolute;top:50%;z-index:3;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:1px solid #e9e1c9;background:#fff;color:var(--g-dk);cursor:pointer;box-shadow:0 6px 16px -8px rgba(10,40,25,.5);place-items:center;transition:opacity .2s,transform .2s}
.chips-arrow svg{width:16px;height:16px}
.chips-arrow:hover{transform:scale(1.08);border-color:var(--gold)}
.chips-arrow.prev{left:max(6px,calc((100% - 1180px)/2 - 40px))}.chips-arrow.next{right:max(6px,calc((100% - 1180px)/2 - 40px))}
@media (hover:hover) and (min-width:861px){.chips-arrow{display:grid}.chips.at-start .chips-arrow.prev,.chips.at-end .chips-arrow.next{opacity:0;pointer-events:none}}

/* ---- Rörelse av ---- */
@media (prefers-reduced-motion:reduce){
  .topbar,.topbar *,.chips,.chips *,.nav-sheet,.nav-toggle span{transition:none!important;animation:none!important}
  .chips-inner{scroll-behavior:auto}
}
/* Smala mobiler: håll logga och knapp på en rad */
.brand-txt b,.topbar nav .btn{white-space:nowrap}
@media (max-width:480px){
  .topbar{gap:6px}
  .brand{gap:6px}
  .brand-mark{width:34px;height:34px;font-size:.7rem}
  .brand-txt b{font-size:1.04rem}
  .topbar nav .btn,.topbar nav .btn.top-review{padding:.4em .65em;font-size:.8rem}
  .nav-toggle{width:36px;height:36px}
  .nav-toggle span{left:9px;right:9px}.nav-toggle span:nth-child(1){top:11px}.nav-toggle span:nth-child(2){top:17px}.nav-toggle span:nth-child(3){top:23px}
  body.nav-open .nav-toggle span:nth-child(1),body.nav-open .nav-toggle span:nth-child(3){top:17px}
}
@media (max-width:400px){
  .brand-mark{display:none}
  .topbar{padding-left:8px;padding-right:8px;gap:4px}
  .topbar nav{gap:4px}
  .brand-txt b{font-size:.92rem}
  .topbar nav .btn,.topbar nav .btn.top-review{padding:.35em .5em;font-size:.76rem}
  .nav-toggle{width:34px;height:34px}
  .nav-toggle span{left:8px;right:8px}.nav-toggle span:nth-child(1){top:10px}.nav-toggle span:nth-child(2){top:16px}.nav-toggle span:nth-child(3){top:22px}
  body.nav-open .nav-toggle span:nth-child(1),body.nav-open .nav-toggle span:nth-child(3){top:16px}
}
@media (max-width:350px){.brand-txt b{font-size:.86rem}}