:root {
        --black: #0A0A0A;
        --gray: #81848C;
        --light: #F1F2F2;
        --font-main: 'Montserrat', sans-serif;        
    }

    html {
        overflow-x: hidden;
    }
    
    html, body{
  		max-width: 100%;
  		overflow-x: clip; /* modern: skapar inte en scroll-container */
	}

	@supports not (overflow: clip){
  		html, body{ overflow-x: hidden; }
	}

    body {
        margin: 0;
        background: #fff;
        font-family: var(--font-main)!important;
        color: var(--black);
        -webkit-font-smoothing: antialiased;
    }

    .container-clean {
        max-width: 1100px;
        margin: 100px auto;
        padding: 20px;
        text-align: center;
    }

    .py-8 {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }

/* ============================= */
/*          BILONLINE            */
/* ============================= */

    .main-container1,
    .main-container2,
    .main-container3,
    .main-container4,
    .main-container5,
    .main-container6{
    	padding:0!important;
    }
    
    .main-container7{
    	padding:9.375rem 0!important;
    }
    
    .main-containernavbar,
    .main-containerfooter{
    	padding:0!important;
    }
    
    .bo-senastefordonslider-container{
    	max-width:1720px!important;
    }


/* ============================= */
/*          GENERAL              */
/* ============================= */

    /*..Inputs & Forms..*/

    .tb-form{
        max-width:50rem;
    }

    .tb-input,
    .tb-textarea {
        background: #f2f2f2;
        border: none;
        border-radius: 0;
        color: #111;
    }

    .form-floating > label {
        padding: 0.8rem 1rem;
        color: #777;
    }

    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label {
        opacity: 0.85;
    }

    .tb-input:focus,
    .tb-textarea:focus {
        background: #e9e9e9;
        box-shadow: none;
        border: none;
    }

    .form-floating textarea {
        padding-top: 1.4rem;
    }

    .was-validated .form-control:invalid,
    .form-control.is-invalid {
        border-color: #dc3545 !important;
    }

    .form-floating>.form-control:focus~label::after{
        background:none;
    }

    /*..Sidstandard..*/

    .tb-section-header {
        display: flex;
        padding: 1rem 4rem;
        justify-content: center;
        align-items: center;
        width: fit-content;
        background: var(--black);
        margin: 0 auto;
    }

    .tb-section-header h1 {
        color: #FFF;
        font-style: normal;
        font-weight: 900;
        font-size:2.25rem;
        letter-spacing: -0.06094rem;
        margin: 0;
    }


/* ============================= */
/*          HERO                 */
/* ============================= */

    .tb-hero {
        position: relative;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tb-hero-main {
        background: url('/images/sektioner/uploads/cst-hero__kopa.webp') center/cover no-repeat;
    }

    .tb-hero-bilar {
        background: url('/images/sektioner/uploads/cst-hero__kopa.webp') center/cover no-repeat;
    }

    .tb-hero-tjanster {
        background: url('/images/sektioner/uploads/cst-hero__tjanster.webp') center/cover no-repeat;
    }

    .tb-hero-kontakt {
        background: url('/images/sektioner/uploads/cst-hero__kontakt.webp') center/cover no-repeat;
    }

    .tb-hero-salj {
        background: url('/images/sektioner/uploads/cst-hero__salja.webp') center/cover no-repeat;
    }

    .tb-hero-sekretess {
        background: url('/images/sektioner/uploads/cst-hero__sekretess.webp') center/cover no-repeat;
    }

    .tb-hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.55);
    }

    .tb-hero-content {
        position: relative;
        z-index: 10;
        max-width: 38.5rem;
    }

        .tb-hero-content h1 {
            font-size: clamp(2.25rem, 4.2vw, 3.25rem);
            font-style: normal;
            font-weight: 900;
            /*line-height: 2.475rem;*/ /* 110% */
            letter-spacing: -0.09rem;
            color: #fff;
            margin: 1rem 0;
        }

        .tb-hero-content p {
            color: #FFF;
            text-align: center;
            font-family: Montserrat;
            font-size: 1rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.625rem; /* 162.5% */
            padding: 1rem;
        }

    .tb-hero-text {
        max-width: 550px;
    }

/* ============================= */
/*          SECTIONS             */
/* ============================= */

    .tb-section-white {
        background: #fff;
        width: 100%;
        padding: 7.5rem 0;
    }

    .tb-section-gray {
        background: #f1f2f2;
        width: 100%;
        padding:7.5rem 0;
    }

    .tb-section-parallax {
        position: relative;
        width: 100%;
        height: 70vh; /* ändra efter smak */
        overflow: hidden;
    }

        .tb-parallax-bg {
            position: absolute;
            height:100vh;
            inset: 0;
            background: url(/images/sektioner/uploads/cst-section-parallax__start.webp) bottom / cover no-repeat;
            will-change: transform;
        }
        



/* ============================= */
/*          ACCORDION            */
/* ============================= */

    .accordion-tb {
        max-width: 75rem;
        /*margin: 0 auto 6rem;*/
    }

    .accordion-btn-tb {
        width: 100%;
        background: #e7e8e8;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        cursor: pointer;
        transition: background .25s ease;
        text-align: left;
    }

    .accordion-btn-tb:hover {
        background: #dedede;
    }

    .plus {
        font-size: 1.25rem;
        font-weight:800;
    }
    
    .accordion-body-tb {
        background: #f7f7f7;
        padding: 1.5rem;
        font-size: 1rem;
    }

    .accordion-btn-tb .plus {
        transition: .25s ease;
    }

    .accordion-btn-tb.open .plus {
        transform: rotate(180deg);
    }

/* ============================= */
/*          SLIDER               */
/* ============================= */

    .aa-marquee-swiper {
        width: 100%;
        padding: 1rem 0;
    }

    .aa-marquee-slide {
        width: auto!important; /* VIKTIGT för slidesPerView:auto */
    }

    .aa-marquee-slide img {
        display: block;
        width: 280px; /* eller valfri kortbredd */
        height: auto;
        border-radius: 10px;
    }

/* ============================= */
/*          TB-FULL-W            */
/* ============================= */

    .tb-col-content {
        padding: 6.25rem!important; /* ~100px */
    }

    .tb-col-image {
        position: relative;
        overflow: hidden;
    }

    .tb-image-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .tb-two-cols.tb-flip {
        flex-direction: row-reverse;
    }

    .tb-section-title {
        font-size: clamp(1.5rem, 3.2vw, 2.2rem);
        font-weight: 800;
        margin-bottom: 0.5rem;
    }

    .tb-title-underline {
        width: 40px;
        height: 2px;
        background: #000;
        margin-bottom: 2rem;
    }

    .tb-section-text {
        font-size: 1.1rem;
        line-height: 1.7;
        max-width: 600px;
    }

    .tb-section-ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        font-size: 1.1rem;
    }

    .tb-section-ul li {
        display: flex;
        flex-direction: row;
        align-items:center;
        gap:.25rem;
        padding:.25rem;
    }

    @media (max-width: 991px) {

        .tb-two-cols.tb-flip {
            flex-direction: column; /* always stack on mobile */
        }

        .tb-col-content {
            padding: 3rem 1.5rem;
        }

        .tb-image-cover {
            height: 320px;
            object-position: center;
        }
    }

    @media (max-width: 991px) {
        .tb-two-cols {
            flex-direction: column;
        }
    }

    .tb-two-cols.tb-flip {
        flex-direction: row-reverse;
    }

    @media (max-width: 991px) {
        .tb-two-cols.tb-flip-mobile {
            flex-direction: column-reverse;
        }
    }
    
    
    @media (max-width: 576px) {
    .tb-col-content {
        padding:3rem 1rem !important;
    }
    
    .tb-section-text{
    	font-size:.95rem;
    }
    
    .tb-section-ul{
    	font-size:.95rem;
    }

	}

/* ============================= */
/*          TB-KON               */
/* ============================= */

    .tb-contact-split {
        min-height: 400px;
        display: flex;
        gap: 3rem; /* <-- gap mellan boxarna */
    }

    .tb-contact-split p {
        font-weight: 500;
        font-size: 1.0625rem;
    }

    .tb-contact-left {
        background: #000;
        color: #fff;
        padding: 4rem 2rem;
    }

    .tb-contact-right {
        background: #f2f2f2;
        color: #000;
        padding: 4rem 2rem;
    }

    .tb-contact-left,
    .tb-contact-right {
        flex: 1 1 50%;
        flex-direction: column;
        justify-content: flex-start; /* was center */
        padding-top: 4rem; /* NEW */
        padding-bottom: 4rem;
    }

    .tb-contact-icon {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }

    .tb-contact-title {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .tb-contact-item,
    .tb-hours-block {
    
    }

        .tb-contact-item h4,
        .tb-hours-block h4 {
            font-size: 1.2rem;
            font-weight: 700;
        }

        .tb-contact-item p {
            color: #ccc;
        }

        .tb-hours-block p {
            color: #444;
        }

    @media (max-width: 991px) {
        .tb-contact-split {
            flex-direction: column;
            gap: 2rem; /* mindre gap på mobil */
        }
    }

/* ============================= */
/*          GRID                 */
/* ============================= */

    .tb-intro-content {
        padding: 2rem;
    }

    .tb-intro-image {
        text-align: center;
    }

    .tb-intro-img {
        width: 100%;
        height: auto;
    }
    
    .tb-intro-cols.tb-flip {
        flex-direction: row-reverse;
    }

    @media (max-width: 991px) {
        .tb-intro-cols {
            flex-direction: column; /* Bild alltid först på mobil */
        }
    }

    @media (max-width: 991px) {
        .tb-intro-cols.tb-flip {
            flex-direction: column; /* mobile override */
        }
    }
    
    @media (min-width: 992px){
  		.tb-intro-cols.tb-flip{
    	--bs-gutter-x: clamp(2rem, 3.5vw, 5rem);
  		}
	}
    
/* ============================= */
/*          GSAP-MAP             */
/* ============================= */

    .tb-section-map {
        width: 100%;
        padding: 0;
    }

    .tb-map-wrapper {
        position: relative;
        width: 100%;
        height: 70vh; /* adjust if you want bigger map */
        overflow: hidden;
    }

    .tb-map-embed {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        will-change: transform;
        transform: translateY(0);
    }


    
/* ============================= */
/*          GENERAL              */
/* ============================= */    
    
    
/* Wrapper som klipper bilden så den inte sticker ut */
.tb-col-image{
  position: relative;
  overflow: hidden;
}

/* Själva bilden får subtil rörelse */
.tb-col-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: tbKenBurns 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes tbKenBurns{
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}

/* Respektera användare som vill ha mindre rörelse */
@media (prefers-reduced-motion: reduce){
  .tb-col-image img{
    animation: none;
    transform: none;
  }
}


/* ============================= */
/*          VIDEO HERO           */
/* ============================= */   

/* Endast denna hero */
.tb-hero--video{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* Videon fyller hela heron */
.tb-hero--video .tb-hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay över videon */
.tb-hero--video .tb-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  /* justera till din smak */
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
}

/* Innehåll över overlay */
.tb-hero--video .tb-hero-content{
  position: relative;
  z-index: 2;
}

/* Respektera reduced motion */
@media (prefers-reduced-motion: reduce){
  .tb-hero--video .tb-hero-video{ display:none; }
}



/* ============================= */
/*          BUTTONS              */
/* ============================= */

/* Bas: din knapp */
.tb-btn-dark {
    background: var(--black) !important;
    color: #fff !important;
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 0 !important;

    position: relative;
    overflow: hidden;
    border: 2px solid var(--black);
    transition: color 0.3s ease, border-color 0.3s ease;
    z-index: 0;
}

/* Wipe-lager (skew) */
.tb-btn-dark::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0%;
    left: -40px;
    transform: skewX(35deg);
    background: #1a1a1a;
    /* mörkare “wipe” */
    z-index: -1;
    transition: width 0.55s ease;
}

/* Hover: wipe kommer in */
.tb-btn-dark:hover {
    color: var(--light) !important;
    border-color: #1a1a1a;
}

.tb-btn-dark:hover::before {
    width: 160%;
}

/* --- HERO: pilen hoppar lite hela tiden --- */
.tb-btn-hero .tb-btn-arrow {
    display: inline-block;
    transform: translateX(0);
    animation: tbArrowNudge 1.2s ease-in-out infinite;
}

/* När man hovrar hero: lite mer “push” */
.tb-btn-hero:hover .tb-btn-arrow {
    animation-play-state: paused;
    /* valfritt: pausa nudge på hover */
    transform: translateX(4px);
    transition: transform 0.25s ease;
}

@keyframes tbArrowNudge {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

/* Respektera reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tb-btn-hero .tb-btn-arrow {
        animation: none;
    }
}


/* ============================= */
/*          FORM            	 */
/* ============================= */
    
    :root{

        /* Colors */
        --bo-cst-btn-primary:blue;
        --bo-cst-btn-secondary:orange;
        --bo-cst-btn-submit:green;
        --bo-cst-btn-danger:red;
        --bo-cst-btn-radius:.25rem;
        --bo-cst-btn-color__light:#fff;
        --bo-btn-btn-color__dark:#000;

    }
    
    /* Layout */
    .bo-flip-form {
        display: flex;
        flex-wrap: wrap;
        gap: 1.8rem;
        max-width: 900px;
        margin: 0 auto;
    }

    /* Groups */
    .bo-form-group.full {
        flex: 0 0 100%;
    }

    .bo-form-group.half {
        flex: 0 0 calc(50% - 1rem);
    }
 
    .form-floating>.form-control {
    padding: 1.3rem 1.2rem;
    min-height: calc(4rem + calc(var(--bs-border-width) * 2))!important;
    background: var(--dgb-white);
    border-radius: 0;
    /* border: 1px solid #ebebeb; */
    font-size: 1rem;
	}

    .form-floating>label {
        padding: 1.25rem .75rem!important;
        font-size: 1rem;
        color: #777;
    }

    .form-control:focus {
        border-color: var(--dgb-primary);
        box-shadow: 0 0 0 .25rem rgba(219, 94, 74, 0.15);
        background: #fff;
    }

    /* Buttons Inputs */

    .customform_submit_btn {
        display: inline-block;
        background: var(--bo-cst-btn-submit);
        color: var(--bo-cst-btn-color__light);
        border-radius: var(--bo-cst-btn-radius);
        border: 0;
        padding: 0.8750rem 1.125rem;
        font-size: 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: 0.25s ease;
        width: fit-content;
    }

    .customform_file_upload {
        -webkit-appearance: none;
        appearance: none;
        border: 1px solid #ccc;
        background: #fff;
        color: inherit;
        font: inherit;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 0.85rem;
        border-radius: 0.6rem;
        cursor: pointer;
        text-decoration: none;
    }

    button.customform_file_upload {
        margin: 0;
    }

    .customform_file_upload svg {
        width: 1.25rem;
        height: 1.25rem;
        flex: 0 0 auto;
    }

    .form-check-input {
        width: 1.25em!important;
        height: 1.25em!important;
        margin-top:0 !important;
    }

    .form-floating>.form-control-plaintext~label::after,
    .form-floating>.form-control:focus~label::after,
    .form-floating>.form-control:not(:placeholder-shown)~label::after,
    .form-floating>.form-select~label::after {
        background: 0;
    }

    .bo-checkbox-wrap {
        display: flex;
        align-items: center;
        gap: .6rem;
        flex-wrap: wrap;
        margin-top: .5rem;
        width: 100%;
    }

    /* Form floating > Textarea */
    .form-floating textarea.form-control {
        height: auto !important;
        min-height: 100px; /* ändra efter smak */
        resize: vertical;
        padding-top: 1.4rem;
        padding-bottom: .8rem;
    }

    .form-floating>textarea.form-control:focus~label,
    .form-floating>textarea.form-control:not(:placeholder-shown)~label {
        opacity: .65;
        transform: scale(.85) translateY(-.6rem) translateX(.15rem);
    }

    /*Filuppladdning: label och button ska se identiska ut */
    .bo-file-upload-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .bo-file-list,
    .bo-file-size {
        flex: 0 0 100%;
    }

    .form-control:focus {
        border-color: #e5cbeb;
        box-shadow: 0 0 0 .25rem rgba(189, 113, 102, 0.15);
        background: #fff;
    }
    
    /* ==============================
        BILONLINE > TO-TOP
    ============================== */
        
	#toTop {
    	display: none;
    	text-decoration: none;
    	position: fixed;
    	bottom: 15%;
    	right: 10px;
    	z-index: 1000;
    	overflow: hidden;
    	width: 50px;
    	height: 50px;
    	border: none;
    	border-radius: 50px;
    	text-indent: 100%;
    	border-radius:.25rem;
	}    
    
	#toTopHover {
    	background-color: #000;
    	width: 50px;
    	height: 50px;
    	display: block;
    	overflow: hidden;
    	float: left;
    	opacity:1!important;
	}
  
  	#toTop .fas {
    	display: block;
    	position: absolute;
    	color: #ffffff;
    	margin: 23%;
    	font-size: 15px;
    	padding-top: 6px;
	}
	


:root {
    /* =====================================================
       Foundation: Neutrals / Brand / States
       ===================================================== */
    --bo-white: #ffffff;
    --bo-black: #111111;

    --bo-neutral-0: #ffffff;
    --bo-neutral-25: #fdfdfd;
    --bo-neutral-50: #f8f9fa;
    --bo-neutral-75: #f7f7f8;
    --bo-neutral-100: #f1f3f5;
    --bo-neutral-150: #e9ecef;
    --bo-neutral-200: #dee2e6;
    --bo-neutral-300: #ced4da;
    --bo-neutral-400: #969cb8;
    --bo-neutral-600: #6c757d;
    --bo-neutral-800: #1b262c;
    --bo-neutral-900: #0f1720;

    --bo-success-500: #00c896;
    --bo-danger-50: #ffd6d6;
    --bo-danger-500: #dc3545;
    --bo-danger-700: #a80000;

    /* =====================================================
       Alpha / Overlays
       ===================================================== */
    --bo-alpha-black-03: rgba(0, 0, 0, 0.03);
    --bo-alpha-black-06: rgba(0, 0, 0, 0.06);
    --bo-alpha-black-08: rgba(0, 0, 0, 0.08);
    --bo-alpha-black-10: rgba(0, 0, 0, 0.10);
    --bo-alpha-black-12: rgba(0, 0, 0, 0.12);
    --bo-alpha-black-15: rgba(0, 0, 0, 0.15);
    --bo-alpha-black-18: rgba(0, 0, 0, 0.18);
    --bo-alpha-black-25: rgba(0, 0, 0, 0.25);

    --bo-alpha-white-08: rgba(255, 255, 255, 0.08);
    --bo-alpha-white-12: rgba(255, 255, 255, 0.12);
    --bo-alpha-white-65: rgba(255, 255, 255, 0.65);
    --bo-alpha-white-92: rgba(255, 255, 255, 0.92);
    --bo-alpha-white-95: rgba(255, 255, 255, 0.95);

    /* =====================================================
       Spacing 
       ===================================================== */
    --bo-space-0: 0;
    --bo-space-1: 0.25rem; /* 4px  */
    --bo-space-2: 0.5rem; /* 8px  */
    --bo-space-3: 0.75rem; /* 12px */
    --bo-space-4: 1rem; /* 16px */
    --bo-space-5: 1.25rem; /* 20px */
    --bo-space-6: 1.5rem; /* 24px */
    --bo-space-7: 1.75rem; /* 28px */
    --bo-space-8: 2rem; /* 32px */
    --bo-space-9: 2.5rem; /* 40px */
    --bo-space-10: 3rem; /* 48px */
    --bo-space-11: 3.5rem; /* 56px */
    --bo-space-12: 4rem; /* 64px */
    --bo-space-13: 5.25rem; /* 84px */
    --bo-space-14: 6rem; /* 96px */

    /* =====================================================
       Radius
    ===================================================== */
    --bo-radius-none: 0;
    --bo-radius-xs: 0.25rem; /* 4px  */
    --bo-radius-sm: 0.5rem; /* 8px  */
    --bo-radius-md: 0.625rem; /* 10px */
    --bo-radius-lg: 0.75rem; /* 12px */
    --bo-radius-xl: 0.875rem; /* 14px */
    --bo-radius-2xl: 1rem; /* 16px */
    --bo-radius-3xl: 1.125rem; /* 18px */
    --bo-radius-4xl: 1.5rem; /* 24px */
    --bo-radius-pill: 9999px;

    /* =====================================================
       Components
    ===================================================== */
    --bo-size-xxs: 0.4375rem; /* 7px  */
    --bo-size-xs: 0.625rem; /* 10px */
    --bo-size-sm: 0.75rem; /* 12px */
    --bo-size-md: 0.875rem; /* 14px */
    --bo-size-lg: 1rem; /* 16px */
    --bo-size-xl: 1.125rem; /* 18px */
    --bo-size-2xl: 1.25rem; /* 20px */
    --bo-size-3xl: 1.375rem; /* 22px */
    --bo-size-4xl: 1.5rem; /* 24px */
    --bo-size-5xl: 1.75rem;/* 28px */
    --bo-size-6xl: 2rem; /* 32px */
    --bo-size-7xl: 2.5rem; /* 40px */
    --bo-size-8xl: 2.75rem; /* 44px */
    --bo-size-9xl: 3rem; /* 48px */
    --bo-size-10xl: 4rem; /* 64px */
    --bo-size-11xl: 6rem; /* 96px */

    /* =====================================================
       Shadows
    ===================================================== */
    --bo-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bo-shadow-md: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.06);
    --bo-shadow-lg: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.18);

    /* =====================================================
       Theme inputs
    ===================================================== */
    --bo-theme-primary: #0A0A0A;
    --bo-theme-primary-soft: #f1f2f2;
    --bo-theme-primary-muted: #eaeaea;
    --bo-theme-primary-strong: #0a0a0a;
    --bo-theme-on-primary: #ffffff;
    --bo-theme-accent: pink;
    --bo-theme-link: var(--bo-theme-primary);
    --bo-theme-link-hover: var(--bo-theme-primary-strong);

    /* =====================================================
       Semantic tokens
    ===================================================== */
    --bo-surface: var(--bo-neutral-0);
    --bo-surface-soft: var(--bo-neutral-50);
    --bo-surface-muted: var(--bo-neutral-100);
    --bo-surface-subtle: var(--bo-neutral-75);
    --bo-surface-inverse: #0b0f14;

    --bo-text: var(--bo-neutral-800);
    --bo-text-strong: var(--bo-black);
    --bo-text-muted: var(--bo-neutral-600);
    --bo-text-soft: var(--bo-neutral-400);
    --bo-text-on-primary: var(--bo-theme-on-primary);
    --bo-text-on-dark: var(--bo-white);

    --bo-link: var(--bo-theme-link);
    --bo-link-hover: var(--bo-theme-link-hover);

    --bo-border-color: var(--bo-neutral-150);
    --bo-border-color-strong: var(--bo-neutral-400);
    --bo-border-color-soft: var(--bo-alpha-black-06);
    --bo-border-color-soft-2: var(--bo-alpha-black-08);
    --bo-border-color-soft-3: var(--bo-alpha-black-12);

    --bo-border: 1px solid var(--bo-border-color);
    --bo-border-soft: 1px solid var(--bo-border-color-soft);

    --bo-brand-primary: var(--bo-theme-primary);
    --bo-brand-primary-soft: var(--bo-theme-primary-soft);
    --bo-brand-primary-muted: var(--bo-theme-primary-muted);
    --bo-brand-primary-strong: var(--bo-theme-primary-strong);
    --bo-brand-on-primary: var(--bo-theme-on-primary);
    --bo-brand-accent: var(--bo-theme-accent);

    --bo-card-bg: var(--bo-surface);
    --bo-card-bg-soft: var(--bo-surface-muted);
    --bo-card-media-bg: var(--bo-neutral-100);
    --bo-card-shadow: var(--bo-shadow-sm);
    --bo-card-row-min-height: 13.75rem; /* 220px */

    --bo-icon-btn-bg: var(--bo-surface);
    --bo-icon-btn-color: var(--bo-text-strong);
    --bo-icon-btn-shadow: 0.0625rem 0.0625rem 0.25rem 0 var(--bo-alpha-black-25);

    --bo-fav-btn-bg: var(--bo-alpha-white-92);
    --bo-fav-btn-color: var(--bo-text-strong);
    --bo-fav-btn-shadow: var(--bo-shadow-lg);

    --bo-tab-bg: var(--bo-surface);
    --bo-tab-color: var(--bo-text-strong);
    --bo-tab-active-bg: var(--bo-brand-primary);
    --bo-tab-active-color: var(--bo-brand-on-primary);
    --bo-tab-active-border: var(--bo-brand-primary);

    --bo-badge-soft-bg: var(--bo-brand-primary-muted);
    --bo-badge-soft-text: var(--bo-brand-primary-strong);
    --bo-badge-border: var(--bo-alpha-black-06);
    --bo-badge-shadow: var(--bo-shadow-md);

    --bo-pill-bg: var(--bo-brand-primary-strong);
    --bo-pill-text: var(--bo-brand-on-primary);
    --bo-pill-border: transparent;

    --bo-chip-bg: var(--bo-surface);
    --bo-chip-color: var(--bo-text);
    --bo-chip-border: var(--bo-alpha-black-10);
    --bo-chip-x-border: var(--bo-alpha-black-15);

    --bo-filter-tag-bg: var(--bo-brand-primary-soft);
    --bo-filter-tag-bg-hover: var(--bo-brand-primary-muted);
    --bo-filter-tag-bg-active: var(--bo-brand-primary-muted);
    --bo-filter-head-bg: var(--bo-neutral-50);
    --bo-filter-head-bg-hover: var(--bo-alpha-black-03);
    --bo-filter-count-bg: var(--bo-surface-soft);
    --bo-filter-count-color: var(--bo-text);
    --bo-filter-count-border: var(--bo-neutral-150);
    --bo-filter-clear-bg-hover: var(--bo-alpha-black-06);

    --bo-input-bg: var(--bo-surface);
    --bo-input-border: var(--bo-border-color-strong);
    --bo-input-color: var(--bo-text);
    --bo-range-track: var(--bo-alpha-black-12);
    --bo-range-connect: rgba(93, 94, 93, 0.35);
    --bo-range-thumb-bg: var(--bo-brand-primary);
    --bo-range-thumb-border: var(--bo-white);
    --bo-range-thumb-shadow: 0 0.125rem 0.5rem var(--bo-alpha-black-15);

    --bo-spec-row-bg: var(--bo-brand-primary-muted);
    --bo-highlight-bg: var(--bo-surface-soft);
    --bo-addon-icon-bg: var(--bo-brand-primary-muted);

    --bo-modal-header-border: var(--bo-alpha-black-06);
    --bo-modal-tile-bg: var(--bo-brand-primary-muted);
    --bo-modal-urlbox-bg: #f1f1f2;
    --bo-modal-lead-toggle-bg: var(--bo-neutral-75);
    --bo-modal-lead-check-border: var(--bo-text-strong);
    --bo-modal-sticky-bg: var(--bo-surface);

    --bo-td-slot-bg: var(--bo-brand-primary-soft);
    --bo-td-slot-bg-active: var(--bo-brand-primary-muted);
    --bo-td-slot-border-active: var(--bo-alpha-black-12);

    --bo-risk-bg: var(--bo-danger-50);
    --bo-risk-text: var(--bo-danger-700);
    --bo-risk-icon-bg: rgba(180, 0, 0, 0.08);

    --bo-gallery-overlay-bg: rgba(0, 0, 0, 0.25);
    --bo-gallery-border-dark: rgba(255, 255, 255, 0.08);
    --bo-gallery-border-dark-2: rgba(255, 255, 255, 0.12);
    --bo-gallery-border-dark-active: rgba(255, 255, 255, 0.65);

    --bo-focus-ring: 0 0 0 0.1875rem rgba(0, 200, 150, 0.15);
    --bo-debug: 2px solid rgba(255, 0, 180, 0.55);

    /* Legacy aliases for migration */
    --bo-soft: var(--bo-surface-soft);
    --bo-muted: var(--bo-text-muted);
    --bo-blue-100: var(--bo-brand-primary-soft);
    --bo-blue-200: var(--bo-brand-primary-muted);
    --bo-ink-900: var(--bo-text);
    --bo-accent-500: var(--bo-brand-accent);
}


/* =========================================================
   Bilonline - Knappar
   ========================================================= */

/* Base */
.bo-btn {
    --bo-btn-bg: var(--bo-theme-primary);
    --bo-btn-color: var(--bo-theme-on-primary);
    --bo-btn-border: var(--bo-theme-primary);
    --bo-btn-hover-bg: var(--bo-theme-primary-strong);
    --bo-btn-hover-color: var(--bo-theme-on-primary);
    --bo-btn-hover-border: var(--bo-theme-primary-strong);
    --bo-btn-active-bg: var(--bo-theme-primary-strong);
    --bo-btn-active-color: var(--bo-theme-on-primary);
    --bo-btn-active-border: var(--bo-theme-primary-strong);
    --bo-btn-disabled-bg: var(--bo-neutral-150);
    --bo-btn-disabled-color: var(--bo-text-muted);
    --bo-btn-disabled-border: var(--bo-neutral-150);
    --bo-btn-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
    --bo-btn-shadow-hover: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.12);
    --bo-btn-shadow-active: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--bo-btn-border);
    background: var(--bo-btn-bg);
    color: var(--bo-btn-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bo-space-2);
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bo-radius-none);
    box-shadow: var(--bo-btn-shadow);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.bo-btn:hover {
    background: var(--bo-btn-hover-bg);
    color: var(--bo-btn-hover-color);
    border-color: var(--bo-btn-hover-border);
    box-shadow: var(--bo-btn-shadow-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

.bo-btn:focus {
    outline: none;
}

.bo-btn:focus-visible {
    outline: none;
    box-shadow: var(--bo-focus-ring), var(--bo-btn-shadow-hover);
}

.bo-btn:active,
.bo-btn.is-active,
.bo-btn.active,
.bo-btn[aria-pressed="true"] {
    background: var(--bo-btn-active-bg);
    color: var(--bo-btn-active-color);
    border-color: var(--bo-btn-active-border);
    box-shadow: var(--bo-btn-shadow-active);
    transform: translateY(0);
}

.bo-btn:disabled,
.bo-btn.disabled,
.bo-btn[aria-disabled="true"] {
    background: var(--bo-btn-disabled-bg);
    color: var(--bo-btn-disabled-color);
    border-color: var(--bo-btn-disabled-border);
    box-shadow: none;
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.bo-btn>svg,
.bo-btn>i,
.bo-btn>.bo-btn__icon {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    display: inline-block;
}

/* =========================================================
   Variants
   ========================================================= */

/* Primary */
.bo-btn--primary {
    --bo-btn-bg: var(--bo-theme-primary);
    --bo-btn-color: var(--bo-theme-on-primary);
    --bo-btn-border: var(--bo-theme-primary);
    --bo-btn-hover-bg: var(--bo-theme-primary-strong);
    --bo-btn-hover-color: var(--bo-theme-on-primary);
    --bo-btn-hover-border: var(--bo-theme-primary-strong);
    --bo-btn-active-bg: var(--bo-theme-primary-strong);
    --bo-btn-active-color: var(--bo-theme-on-primary);
    --bo-btn-active-border: var(--bo-theme-primary-strong);
}

/* Secondary */
.bo-btn--secondary {
    --bo-btn-bg: var(--bo-surface);
    --bo-btn-color: var(--bo-text);
    --bo-btn-border: var(--bo-border-color);
    --bo-btn-hover-bg: var(--bo-surface-soft);
    --bo-btn-hover-color: var(--bo-text-strong);
    --bo-btn-hover-border: var(--bo-border-color-strong);
    --bo-btn-active-bg: var(--bo-surface-muted);
    --bo-btn-active-color: var(--bo-text-strong);
    --bo-btn-active-border: var(--bo-border-color-strong);
}

/* Outline */
.bo-btn--outline {
    --bo-btn-bg: transparent;
    --bo-btn-color: var(--bo-theme-primary);
    --bo-btn-border: var(--bo-theme-primary);
    --bo-btn-hover-bg: var(--bo-theme-primary);
    --bo-btn-hover-color: var(--bo-theme-on-primary);
    --bo-btn-hover-border: var(--bo-theme-primary);
    --bo-btn-active-bg: var(--bo-theme-primary-strong);
    --bo-btn-active-color: var(--bo-theme-on-primary);
    --bo-btn-active-border: var(--bo-theme-primary-strong);
    --bo-btn-shadow: none;
    --bo-btn-shadow-hover: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.08);
    --bo-btn-shadow-active: none;
}

/* Ghost */
.bo-btn--ghost {
    --bo-btn-bg: transparent;
    --bo-btn-color: var(--bo-theme-primary);
    --bo-btn-border: transparent;
    --bo-btn-hover-bg: var(--bo-theme-primary-soft);
    --bo-btn-hover-color: var(--bo-theme-primary-strong);
    --bo-btn-hover-border: transparent;
    --bo-btn-active-bg: var(--bo-theme-primary-muted);
    --bo-btn-active-color: var(--bo-theme-primary-strong);
    --bo-btn-active-border: transparent;
    --bo-btn-shadow: none;
    --bo-btn-shadow-hover: none;
    --bo-btn-shadow-active: none;
}

/* Soft / tinted */
.bo-btn--soft {
    --bo-btn-bg: var(--bo-theme-primary-soft);
    --bo-btn-color: var(--bo-theme-primary-strong);
    --bo-btn-border: transparent;
    --bo-btn-hover-bg: var(--bo-theme-primary-muted);
    --bo-btn-hover-color: var(--bo-theme-primary-strong);
    --bo-btn-hover-border: transparent;
    --bo-btn-active-bg: var(--bo-theme-primary-muted);
    --bo-btn-active-color: var(--bo-theme-primary-strong);
    --bo-btn-active-border: transparent;
    --bo-btn-shadow: none;
    --bo-btn-shadow-hover: none;
    --bo-btn-shadow-active: none;
}

/* Danger */
.bo-btn--danger {
    --bo-btn-bg: var(--bo-danger-500);
    --bo-btn-color: var(--bo-white);
    --bo-btn-border: var(--bo-danger-500);
    --bo-btn-hover-bg: var(--bo-danger-700);
    --bo-btn-hover-color: var(--bo-white);
    --bo-btn-hover-border: var(--bo-danger-700);
    --bo-btn-active-bg: var(--bo-danger-700);
    --bo-btn-active-color: var(--bo-white);
    --bo-btn-active-border: var(--bo-danger-700);
}

/* Link */
.bo-btn--link {
    --bo-btn-bg: transparent;
    --bo-btn-color: var(--bo-link);
    --bo-btn-border: transparent;
    --bo-btn-hover-bg: transparent;
    --bo-btn-hover-color: var(--bo-link-hover);
    --bo-btn-hover-border: transparent;
    --bo-btn-active-bg: transparent;
    --bo-btn-active-color: var(--bo-link-hover);
    --bo-btn-active-border: transparent;
    --bo-btn-shadow: none;
    --bo-btn-shadow-hover: none;
    --bo-btn-shadow-active: none;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    font-weight: 600;
}

.bo-btn--link:hover {
    transform: none;
    text-decoration: underline;
}

.bo-btn--link:focus-visible {
    box-shadow: none;
    text-decoration: underline;
    outline: 2px solid transparent;
}

/* =========================================================
   Sizes
   ========================================================= */

.bo-btn--sm {
    min-height: 2.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--bo-radius-none);
    font-size: 0.875rem;
}

.bo-btn--lg {
    min-height: 3rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--bo-radius-2xl);
    font-size: 1rem;
}

.bo-btn--pill {
    border-radius: var(--bo-radius-pill);
}

/* =========================================================
   Layout helpers
   ========================================================= */

.bo-btn--full {
    width: 100%;
}

.bo-btn--icon {
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    aspect-ratio: 1 / 1;
}

.bo-btn--icon.bo-btn--sm {
    width: 2.25rem;
    min-width: 2.25rem;
}

.bo-btn--icon.bo-btn--lg {
    width: 3rem;
    min-width: 3rem;
}

.bo-btn--with-icon-right {
    flex-direction: row-reverse;
}

/* =========================================================
   Loading
   ========================================================= */

.bo-btn.is-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.bo-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bo-btn-spin 0.65s linear infinite;
    color: inherit;
}

@keyframes bo-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Button group
   ========================================================= */
.bo-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--bo-space-2);
}

.bo-btn-group--attached {
    gap: 0;
}

.bo-btn-group--attached>.bo-btn {
    border-radius: 0;
}

.bo-btn-group--attached>.bo-btn:first-child {
    border-top-left-radius: var(--bo-radius-xl);
    border-bottom-left-radius: var(--bo-radius-xl);
}

.bo-btn-group--attached>.bo-btn:last-child {
    border-top-right-radius: var(--bo-radius-xl);
    border-bottom-right-radius: var(--bo-radius-xl);
}

.bo-btn-group--attached>.bo-btn+.bo-btn {
    margin-left: -1px;
}

/* =========================================================
   Mobile polish
   ========================================================= */
@media (max-width: 575.98px) {
    .bo-btn {
        min-height: 2.625rem;
    }

    .bo-btn--lg {
        min-height: 2.875rem;
    }
}


/* =========================================================
   Bilonline - Reset
   ========================================================= */
   
   .bo-car-card-content__pills{
   		display:none;
   }
   
   .bo-btn-sidebar-cta{
    	justify-content:flex-start;
    	padding:1rem;
	}
	
	.bo-specgrid--v5 .bo-spec-row, .bo-specgrid--v5 .bo-spec-row{
		border-radius:var(--bo-radius-none);
	}
	
	.bo-tabs{
		background:var(--bo-surface);
	}
	
	.bo-specs-card{
		border-radius:var(--bo-radius-none);
	}