/* This stylesheet is used on ALL Smoothe sites */

/* Product Configurator Styling on Section View */

#productConfig .disabled::before {
		display: block;
		content: "";
		background-color: darkgray;
		height: 1px;
		position: absolute;
		bottom: 50%;
		width: 100%;

		transform: rotate(45deg) scale(1.5);
		transform-origin: center;
	}

	#productConfig .disabled {
		position: relative;
		background-color: rgb(248, 249, 250);
		overflow: hidden;
	}

	#productConfig .selected {
		border: 2px solid #343a40 !important;
	}

	#productConfig .colour-display {

		width: 10px;
		height: 10px;
		border-radius: 1rem;
	}

	#productConfig ul {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		flex-wrap: wrap;

		padding-left: 0;
		 list-style-type: none;
	}

	#productConfig a {
		padding: 0.5rem 1rem;
		border: 1px solid rgb(222, 226, 230);
		border-radius: 0.25rem;
		text-transform: capitalize;
		text-decoration: none;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 5px;
	}

	#productConfig a:hover{
		text-decoration: none;
	}


/* Product Configurator Styling on Section View */

.product-configurator-preview .colour-display {
    width: 10px;
    height: 10px;
    border-radius: 1rem;
  }

.product-configurator-preview .option {
	display: flex;
	align-items: center;
	margin-right: 1px;
	margin-top: 0.4rem;
	color: #212529;
	border: 1px solid rgb(222, 226, 230);
	border-radius: 0.5rem;
	padding: 0.4rem 0.4rem;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-configurator-preview .colourOption {
	  display: flex;
	  align-items: center;
	  margin-right: 1px;
	  margin-top: 0.4rem;
	  color: #212529;
	  border-radius: 0.5rem;
	  padding: 0.4rem 0.4rem;
	  text-decoration: none;
	  transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

.product-configurator-preview .option.selected {
  font-weight: bold;
}
 
 .product-configurator-preview .selected {
    border: 2px solid #343a40 !important;
  }  

  .product-configurator-preview {
    padding-top:  0rem;
    padding-bottom: 0.2rem;
  }

  .product-configurator-preview .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .product-configurator-preview .more-options-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #cc0000;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
	font-size: 14px;
  }

  .product-configurator-preview .more-options-text:hover {
	 color: black;
	}

  .product-configurator-preview .product-attribute {
    gap: 0.2rem;
    padding-bottom: 0.25rem;
    font-size: 14px!important;
  }

  .product-configurator-preview a {
	padding: 0.25rem 0.25rem;
	text-transform: capitalize;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5px;
}

  .product-configurator-preview ul {
    padding-right: 0;
    gap: 0.5rem;
    
    padding-left: 0;
    margin: 0;
    list-style-type: none;

  }

  .product-configurator-preview li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    font-size: 12px!important;
    padding: 0.25rem 0.25rem;
    border: none;
    border-radius: 0.25rem;
    text-transform: capitalize;
  }

  .product-configurator-preview li.colourLi {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0rem;
    padding: 0rem 0rem;
    border: none;
    border-radius: 0rem;
  }

  .product-configurator-preview li.moreOptions {
    background: rgb(222, 226, 230);
  }

  .product-configurator-preview li.moreOptions:hover {
    background: rgb(222, 226, 230);
    transform: scale(1.1);
  }

.product-configurator-preview .colour-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right:1px;
  border: 2px solid white;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.product-configurator-preview .colour-circle:hover {
  transform: scale(1.5);
  z-index: 10;
}


/* Product Configurator Styling on SEARCHANDISER */


.sz-block .product-configurator-preview .colour-display {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

 .sz-block .product-configurator-preview .colourOption {
	  display: flex;
	  align-items: center;
	  margin-right: 1px;
	  margin-top: 0.4rem;
	  color: #212529;
	  border-radius: 0.5rem;
	  padding: 0.4rem 0.4rem;
	  text-decoration: none;
	  transition: box-shadow 0.2s ease, transform 0.2s ease;
	}
 
 .sz-block .product-configurator-preview .option {
	display: flex;
	align-items: center;
	margin-right: 1px;
	margin-top: 0.4rem;
	color: #212529;
	border: 1px solid rgb(222, 226, 230);
	border-radius: 0.5rem;
	padding: 0.4rem 0.4rem;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sz-block .product-configurator-preview .option.selected {
  font-weight: bold;
}
 
 .sz-block .product-configurator-preview .selected {
    border: 2px solid #343a40 !important;
  }  

  .sz-block .product-configurator-preview {
    padding-top:  0rem;
    padding-bottom: 0.2rem;
  }

  .sz-block .product-configurator-preview .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .sz-block .product-configurator-preview .more-options-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #cc0000;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
  }

  .sz-block .product-configurator-preview .more-options-text:hover {
	 color: black;
	}

  .sz-block .product-configurator-preview .product-attribute {
    gap: 0.2rem;
    padding-bottom: 0.25rem;
    font-size: 14px!important;
  }

  .sz-block .product-configurator-preview a {
	padding: 0.1rem 0.1rem;
	text-transform: capitalize;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5px;
}

  .sz-block .product-configurator-preview ul {
    padding-right: 0;
    gap: 0.2rem;
    
    padding-left: 0;
    margin: 0;
    list-style-type: none;

  }

  .sz-block .product-configurator-preview li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    font-size: 12px!important;
    padding: 0.25rem 0.25rem;
    border: none;
    border-radius: 0.25rem;
    text-transform: capitalize;
  }

  .sz-block .product-configurator-preview li.colourLi {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0rem;
    padding: 0rem 0rem;
    border: none;
    border-radius: 0rem;
  }

  .sz-block .product-configurator-preview li.moreOptions {
    background: rgb(222, 226, 230);
  }

  .sz-block .product-configurator-preview li.moreOptions:hover {
    background: rgb(222, 226, 230);
	transform: scale(1.1);
  }

.sz-block .product-configurator-preview .colour-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 1px;
  border: 2px solid white;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.sz-block .product-configurator-preview .colour-circle:hover {
  transform: scale(1.5);
  z-index: 10;
}