/* Mobile sizes */

#lian-li-focus h1 {

  font-size: 32px;

}



#lian-li-focus h2 {

  font-size: 24px;

}



#lian-li-focus p {

  font-size: 16px;

}



/* Desktop sizes */

@media (min-width: 768px) {

  #lian-li-focus h1 {

    font-size: 48px;

  }



  #lian-li-focus h2 {

    font-size: 32px;

  }

}



/* RESET ----------------------------------*/

#lian-li-focus * {

  margin: 0;

  padding: 0;

}



/* COLORS ----------------------------------*/

#lian-li-focus {

  --navbar-background: #e9e9e9;

  --navbar-button: #cecece;

  --navbar-button-hover: #000000;

  --navbar-text: #333333;

  --navbar-text-hover: #ffffff;

}



/* DIVIDER ----------------------------------*/

#lian-li-focus .divider {

  height: 5px;

  background: linear-gradient(to right, black, white);

}



/* DIVIDER1 ----------------------------------*/

#lian-li-focus .divider1 {

  height: 3px;

  background: linear-gradient(to right, black, #ffffff);

}



/*HEADER ----------------------------------*/



#lian-li-focus .header {

  /* CENTER THE HEADER LOGO */

  text-align: center;



  background-color: black;

  padding: 10px;

}



/* INTRO ----------------------------------*/

/* Background container */

#lian-li-focus .intro {

  position: relative;

  background-color: #242529;

  color: white;

}



/* Background video */

#lian-li-focus .intro video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Dark overlay above video */

#lian-li-focus .intro::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 1;

}



/* Text content on top */

#lian-li-focus .intro h1,

#lian-li-focus .intro p,

#lian-li-focus .intro .button-1 {

  position: relative;

  z-index: 2;

}



/* Text */

#lian-li-focus .intro {

  padding: 25px;

}



#lian-li-focus a {

  color:#17BEFF ;

}



@media (min-width: 768px) {

  #lian-li-focus .intro {

    padding: 50px;

  }

}



@media (min-width: 1200px) {

  #lian-li-focus .intro {

    padding-left: 150px;

    padding-right: 150px;

  }

}



#lian-li-focus .subtitle {

  color: #17BEFF;

  font-weight: 600;

}



#lian-li-focus .section-alert{

  background-color:#17BEFF;

}



#lian-li-focus .section-alert p{

  font-size: 18px ;

}



/*MAIN SECTION ----------------------------------*/

#lian-li-focus .section-main {

  background-color: black;

}



#lian-li-focus .section-main-text {

  background-color: rgb(0, 0, 0);

  color: white;

}



@media (max-width: 768px) {

  #lian-li-focus .section-main-text {

    text-align: center;

  }

}





/*

#lian-li-focus .section-main-image {

  position: relative;



}





#lian-li-focus .section-main-image::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, black, transparent 50%);

}



@media (min-width: 768px) {

  #lian-li-focus .section-main-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to right, black, transparent 50%);

  }

}*/



#lian-li-focus .section-main-image img

 {

  width: 100%;

  height: auto;

}







/* PLUS BADGE ----------------------------------*/

/* #lian-li-focus .plus-badge {

  position: absolute;

  bottom: 25px;

  left: 25px;

  width: 40px;

  height: 40px;

  background-color: #17BEFF;

  color: black;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}



#lian-li-focus .plus-badge svg {

  width: 24px;

  height: 24px;

} */



/* IMGMAP SECTION  ----------------------------------*/

#lian-li-focus .section-imgMap {

  background-color: #242529;

  padding: 5px;

  position: relative;

}



@media (min-width: 768px) {

  #lian-li-focus .section-imgMap {

    padding: 0 50px;

  }

}



#lian-li-focus .section-imgMap img {

  position: relative;

  z-index: 1;

}



/* Mobile: show mobile headset, hide desktop headset */

@media (max-width: 767px) {

  #lian-li-focus .imgMap-desktop {

    display: none !important;

  }

}



/* Desktop: hide mobile headset, show desktop headset */

@media (min-width: 768px) {

  #lian-li-focus .imgMap-mobile {

    display: none !important;

  }

}



#lian-li-focus .imgMap-mobile img{

  width: 100%;

}



#lian-li-focus .imgMap-hotspot,

#lian-li-focus .imgMap-infobox {

  z-index: 2;

}



/* Hotspot base styling */

#lian-li-focus .imgMap-hotspot {

  position: absolute;

  width: 30px;

  height: 30px;

  background: rgb(23, 190, 255);

  border-radius: 50%;

  cursor: pointer;

  box-shadow: 0 0 0 8px rgba(23, 190, 255, 0.5);

  animation: pulse 1s infinite;

  border: 3px solid #0948616b;

}



@keyframes pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(23, 190, 255, 0.5);

  }

  100% {

    box-shadow: 0 0 0 15px rgba(236, 232, 26, 0);

  }

}



/* Hotspot 1 positioning */

#lian-li-focus .imgMap-hotspot-1 {

  top: 27%;

  left: 66%;

}



#lian-li-focus .imgMap-infobox-1 {

  top: calc(27% + 20px);

  left: calc(66% + 15px);

}



#lian-li-focus .imgMap-hotspot-2 {

  top: 71%;

  left: 73%;

}



#lian-li-focus .imgMap-infobox-2 {

  top: calc(71% + 20px);

  left: calc(73% + 15px);

}



#lian-li-focus .imgMap-hotspot-3 {

  top: 14%;

  left: 43%;

}



#lian-li-focus .imgMap-infobox-3 {

  top: calc(14% + 20px);

  left: calc(43% + 15px);

}



#lian-li-focus .imgMap-hotspot-4 {

  top: 43%;

  left: 54%;

}



#lian-li-focus .imgMap-infobox-4 {

  top: calc(43% + 20px);

  left: calc(54% + 15px);

}



#lian-li-focus .imgMap-hotspot-5 {

  top: 64%;

  left: 25%;

}



#lian-li-focus .imgMap-infobox-5 {

  top: calc(64% + 20px);

  left: calc(25% + 15px);

}



/* Infobox base styling */

#lian-li-focus .imgMap-infobox {

  display: flex;

  position: absolute;

  transform: translateX(-50%);

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  z-index: 10;

  max-width: 200px;

}



@media (max-width: 767px) {

  #lian-li-focus .imgMap-infobox {

    max-width: 200px;

  }

}



#lian-li-focus .imgMap-infobox.active {

  opacity: 1;

  pointer-events: auto;

}



#lian-li-focus .infobox-line {

  width: 2px;

  height: 0;

  background-color: #17BEFF;

  align-self: center;

  transition: height 0.4s ease-out;

}



#lian-li-focus .imgMap-infobox.active .infobox-line {

  height: 50px;

}



#lian-li-focus .infobox-content {

  border: 1px solid white;

  border-top: 4px solid #17BEFF;

  background: rgba(0, 0, 0, 0.719);

  color: white;

  padding: 15px;

  word-wrap: break-word;

}



@media (max-width: 767px) {

  #lian-li-focus .infobox-content {

    padding: 10px;

    font-size: 14px;

  }

}



/* GAMING CHAIRS SECTION  ----------------------------------*/

#lian-li-focus .section-gamingchairs {

  background-color: #242529;

  padding: 30px;

  position: relative;

}



@media (min-width: 768px) {

  #lian-li-focus .section-gamingchairs {

    padding: 50px;

  }

}



/* Chair images - hidden by default */

#lian-li-focus .gamingchair-1,

#lian-li-focus .gamingchair-2,

#lian-li-focus .gamingchair-3 {

  display: none;

}



#lian-li-focus .gamingchair-1.active,

#lian-li-focus .gamingchair-2.active,

#lian-li-focus .gamingchair-3.active {

  display: block;

  margin: 0 auto;

}



/* Mobile: show mobile chairs, hide desktop chairs */

@media (max-width: 767px) {

  #lian-li-focus .gamingchair-desktop {

    display: none !important;

  }



  #lian-li-focus .gamingchair-mobile {

    display: none;

  }



  #lian-li-focus .gamingchair-mobile.active {

    display: block;

  }

}



/* Desktop: hide mobile chairs, show desktop chairs */

@media (min-width: 768px) {

  #lian-li-focus .gamingchair-mobile {

    display: none !important;

  }



  #lian-li-focus .gamingchair-desktop {

    display: none;

  }



  #lian-li-focus .gamingchair-desktop.active {

    display: block;

  }

}



/* Color selector buttons */

#lian-li-focus .chair-color-buttons {

  position: absolute;

  bottom: 10%;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  display: flex;

  gap: 15px;

  padding: 15px 25px;

  background: rgba(0, 0, 0, 0.7);

  border-radius: 50px;

}



#lian-li-focus .chair-color-btn {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 3px solid transparent;

  cursor: pointer;

  transition: all 0.3s ease;

}



#lian-li-focus .chair-color-btn:nth-child(1) {

  background: #3a3837;

}

#lian-li-focus .chair-color-btn:nth-child(2) {

  background: #81807b;

}

/* #lian-li-focus .chair-color-btn:nth-child(3) {

  background: #474a39;

} */



#lian-li-focus .chair-color-btn.active {

  border-color: #17BEFF;

  transform: scale(1.15);

}



/* Mobile adjustments */

@media (max-width: 768px) {

  #lian-li-focus .chair-color-buttons {

    padding: 10px 15px;

    gap: 10px;

  }



  #lian-li-focus .chair-color-btn {

    width: 30px;

    height: 30px;

    border: 2px solid transparent;

  }

}



/* GENERAL ----------------------------------*/



/* Buttons */

#lian-li-focus .button-1 {

  text-decoration: none !important;

  display: inline-block;

  padding: 10px 20px;

  margin-top: 25px;

  background-color: white;

  color: black;

  transition: 0.25s ease;

  font-size: 16px;

}



#lian-li-focus .button-1:hover {

  transform: translateY(-2px);



  color: #000000;

  background-color: #17BEFF;

}



/* Text */

#lian-li-focus .text {

  padding: 25px;

}



@media (min-width: 768px) {

  #lian-li-focus .text {

    padding: 50px;

  }

}



@media (min-width: 1200px) {

  #lian-li-focus .text {

    padding: 50px;

  }

}



/* PORTAL NAV ----------------------------------*/

/* PORTAL NAV ----------------------------------*/

/* PORTAL NAV ----------------------------------*/

/* PORTAL NAV ----------------------------------*/

/* PORTAL NAV ----------------------------------*/



/* MENU SETTINGS */



#lian-li-focus .navBar,

#lian-li-focus .navBar .navItem,

#lian-li-focus .navBar .navItem .navDropdownButton {

  background-color: rgb(0, 0, 0);

  color: white;

  font-size: 16px;

}



#lian-li-focus .navBar .navItem:hover,

#lian-li-focus .navBar .navItem:hover .navDropdownButton,

#lian-li-focus .navBar .navActive .navDropdownButton {

  background-color: white;

  color: black;

}



#lian-li-focus .navBar .navDropdownContent a {

  background-color: white;

  color: black;

}



#lian-li-focus .navBar .navDropdownContent a:hover {

  background-color: #17BEFF;

  color: black;

}



/*

@media screen and (min-width: 767px) {

  #lian-li-focus .navBar .navCurrentPage {

    background-color: #eee900;

    color: black;

    pointer-events: none;

  }

}

*/

@media screen and (min-width: 767px) and (max-width: 1300px) {

  #lian-li-focus .navBar {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-auto-rows: 54px;

    grid-gap: 2px;

    background-color: #292929; /* Lines in between the menu items */

  }

}



@media screen and (min-width: 1300px) {

  #lian-li-focus .navBar {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-auto-rows: 54px;

    grid-gap: 2px;

    background-color: #292929;

  }

}



/* ALGEMENE MENU CSS */



#lian-li-focus .navBar {

  overflow: hidden;

}



@media screen and (min-width: 767px) {

  #lian-li-focus .navBar {

    overflow: visible;

  }

}



#lian-li-focus .navBar .navItem {

  float: left;

  text-align: center;

  text-decoration: none !important;

  transition: background-color 0.3s;

}



#lian-li-focus .navBar .navDropdown {

  position: relative;

}



#lian-li-focus .navBar .navItem:hover {

  transition: background-color 0.3s;

}



#lian-li-focus .navBar .navDropdownButton {

  border: none;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  width: 100%;

  transition: background-color 0.3s;

  cursor: pointer;

  text-decoration: none;

}



#lian-li-focus .navBar .navDropdownContent {

  display: none;

  position: absolute;

  background-color: white;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 3;

  left: 0;

  right: 0;

}



#lian-li-focus .navBar .navDropdownContent a {

  float: none;

  padding: 15px;

  text-decoration: none !important;

  display: block;

  text-align: left;

  transition: background-color 0.3s;

}



#lian-li-focus .navBar .navIcon {

  display: none;

}



#lian-li-focus .navBar .navDropdown.navActive .navDropdownContent {

  display: block;

}



@media screen and (max-width: 767px) {

  #lian-li-focus .navBar .navItem:not(:first-child):not(:last-child),

  #lian-li-focus .navBar .navDropdownButton {

    display: none;

  }



  #lian-li-focus .navBar .navItem {

    padding: 15px;

  }



  #lian-li-focus .navBar.navMenuOpen {

    position: relative;

  }



  #lian-li-focus .navBar .navIcon {

    float: right;

    display: block;

  }



  #lian-li-focus .navBar.navMenuOpen .navIcon {

    position: absolute;

    right: 0;

    top: 0;

  }



  #lian-li-focus .navBar.navMenuOpen .navItem,

  #lian-li-focus .navBar.navMenuOpen .navDropdownButton {

    float: none;

    display: block !important;

    text-align: left;

  }



  #lian-li-focus .navBar.navMenuOpen .navDropdown {

    float: none;

  }



  #lian-li-focus .navBar.navMenuOpen .navDropdownButton {

    display: block;

    width: 100%;

    text-align: left;

    padding: 0;

  }



  #lian-li-focus .navBar.navMenuOpen .navDropdownContent {

    position: relative;

    margin-top: 15px;

  }

}



@media screen and (min-width: 767px) {

  #lian-li-focus .navBar a {

    display: flex;

    justify-content: center;

    align-items: center;

  }



  #lian-li-focus .navBar .navDropdown a {

    justify-content: start;

  }



  #lian-li-focus .navBar .navDropdownButton {

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0;

  }



  #lian-li-focus .navBar .navIcon {

    display: none !important;

  }



  #lian-li-focus .navBar .navDropdownContent a {

    padding: 15px !important;

  }

}



/*Productslider Lian Li styling*/

#lian-li-focus .section-producten {

  background-color: #242529;

  margin-top: 0px;

  position: relative;

  display: none; /* Hide all product sections by default */

}





/* Show only the default section */



#lian-li-focus #producten-alles {

  display: block;

}



@media screen and (min-width: 600px) {

  #lian-li-focus .section-producten {

    margin-top: -50px;

  }

}



@media screen and (min-width: 900px) {

  #lian-li-focus .section-producten {

    margin-top: -70px;

  }

}





#lian-li-focus .section-producten h2{

  color: white;

}

/* Embla Carousel Styles */

#lian-li-focus .section-producten .embla {

	position: relative;

	overflow: hidden;

	width: 100%;

}



#lian-li-focus .section-producten .embla__viewport {

	overflow: hidden;

	width: 100%;

}



#lian-li-focus .section-producten .embla__container {

	display: flex;

	user-select: none;

	-webkit-touch-callout: none;

	-khtml-user-select: none;

	-webkit-tap-highlight-color: transparent;

	touch-action: pan-y pinch-zoom;

}



#lian-li-focus .section-producten .embla__slides-source {

	display: none !important;

}



#lian-li-focus .section-producten .embla__slide {

	position: relative;

	flex: 0 0 calc(25% - 7.5px);

	min-width: 0;

	margin-right: 10px;

}



@media (max-width: 991px) {

	#lian-li-focus .section-producten .embla__slide {

		flex: 0 0 calc(50% - 5px);

	}

}



/* Ensure equal height for outlet cards */

#lian-li-focus .section-producten .embla__container {

	display: flex !important;

	align-items: stretch !important;

}



#lian-li-focus .section-producten .embla__slide {

	display: flex !important;

	flex-direction: column !important;

	height: auto !important;

}



#lian-li-focus .section-producten .promoCard {

	display: flex !important;

	flex-direction: column !important;

	height: 100% !important;

	width: 100% !important;

}



#lian-li-focus .section-producten .promoCard a {

	display: flex !important;

	flex-direction: column !important;

	height: 100% !important;

	padding: 10px !important;

	background: #ffffff;

	border-radius: 5px;

	text-align: center;

	text-decoration: none;

	opacity: 1;

	transition: opacity 0.2s;

}



#lian-li-focus .section-producten .promoCard a:hover {

	opacity: 0.9;

	transition: opacity 0.2s;

}



#lian-li-focus .section-producten .promoCard img {

	max-width: 85%;

	-webkit-filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0));

	filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0));

	transition: -webkit-filter 0.2s, filter 0.2s;

}



#lian-li-focus .section-producten .promoCard a:hover img {

	-webkit-filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.75));

	filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.75));

	transition: -webkit-filter 0.2s, filter 0.2s;

}



#lian-li-focus .section-producten .promoPrices {

	margin-top: auto !important;

	position: relative;

	display: flex;

	justify-content: flex-end;

	margin-top: 1rem;

	bottom: -5px;

}



#lian-li-focus .section-producten .promoPrice {

	display: block;

	padding: 0.25rem 1rem;

	margin: 0;

	background-color: #17BEFF;

	text-align: center;

	color: #ffffff;

	font-size: clamp(0.9rem, 1vw + 0.6rem, 1.5rem);

	font-weight: 900;

	border-radius: 5px;

	text-transform: uppercase;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

	max-width: 100%;

}



#lian-li-focus .section-producten .promoStrikeprice {

	box-shadow: -2px 1px 7px 0px #0000005c !important;

	height: 32px;

	padding: 0.25rem 1rem;

	position: absolute;

	bottom: 37px;

	right: 3px;

	line-height: 22px;

	color: #ffffff;

	font-size: clamp(0.85em, 0.95vw + 0.65em, 0.95em);

	-ms-transform: rotate(5deg);

	-webkit-transform: rotate(5deg);

	transform: rotate(5deg);

	background: rgb(9, 72, 97) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='15' y1='70' x2='85' y2='30' stroke='hsl(0, 100%, 100%)' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>");

	background-repeat: no-repeat;

	background-size: 100% 100%;

	background-position: center;

	font-weight: 600px;

	text-align: center;

	border-radius: 5px;

}



/* Hide strike price if empty */

#lian-li-focus .section-producten .promoStrikeprice:empty,

#lian-li-focus .section-producten .promoStrikeprice:has(span:empty) {

	display: none;

}



/* Mobile adjustments for strike price */

@media only screen and (max-width: 991px) {

	#lian-li-focus .section-producten .promoStrikeprice {

		height: 28px;

		bottom: 15px;

		right: 5px;

		line-height: 18px;

		font-size: 0.65rem;

		padding: 0.2rem 0.8rem;

	}

}



@media only screen and (max-width: 600px) {

	#lian-li-focus .section-producten .promoStrikeprice {

		height: 30px;

		bottom: 12px;

		right: 5px;

		line-height: 20px;

		font-size: 0.55rem;

		padding: 0.25rem 0.8rem;

	}

}



/* Highlight carousel container */

#lian-li-focus .section-producten .highlight-carousel-container {

	position: relative;

	padding: 0px;

}



#lian-li-focus .section-producten .embla {

	position: relative;

	user-select: none;

}



#lian-li-focus .section-producten .promoCard a {

	background-color: #ffffff;

	border: 1px solid rgba(66, 186, 242, 0.5) !important;

	opacity: 1;

	transition: opacity 0.1s;

}



#lian-li-focus .section-producten .promoCard a:hover {

	opacity: 0.8;

	transition: opacity 0.1s;

}



#lian-li-focus .section-producten .promoTitle {

	color: #000;

	font-size: 1rem;

	-webkit-line-clamp: 2;

	line-clamp: 2;

	display: -webkit-box;

	-webkit-box-orient: vertical;

	overflow: hidden;

	height: 2.4em;

	text-wrap: balance;

	margin-bottom: 1rem;

}



#lian-li-focus .section-producten .promoCard img {

	max-width: 85%;

}





#lian-li-focus .section-producten .promoPriceDifference {

	font-weight: 900;

}



@media (max-width: 992px) {

	#lian-li-focus .section-producten .highlight-carousel-container {

		margin-left: 0px !important;

	}

}



/* Embla Navigation Buttons */

#lian-li-focus .section-producten .embla__button {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	z-index: 2;

	width: 35px;

	height: 35px;

	border: none;

	border-radius: 50%;

	background-color: #17BEFF;

	color: #ffffff;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 0;

	transition:

		background-color 0.2s,

		opacity 0.2s;

}



#lian-li-focus .section-producten .embla__button:hover {

	background-color: #1395c9;

}



#lian-li-focus .section-producten .embla__button:disabled {

	opacity: 0.3;

	cursor: not-allowed;

}



#lian-li-focus .section-producten .embla__button svg {

	width: 18px;

	height: 18px;

}



#lian-li-focus .section-producten .embla__button--prev {

	left: 10px;

}



#lian-li-focus .section-producten .embla__button--next {

	right: 10px;

}



@media (max-width: 1300px) {

	#lian-li-focus .section-producten .embla__button--prev {

		left: 8px;

	}

	#lian-li-focus .section-producten .embla__button--next {

		right: 8px;

	}

}