
/* =========================================
   BO GENERAL
   ========================================= */

#bodycontainer{
	background:radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.05), transparent 45%), #141415;
	color:#fff;
}

.bo-tabs{
	background: #1f1f1f;
    color: #fff;
    border-color: #2a2a2a;
}

.bo-card{
    background: #1f1f1f;
    color: #fff;
    border-color: #2a2a2a;
}

.bo-card > hr{
	color:red;
}

.bo-specgrid--c4 .bo-spec-row, .bo-specgrid--v5 .bo-spec-row{
	background: #1f1f1f;
    color: #fff;
    border-color: #2a2a2a;
}

.bo-model {
  display: block;            	/* Alternativt inline-block */
  width: 100%;               	/* viktigt om den ska fylla sin container */
  white-space: nowrap;       	/* ingen radbrytning */
  overflow: hidden;          	/* dölj överskott */
  text-overflow: ellipsis;   	/* ... */
  line-height: 1;				/* Håller höjden så den inte klipper */
  color:#fff!important;			/* Tvinga text att ändra färg */
}

.bo-topbar > .bo-row{
	
}

.bo-cta > button{
	background:#1f1f1f;
}

.bo-desc-anim__inner.text-muted{
	color:#fff!important;
}

.bo-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--bo-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
    .bo-topbar > .bo-row{
        background:red;
        flex-direction:column-reverse;
    }
}

.btn.btn-outline-primary:is(.bo-btn-all-specs, .bo-btn-all-eq, .bo-btn-more.bo-btn-more--chev) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bo-hover);
    color: rgba(255, 255, 255);
    padding: 0.9375rem 1.125rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6.225rem;
    transition: 0.25s ease;
}

.bo-desc-anim.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.4em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(31 31 31));
    pointer-events: none;
}

.swiper-navigation-icon{
	display:none;
}

/* =========================================
   BO GALLERY THEME (stora bilder + thumbnails)
   ========================================= */

:root {
  --bo-gallery-ratio: 16 / 9;      /* samma proportion på båda */
  --bo-gallery-radius: 0.75rem;
  --bo-gallery-bg: #111;
  --bo-gallery-fit: cover;       /* byt till cover om du vill fylla ytan */
}

/* ---------- Stora bilder ---------- */
.bo-gallery-stage .bo-gallery-slide {
  aspect-ratio: var(--bo-gallery-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bo-gallery-bg);
  border-radius: var(--bo-gallery-radius);
}

.bo-gallery-stage .bo-gallery-slide > img {
  width: 100%;
  height: 100%;
  object-fit: var(--bo-gallery-fit);
  display: block;
}

/* Se till att swiper-wrapper inte strular med höjden */
.bo-gallery-stage .swiper-wrapper {
  align-items: stretch;
}

/* ---------- Thumbnails ---------- */
.bo-thumbs-wrap .bo-thumb-btn {
  width: 100%;
  aspect-ratio: var(--bo-gallery-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bo-gallery-bg);
  /*border: 1px solid rgba(255,255,255,0.08);*/
  border-radius: calc(var(--bo-gallery-radius) - 2px);
  padding: 0;
}

.bo-thumbs-wrap .bo-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: var(--bo-gallery-fit);
  display: block;
}

/* Thumbs wrapper/slides */
.bo-thumbs-wrap .swiper-wrapper {
  align-items: stretch;
}

.bo-thumbs-wrap .swiper-slide {
  height: auto;
}

/* Hover/active på thumbnails */
.bo-thumbs-wrap .bo-thumb-btn:hover {
  border-color: rgba(255,255,255,0.25);
}

.bo-thumbs-wrap .swiper-slide-thumb-active .bo-thumb-btn {
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12) inset;
}

/* Mobiljustering (valfritt) */
@media (max-width: 768px) {
  :root {
    --bo-gallery-radius: 0.55rem;
  }
}



