.has-color-name
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: bottom;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.is-color-name-A511
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/A511.jpeg");
}

.is-color-name-A512
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/A512.jpeg");
}

.is-color-name-A513
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/A513.jpeg");
}

.is-color-name-A514
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/A514.jpeg");
}

.is-color-name-N501
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/N501.jpeg");
}

.is-color-name-N502
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/N502.jpeg");
}

.is-color-name-N503
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/N503.jpeg");
}

.is-color-name-N504
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/N504.jpeg");
}

.is-color-name-N505
  .wc-block-components-product-details__color
  .wc-block-components-product-details__value::before {
  background-image: url("color-previews/N505.jpeg");
}

.color-selector-wrapper {
  margin-bottom: 20px;
}

.color-selector-wrapper h4 {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 10px;
}

.color-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-option {
  position: relative;
}

.color-option input {
  position: absolute;
  opacity: 0;
}

.color-option label {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 4px solid #ddd;
  transition: all 0.3s;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.color-option input:checked + label {
  border-color: #ff6600;
  transform: scale(1.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.xoo-wsc-markup {
  line-height: normal;
}

.xoo-wsc-img-col img {
  border-radius: 5px;
}

.xoo-wsc-sm-sales {
  width: max-content;
}

.xoo-wsc-container {
  line-height: normal;
}

span.xoo-wsc-smr-del + .xoo-wsc-smr-ptotal {
  text-align: right;
}

.xoo-wsc-container span.subscription-price {
  text-align: right;
}

.xoo-wsc-container span.subscription-details {
  font-size: 12px;
  line-height: 1;
  display: block;
}

.xoo-wsc-sm-right {
  max-width: none;
  flex-shrink: 0;
}

.xoo-wsc-sp-left-col img {
  border-radius: 5px;
}

.xoo-wsc-sp-wide .xoo-wsc-sp-product,
.xoo-wsc-sp-narrow .xoo-wsc-sp-product {
  padding: 10px;
}

span.xoo-wsc-sp-atc a.button {
  padding: 0 15px;
  line-height: 30px;
}

span.xoo-wsc-pname,
span.xoo-wsc-pname a,
span.xoo-wsc-chng {
  font-weight: normal;
}

.xoo-wsc-drawer-active .xoo-wsc-drawer
{
	margin-right: -2px;
}



.woocommerce
{
	form.cart
	{
		width: 100%;
		max-width: 500px;

		.wcsatt-options-wrapper
		{
			margin-bottom: 10px;
		}

		.cart-form-submit-row
		{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 10px;

			button[type="submit"]
			{
				flex: 1 0 auto;
        min-height: 50px;
			}
		}
	}
}

.subscription-options-header
{
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 10px;
}

.subscription-options-buttons
{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;

	label
	{
		padding: 8px;
		border: 2px solid #ddd;
		background: #f8f8f8;
		color: #555;
		text-align: center;
		font-weight: 600;
		font-size: 13px;
		text-transform: uppercase;
		cursor: pointer;
		transition: all 0.2s ease;
		margin: 0;
		border-radius: 5px;
		flex: 1 0 80px;
		white-space: nowrap;

		&.selected
		{
			border-color: #333;
			background: #333;
			color: #fff;
			z-index: 1;
			position: relative;
		}

		input
		{
			display: none;
		}
	}
}