.fa-star-o{color: rgba(255,255,255,0.5)}input.white-input:not([type="file"]):not([type="checkbox"]),textarea.white-input{background-color: #ffffff !important;color: #000000 !important;border: 1px solid #cccccc !important;padding: 10px !important;display: block !important;width: 100% !important;min-height: 40px !important;opacity: 1 !important}input.white-input[type="file"]{background-color: transparent !important;border: none !important;width: auto !important;display: inline-block !important}input.white-input:focus,textarea.white-input:focus{background-color: #ffffff !important;color: #000000 !important}

/* === rhs-sidfotsmeny: centrera i stället för att sprida ut över hela bredden === */
footer ul.navbar-nav{
  justify-content:center !important;
  flex-wrap:wrap !important;
  max-width:1000px;
  margin-left:auto !important;
  margin-right:auto !important;
  row-gap:.35rem;
}
footer ul.navbar-nav > li{
  white-space:nowrap;
  margin-left:1rem !important;
  margin-right:1rem !important;
}
@media (max-width:575px){
  footer ul.navbar-nav > li{ margin-left:.6rem !important; margin-right:.6rem !important; }
}

/* === rhs-synlig-h1: gör den serverrenderade H1:n synlig ===
   H1 #rhs-brand-h1 sätts av ett eget script med inline sr-only-stilar.
   Den var dold för användare men läst av sökmotorer. Här görs den synlig
   utan att texten ändras. Inline-stilarna kräver !important för att slås ut. */
h1#rhs-brand-h1{
  position:static !important;
  width:auto !important;
  height:auto !important;
  padding:0 22px !important;
  margin:26px auto 4px !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
  white-space:normal !important;
  border:0 !important;
  display:block !important;
  max-width:1250px;
  font-family:'Crimson Text',Georgia,'Times New Roman',serif;
  font-size:clamp(21px,3vw,30px);
  line-height:1.22;
  font-weight:700;
  text-align:center;
  text-wrap:balance;
  color:#f3eee2;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
@media(max-width:640px){ h1#rhs-brand-h1{ margin-top:18px !important; } }


/* === rhs-knappkontrast 2 (2026-08-03) =========================================
   Ersatter det grona blocket fran 2 aug. Den rakningen utgick fran VIT text,
   men produktkorten renderar MORK text: #222 pa #1F8665 = 3,53:1, under AA:s
   4,5:1. Lilla ikonknappen var dessutom gron glyf pa gron platta = 1,21:1.
   Gront gar inte att radda med textfargen: cream pa samma grona ger 3,91:1.

   Kortens kopknapp gar darfor till husets morka #191512 med cream #f3eee2
   = 15,67:1, samma system som ovriga knappar pa sajten.

   Bred remsa och liten ikon behandlas OLIKA med avsikt: remsan ar den primara
   handlingen och far en fylld yta, ikonen ar en tyst genvag och far bara glyfen.
   Utan den skillnaden blir kortets fot en tung mork kloss.

   "I lager" lamnas gront — dar betyder fargen nagot.
   Selektorerna ar avsiktligt smala: en qs-cart-submit som varken ar .w-100
   eller .text-success-darker behaller den gamla gronan, sa otestade ytor
   (varukorg, kassa, snabbkop) inte andras oavsiktligt.
   Testat: produktrutnat och kategorisidor, desktop + mobil, inkl. hover. */

/* Bred remsa = primar handling */
button.qs-cart-submit.w-100{
  background-color:#191512 !important;
  border-color:#191512 !important;
  color:#f3eee2 !important;
}
button.qs-cart-submit.w-100 *{
  color:#f3eee2 !important;
  fill:#f3eee2 !important;
}
button.qs-cart-submit.w-100:hover,
button.qs-cart-submit.w-100:focus{
  background-color:#2F2820 !important;
  border-color:#2F2820 !important;
}

/* Liten ikon = tyst handling, ingen platta */
button.qs-cart-submit.text-success-darker{
  background-color:transparent !important;
  border-color:transparent !important;
  color:#191512 !important;
}
button.qs-cart-submit.text-success-darker *{
  color:#191512 !important;
  fill:#191512 !important;
}
button.qs-cart-submit.text-success-darker:hover,
button.qs-cart-submit.text-success-darker:focus{
  opacity:.55;
}

/* Konturvaskan pa variantprodukter, sa att alla kort ser likadana ut */
a.text-success-darker[href]{ color:#191512 !important; }
a.text-success-darker[href]:hover{ opacity:.55; }

/* Synligt tangentbordsfokus, saknas i temat */
button.qs-cart-submit:focus-visible,
a.text-success-darker[href]:focus-visible{
  outline:2px solid #efe7d6;
  outline-offset:2px;
}

/* Produktsidans kopknapp: OFORANDRAD tills den ar granskad separat.
   Vit text pa #1F8665 = 4,51:1, alltsa godkant enligt AA. */
button.product-btn-addcart{
  background-color:#1F8665 !important;
  border-color:#1F8665 !important;
}
button.product-btn-addcart:hover,
button.product-btn-addcart:focus{
  background-color:#1A7156 !important;
  border-color:#1A7156 !important;
}

/* === rhs-kopknapp-mobil (2026-08-03) ==========================================
   Pa mobil ar .product-hover-overlay INTE ett hovertillstand — den ligger i
   flodet och ar alltid synlig. Tre fel foljde av det:

   1. Remsan svavade som en 30 px pill i ett vitt 48 px band.
   2. Kopknappen fanns TVA ganger per kort: remsan + ikonen vid "I lager".
   3. Remsan hamnade MELLAN bilden och produktnamnet — man ombads kopa
      innan man visste vad varan hette eller kostade.

   Har flyttas knappen till kortets botten med position:absolute, indragen
   16 px i linje med "I lager"-raden, sa att den ligger INNE i rutan i stallet
   for att klistras mot kanterna. Kortet far padding-bottom som gor plats.
   Dubbletten i kortfoten doljs.

   Variantprodukternas a.text-success-darker lamnas kvar — den ar ingen
   kopknapp utan en vag till produktsidan.

   Brytpunkten foljer temats egen d-md-none (768 px).
   Uppmatt live pa 500 px over fyra kort: indrag 16/16, botten 18, hojd 44,
   ingen overlappning med lagerraden. */
/* RATTAT 2026-08-03: selektorn var :has(.product-hover-overlay), vilket ocksa
   traffade startsidans slider-kort. De har overlay men INGEN bred kopknapp, sa de
   fick 60 px tomrum i botten och en losryckt ikon mitt i kortet. Regeln ar nu
   bunden till kort som faktiskt har en button.qs-cart-submit.w-100 att placera. */
@media (max-width:767.98px){
  .bg-white.shadow-small:has(button.qs-cart-submit.w-100){
    position:relative !important;
    padding-bottom:60px !important;
  }
  .bg-white.shadow-small:has(button.qs-cart-submit.w-100) .product-hover-overlay{
    position:absolute !important;
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
    top:auto !important;
    width:auto !important;
    background:transparent !important;
    padding:0 !important;
  }
  .bg-white.shadow-small:has(button.qs-cart-submit.w-100) .product-hover-overlay .qs-cart{
    margin:0 !important;
    width:100% !important;
  }
  button.qs-cart-submit.w-100{
    height:44px !important;
    padding:0 !important;
    width:100% !important;
  }
  .bg-white.shadow-small:has(button.qs-cart-submit.w-100) button.qs-cart-submit.text-success-darker{
    display:none !important;
  }
}


/* === SIDFOT: FYRA SPALTER (2026-08-13) =====================================
   Sidfoten byggs av temats EGNA sektioner:
   Utseende -> Anpassa tema -> Sidfot.
   Ingen JavaScript är inblandad. Sidfoten kommer färdig från servern, så den
   syns direkt utan att blinka och läses av sökmotorer som inte kör skript.

   Regeln är enkel: varje textsektion som ligger FÖRE ikonraderna blir en
   spalt. Textsektioner EFTER ikonraderna löper över hela bredden. Vill du ha
   en femte spalt lägger du bara till en textsektion till - ingen kod behövs.

   Rubriken skrivs i sektionens fält "Rubrik". Länkarna skrivs i "Innehåll"
   som vanlig HTML, en <a href="/adress">Text</a> per länk.

   Alla mått nedan är hämtade ur förhandsvisningen och ska inte ändras utan
   att den ändras först: spalterna 44/26/32 px, loggan 64 px med 26 px under,
   rubriker 12,5 px versalt med 0,18em spärr, länkar 15 px med 7 px luft.
   ========================================================================= */

footer .container-fluid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:32px;
  row-gap:0;
  max-width:1250px;
  margin:0 auto;
  padding:44px 26px 0;
  box-sizing:border-box;
  text-align:left;
}

/* Rader som inte är spalter löper över hela bredden. Bootstraps .row har
   negativa sidomarginaler som annars spräcker rutnätet. */
footer .container-fluid > .row{
  grid-column:1 / -1;
  margin-left:0;
  margin-right:0;
  order:3;
}

/* Spalterna. 32 px under dem = .rhs-foot padding-bottom i förhandsvisningen. */
footer .container-fluid > .row.pt-3.pb-1.px-3{
  grid-column:auto;
  order:1;
  padding:0 0 32px !important;
}

/* Loggan centrerad under spalterna, 64 px och 26 px luft under. */
footer .container-fluid > .row.justify-content-center.py-4{order:2;padding:0 0 26px !important}
/* Temats logglänk är 300 px bred; bilden måste centreras inuti den för
   att hamna mitt under spalterna som i förhandsvisningen. */
footer .container-fluid > .row.justify-content-center.py-4 a{display:flex;justify-content:center;width:100%}
footer .container-fluid > .row.justify-content-center.py-4 img{width:64px;height:64px;display:block;margin:0}

/* Copyrightraden, och därefter ägarraden allra sist - samma ordning som
   i förhandsvisningen. */
footer .container-fluid > .row:last-child{order:4}
footer .container-fluid > .row.justify-content-center:not(.py-4) ~ .row.pt-3.pb-1.px-3{
  grid-column:1 / -1;
  order:5;
  padding:0 0 22px !important;
}

/* --- Innehållet i en spalt ---------------------------------------------- */
/* Temat gör spalterna till dragspel på mobil, men ger varje textsektion
   samma id - alla knappar skulle då öppna samma spalt. Spalterna hålls
   därför alltid öppna och knapparna döljs. */
footer .container-fluid .expand-lg{display:block !important;text-align:left !important}
footer .container-fluid .block-toggler{display:none !important}
footer .container-fluid > .row.pt-3.pb-1.px-3 > div{display:block !important;text-align:left !important;padding:0}
footer .container-fluid > .row.pt-3.pb-1.px-3 br{display:none}

footer .container-fluid > .row.pt-3.pb-1.px-3 h6{
  display:block !important;
  font-family:'Crimson Text',Georgia,serif;
  font-size:12.5px !important;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a99e8c;
  font-weight:400;
  margin:0 0 14px !important;
}

footer .container-fluid > .row.pt-3.pb-1.px-3 ul{list-style:none;margin:0;padding:0}
footer .container-fluid > .row.pt-3.pb-1.px-3 li{
  margin:0;padding:0;border:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
footer .container-fluid > .row.pt-3.pb-1.px-3 li a{
  font-family:'Crimson Text',Georgia,serif;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.35;
  color:#cfc8b6 !important;
  display:block;
  padding:7px 0;
  text-decoration:none;
  transition:color .15s ease;
}
footer .container-fluid > .row.pt-3.pb-1.px-3 li a:hover{color:#f3eee2 !important}
footer .container-fluid > .row.pt-3.pb-1.px-3 li a:focus-visible{outline:2px solid #e8b54a;outline-offset:2px}

/* Kontaktspalten: e-post och telefon framhävda, adressen dämpad. */
footer .container-fluid > .row.pt-3.pb-1.px-3 li a[href^="mailto:"],
footer .container-fluid > .row.pt-3.pb-1.px-3 li a[href^="tel:"]{color:#f3eee2 !important;font-weight:600 !important}
footer .container-fluid > .row.pt-3.pb-1.px-3 li span{
  font-family:'Crimson Text',Georgia,serif;
  font-size:14.5px;
  color:#a99e8c;
  padding:7px 0;
  line-height:1.4;
}

/* Ägarraden längst ned. */
footer .container-fluid > .row.justify-content-center:not(.py-4) ~ .row.pt-3.pb-1.px-3 > div,
footer .container-fluid > .row.justify-content-center:not(.py-4) ~ .row.pt-3.pb-1.px-3 .expand-lg,
footer .container-fluid > .row.justify-content-center:not(.py-4) ~ .row.pt-3.pb-1.px-3 li{text-align:center !important}
footer .container-fluid > .row.justify-content-center:not(.py-4) ~ .row.pt-3.pb-1.px-3 h6{display:none !important}
footer .container-fluid > .row.justify-content-center:not(.py-4) ~ .row.pt-3.pb-1.px-3 li{
  font-family:'Crimson Text',Georgia,serif;
  font-size:12.5px;
  display:block;
  color:#a99e8c;
}

/* Brytpunkterna följer förhandsvisningen: 2 spalter vid 900, 1 vid 560.
   Radavståndet mellan spaltraderna sitter i spalternas padding-bottom; den
   negativa marginalen på loggraden drar tillbaka mellanrummet till det
   värde förhandsvisningen har där (26 px respektive 22 px). */
@media(max-width:900px){
  footer .container-fluid{grid-template-columns:1fr 1fr;column-gap:24px;padding:36px 22px 0}
  footer .container-fluid > .row.pt-3.pb-1.px-3{padding:0 0 32px !important}
  footer .container-fluid > .row.justify-content-center.py-4{margin-top:-6px}
}
@media(max-width:560px){
  footer .container-fluid{grid-template-columns:1fr;padding:30px 22px 0}
  footer .container-fluid > .row.pt-3.pb-1.px-3{padding:0 0 26px !important}
  footer .container-fluid > .row.justify-content-center.py-4{margin-top:-4px}
}


/* === NYHETSBREV: MÖRK PANEL (tillagt 2026-08-13) ==========================
   Remsan var orange (#ef5b27) och bröt av mot resten av sidfoten. Nu samma
   mörka botten, så nyhetsbrev och sidfot läses som ett block.
   Färgerna sitter som inline-style i temat, därav !important.
   ========================================================================= */
footer .d-flex.flex-column.py-4{background:#1b1712 !important}
footer .newsletter-titlecolor{font-family:'Crimson Text',Georgia,serif !important;
  font-size:20px !important;font-weight:700 !important;color:#f3eee2 !important}
footer .newsletter.input-group{background:transparent !important;gap:8px}
footer .newsletter_form input.form-control{background:#0f0d0b !important;
  border:1px solid rgba(243,238,227,.2) !important;color:#f3eee2 !important;
  padding:12px 14px !important;border-radius:0}
footer .newsletter_form input.form-control::placeholder{color:#8d8577 !important}
footer .newsletter_form button{background:#efe7d6 !important;color:#191512 !important;
  border:0 !important;padding:12px 20px !important;opacity:1 !important;cursor:pointer}
footer .newsletter_form button:hover{background:#fff !important}
footer .newsletter_form button .svg-icon{color:#191512 !important;fill:#191512 !important}


/* === STARTSIDANS FYRA SEKTIONER - FORMGIVNING ==============================
   Utdraget ur forhandsvisningen (FORHANDSVISNING-startsida-OPTIMERAD.html)
   2026-08-13. Innehaller enbart regler vars selektor namner nagon av:
     .rhs-kurs*    kurskorten under "Vara kurser"
     .rhs-app*     "Jagarskolans app"
     .rhs-rec*     "Vad deltagarna sager"
     .rhs-faq*     "Vanliga fragor"
     .rhs-rubrik / .rhs-under   sektionsrubrikerna

   Lagg in i temats custom.css. Innehallet (HTML) laggs som egna sektioner
   under Utseende -> Anpassa tema -> Startsida, pa samma satt som sidfoten.

   Kontrollerat: 127 klamrar balanserade, inga regler utan rhs-prefix.
   Mediefragorna ar bevarade i original.
   ========================================================================= */

/* --- ur <style>-block 8 i forhandsvisningen --- */
.rhs-rubrik{font-family:'Crimson Text',Georgia,serif;font-size:24px;text-align:center;margin:56px auto 8px;color:#fff;font-weight:700;width:-moz-fit-content;width:fit-content;background:rgba(20,17,14,.85);padding:4px 18px}
.rhs-under{font-family:'Crimson Text',Georgia,serif;text-align:center;color:#cfc8b6;font-size:15px;margin:0 0 24px}
.rhs-cta-mitt a,.rhs-kursknapp{font-family:'Crimson Text',Georgia,serif;display:inline-block;background:#efe7d6;color:#191512;padding:15px 38px;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:700}
.rhs-kursdel{margin:34px auto 6px;padding:0 22px;box-sizing:border-box;display:flex;align-items:center;gap:18px}
.rhs-kursdel::before,.rhs-kursdel::after{content:"";flex:1;height:1px;background:rgba(243,238,227,.16)}
.rhs-kursdel > span{font-family:'Crimson Text',Georgia,serif;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:#cfc8b6;white-space:nowrap}
.rhs-kurs2 a:hover{background:rgba(30,26,21,.85)}
@media(max-width:900px){
.rhs-bs,.rhs-kurs3{grid-template-columns:1fr 1fr!important}
}
@media(max-width:640px){
.rhs-bs,.rhs-kurs3,.rhs-kurs2{grid-template-columns:1fr!important}
.rhs-kursdel > span{white-space:normal;text-align:center}
}
.rhs-rubrikpar{flex:0 0 100%!important;width:100%!important;grid-column:1/-1!important;
  display:block!important;text-align:center!important;order:-1}
.rhs-rubrikpar .rhs-rubrik{margin-left:auto!important;margin-right:auto!important;display:block!important;
  width:fit-content!important}
.rhs-rubrikpar .rhs-under{margin-left:auto!important;margin-right:auto!important;display:block!important}

/* --- ur <style>-block 9 i forhandsvisningen --- */
.rhs-faq-wrap{max-width:1250px;margin:0 auto;padding:0 22px;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;
  align-items:start}
.rhs-faq-kol{background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);padding:26px 26px 12px}
.rhs-faq-kol > h3{font-family:'Crimson Text',Georgia,serif;font-size:19px;letter-spacing:.09em;
  text-transform:uppercase;color:#efe7d6;margin:0 0 4px;text-align:center}
.rhs-faq-kol > p.rhs-faq-sub{font-family:'Crimson Text',Georgia,serif;font-size:13.5px;
  color:#a99e8c;text-align:center;margin:0 0 18px}
.rhs-faq-kol details{border-top:1px solid rgba(243,238,227,.12)}
.rhs-faq-kol details:last-of-type{border-bottom:1px solid rgba(243,238,227,.12)}
.rhs-faq-kol summary{cursor:pointer;list-style:none;padding:14px 26px 14px 0;position:relative;
  font-family:'Crimson Text',Georgia,serif;font-size:15.5px;color:#f3eee2;font-weight:700}
.rhs-faq-kol summary::-webkit-details-marker{display:none}
.rhs-faq-kol summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:19px;
  color:#efe7d6;font-weight:400}
.rhs-faq-kol details[open] summary::after{content:"–"}
.rhs-faq-kol summary:focus-visible{outline:2px solid #efe7d6;outline-offset:2px}
.rhs-faq-kol .rhs-faq-svar{font-family:'Crimson Text',Georgia,serif;font-size:14.5px;
  line-height:1.62;color:#cfc8b6;padding:0 24px 15px 0;margin:0}
.rhs-faq-kol .rhs-faq-svar a{color:#efe7d6}
.rhs-rec-wrap{max-width:1250px;margin:0 auto;padding:0 22px;box-sizing:border-box}
/* proximity, inte mandatory: mandatory låser spåret till snap-punkter och
   står emot programmatisk scroll — pilarna blev verkningslösa. Uppmätt:
   scrollLeft=1200 studsade tillbaka till 603. proximity behåller känslan. */
.rhs-rec-spar{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:12px;scrollbar-width:thin}
.rhs-rec-kort{flex:0 0 clamp(260px,32%,380px);scroll-snap-align:start;
  background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);padding:22px 24px;
  display:flex;flex-direction:column}
.rhs-rec-stjarnor{color:#e8b54a;font-size:15px;letter-spacing:.16em;margin-bottom:10px}
.rhs-rec-txt{font-family:'Crimson Text',Georgia,serif;font-size:15px;line-height:1.6;
  color:#f3eee2;margin:0 0 16px;flex:1}
.rhs-rec-namn{font-family:'Crimson Text',Georgia,serif;font-size:13.5px;color:#a99e8c}
.rhs-rec-namn b{color:#efe7d6;font-weight:700}
@media(max-width:820px){
.rhs-faq-wrap{grid-template-columns:1fr}
}

/* --- ur <style>-block 12 i forhandsvisningen --- */
/* === MOBILA KORTKARUSELLER =================================================
   Ersätter vertikalt staplade kort med horisontell scroll-snap-slider.

   Varför: fyra produktkort staplade blir 2106 px höga på mobil. Kunden ser
   ett kort i taget och måste skrolla förbi hela raden för att komma vidare.
   Med "peek" – nästa kort sticker in ca 25 % – läses raden som en rad, och
   scrolldjupet ner till nästa sektion kollapsar.

   Ren CSS. Ingen Swiper-instans är bunden till dessa containrar (verifierat:
   ingen .swiper-wrapper, ingen swiper-förälder, inga inline-transforms), så
   det finns inget JS att krocka med.

   Dubblad klass (.x.x) ger specificitet 0,2,0. Det behövs för att vinna över
   temats .swiper-slide och över grid-reglerna som satts med !important.
   ========================================================================= */

/* --- Delad grund för alla fyra karuseller --- */
.rhs-bs.rhs-bs, .rhs-kurs3.rhs-kurs3,
.rhs-eeat-bevis.rhs-eeat-bevis, .rhs-eeat-galleri.rhs-eeat-galleri{--rhs-slider-off:0px;}
@media(max-width:640px){
/* .rhs-bs och .rhs-kurs3 får display:grid INLINE av sina injektionsskript.
     Inline slår alla klassselektorer, så just display måste vara !important
     här. Övriga egenskaper har ingen inline-motpart och behöver det inte. */
  .rhs-bs.rhs-bs, .rhs-kurs3.rhs-kurs3{display:flex !important}
.rhs-bs.rhs-bs, .rhs-kurs3.rhs-kurs3, .rhs-eeat-bevis.rhs-eeat-bevis{display:flex;
    flex-wrap:nowrap;
    align-items:stretch;              /* lika höga kort – ojämna kanter ser trasiga ut */
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:22px;
    overscroll-behavior-x:contain;    /* hindrar bakåtsvep i webbläsaren */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;}
.rhs-bs.rhs-bs::-webkit-scrollbar,
  .rhs-kurs3.rhs-kurs3::-webkit-scrollbar,
  .rhs-eeat-bevis.rhs-eeat-bevis::-webkit-scrollbar{display:none}
.rhs-kurs3.rhs-kurs3 > *{flex:0 0 80%;min-width:0;scroll-snap-align:start}
/* slutmarginal: vissa motorer tappar padding-right i flex-scrollcontainrar */
  .rhs-bs.rhs-bs::after, .rhs-kurs3.rhs-kurs3::after,
  .rhs-eeat-bevis.rhs-eeat-bevis::after{content:'';flex:0 0 4px}
}
/* === FAQ-GRUPPER (kategoridragspel) =======================================
   Temat har redan FAQ-styling som kolliderar. Två krockar:
     .rhs-faq-kol summary::after{content:"+"}
(0,1,1) slog min (0,1,0),
        så temats plus/minus ritades ovanpå min pil.
     .rhs-faq-kol details{border-top:1px}
la ramar även på gruppen.
   Alla regler nedan är därför scopeade under .rhs-faq-kol för att vinna.
   ========================================================================= */
.rhs-faq-kol details.rhs-faq-grupp{margin:0;border-top:0 !important;border-bottom:0 !important}
.rhs-faq-kol .rhs-faq-grupp-sum{list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px !important;margin:0 0 4px;position:static;
  background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);
  font-family:'Crimson Text',Georgia,serif}
.rhs-faq-kol .rhs-faq-grupp-sum::-webkit-details-marker{display:none}
.rhs-faq-kol .rhs-faq-grupp-sum:focus-visible{outline:2px solid #e8b54a;outline-offset:2px}
.rhs-faq-kol .rhs-faq-grupp-tit{font-size:16px;font-weight:700;color:#f3eee2;letter-spacing:.04em}
.rhs-faq-kol .rhs-faq-grupp-antal{font-size:12.5px;color:#a99e8c;white-space:nowrap;
  margin-left:auto}
/* egen pil – content måste nollas explicit, annars ärvs temats "+" / "–" */
.rhs-faq-kol .rhs-faq-grupp > .rhs-faq-grupp-sum::after{content:'' !important;position:static !important;
  flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid #e8b54a;border-bottom:2px solid #e8b54a;
  border-top:0;border-left:0;
  transform:rotate(45deg);margin:0 2px 3px 4px;transition:transform .18s ease}
.rhs-faq-kol .rhs-faq-grupp[open] > .rhs-faq-grupp-sum::after{transform:rotate(-135deg)}
.rhs-faq-kol .rhs-faq-grupp[open] > .rhs-faq-grupp-sum{margin-bottom:10px}
@media(prefers-reduced-motion:reduce){
.rhs-faq-kol .rhs-faq-grupp > .rhs-faq-grupp-sum::after{transition:none}
}
/* FAQ-CTA: .rhs-sekundar är bara definierad inne i .rhs-eeat-cta, så utan
   detta blev båda knapparna identiskt ifyllda och olika breda. */
.rhs-faq-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:22px auto 0;padding:0 22px;box-sizing:border-box}
.rhs-faq-cta a{flex:0 0 auto;min-width:220px;text-align:center;
  padding:14px 26px;font-family:'Crimson Text',Georgia,serif;font-size:13.5px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:#efe7d6;color:#22201c;font-weight:700}
.rhs-faq-cta a:hover{background:#fff;text-decoration:none}
.rhs-faq-cta a.rhs-sekundar{background:transparent;color:#efe7d6;
  box-shadow:inset 0 0 0 1px rgba(243,238,227,.45)}
.rhs-faq-cta a.rhs-sekundar:hover{background:rgba(243,238,227,.10)}
.rhs-faq-cta a:focus-visible{outline:2px solid #e8b54a;outline-offset:3px}
@media(max-width:600px){
.rhs-faq-cta a{flex:1 1 100%;min-width:0}
}
/* Ingen egen mobiltakt: temats sektioner ligger kvar på 60 px även på
   mobil, så 48 här skulle bara skapa en ny ojämnhet. */

/* === TYPSKALA =============================================================
   Uppmätt före: 20 unika grader, med par som 15 / 15,4 / 15,5 och
   17 / 17,5 / 17,6. Skillnader på någon tiondels pixel syns inte var för
   sig men gör sidan subtilt orolig som helhet.

   Skalan är sju steg. Varje klass snäppas till närmaste – och vid jämnt
   avstånd till det MINDRE värdet, så ingenting börjar radbryta om.

       12,5   etiketter och versalmikrotext
       13,5   bildtexter, meta, årtal
       15,5   brödtext
       17,5   ingress, pris, betoning
       20     liten rubrik
       24     sektionsrubrik
       30     sidrubrik
   ========================================================================= */
.rhs-ar,
.rhs-kursknapp,
.rhs-eeat figcaption,
.rhs-eeat-galleri figcaption,
.rhs-usp-txt,
.rhs-banner-stod{font-size:13.5px !important}
.rhs-faq-svar,
.rhs-mer,
.rhs-rec-txt,
.rhs-under,
.rhs-foot-lista a,
.rhs-foot-adress,
.rhs-kontakt-ingress,
.rhs-eeat-ingress,
.rhs-ingress,
.rhs-faq-grupp-tit,
.banner_1 .subtitle{font-size:15.5px !important}
.rhs-kvarde,
.rhs-eeat-h3,
.rhs-faq-sub,
footer .text-base,
footer .d-sm-inline,
[data-qb-area="start"] .text-base,
[data-qb-area="start"] .d-sm-inline,
.product-before-price{font-size:17.5px !important}
.rhs-rec-stjarnor{font-size:15.5px !important}
/* Tangentbord: scrollcontainern ska visa fokus när den nås med tabb */
.rhs-bs.rhs-bs:focus-visible, .rhs-kurs3.rhs-kurs3:focus-visible,
.rhs-eeat-bevis.rhs-eeat-bevis:focus-visible,
.rhs-eeat-galleri.rhs-eeat-galleri:focus-visible{outline:2px solid #efe7d6;outline-offset:4px;}

/* --- ur <style>-block 14 i forhandsvisningen --- */
/* Kurskorten. Tidigare låg all styling som style="..." inne i JavaScript,
   vilket gjorde texten oläslig för den som skulle ändra den. Nu är utseendet
   här och texten i HTML-blocket. */
.rhs-kurs3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;max-width:1250px;width:100%;margin:0 auto 14px;padding:0 22px;box-sizing:border-box}
.rhs-kurs2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;max-width:1250px;width:100%;margin:0 auto 14px;padding:0 22px;box-sizing:border-box}
.rhs-kurskort{display:flex;flex-direction:column;text-decoration:none;
  background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.rhs-kurskort:hover{text-decoration:none}
.rhs-kurskort-bild{background-position:center;background-size:cover;
  background-repeat:no-repeat;display:block;aspect-ratio:16/10}
.rhs-kurskort-text{padding:18px 20px 20px;text-align:center;display:flex;
  flex-direction:column;flex:1}
.rhs-kurskort h3{font-family:'Crimson Text',Georgia,serif;margin:0 0 6px}
.rhs-kurskort-sub{font-size:13.5px;color:#cfc8b6;margin-bottom:10px}
.rhs-kurskort-pris{font-size:15px;margin-bottom:14px;color:#f3eee2}
.rhs-kurskort-pris b{font-size:20px}
.rhs-kursknapp{margin:auto 0 0;padding:12px 0;font-size:13px}
.rhs-kurskort-liten{display:grid;grid-template-columns:150px 1fr}
.rhs-kurskort-liten .rhs-kurskort-text{grid-column:1 / -1;padding:18px 22px}
.rhs-kurskort-liten .rhs-kurskort-pris b{font-size:19px}
@media(max-width:640px){
.rhs-kurs3,.rhs-kurs2{grid-template-columns:1fr}
}

/* --- ur <style>-block 24 i forhandsvisningen --- */
.rhs-rec-wrap{position:relative}
.rhs-rec-spar{scroll-behavior:smooth}
.rhs-rec-nav{display:flex;justify-content:center;gap:10px;margin-top:6px}
.rhs-rec-nav button{font-family:'Crimson Text',Georgia,serif;background:rgba(20,17,14,.78);
  color:#efe7d6;border:1px solid rgba(243,238,227,.22);width:44px;height:38px;cursor:pointer;
  font-size:17px;line-height:1}
.rhs-rec-nav button:hover{background:#1F8665}
.rhs-rec-nav button:focus-visible{outline:2px solid #efe7d6;outline-offset:2px}
.rhs-rec-kort{min-height:210px}

/* --- ur <style>-block 27 i forhandsvisningen --- */
/* === KURSKNAPPARNA KANT I KANT MED BILDEN OVANFÖR 2026-08-11 ===
   Kortet är 390px brett och bilden fyller hela bredden. Knappen låg på 350px
   eftersom textspannet runt den har padding 18px 20px 20px. Texten ska behålla
   sin indragning, så bara knappen bryts ut med negativ marginal: 350+2*20=390. */
.rhs-kurs3 .rhs-kursknapp{margin-left:-20px !important;margin-right:-20px !important}
/* Brytlinjen mellan de tre kurserna och de två delproven: utan text i mitten
   ska de två linjehalvorna (::before/::after) mötas, därför gap 0. */
.rhs-kursdel{gap:0 !important}
/* Linjen låg på 16% opacitet och 1px – tekniskt centrerad (133–1383, exakt
   i linje med kurskorten) men i praktiken osynlig. Höjs till 38%. */
.rhs-kursdel::before,.rhs-kursdel::after{background:rgba(243,238,227,.38) !important}
/* Gapet ovanför "Våra kurser" var 60px (margin-top på .rhs-rubrik).
   Scopat till just den rubriken via syskonselektorn – sidans fyra övriga
   .rhs-rubrik behåller sina 56-60px. */
.rhs-vagval + .rhs-rubrik{margin-top:28px !important}
/* "Läs alla omdömen" sitter sist i .rhs-rec-wrap, under karusellen.
   Lika mycket luft över som under. */
.rhs-rec-cta-topp{margin:18px 0 18px !important}
/* "Nytt i sortimentet" ligger direkt efter USP-sektionen och saknar inline-
   marginal (56px kom från .rhs-rubrik). Scopat så att sidans övriga rubriker
   inte påverkas.

   Med 28px marginal blev det VISUELLA gapet 76px, eftersom USP-blocket bidrar
   med 48px egen bottenpadding (16px .rhs-usp + 24px sektionen + 8px posten).
   -20px marginal ger 28px från USP-texten till rubriken, alltså samma som
   övriga sektioner. USP-rutans eget utseende lämnas orört. */
section.pb-3.pb-lg-4 + .rhs-rubrik{margin-top:4px !important}
/* === HAGELPROVET / HÖGVILTSPROVET: bilden i linje med "Läs mer" ===
   Korten är en grid (150px bild + text). Textkolumnen har 18px bottenpadding,
   så "Läs mer" slutar 18px ovanför kortets underkant medan bildkolumnen gick
   hela vägen ner. Bilden får samma 18px, så dess underkant hamnar exakt i liv
   med knappen och kortets mörka bakgrund följer under den. */
.rhs-kurs2 > a > span:first-child{margin-bottom:18px !important}
/* === SAMMA LUFT SOM "VÅRA KURSER": 28px OVER, 8px UNDER ===
   Facit uppmätt på h2.rhs-rubrik: margin 28px topp, 8px botten.

   "Möt din instruktör": låg på 78px över. Sektionen har 18px egen padding,
   resterande 60px uppstår utanför den (inget syskon före). 18 bort + 32 upp
   ger 28. Samma grepp som kontaktsektionen redan använder. */
/* borttagen 2026-08-15: mallen sätter i stället 60px på <section>-omslaget */

/* --- ur <style>-block 28 i forhandsvisningen --- */
/* === JÄGARSKOLANS APP – kompakt swipe-rad under kurserna 2026-08-11 ===
   Följer samma mönster som recensionskarusellen (.rhs-rec-spar): vågrät
   scroll med scroll-snap. Bilderna är butikens egna ikoner från app-sidan. */
.rhs-app{max-width:1250px;margin:28px auto 0;padding:0 22px;box-sizing:border-box}
.rhs-app-inner{background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:22px 22px 18px}
.rhs-app-eyebrow{font-family:'Crimson Text',Georgia,serif;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#a99e8c;text-align:center;margin:0 0 6px}
.rhs-app-rubrik{font-family:'Crimson Text',Georgia,serif;font-size:24px;font-weight:700;
  color:#fff;text-align:center;margin:0 0 8px;line-height:1.25}
.rhs-app-ingress{font-family:'Crimson Text',Georgia,serif;font-size:15.5px;line-height:1.55;
  color:#cfc8b6;text-align:center;margin:0 auto 18px;max-width:680px}
.rhs-app-spar{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.rhs-app-kort{flex:0 0 208px;scroll-snap-align:start;margin:0;
  background:rgba(243,238,227,.05);padding:16px 16px 18px;display:flex;
  flex-direction:column;align-items:center;text-align:center}
.rhs-app-kort img{width:64px;height:64px;object-fit:contain;display:block;margin:0 0 10px}
.rhs-app-kort b{font-family:'Crimson Text',Georgia,serif;font-size:15.5px;color:#f3eee2;
  font-weight:700;margin:0 0 5px;line-height:1.3}
.rhs-app-kort span{font-family:'Crimson Text',Georgia,serif;font-size:13.5px;line-height:1.5;
  color:#a99e8c}
/* Pilar på kortraden. Utan dem dolde raden 36 % av sig själv – 476 av
   1 318 px låg utanför kanten utan att något visade att den gick att
   scrolla, medan recensionskarusellen strax under hade navigering.
   Samma form som den: 38 px, guldkant vid hover. */
.rhs-app-nav{display:flex;justify-content:center;gap:10px;margin:12px 0 0}
.rhs-app-nav button{width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(128,128,128,.55);background:transparent;color:#cfc8b6;
  font-size:20px;line-height:1;padding:0;
  transition:border-color .15s ease,transform .15s ease}
.rhs-app-nav button:hover{border-color:#e8b54a;transform:translateY(-1px)}
.rhs-app-nav button:focus-visible{outline:2px solid #e8b54a;outline-offset:2px}
/* Banderollens starkaste mening som riktig text – i bilden är den bara
   pixlar och kan varken läsas av crawlers eller markeras av besökare. */
.rhs-app-pionjar{font-family:'Crimson Text',Georgia,serif;font-size:15.5px;
  line-height:1.6;color:#cfc8b6;text-align:center;max-width:68ch;margin:18px auto 0}
.rhs-app-cta{text-align:center;margin:16px 0 0}
.rhs-app-cta a{font-family:'Crimson Text',Georgia,serif;display:inline-block;background:#efe7d6;
  color:#191512;padding:13px 30px;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;font-weight:700}
.rhs-app-cta a:hover{background:#ded4be;color:#191512}
.rhs-app-cta a:focus-visible{outline:2px solid #e8b54a;outline-offset:2px}
/* Banderollen från app-sidan. Länkad till /jagarskolansapp eftersom
   butiksmärkena är inbrända i bilden och inte går att klicka på. */
.rhs-app-bildlank{display:block;margin:20px 0 0}
.rhs-app-bildlank:focus-visible{outline:2px solid #e8b54a;outline-offset:3px}
/* Full sektionsbredd. Banderollen kräver nästan 1:1 för att texten ska gå att
   läsa – brödtexten är 19 px i bildens egna pixlar, så vid 900 px är den nere
   i 14 px och vid 700 px i 11. Därför ingen max-width. Mobilen får i stället
   ett annat utsnitt, se brytpunkten nedan. */
.rhs-app-bild{display:block;width:100%;height:auto;margin:0 auto;
  aspect-ratio:1200/438}
@media(max-width:640px){
.rhs-app{padding:0 22px}
.rhs-app-inner{padding:18px 16px 14px}
.rhs-app-kort{flex:0 0 78%}
}

/* Kurskortens rubrik. I forhandsvisningen ligger korten i en vanlig div och
   far 15,5 px. Har renderas de inuti temats section_element, som satter
   1,75rem (30,8 px) pa h3. Vardet las fast sa det blir samma som dar. */
body .rhs-kurskort h3{font-size:15.5px}

/* De sma korten fick bild forst har. Texten flyttas till kolumn 2 nar en bild
   ligger fore den; utan bild spanner den over hela kortet precis som forut. */
.rhs-kurskort-liten .rhs-kurskort-bild{height:100%;min-height:150px}
.rhs-kurskort-liten .rhs-kurskort-bild + .rhs-kurskort-text{grid-column:2;padding:18px 22px}

/* Knappen kant i kant med e-postfaltet. Temat lamnade 8 px mellan dem och
   gjorde faltet 42 px medan knappen var 52 px - de sag ut att hora ihop
   men gjorde det inte. Nu samma hojd och inget mellanrum. */
footer .newsletter{gap:0 !important;align-items:stretch !important}
footer .newsletter input.form-control{height:52px !important}
footer .newsletter .input-group-append{margin-left:0 !important}
footer .newsletter_form button{height:52px !important}

/* Omdomeskorten hade tidigare tre raders klamp och en "Las hela"-knapp.
   Forhandsvisningen har ingen klamp och ingen knapp - korten ar lika hoga
   och visar hela texten - sa bada togs bort 2026-08-15. */
.rhs-rec-kort .rhs-rec-namn{margin-top:auto}

/* === SEKTIONSORDNING ENLIGT FÖRHANDSVISNINGEN =============================
   Startsidans sektioner ligger i panelen i den ordning de en gång lades till.
   I stället för att flytta dem där - flera rader heter "Egen sektion / HTML"
   och förväxlas lätt - sätts ordningen här. Varje sektion pekas ut på sitt
   INNEHÅLL, inte på sin plats, så ordningen håller även om något läggs till,
   tas bort eller döps om i panelen.

   Flödet är förhandsvisningens, uppmätt 2026-08-15:

      1  Sidrubrik                    9  Bästsäljare
      2  Betygsraden                 10  Fördelsboxar (mörk USP-panel)
      3  Hero - två bannerkort       11  Nytt i sortimentet (karusell)
      4  Vägvalsrutorna              12  Vanliga frågor
      5  Våra kurser                 13  Vi svarar personligen
      6  Jägarskolans app            14  "Följ oss på Instagram"-raden
      7  Blago - grundare            15  Instagram-inbäddningen
      8  Vad deltagarna säger        16  Videon
   ========================================================================= */
div:has(> section .rhs-kurs3){display:flex;flex-direction:column}
div:has(> section .rhs-kurs3) > *{order:99}
div:has(> section .rhs-kurs3) > section.section_element:has(h1){order:1}
div:has(> section .rhs-kurs3) > section:has(.rhs-hero-betyg){order:2}
div:has(> section .rhs-kurs3) > section.row{order:3}
div:has(> section .rhs-kurs3) > section:has(.rhs-vagval){order:4}
div:has(> section .rhs-kurs3) > section:has(.rhs-kurs3){order:5}
div:has(> section .rhs-kurs3) > section:has(.rhs-app){order:6}
div:has(> section .rhs-kurs3) > section:has(.rhs-eeat){order:7}
div:has(> section .rhs-kurs3) > section:has(.rhs-rec-wrap){order:8}
div:has(> section .rhs-kurs3) > section:has(.rhs-bs){order:9}
div:has(> section .rhs-kurs3) > section.pb-3.pb-lg-4{order:10}
div:has(> section .rhs-kurs3) > section:has(.swiper-container){order:11}
div:has(> section .rhs-kurs3) > section:has(.rhs-faq-wrap){order:12}
div:has(> section .rhs-kurs3) > section:has(.rhs-kontakt){order:13}
div:has(> section .rhs-kurs3) > section.pt-2.pt-lg-3.pb-2{order:14}
div:has(> section .rhs-kurs3) > section:has(iframe[src*="lightwidget"]){order:15}
div:has(> section .rhs-kurs3) > section:has(video){order:16}

/* === APP-SEKTIONEN =======================================================
   Jägarskolans app finns inte i Netlify-förhandsvisningen men ska vara med.
   Den ligger där den låg i den äldre förhandsvisningen: mellan kurserna och
   Blago, alltså plats 6.

   De tre sektioner som tidigare doldes här - bannrarna "Boka jägarexamen"
   och "Maila din fråga" samt den egna hero-sektionen - är borttagna ur
   panelen 2026-08-16. Innehållet finns kvar i
   quickbutik-footer/orion-kopi/borttagna-sektioner/.
   ========================================================================= */

/* === SEKTIONSRYTM: 60 PX MELLAN DE INLAGDA SEKTIONERNA ====================
   Temats egna sektioner ligger konsekvent 60 px isär. De tre som lagts till
   gör det inte av sig själva - gapet styrs av <section>-omslaget, inte av
   innehållet, så marginalen måste sitta på omslaget.
   ========================================================================= */
div:has(> section .rhs-kurs3) > section:has(.rhs-eeat),
div:has(> section .rhs-kurs3) > section:has(.rhs-kontakt),
div:has(> section .rhs-kurs3) > section.pt-2.pt-lg-3.pb-2{margin-top:60px}

/* === Formgivning for Blago-, kontakt- och vagvalssektionerna =============
   Utdraget ur mallen 2026-08-15. Saknades tidigare, vilket gjorde att de tva
   inlagda sektionerna renderade oformaterade. */
.rhs-cta-mitt{text-align:center;margin:24px 0 6px}
.rhs-cta-mitt a,.rhs-kursknapp{font-family:'Crimson Text',Georgia,serif;display:inline-block;background:#efe7d6;color:#191512;padding:15px 38px;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:700}
/* === MÖT DIN INSTRUKTÖR (E-E-A-T) === */
.rhs-eeat{padding:18px 0 6px}
.rhs-eeat-inner{max-width:1250px;margin:0 auto;padding:0 22px;box-sizing:border-box}
.rhs-eeat-eyebrow{font-family:'Crimson Text',Georgia,serif;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#a99e8c;text-align:center;margin:0 0 8px}
.rhs-eeat-h2{font-family:'Crimson Text',Georgia,serif;font-size:30px;line-height:1.2;font-weight:700;
  color:#fff;text-align:center;margin:0 auto 14px;text-wrap:balance}
.rhs-eeat-ingress{font-family:'Crimson Text',Georgia,serif;font-size:16.5px;line-height:1.68;
  color:#cfc8b6;text-align:center;max-width:70ch;margin:0 auto 34px}
.rhs-eeat-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;
  align-items:stretch}
.rhs-eeat-portratt{margin:0;background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);
  display:flex;flex-direction:column}
.rhs-eeat-portratt img{width:100%;height:100%;max-height:430px;object-fit:cover;display:block}
.rhs-eeat-portratt figcaption{font-family:'Crimson Text',Georgia,serif;font-size:13.5px;
  color:#a99e8c;padding:14px 20px;line-height:1.5}
.rhs-eeat-meriter{background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);padding:26px 28px}
.rhs-eeat-h3{font-family:'Crimson Text',Georgia,serif;font-size:18px;letter-spacing:.09em;
  text-transform:uppercase;color:#efe7d6;margin:0 0 18px;text-align:center}
.rhs-eeat-bevis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:26px 0 0}
.rhs-eeat-galleri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 0}
.rhs-eeat-galleri figure{margin:0;background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.rhs-eeat-galleri img{width:100%;height:210px;object-fit:cover;display:block}
.rhs-eeat-galleri figcaption{font-family:'Crimson Text',Georgia,serif;font-size:13px;line-height:1.5;
  color:#a99e8c;padding:12px 16px}
.rhs-eeat-cta{text-align:center;margin:30px 0 6px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.rhs-eeat-cta a{font-family:'Crimson Text',Georgia,serif;display:inline-block;background:#efe7d6;
  color:#191512;padding:15px 34px;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;font-weight:700}
.rhs-eeat-cta a:hover{background:#fff}
.rhs-eeat-cta a.rhs-sekundar{background:transparent;color:#efe7d6;box-shadow:inset 0 0 0 1px rgba(243,238,227,.45)}
.rhs-eeat-cta a.rhs-sekundar:hover{background:rgba(243,238,227,.10)}
@media(max-width:980px){
.rhs-eeat-grid{grid-template-columns:1fr}
.rhs-eeat-portratt img{max-height:340px}
.rhs-eeat-bevis{grid-template-columns:1fr 1fr}
.rhs-eeat-galleri{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.rhs-eeat-h2{font-size:24px}
.rhs-eeat-ingress{font-size:15.5px}
.rhs-eeat-cta a{width:100%;box-sizing:border-box}
}
/* === KONTAKTSEKTION === */
.rhs-kontakt{padding:26px 0 10px}
.rhs-kontakt-inner{max-width:1250px;margin:0 auto;padding:0 22px;box-sizing:border-box}
.rhs-kontakt-eyebrow{font-family:'Crimson Text',Georgia,serif;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#a99e8c;text-align:center;margin:0 0 8px}
.rhs-kontakt-h2{font-family:'Crimson Text',Georgia,serif;font-size:28px;line-height:1.22;font-weight:700;
  color:#fff;text-align:center;margin:0 auto 12px;text-wrap:balance}
.rhs-kontakt-ingress{font-family:'Crimson Text',Georgia,serif;font-size:16px;line-height:1.65;
  color:#cfc8b6;text-align:center;max-width:66ch;margin:0 auto 30px}
.rhs-kontakt-kort{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rhs-kontakt-fot{font-family:'Crimson Text',Georgia,serif;font-size:13px;line-height:1.6;
  color:#8d8577;text-align:center;margin:26px auto 0;max-width:72ch}
@media(max-width:900px){
.rhs-kontakt-kort{grid-template-columns:1fr}
}
@media(max-width:600px){
.rhs-kontakt-h2{font-size:23px}
}
/* === MOBILA KORTKARUSELLER =================================================
   Ersätter vertikalt staplade kort med horisontell scroll-snap-slider.

   Varför: fyra produktkort staplade blir 2106 px höga på mobil. Kunden ser
   ett kort i taget och måste skrolla förbi hela raden för att komma vidare.
   Med "peek" – nästa kort sticker in ca 25 % – läses raden som en rad, och
   scrolldjupet ner till nästa sektion kollapsar.

   Ren CSS. Ingen Swiper-instans är bunden till dessa containrar (verifierat:
   ingen .swiper-wrapper, ingen swiper-förälder, inga inline-transforms), så
   det finns inget JS att krocka med.

   Dubblad klass (.x.x) ger specificitet 0,2,0. Det behövs för att vinna över
   temats .swiper-slide och över grid-reglerna som satts med !important.
   ========================================================================= */

/* --- Delad grund för alla fyra karuseller --- */
.rhs-bs.rhs-bs, .rhs-kurs3.rhs-kurs3,
.rhs-eeat-bevis.rhs-eeat-bevis, .rhs-eeat-galleri.rhs-eeat-galleri{--rhs-slider-off:0px;}
@media(max-width:640px){
.rhs-bs.rhs-bs, .rhs-kurs3.rhs-kurs3, .rhs-eeat-bevis.rhs-eeat-bevis{display:flex;
    flex-wrap:nowrap;
    align-items:stretch;              /* lika höga kort – ojämna kanter ser trasiga ut */
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:22px;
    overscroll-behavior-x:contain;    /* hindrar bakåtsvep i webbläsaren */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;}
.rhs-bs.rhs-bs::-webkit-scrollbar,
  .rhs-kurs3.rhs-kurs3::-webkit-scrollbar,
  .rhs-eeat-bevis.rhs-eeat-bevis::-webkit-scrollbar{display:none}
.rhs-eeat-bevis.rhs-eeat-bevis > *{flex:0 0 44%;min-width:0;scroll-snap-align:start}
/* dessa två har egen padding 0 22px – behåll den som scrollmarginal */
  .rhs-eeat-bevis.rhs-eeat-bevis{margin:26px -22px 0;padding:0 22px}
/* slutmarginal: vissa motorer tappar padding-right i flex-scrollcontainrar */
  .rhs-bs.rhs-bs::after, .rhs-kurs3.rhs-kurs3::after,
  .rhs-eeat-bevis.rhs-eeat-bevis::after{content:'';flex:0 0 4px}
}
@media(max-width:980px) and (min-width:641px){
.rhs-eeat-galleri.rhs-eeat-galleri > figure{flex:0 0 46%}
}
/* FAQ-CTA: .rhs-sekundar är bara definierad inne i .rhs-eeat-cta, så utan
   detta blev båda knapparna identiskt ifyllda och olika breda. */
.rhs-faq-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:22px auto 0;padding:0 22px;box-sizing:border-box}
/* === SEKTIONSRYTM ==========================================================
   Uppmätt: sidans egna sektioner ligger konsekvent 60 px isär. De tre jag
   lade till gjorde inte det – Blago 14 px, Kontakt 0, Instagram 0. Skillnaden
   är liten per sektion men bryter takten genom hela sidan.
   ========================================================================= */
.rhs-blago-start{margin-top:60px}
.rhs-kontakt-start{margin-top:60px}
.rhs-insta-start{margin-top:60px}
/* Ingen egen mobiltakt: temats sektioner ligger kvar på 60 px även på
   mobil, så 48 här skulle bara skapa en ny ojämnhet. */

/* === TYPSKALA =============================================================
   Uppmätt före: 20 unika grader, med par som 15 / 15,4 / 15,5 och
   17 / 17,5 / 17,6. Skillnader på någon tiondels pixel syns inte var för
   sig men gör sidan subtilt orolig som helhet.

   Skalan är sju steg. Varje klass snäppas till närmaste – och vid jämnt
   avstånd till det MINDRE värdet, så ingenting börjar radbryta om.

       12,5   etiketter och versalmikrotext
       13,5   bildtexter, meta, årtal
       15,5   brödtext
       17,5   ingress, pris, betoning
       20     liten rubrik
       24     sektionsrubrik
       30     sidrubrik
   ========================================================================= */
.rhs-ar,
.rhs-kursknapp,
.rhs-eeat figcaption,
.rhs-eeat-galleri figcaption,
.rhs-usp-txt,
.rhs-banner-stod,
.rhs-foot-bes{font-size:13.5px !important}
.rhs-faq-svar,
.rhs-mer,
.rhs-rec-txt,
.rhs-under,
.rhs-foot-lista a,
.rhs-foot-adress,
.rhs-kontakt-ingress,
.rhs-eeat-ingress,
.rhs-ingress,
.rhs-faq-grupp-tit,
.banner_1 .subtitle{font-size:15.5px !important}
.rhs-kvarde,
.rhs-eeat-h3,
.rhs-faq-sub,
footer .text-base,
footer .d-sm-inline,
[data-qb-area="start"] .text-base,
[data-qb-area="start"] .d-sm-inline,
.product-before-price{font-size:17.5px !important}
/* var 17,6 – rem-härlett */

/* andra passet: klasser som första svepet inte nådde */
.rhs-usp-tit,
.rhs-kontakt-fot,
footer .opacity-hover-7,
[data-qb-area="start"] h3:not(.rhs-eeat-h3):not(.rhs-foot-rubrik){font-size:15.5px !important}
.rhs-kontakt-h2{font-size:30px !important}
@media(max-width:600px){
.rhs-kontakt-h2{font-size:24px !important}
.rhs-eeat-h2{font-size:24px !important}
}
/* Tangentbord: scrollcontainern ska visa fokus när den nås med tabb */
.rhs-bs.rhs-bs:focus-visible, .rhs-kurs3.rhs-kurs3:focus-visible,
.rhs-eeat-bevis.rhs-eeat-bevis:focus-visible,
.rhs-eeat-galleri.rhs-eeat-galleri:focus-visible{outline:2px solid #efe7d6;outline-offset:4px;}
.rhs-vagval{max-width:1250px;margin:10px auto 0;padding:0 22px 6px;box-sizing:border-box;
  display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rhs-vagval-kort{font-family:'Crimson Text',Georgia,serif;text-align:center;
  padding:20px 16px;background:rgba(20,17,14,.78);
  box-shadow:0 12px 30px rgba(0,0,0,.35);color:#f3eee2;
  display:flex;flex-direction:column}
.rhs-vagval-kort b{display:block;font-size:18px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px}
.rhs-vagval-kort > span{display:block;font-size:13.5px;color:#cfc8b6;margin-bottom:14px}
/* margin-top:auto trycker ner knappraden så båda korten får den på samma höjd */
.rhs-vagval-knappar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:auto}
.rhs-vagval-knappar a{font-family:'Crimson Text',Georgia,serif;text-decoration:none;
  display:inline-block;background:#efe7d6;color:#191512;
  padding:11px 18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.rhs-vagval-knappar a:hover{background:#ded4be;color:#191512}
.rhs-vagval-knappar a.rhs-vv-sek{background:transparent;color:#efe7d6;
  box-shadow:inset 0 0 0 1px rgba(239,231,214,.55)}
.rhs-vagval-knappar a.rhs-vv-sek:hover{background:rgba(239,231,214,.12);color:#fff}
@media(max-width:640px){
.rhs-vagval{grid-template-columns:1fr}
}
/* === VÄGVALSRUTORNA KANT I KANT MED BANNERKORTEN 2026-08-11 ===
   Uppmätt före: korten 271–881 och 911–1521 (610px breda, 30px mellanrum).
   Rutorna 293–888 och 904–1499 – indragna exakt 22px på varje sida av
   .rhs-vagval:s padding, och med 16px mellanrum i stället för 30px.

   padding 0 + gap 30px ger (1250-30)/2 = 610px per ruta, alltså exakt samma
   kanter som korten ovanför. */
.rhs-vagval{padding-left:0 !important;padding-right:0 !important;
  gap:30px !important;margin-top:0 !important}
/* Gapet ovanför "Våra kurser" var 60px (margin-top på .rhs-rubrik).
   Scopat till just den rubriken via syskonselektorn – sidans fyra övriga
   .rhs-rubrik behåller sina 56-60px. */
.rhs-vagval + .rhs-rubrik{margin-top:28px !important}
/* Bildtexten under porträttet bär nu hela Blago-ingressen. Den ärvde
   bildtextstilen (13,5px, dämpad grå #a99e8c) vilket blev tungläst för fyra
   meningar. Sätts till samma som meritraderna .rhs-mer: 15,5px och #f3eee2. */
.rhs-eeat-portratt figcaption{font-size:15.5px !important;color:#f3eee2 !important;
  line-height:1.45 !important}
/* === OMVÄND HIERARKI I "MÖT DIN INSTRUKTÖR" ===
   Endast utseendet byts – <h2> förblir <h2>. "Blago – grundare och
   huvudinstruktör" är den beskrivande rubriken och behålls som sidans
   semantiska H2, även när den ritas liten. Att byta taggar hade dessutom
   kunnat slå sönder rubrikkontrollen i rhs-a11y-js. */
.rhs-eeat-eyebrow{font-size:24px !important;line-height:1.2 !important;
  font-weight:700 !important;color:#fff !important;
  text-transform:none !important;letter-spacing:normal !important;
  margin:0 auto 6px !important}
.rhs-eeat-h2{font-size:12.5px !important;line-height:1.5 !important;
  font-weight:400 !important;letter-spacing:.2em !important;
  text-transform:uppercase !important;color:#a99e8c !important;
  margin:0 auto 18px !important}
/* Mobil: stora rubriken kliver ner som gamla .rhs-eeat-h2 gjorde. */

/* === KONTAKTSEKTIONEN: omvänd hierarki, samma grepp som Blago-sektionen ===
   <h2> förblir <h2> – bara utseendet byts. */
.rhs-kontakt-eyebrow{font-size:24px !important;line-height:1.2 !important;
  font-weight:700 !important;color:#fff !important;
  text-transform:none !important;letter-spacing:normal !important;
  margin:0 auto 6px !important}
.rhs-kontakt-h2{font-size:12.5px !important;line-height:1.5 !important;
  font-weight:400 !important;letter-spacing:.2em !important;
  text-transform:uppercase !important;color:#a99e8c !important;
  margin:0 auto 18px !important}
/* Luften ovanför var 70px (26px egen padding + 44px utanför). Sektionen har
   inget syskon före sig – gapet uppstår mellan två separata containrar, så
   padding ensamt räcker inte. Uppmätt: -16px landar på 28px som resten. */
/* borttagen 2026-08-15: mallen sätter i stället 60px på <section>-omslaget */
/* === SAMMA LUFT SOM "VÅRA KURSER": 28px OVER, 8px UNDER ===
   Facit uppmätt på h2.rhs-rubrik: margin 28px topp, 8px botten.

   "Möt din instruktör": låg på 78px över. Sektionen har 18px egen padding,
   resterande 60px uppstår utanför den (inget syskon före). 18 bort + 32 upp
   ger 28. Samma grepp som kontaktsektionen redan använder. */
/* borttagen 2026-08-15: mallen sätter i stället 60px på <section>-omslaget */
.rhs-eeat-eyebrow{margin-bottom:8px !important}
.rhs-kontakt-eyebrow{margin-bottom:8px !important}

/* ==========================================================================
   MALLENS SAKNADE REGLER — utdraget ur rhs-forhandsvisning 2026-08-15
   ==========================================================================
   Jämförelsen gjordes på uträknad stil (getComputedStyle), inte på filtext:
   varje rhs-klass mättes i mallen och i den här kopian och ställdes mot
   varandra. Det som står nedan är precis de regler som saknades. Måtten i
   parentes är mallens facit och det kopian visade före rättelsen.
   ========================================================================== */

/* --- Blago-sektionens meritlista (var 338px, mallen 473px) ---------------
   Utan .rhs-tidslinje-reglerna föll årtal och text ihop till en enda kolumn
   och raderna tappade sin skiljelinje. Årtalskolumnen är 78px bred - det är
   den som ger .rhs-ar sin bredd. */
.rhs-tidslinje{list-style:none;margin:0;padding:0;counter-reset:none}
.rhs-tidslinje li{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid rgba(243,238,227,.10)}
.rhs-tidslinje li:last-child{border-bottom:none}
.rhs-ar{font-family:'Crimson Text',Georgia,serif;letter-spacing:.06em;color:#e8b54a;
  font-weight:700;font-variant-numeric:tabular-nums}
.rhs-mer{font-family:'Crimson Text',Georgia,serif;line-height:1.45;color:#f3eee2}
@media(max-width:600px){
  .rhs-tidslinje li{grid-template-columns:70px 1fr;gap:10px}
}

/* --- Beviskorten under meriterna (var 56px, mallen 114px) ---------------- */
.rhs-bevis-kort{background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:20px 18px;text-align:center;display:flex;flex-direction:column;gap:6px}
.rhs-bevis-tal{font-family:'Crimson Text',Georgia,serif;font-weight:700;color:#efe7d6;
  line-height:1.15}
.rhs-bevis-txt{font-family:'Crimson Text',Georgia,serif;line-height:1.5;color:#a99e8c}
.rhs-bevis-tal{font-size:24px !important}

/* --- Kontaktkorten (var 56px, mallen 168px) -----------------------------
   Tre klickbara kort: ikon, etikett, värde, meta. Utan detta blev de tre
   textrader på rad utan panel. */
.rhs-kkort{background:rgba(20,17,14,.72);box-shadow:0 12px 30px rgba(0,0,0,.35);padding:26px 24px;
  display:flex;flex-direction:column;gap:6px;text-decoration:none;text-align:center;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.rhs-kkort:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.5);
  background:rgba(30,26,21,.85);text-decoration:none}
.rhs-kkort:focus-visible{outline:2px solid #efe7d6;outline-offset:3px}
.rhs-kikon{font-size:24px;color:#e8b54a;line-height:1;margin-bottom:6px}
.rhs-klabel{font-family:'Crimson Text',Georgia,serif;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#a99e8c}
.rhs-kvarde{font-family:'Crimson Text',Georgia,serif;font-weight:700;color:#f3eee2;
  word-break:break-word}
.rhs-kmeta{font-family:'Crimson Text',Georgia,serif;font-size:13.5px;color:#a99e8c;line-height:1.5}

/* --- Betygsraden över hero (saknades helt, mallen 1250x44) --------------- */
.rhs-hero-betyg{max-width:1250px;margin:0 auto 4px;padding:14px 22px 0;box-sizing:border-box;
  text-align:center;font-family:'Crimson Text',Georgia,serif}
.rhs-hero-betyg .b{color:#e8b54a;font-size:19px;letter-spacing:.2em}
.rhs-hero-betyg .t{color:#f3eee2;font-size:15.5px;margin-left:8px}
.rhs-hero-betyg .t b{font-weight:700}

/* --- Bannerkolumnernas luft mot vägvalsrutorna --------------------------- */
section[data-qb-element="bannertwo"] > [class*="col-"]{
  padding-bottom:8px !important;margin-bottom:8px !important}

/* --- Bästsäljarrutnätet (saknades helt, mallen 1250x453) ----------------
   Korten klonas ur produktkarusellen av theme.js. Formgivningen skiljer sig
   från karusellens på en punkt: etiketten säger BÄSTSÄLJARE i mörkt i
   stället för NYHET i orange. */
.rhs-bs .product-slide{position:relative;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.38);
  padding-bottom:64px;cursor:pointer;width:auto!important;margin:0!important;transform:none!important;
  display:flex;flex-direction:column;overflow:visible!important}
.rhs-bs .productlist-title{font-size:15.5px!important;line-height:1.45!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.rhs-bs .product-price{color:#22201c!important;font-weight:700!important;font-size:17.5px!important}
.rhs-bs .product-slide::after{content:"Visa produkt";position:absolute;left:14px;right:14px;bottom:14px;
  background:#1F8665;color:#fff;text-align:center;padding:11px 0;
  font-family:'Crimson Text',Georgia,serif;font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;pointer-events:none}
.rhs-bs .product-slide::before{content:"BÄSTSÄLJARE"!important;position:absolute!important;
  top:12px!important;left:12px!important;z-index:30!important;background:#22201c!important;
  color:#f3eee2!important;font-family:'Crimson Text',Georgia,serif!important;font-size:10.5px!important;
  letter-spacing:.16em!important;font-weight:700!important;padding:5px 10px!important;
  display:block!important;width:auto!important;height:auto!important}
@media(max-width:640px){
  .rhs-bs.rhs-bs > *{flex:0 0 74%;min-width:0;scroll-snap-align:start}
}

/* --- Produktkarusellen "Nytt i sortimentet" ----------------------------- */
.startpage-product-slider .product-slide{position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.38)!important;padding-bottom:64px!important;
  transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;overflow:visible!important}
.startpage-product-slider .product-slide:hover{transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(0,0,0,.52)!important}
.startpage-product-slider .productlist-title{font-size:15.5px!important;line-height:1.45!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.startpage-product-slider .product-price{color:#22201c!important;font-weight:700!important;
  font-size:17.5px!important;font-variant-numeric:lining-nums}
.startpage-product-slider .product-slide::after{content:"Visa produkt";position:absolute;
  left:14px;right:14px;bottom:14px;background:#1F8665;color:#fff;text-align:center;padding:11px 0;
  font-family:'Crimson Text',Georgia,serif;font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;pointer-events:none}
.startpage-product-slider .product-slide:hover::after{background:#186b51}
.startpage-product-slider .product-slide::before{content:"NYHET"!important;position:absolute!important;
  top:12px!important;left:12px!important;z-index:30!important;background:rgba(255,106,19,.52)!important;
  color:#191512!important;font-family:'Crimson Text',Georgia,serif!important;font-size:10.5px!important;
  letter-spacing:.18em!important;font-weight:700!important;padding:5px 10px!important;
  display:block!important;opacity:1!important;visibility:visible!important;
  width:auto!important;height:auto!important}

/* --- Fördelsboxarna som mörk USP-panel (var 81px, mallen 154px) ---------
   theme.js skriver om innehållet; layouten sitter här. Avdelarna finns bara
   under 900px - i fyrkolumnsläget har mallen inga streck. */
.rhs-usp{background:#1b1712;box-shadow:0 18px 44px rgba(0,0,0,.4);padding:32px 26px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:start}
.rhs-usp{padding-top:16px !important;padding-bottom:16px !important}
@media(max-width:900px){
  .rhs-usp.rhs-usp{grid-template-columns:1fr 1fr !important;padding:26px 18px !important}
  .rhs-usp.rhs-usp > .rhs-usp-post{border-left:0 !important;padding:16px 12px !important}
  .rhs-usp.rhs-usp > .rhs-usp-post:nth-child(2n){border-left:1px solid rgba(243,238,227,.09) !important}
  .rhs-usp.rhs-usp > .rhs-usp-post:nth-child(n+3){border-top:1px solid rgba(243,238,227,.09) !important}
  .rhs-usp.rhs-usp .rhs-usp-tit{min-height:2.6em;display:flex;align-items:center;
    justify-content:center;text-wrap:balance}
  .rhs-usp.rhs-usp .rhs-usp-txt{text-wrap:balance}
}
@media(max-width:600px){
  .rhs-usp.rhs-usp{padding:20px 12px !important}
  .rhs-usp.rhs-usp > .rhs-usp-post{padding:14px 8px !important;gap:7px !important}
  .rhs-usp.rhs-usp .rhs-usp-tit{font-size:14.5px !important;line-height:1.3;text-wrap:balance}
  .rhs-usp.rhs-usp .rhs-usp-txt{font-size:12.5px !important;line-height:1.4}
  .rhs-usp.rhs-usp svg,.rhs-usp.rhs-usp img{width:30px !important;height:30px !important}
}

/* --- De två mittställda knapparna som saknades -------------------------- */
.rhs-cta-butik{margin-top:24px !important;margin-bottom:24px !important}
.rhs-cta-insta{margin-top:24px !important;margin-bottom:24px !important}

/* --- Recensionskarusellens pilar ---------------------------------------- */
.rhs-rec-nav button{font-family:'Crimson Text',Georgia,serif;background:rgba(20,17,14,.78);
  color:#efe7d6;border:1px solid rgba(243,238,227,.22);width:44px;height:38px;cursor:pointer;
  font-size:17px;line-height:1}
.rhs-rec-cta-topp{margin:18px 0 0 !important}
@media(max-width:768px){
  .rhs-rec-nav button{min-width:44px;min-height:44px}
  .rhs-kkort{min-height:44px}
}

/* --- Rubrikparet ovanför Instagram -------------------------------------- */
.rhs-rubrikpar{flex:0 0 100%!important;width:100%!important;grid-column:1/-1!important;
  display:block!important;text-align:center!important;order:-1}
.rhs-rubrikpar .rhs-rubrik{margin-left:auto!important;margin-right:auto!important;
  display:block!important;width:fit-content!important}

/* ==========================================================================
   ANDRA PASSET — RÄTTAT MOT UPPMÄTTA VÄRDEN 2026-08-15
   ==========================================================================
   Efter första passet mättes varje rhs-klass om mot förhandsvisningen. Det
   nedan är skillnaderna som fanns kvar. Måtten i kommentarerna är facit.
   ========================================================================== */

/* Blago och kontakt: <section>-omslaget ger 60 px luft och innehållet drar
   tillbaka 32. Förhandsvisningen har padding-top 0 och margin-top -32px på
   båda - utan det blev sektionerna 903 resp. 460 px i stället för 873/434. */
.rhs-eeat{padding-top:0 !important;margin-top:-32px !important}
.rhs-kontakt{padding-top:0 !important;margin-top:-32px !important}

/* Beviskortens undertext ärvde temats 17,6 px och sköt korten från 114 till
   126 px. Förhandsvisningen har 13,5. */
.rhs-bevis-txt{font-size:13.5px}

/* === HERO: TEMATS EGEN BANNERSEKTION ======================================
   Förhandsvisningen använder temats "två banners med text", inte en egen
   HTML-sektion. Bilden ligger under texten i stället för bakom den, med fast
   bildformat 2,66:1, och textrutan har en minsta höjd så båda korten blir
   lika höga även när rubrikerna radbryts olika.
   Uppmätt facit: kortet 610x450, textrutan 610x220, bilden 610x229.
   ========================================================================= */
.banner{background-color:#1F8665 !important}
[class*="banner_"]{background-color:#1F8665 !important}
.banner.banner_0{background-color:#357a57 !important}
.banner.banner_1{height:450px}
@media(max-width:768px){.banner.banner_1{height:200px}}
@media(min-width:769px){
  .banner.banner_1{height:auto !important;min-height:0 !important}
  .banner.banner_1 .banner-text{min-height:158px;box-sizing:border-box;position:relative}
  .banner.banner_1 .banner-bg{position:static !important;aspect-ratio:2.66/1;
    overflow:hidden;display:block !important}
  .banner.banner_1 .banner-bg picture{display:block;width:100%;height:100%}
  .banner.banner_1 .banner-bg img{display:block;width:100%;height:100%;object-fit:cover}
}
/* Stödtexten under bannerrubriken. Läggs in av theme.js; formen sitter här.
   Kontrasten var 1,23:1 mot den gröna plattan innan färgen tvingades vit. */
.rhs-banner-stod{font-family:'Crimson Text',Georgia,serif !important;
  line-height:1.55 !important;color:#ffffff !important;opacity:1 !important;
  text-align:center;max-width:46ch;margin:12px auto 0;
  text-transform:none !important;letter-spacing:0 !important;text-wrap:pretty}
@media(max-width:900px){.rhs-banner-stod{font-size:13.5px;line-height:1.5;margin-top:10px}}
/* På mobil är bannern bara 200 px hög - då ryms ingen stödtext. */
@media(max-width:768px){.rhs-banner-stod{display:none}}

/* "Följ oss på Instagram"-raden: 92 px hög i förhandsvisningen, 80 utan detta. */
hr.hr-text[data-content="Följ oss på Instagram"]{margin-top:28px !important;
  margin-bottom:8px !important}

/* Småfel som mätningen fann */
@media(max-width:640px){.rhs-kurs3,.rhs-kurs2{grid-template-columns:1fr !important}}
@media(max-width:640px){.rhs-vagval{gap:12px !important}}
.rhs-rec-spar{scroll-snap-type:x mandatory}
@media(max-width:768px){.rhs-kkort{display:flex;align-items:center;justify-content:center}}
@media(max-width:980px){
  .rhs-eeat-galleri.rhs-eeat-galleri::-webkit-scrollbar{display:none}
  .rhs-eeat-galleri.rhs-eeat-galleri::after{content:'';flex:0 0 4px}
}
.rhs-body{display:flex !important;flex-direction:column !important;min-height:100vh !important}

/* === MOBILT ÅTGÄRDSFÄLT ===================================================
   Ring och boka alltid nåbart. Telefonnumret låg annars på 7 343 px av
   9 852. Positionering och utseende gäller alltid - bara synligheten är
   mobilstyrd, så regeln går att testa vid valfri fönsterbredd.
   ========================================================================= */
.rhs-actionbar{
  display:none;grid-template-columns:1fr 1.35fr;gap:10px;
  position:fixed;left:0;right:0;bottom:0;z-index:1030;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(20,17,14,.94);
  -webkit-backdrop-filter:saturate(150%) blur(10px);backdrop-filter:saturate(150%) blur(10px);
  border-top:1px solid rgba(243,238,227,.16);
  box-shadow:0 -10px 30px rgba(0,0,0,.45);
  transform:translateY(110%);transition:transform .28s ease;
}
.rhs-actionbar.rhs-ab-in{transform:translateY(0)}
@media(max-width:991px){
  .rhs-actionbar{display:grid}
  body{padding-bottom:78px!important}
}
.rhs-ab-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 10px;box-sizing:border-box;
  font-family:'Crimson Text',Georgia,serif;font-size:14px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;text-decoration:none;text-align:center;
  transition:background .16s ease}
.rhs-ab-btn svg{flex:0 0 auto}
.rhs-ab-ring{background:transparent;color:#efe7d6;border:1px solid rgba(239,231,214,.55)}
.rhs-ab-ring:active{background:rgba(239,231,214,.12)}
.rhs-ab-boka{background:#efe7d6;color:#191512}
.rhs-ab-boka:active{background:#ded4be}
.rhs-ab-btn:hover{text-decoration:none}
.rhs-ab-ring:hover{color:#fff}
.rhs-ab-boka:hover{color:#191512}
.rhs-ab-btn:focus-visible{outline:2px solid #e8b54a;outline-offset:2px}
/* Tryckytor: meny 24x23 och varukorg 24x25 -> 44x44 utan layoutpåverkan */
a[data-target="#sidebarLeft"],a[data-target="#sidebarCart"]{position:relative}
a[data-target="#sidebarLeft"]::before,a[data-target="#sidebarCart"]::before{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
  z-index:1}
@media(prefers-reduced-motion:reduce){
  .rhs-actionbar{transition:none}
}

/* ==========================================================================
   TREDJE PASSET — LODRÄTA AVSTÅND 2026-08-15
   ==========================================================================
   Varje block mättes mot förhandsvisningen: överkant och underkant, och
   gapet däremellan. Nedan är de gap som skilde sig. Facit står i klammer.
   ========================================================================== */

/* --- H1 kant i kant med menyn ------------------------------------------
   Gapet mellan headerns underkant och H1:ans överkant var 50 px och bestod
   av två delar: 24 px padding-top på första innehållsraden efter headern,
   och 26 px margin-top på själva H1:an. Dessutom hade <header> min-height
   209 px medan den synliga menyraden bara är 83 px - 126 px död yta.
   Kontrollerat att menyn inte är sticky, så höjden reserverar ingenting. */
header{min-height:0 !important}
header + .container > .row{padding-top:0 !important}
h1#rhs-brand-h1{margin-top:0 !important}

/* --- Rubrikernas luft ---------------------------------------------------
   I förhandsvisningen ligger rubrikerna som lösa syskon i samma spalt, och
   avståndet styrs där av syskonselektorer (.rhs-vagval + .rhs-rubrik och
   section.pb-3.pb-lg-4 + .rhs-rubrik). Här ligger varje block i en egen
   <section>, så de selektorerna kan inte träffa. Samma gap sätts i stället
   per sektion, utpekad på sitt innehåll.

   Uppmätt facit ovanför rubriken:
     Våra kurser 28   Vad deltagarna säger 28   Bästsäljare 28
     Nytt i sortimentet 28   Vanliga frågor 4                            */
div:has(> section .rhs-kurs3) > section:has(.rhs-kurs3) > .row > * > .rhs-rubrik,
div:has(> section .rhs-kurs3) > section:has(.rhs-rec-wrap) > .row > * > .rhs-rubrik{
  margin-top:28px !important}
div:has(> section .rhs-kurs3) > section:has(.swiper-container) > .rhs-rubrik{
  margin-top:4px !important}
div:has(> section .rhs-kurs3) > section:has(.rhs-faq-wrap) > .row > * > .rhs-rubrik{
  margin-top:4px !important}

/* ==========================================================================
   FJÄRDE PASSET — OMDÖMESKORTEN OCH BLAGO-GAPET 2026-08-15
   ========================================================================== */

/* Omdömena hämtas live och texterna varierar från 49 till 1298 tecken. Utan
   gräns sträckte sig alla kort till det längsta och blocket blev 862 px i
   stället för förhandsvisningens 342. Fyra rader är precis vad det längsta
   omdömet i förhandsvisningen upptar (99 px vid 15,5/1,6), så kortet landar
   på samma 216 px. Hela texten finns kvar i HTML för sökmotorer. */
.rhs-rec-txt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}

/* Blago-sektionen låg 14 px för långt ner. I förhandsvisningen ligger
   kursblocket löst i samma spalt, så kurs2:s 14 px bottenmarginal slås ihop
   med sektionens 60 px toppmarginal. Här ligger kurserna i en egen <section>
   och marginalerna slås inte ihop - 60 minus 14 ger samma gap: 28 px. */
div:has(> section .rhs-kurs3) > section:has(.rhs-eeat){margin-top:46px}

/* ==========================================================================
   FEMTE PASSET — SIDFOTEN 2026-08-15
   ==========================================================================
   Sidfoten byggs av temats egna sektioner, inte av skript som i
   förhandsvisningen. Innehållet är detsamma; tre mått skilde sig.
   ========================================================================== */

/* Spaltbredderna: förhandsvisningen har 1,4 / 1 / 1 / 1,1 - kursspalten är
   bredast eftersom "Hur tar man jägarexamen" annars radbryts, och
   köpvillkorsspalten något bredare än de två i mitten. Uppmätt: 343, 245,
   245, 269 px. Lika breda spalter gav 276 rakt igenom.

   RÄTTAT 2026-08-17: regeln låg utan mediefråga och kom efter brytpunkterna
   längre upp i filen, så fyra spalter gällde ända ner på mobil. I 386 px blev
   rutnätet 559 px brett - sidfoten spillde 173 px utanför skärmen, och
   e-postadressen skars av. Två fel i samma rad:

     1. Ingen mediefråga -> den slog ut 900- och 560-brytpunkterna.
        Nu inramad i min-width:901px, så brytpunkterna gäller igen.
     2. 1fr i stället för minmax(0,1fr) -> spalterna kunde inte krympa under
        sitt innehåll, och den långa e-postadressen tvingade upp bredden.
        Mittspalterna har nu minmax(0,...) igen.

   Kontrollerat vid 1356, 1000, 700 och 500 px. Datorbredden är oförändrad:
   342,8 / 244,9 / 244,9 / 269,4 px, alltså förhandsvisningens facit. */
@media(min-width:901px){
  footer .container-fluid{grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) 1.1fr}
}

/* Långa adresser ska brytas, inte spränga spalten. */
footer .container-fluid > .row.pt-3.pb-1.px-3 li a{overflow-wrap:anywhere}

/* Länkarna: 15,5 px enligt typskalan, inte 15. Fyra länkar à 1 px gav
   spalten 3 px för låg höjd. */
footer .container-fluid > .row.pt-3.pb-1.px-3 li a{font-size:15.5px !important}

/* Loggan har 16 px under sig i förhandsvisningen utöver radens 26. */
footer .container-fluid > .row.justify-content-center.py-4 img{margin:0 0 16px}

/* ==========================================================================
   SJÄTTE PASSET — HEADERN 2026-08-15
   ==========================================================================
   Uppmätt: förhandsvisningens header är 124 px (83 + 41), kopians var 210
   (119 + 91). Skillnaden var loggans storlek och betalikonerna i menyraden.
   Ikonerna stängs av i panelen (Utseende -> Headersektion); måtten nedan.
   ========================================================================== */
:root{--rhs-gap:28px}

.navbar-bg{background:none !important}
.navbar-light{background:linear-gradient(180deg, rgba(50,50,50,0.6) 0%, rgba(0,0,0,0.6) 100%) !important;
  box-shadow:0 15px 12px 0 rgb(0,0,0,0.8) !important}

@media (min-width:992px){
  /* Loggan 64 px hög. Var 100 - raden gick från 83 till 119 px. */
  header .navbar .navbar-brand img{height:64px !important;width:auto !important;
    max-height:64px !important;display:block}
  header .navbar .navbar-brand{margin-right:var(--rhs-gap) !important;padding:0 !important;
    display:flex;align-items:center}
  header .navbar.navbar--variation-1{padding-left:0 !important;padding-right:0 !important;
    justify-content:center !important}
  header form{margin-left:0 !important;margin-right:var(--rhs-gap) !important;
    width:380px;max-width:380px;flex:0 0 auto}
  header .navbar .nav-item + .nav-item,
  header a[data-target="#sidebarCart"],
  header a[href*="wishlist"],
  header a[href*="login"]{margin-left:0}
  header .navbar.navbar--variation-1 > .row,
  header .row.justify-content-between{justify-content:center !important}
  header .navbar-nav{flex-wrap:nowrap !important;justify-content:center !important;
    margin-left:auto !important;margin-right:auto !important}
  header .navbar-nav > li{white-space:nowrap}
  header .navbar-nav > li > .nav-link,
  header .navbar-nav > .nav-item > a{padding-left:11px !important;padding-right:11px !important}
}
/* Mellan 992 och 1120 px ryms inte alla elva menypunkterna på en rad.
   Luften krymper till 9 px och raden blir vid behov sidoskrollbar. */
@media(min-width:992px) and (max-width:1120px){
  header .navbar-nav{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  header .navbar-nav::-webkit-scrollbar{display:none}
  header .navbar-nav > li > .nav-link,
  header .navbar-nav > .nav-item > a{padding-left:9px !important;padding-right:9px !important}
}

/* ==========================================================================
   SJUNDE PASSET — SIDRUBRIKEN 2026-08-15
   ==========================================================================
   H1:an mättes mot förhandsvisningen: 1250x37, 30 px, radhöjd 36,6, vikt 700,
   centrerad, färg #f3eee2 - allt lika. Två värden skilde sig: marginalen över
   (0 mot 21) och den vågräta indragningen (22 mot 0). Indragningen syns bara
   på smala skärmar, där texten annars bryter 44 px för tidigt.
   ========================================================================== */
h1#rhs-brand-h1{margin-top:21px !important;padding-left:0 !important;padding-right:0 !important}

/* ==========================================================================
   ÅTTONDE PASSET — ENHETLIG FÄRG I SIDFOTEN 2026-08-16
   ==========================================================================
   Förhandsvisningen har EN färg i hela sidfoten: #cfc8b6. Hierarkin bärs av
   storlek och vikt, inte av fem olika gråtoner. Uppmätt där: rubrik 12,5/400,
   länk 15,5/400, e-post och telefon 15,5/600, adress 15,5/400, ägarraden
   12,5/400 - allt i samma färg.

   Kopian hade #a99e8c på rubriker, adress och ägarrad och #f3eee2 på e-post
   och telefon. Adressen låg dessutom på 14,5 px i stället för 15,5.
   ========================================================================== */
footer, footer *{color:#cfc8b6 !important}
footer a:hover, footer a:focus-visible{color:#f3eee2 !important}

/* Temats egna regler har högre specificitet än "footer *" - därför pekas de
   fem som faktiskt skilde sig ut var för sig. */
footer .container-fluid > .row.pt-3.pb-1.px-3 h6,
footer .container-fluid > .row.pt-3.pb-1.px-3 li a,
footer .container-fluid > .row.pt-3.pb-1.px-3 li a[href^="mailto:"],
footer .container-fluid > .row.pt-3.pb-1.px-3 li a[href^="tel:"],
footer .container-fluid > .row.pt-3.pb-1.px-3 li span,
footer .container-fluid > .row.justify-content-center:not(.py-4) ~ .row.pt-3.pb-1.px-3 li{
  color:#cfc8b6 !important}
footer .container-fluid > .row.pt-3.pb-1.px-3 li span{font-size:15.5px}
footer .container-fluid > .row.pt-3.pb-1.px-3 li a:hover{color:#f3eee2 !important}

/* ==========================================================================
   NIONDE PASSET — FEM ÖNSKEMÅL 2026-08-16
   ==========================================================================
   Här börjar avstegen från förhandsvisningen. Allt ovanför är uppmätt mot
   den; allt härifrån är beställda förbättringar. Varje block går att ta bort
   för sig om något ska tillbaka.
   ========================================================================== */

/* --- 1. Bästsäljarkorten lika stora som karusellens ----------------------
   Bästsäljarrutnätet hade 22 px indrag och 18 px mellanrum, karusellen 0 och
   30. Korten blev 288x453 mot karusellens 290x455 och raderna låg 22 px isär
   i sidled. Noll indrag och 30 px mellanrum ger (1250-90)/4 = 290 px och
   exakt samma vänster- och högerkant som karusellen.
   (Förhandsvisningen har samma 2 px-skillnad — det här är alltså en
   medveten ändring, inte en rättelse.) */
.rhs-bs{padding-left:0 !important;padding-right:0 !important;gap:30px !important}

/* --- 2. "NY!"-bandet i stället för NYHET-etiketten -----------------------
   Samma band som produktlistan använder: hörnflagga 75x75 med förlopp från
   #ffdd00 till #598275, svart versal text och två vikflikar under. Måtten är
   hämtade ur butikens egen ribbon-app, så bandet ser likadant ut på båda
   ställena. Bandet läggs in av theme.js.

   Den gamla platta etiketten tas bort - den satt på samma ::before. */
.startpage-product-slider .product-slide::before{content:none !important}

.rhs-ribbon{position:absolute;top:-4px;left:-4px;width:75px;height:75px;
  overflow:hidden;z-index:99;pointer-events:none}
.rhs-ribbon span{position:absolute;display:block;width:100px;top:17px;left:-22px;
  background:linear-gradient(#ffdd00 0%, #598275 100%);
  box-shadow:0 3px 10px -5px rgba(0,0,0,1);
  color:#000;font-family:'Crimson Text',Georgia,serif;font-size:12px;font-weight:700;
  line-height:21px;text-transform:uppercase;text-align:center;
  transform:rotate(-45deg)}
.rhs-ribbon span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;
  border-left:3px solid #ffdd00;border-right:3px solid transparent;
  border-bottom:3px solid transparent;border-top:3px solid #ffdd00}
.rhs-ribbon span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;
  border-left:3px solid transparent;border-right:3px solid #598275;
  border-bottom:3px solid transparent;border-top:3px solid #598275}

/* --- 3. Instruktörsporträttet ------------------------------------------
   Blago står i vänstra fjärdedelen av bilden. Med beskärning från mitten låg
   han nästan utanför kanten. 24 % flyttar fönstret dit han står, så han
   hamnar en bit vänster om mitten - vilket stämmer med att han tittar åt
   höger. Bilden är orörd; bara utsnittet ändras. */
.rhs-eeat-portratt img{object-position:24% center}

/* --- 4. Omdöme i förstoring --------------------------------------------
   Korten visar fyra rader. Klick på ett kort öppnar hela omdömet i en ruta.
   Rutan byggs av theme.js. */
.rhs-rec-kort{cursor:pointer}
.rhs-rec-kort:focus-visible{outline:2px solid #e8b54a;outline-offset:3px}

.rhs-rec-dialog{border:0;padding:0;background:transparent;max-width:min(680px,92vw);
  width:100%;color:#f3eee2}
.rhs-rec-dialog::backdrop{background:rgba(10,8,6,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rhs-rec-dialog-inner{background:#1b1712;box-shadow:0 30px 70px rgba(0,0,0,.6);
  padding:34px 36px 30px;position:relative;text-align:left}
.rhs-rec-dialog .rhs-rec-stjarnor{margin-bottom:14px}
.rhs-rec-dialog-txt{font-family:'Crimson Text',Georgia,serif;font-size:17.5px;
  line-height:1.7;color:#f3eee2;margin:0 0 22px;white-space:pre-wrap}
.rhs-rec-dialog-namn{font-family:'Crimson Text',Georgia,serif;font-size:13.5px;
  color:#a99e8c}
.rhs-rec-dialog-namn b{color:#efe7d6;font-weight:700}
.rhs-rec-stang{position:absolute;top:10px;right:12px;background:none;border:0;
  color:#a99e8c;font-size:26px;line-height:1;cursor:pointer;padding:6px 10px;
  font-family:'Crimson Text',Georgia,serif}
.rhs-rec-stang:hover{color:#f3eee2}
.rhs-rec-stang:focus-visible{outline:2px solid #e8b54a;outline-offset:2px}
@media(max-width:600px){
  .rhs-rec-dialog-inner{padding:28px 22px 24px}
  .rhs-rec-dialog-txt{font-size:16px}
}

/* --- 5. Instagram-raden i full bredd -----------------------------------
   Widgeten visar fem rutor på en rad och rutstorleken följer bredden. Innan
   låg raden i sidans 1250 px och rutorna blev 234 px - och 16 px av varje
   bild klipptes bort på köpet, eftersom ramen drog av 52 px när widgetens
   egen fotrad bara är 36. Nu går raden ut till fönsterkanten (max 1600) och
   hela rutan syns: 291 px vid 1456 px fönster, alltså en fjärdedel större. */
.rhs-insta-ram{max-width:none !important;width:min(100vw,1600px);
  margin-left:calc(50% - min(50vw,800px)) !important;
  margin-right:calc(50% - min(50vw,800px)) !important}

/* Bästsäljarrutnätet ska följa karusellens brytpunkter, annars är korten
   bara lika stora vid full bredd. Swiper visar 4 kort från 1200 px, 3 från
   991 och 2 därunder - samma trappa här. Under 640 px tar den mobila
   kortkarusellen över (se MOBILA KORTKARUSELLER ovan). */
/* Karusellen visar 4 kort från 1200 px, 3 från 991 och 2 därunder, och man
   bläddrar i sidled. Fyra kort i ett fast rutnät gav i stället 3+1 med ett
   ensamt kort på andra raden - och smalare kort än karusellens. Därför blir
   bästsäljarna en sidledsrad med samma kortbredd och samma 30 px mellanrum
   under 1200 px. Under 640 px tar den mobila kortkarusellen över (se MOBILA
   KORTKARUSELLER ovan) med sin egen bredd. */
@media(min-width:641px) and (max-width:1199px){
  .rhs-bs.rhs-bs{display:flex !important;flex-wrap:nowrap;align-items:stretch;
    gap:30px !important;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rhs-bs.rhs-bs::-webkit-scrollbar{display:none}
  .rhs-bs.rhs-bs > *{min-width:0;scroll-snap-align:start}
}
@media(min-width:991px) and (max-width:1199px){
  .rhs-bs.rhs-bs > *{flex:0 0 calc((100% - 60px)/3)}
}
@media(min-width:641px) and (max-width:990px){
  .rhs-bs.rhs-bs > *{flex:0 0 calc((100% - 30px)/2)}
}

/* --- Hundra omdömen utan att det kostar ---------------------------------
   Alla hämtade omdömen ritas ut. För att sidan inte ska hacka görs det i
   klumpar när webbläsaren är ledig - se skriptet i sektionen
   "8 · Vad deltagarna säger".

   content-visibility:auto provades här för att hoppa över korten utanför
   bild. Det gjorde korten 260 px i stället för 216: kortet är ett flexbarn
   i en rad med align-items:stretch, och storleksinneslutningen krockar med
   sträckningen. Uppmätt utan: exakt 216, samma som förhandsvisningen.
   Chunkningen räcker - hundra kort ritas utan att huvudtråden blockeras. */

/* Fyra raders text. -webkit-line-clamp fungerar bara på display:-webkit-box,
   och kortet är en flexkolumn - flexbarn blockifieras till flow-root, så
   klampen slogs tyst ut. Med de tio senaste omdömena syntes det inte, för
   det längsta råkade vara precis fyra rader ändå. Med hundra omdömen blev
   korten 260 px. Maxhöjd gör samma sak utan att bero på display:
   4 rader x 1,6em = 99 px, exakt som i förhandsvisningen. */
.rhs-rec-kort .rhs-rec-txt{display:block;max-height:calc(4 * 1.6em);overflow:hidden}

/* --- App-bannern på små skärmar ----------------------------------------
   Bannern är två bilder: en bred 1200x438 för desktop och en stående
   300x438 för mobil, som <picture> växlar mellan vid 1100 px.

   <img> bär width="1200" height="438" för desktopbilden. Attributen ger
   aspect-ratio 1200/438, och den ratiot låg kvar även när <source> bytt
   till den stående bilden - som med object-fit:fill drogs ut till full
   bredd i en smal remsa. Uppmätt i en 420 px behållare: 420x153 där
   bilden skulle varit 420x613.

   Under 1100 px släpps därför både ratio och höjd fria så bildens egna
   proportioner gäller, och bredden hålls på bildens naturliga 300 px så
   den inte skalas upp och blir grynig. Uppmätt efter: 300x438. */
@media(max-width:1100px){
  .rhs-app-bild{aspect-ratio:auto;height:auto;width:auto;
    max-width:min(300px,100%);margin-left:auto;margin-right:auto;display:block}
}

/* ==========================================================================
   TIONDE PASSET — BÄSTSÄLJARE BLIR EN EGEN KATEGORI 2026-08-16
   ==========================================================================
   Bästsäljarna klonades tidigare ur "Nytt i sortimentet" av theme.js, med en
   lista på produktnamn inne i koden. Nu ligger de i kategorin Bästsäljare och
   visas av en vanlig produktkarusell — sektionen "9 · Bästsäljare" i panelen.
   Ägaren lägger till och tar bort produkter i kategorin, precis som i
   PRODUKTER, och startsidan följer med utan att någon rör koden.

   Temat skriver inte ut vilken kategori en karusell visar, så theme.js pekar
   ut rätt sektion med klassen rhs-bs-sektion. Allt här hänger på den.
   ========================================================================== */

/* Plats 9 på sidan, mellan omdömena och fördelsboxarna. Regeln står efter
   den som ger alla karusellsektioner order:11 och tar över den. */
div:has(> section .rhs-kurs3) > section.rhs-bs-sektion.rhs-bs-sektion{order:9}

/* Etiketten BÄSTSÄLJARE i stället för NY!-bandet. Samma etikett som
   förhandsvisningen har; bandet läggs aldrig in i den här sektionen. */
.rhs-bs-sektion .product-slide::before{content:"BÄSTSÄLJARE" !important;
  position:absolute !important;top:12px !important;left:12px !important;
  z-index:30 !important;background:#22201c !important;color:#f3eee2 !important;
  font-family:'Crimson Text',Georgia,serif !important;font-size:10.5px !important;
  letter-spacing:.16em !important;font-weight:700 !important;
  padding:5px 10px !important;display:block !important;
  width:auto !important;height:auto !important}

/* ==========================================================================
   ELFTE PASSET — BRÖDSMULORNA DÖLJS 2026-08-17
   ==========================================================================
   Raden "Hem / Vapen & Utrustning / Vapen / Kulvapen / …" ovanför rubriken på
   kategori- och produktsidor gjorde sidhuvudet rörigt. Den döljs visuellt.

   Bara visuellt: <nav class="breadcrumb"> ligger kvar i koden och den
   strukturerade datan (BreadcrumbList i JSON-LD) rörs inte alls, så Google
   får fortfarande sökvägen och kan visa den i sökresultatet.

   Uppmätt: raden är 48 px hög, rubriken flyttar upp lika mycket. */
nav.breadcrumb{display:none !important}

/* ==========================================================================
   TRETTONDE PASSET — LAYOUTFÖRSKJUTNING (CLS) 2026-08-17
   ==========================================================================
   PageSpeed Insights gav CLS 0,623 på mobil och 0,51 på dator. Gränsen för
   godkänt är 0,1. Lighthouse pekade ut två element, och båda flyttade sig av
   samma orsak: innehållet får sin rätta storlek först när JavaScript kört.

   1. PRODUKTKORTEN. Swiper sätter width och margin-right på varje kort när
      den startar. Innan dess är korten auto-breda: uppmätt 1250x615 i stället
      för 290x455, och karusellen 639 px hög i stället för 479. Sidan hoppade
      alltså 160 px per karusell. Reglerna nedan räknar ut samma mått som
      Swiper gör, så korten ligger rätt redan vid första målningen.
      Formeln följer Swipers egna brytpunkter: 4 kort över 1200 px, 3 över
      991, annars 2 - med 30 px mellanrum.

   2. BANNERPLATTAN. theme.js lägger in stödtexten under rubriken efter att
      sidan ritats, och plattan växte då från 158 till 220 px. Här reserveras
      höjden i förväg. Två mått eftersom rubriken bryter olika: 220 px över
      900 px bredd, 179 px mellan 769 och 900. Under 768 är stödtexten dold
      och ingen plats behöver reserveras.

      .banner .banner-text behövs - enbart .banner-text förlorar mot en regel
      i temats egen CSS.

   Kontrollerat vid 1600, 1300, 1100, 1000, 950, 850, 600 och 390 px: noll
   skillnad mellan läget före och efter att skripten kört, på båda
   karusellerna. Sidans utseende är oförändrat.
   ========================================================================== */
@media(min-width:1200px){
  .startpage-product-slider .product-slide{width:calc((100% - 90px)/4);margin-right:30px}
}
@media(min-width:991px) and (max-width:1199px){
  .startpage-product-slider .product-slide{width:calc((100% - 60px)/3);margin-right:30px}
}
@media(max-width:990px){
  .startpage-product-slider .product-slide{width:calc((100% - 30px)/2);margin-right:30px}
}
@media(min-width:901px){.banner .banner-text{min-height:220px !important}}
@media(min-width:769px) and (max-width:900px){.banner .banner-text{min-height:179px !important}}