:root {
	--primary: #59DDF7;
}

.enable_patch_selection {
	margin: 10px 0 0 0;
	display: block;
	.button {
		background: #59DDF7;
		color: #111;
		border-color: #59DDF7;
		transition: .3s all;
		&:hover,
		&:focus {
			border-color: #59DDF7 !important;
			color: #59DDF7 !important;
			background: transparent !important;
		}
	}
}

.product-configurator {

	.intro {

		text-align: center;
		padding: 70px 0;

		@media screen and (max-width: 768px) {
			padding: 30px 0;
		}

		.title {
			margin:0;
		}

		.ov {
			max-width: 600px;
			margin: 16px auto 0;
		}

	}

	.step {

		border-top: 1px solid rgba(255,255,255,.2);
		padding: 40px 0;

		@media screen and (max-width: 768px) {
			padding: 22px 0;
		}

		.step-title {

			text-transform: uppercase;
			font-size: 18px;
			font-family: var(--heading-font-family);
			letter-spacing: 2px;
			margin: 0 0 20px 0;

			span {
				&.step-index {
					opacity: .4;
				}
				&.skip-link {
					display: flex;
					opacity: .4;
					align-items: center;
					font-size: 16px;
					cursor: pointer;
					svg {
						width: 14px;
						height: unset;
					}
				}
			}

		}

		.product-output {

			max-width: 500px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			@media screen and (max-width: 768px) {
				max-width: 100%;
			}

			.product--image {

				width: 35%;
				@media screen and (max-width: 768px) {
					width: 30%;
				}

				img {
					width: 100%;
					height: unset;
				}

			}

			.product--info {
				
				width: calc(65% - 30px);
				@media screen and (max-width: 768px) {
					width: calc(70% - 20px);
				}

				p {
					font-size: 12px;
					text-transform: uppercase;
					font-family: var(--heading-font-family);
					letter-spacing: 1px;
					&.product--title {
						margin-top: 10px;
					}
					&.product--remove {
						text-decoration: underline;
						margin: 12px 0 0 0;
						cursor: pointer;
						opacity: .6;
					}
				}

			}

		}

		    .filter-list {

      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 2.5rem 0 2rem 0; /* match armoury spacing */

      @media screen and (max-width: 768px) {
        flex-wrap: nowrap;
        overflow: auto;
        margin-right: -20px;
        margin-left: -20px;
        padding-left: 20px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::-webkit-scrollbar { 
          display: none;
        }
      }

      .filter-item {
        padding: 0.4rem 1.4rem;
        border: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 0.7rem;
        text-transform: uppercase;
        font-family: var(--heading-font-family);
        letter-spacing: 0.16em;
        border-radius: 0;
        cursor: pointer;
        transition: 0.2s all;
        color: #f5f5f5;
        opacity: 1;

        @media screen and (max-width: 768px) {
          white-space: nowrap;
        }

        &.active {
          background: #ffffff;
          color: #000000;
        }

        &:hover {
          border-color: #ffffff;
        }
      }

    }

		.step-blocks {

			display: flex;
			flex-wrap: wrap;
			margin: 0 -10px;

			&.initialised {

				.block {
					opacity: .2;
					&:hover {
						opacity: 1;
					}
				}

			}

			.block {

				width: 25%;
				padding:0 10px 20px 10px;
				cursor: pointer;
				transition: .3s all;
				position: relative;

				&::after {

					content:'';
					position: absolute;
					top: 10px;
					right: 20px;
					width: 30px;
					height: 30px;
					background: url('icon-checked-black.svg') no-repeat center center / 20px var(--primary);
					border: 1px solid #000;
					opacity: 0;
					transition: .3s all;

				}

				.img-container {

					width: 100%;
					border: 2px solid transparent;
					transition: .3s all;

					img {
						aspect-ratio: 1/1;
						width: 100%;
						display: block;
						object-fit: cover;
					}

				}

				span {
					text-align: center;
					display: block;
					width: 100%;
					margin: 10px 0 0 0;
					text-transform: uppercase;
					font-size: 12px;
					letter-spacing: 2px;
					font-family: var(--heading-font-family);
					transition: .3s all;
				}

				&:hover {
					.img-container {
						border-color: var(--primary);
					}
					span {
						color: var(--primary);
					}
				}

				&.selected {
					opacity: 1;
					&::after {
						opacity: 1;
					}
					.img-container {
						border-color: var(--primary);
					}
					span {
						color: var(--primary);
					}
				}

			}

			&.step-product-grid {

				.block {

					.card-config-product {

						.media-container {

							width: 100%;
							transition: .3s all;
							position: relative;
							background: var(--primary);
							transition: .3s all;

							.variant-swatches {

								position: absolute;
								z-index: 3;
								bottom: 10px;
								right: 10px;
								display: flex;
								gap: 4px;
								transition: .3s all;

								.swatch {

									width:15px;
									height: 15px;

								}

							}

							img {
								aspect-ratio: 1/1.3;
								width: 100%;
								display: block;
								object-fit: cover;
								transition: .3s opacity;
								&.hover-img {
									position: absolute;
									top:0;
									left: 0;
									width: 100%;
									height: 100%;
									opacity: 0;
								}
							}

							.button-container {
								background: var(--primary);
								color: #000;
								text-transform: uppercase;
								font-size: 12px;
								letter-spacing: 2px;
								font-family: var(--heading-font-family);
								transition: .3s all;
								padding: 8px 20px;
								position: absolute;
								z-index: 2;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								border-radius: 2px;
								opacity: 0;
								white-space: nowrap;
								transition: .3s opacity;
							}

							&:hover {
								.variant-swatches {
									opacity: 0;
								}
								img {
									opacity: .8;
								}
								.button-container {
									opacity: 1;
								}
							}

							&.enable_hover_img {
								&:hover {
									img {
										opacity: 0;
										&.hover-img {
											opacity: .8;
										}
									}
								}
							}

						}

						.p-flex {

							display: flex;
							justify-content: space-between;

							span {
								text-align: unset;
								width: unset;
								&.price {
									opacity: .5;
								}
							}

						}

					}

					&.selected {

						opacity: 1;

						.card-config-product {
							.media-container {
								border: 2px solid transparent;
							}
							.p-flex {
								color: var(--primary);
							}
						}

					}

				}

			}

		}

		&.step-two {

			.step-blocks {


				&.visible {
					display: flex;
				}

			}

		}

		&.step-three {

			@media screen and (max-width: 768px) {
				position: relative;
			}

			.container {

				position: relative;
				@media screen and (max-width: 768px) {
					position: static;
				}

				.discount-message {
					position: absolute;
					top:0;
					right:0;
					font-size: 12px;
					background: var(--primary);
					color: #000;
					line-height: 1;
					padding: 8px 20px;
					border-radius: 2px;
					max-width: 320px;
					font-family: var(--heading-font-family);
					letter-spacing: 1px;
					text-transform: uppercase;
					@media screen and (max-width: 768px) {
						position: sticky;
						top: calc(100% - 36px);
						width: calc(100% + 40px);
						max-width: unset;
						text-align: center;
						border-radius: 0;
						margin: 0 -20px;
						z-index: 2;
						padding: 12px 20px;
					}
				}

				.patch-grid {

					@media screen and (max-width: 768px) {
						padding-bottom: 40px !important;
					}

					.block {

						width: 20%;

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

							width: 33.3%;

							@media screen and (max-width: 768px) {
								width: 50%;
							}

						}

						.card-config-patch {

							.media-container {

								width: 100%;

								img {
									aspect-ratio: 1/1;
									display: block;
									object-fit: contain;
								}

							}

							.p-flex {

								text-align: center;

								.custom-checkbox {

									width: 22px;
									height: 22px;
									border: 1px solid #fff;
									opacity: .3;
									margin: 0 auto;
									position: relative;
									transition: .2s all;

									&::after {
										content:'';
										position: absolute;
										top: 50%;
										left: 50%;
										width: 12px;
										height: 12px;
										transform: translate(-50%, -50%);
										transition: .2s all;
									}

								}

								.price {

									display: flex;
									justify-content: center;

									span {
										width: unset;
									}

									.discounted-price {
										color: var(--primary);
										margin-left: 10px;
									}

								}

							}

							&.selected {

								.p-flex {
									.custom-checkbox {
										border-color: var(--primary);
										opacity: 1;
										&::after {
											background: var(--primary);
										}
									}
									span {
										color: var(--primary);
									}
								}

							}

						}

						.config-patch-link {
  text-decoration: underline;
  /* HIDE in configurator by default */
  display: none;
  text-align: center;
  margin-top: 8px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  font-family: var(--heading-font-family);
  opacity: .6;
}

						&.filtered {
							display: none;
						}

					}

					&.discounted {

						.block {
							.price {
								span:not(.discounted-price){
									color: #fff;
									text-decoration:line-through;
									opacity: .5;
								}
							}
						}

					}

				}

			}

		}

	}

	#summary {

		width: 100%;
		padding: 40px 0;

		.section-title {
			text-transform: uppercase;
			font-size: 18px;
			font-family: var(--heading-font-family);
			letter-spacing: 2px;
			margin: 0 0 40px 0;
			text-align: center;
			@media screen and (max-width: 768px) {
				text-align: left;
				margin: 0 0 20px 0;
			}
		}

		.product-summary {

			position: relative;

			@media screen and (max-width: 768px) {
				width: 100%;
			}

			&::after {
				content:'';
				position: absolute;
				top: 100%;
				left: 50%;
				width: 1px;
				height: 44px;
				background: rgba(255,255,255,.2);
			}

		}

		.product-summary,
		.patch-summary {

			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin: 0 0 44px 0;

			.product-summary--card {

				border: 1px solid rgba(255,255,255,.2);
				padding: 16px;
				display: flex;
				align-items: center;
				width: 300px;
				min-width: 300px;
				gap: 20px;
				transition: .3s all;
				position: relative;

				@media screen and (max-width: 768px) {
					width: 100%;
					min-width: 100%;
					padding: 10px;
				}

				.icon-close {

					position: absolute;
					top: -10px;
					right: -10px;
					width: 20px;
					height: 20px;
					background: url('icon-close.svg') no-repeat center center / 10px #111;
					border: 1px solid #fff;
					border-radius: 50%;
					cursor: pointer;


				}

				&:hover {
					border-color: #fff;
				}

				.img {

					width: 90px;
					min-width: 90px;

				}

				.product-summary--meta {
					* {
						font-size: 12px;
						text-transform: uppercase;
						font-family: var(--heading-font-family);
						letter-spacing: 2px;
					}
					.price {
						opacity: .5;
					}
				}

			}

		}

		.patch-summary {
			gap: 10px;
			@media screen and (max-width: 768px) {
				margin-bottom: 20px;
				width: 100%;
				.product-summary--card {
					width: 100%;
					min-width: 100%;
					position: relative;
					&::after {
						content:'';
						position: absolute;
						top: calc(100% + 1px);
						left: 50%;
						width: 1px;
						height: 10px;
						background: rgba(255,255,255,.2);
					}
				}
			}
		}

		.summary-content {

			text-align: center;

			@media screen and (max-width: 768px) {
				text-align: left;
			}

			p {

				margin: 0 0 7px 0;
				color: #fff;

				&:not(.summary-content--shipping) {
					font-family: var(--heading-font-family);
					letter-spacing: 2px;
					text-transform: uppercase;
					font-size: 18px;
				}

				&.summary-content--shipping {
					margin: 22px 0 0 0;
					opacity: .6;
				}

				span {
					font-weight: 600;
				}

			}

			.button {

				margin-top: 20px;
				background: transparent;
				border-radius: 0;
				border: 1px solid #fff;
				text-transform: uppercase;
				color: #fff;
				transition: .3s all;

				@media screen and (max-width: 768px) {
					width: 100%;
					text-align: center;
				}

				&:hover {
					background: #fff;
					color: #000;
				}

			}

		}

	}

}

.config-visible {
	display: none;
}

.rc-read-more {
	margin-top: 20px;
	a {
		text-transform: uppercase;
		text-decoration: underline;
		font-family: var(--heading-font-family);
		letter-spacing: 2px;
	}
}

.order-summary__body {
	.patch_upsell {
        font-size: 12px;
        margin: 12px 0 0 0;
        background: rgba(255, 255, 255, .1);
        border-radius: 4px;
        padding: 10px 14px;
	}
}

.cart-drawer__items {
	.patch_upsell {
        font-size: 12px;
        margin: 12px 0 0 0;
        background: rgba(255, 255, 255, .1);
        border-radius: 4px;
        padding: 10px 14px;
	}
}

.text-on-sale {
	color: var(--primary);
}

.discount-badge {
	background: var(--primary);
	color: #000;
	* {
		color: #000;
	}
}

body .bon-body {

	h1, h2, h3, h4, h5, h6,
	.how-work-child span,
	.title-block,
	.label-column-vip-tier span {
		font-family: var(--heading-font-family) !important;
		text-transform: uppercase;
	}
	p, li , label {
		font-family: var(--text-font-family) !important;
	}
	.content {
		h1, h2, h3, h4, h5, h6 {
			font-family: var(--heading-font-family) !important;
			text-transform: uppercase;
		}
	}
	.bon-btn {
		border-radius: 4px;
		font-size: 13px;
		letter-spacing: var(--button-letter-spacing);
		text-transform: uppercase;
	}
	.progress-viptier-custom, .order-booster-container-div {
		border-radius: 0;
	}
	.bon-progress {
		overflow: visible;
	}
	.bon-text-vip-tier {
		font-size: 14px;
	}
	.bon-modal-content {
		background: #000;
	}
	.bon-profile-item {
		background: #000;
	}

}

/* MOBILE: Make discount message sit above Select patches */
@media (max-width: 749px) {
  .product-configurator .discount-message {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: block !important;
    width: 100% !important;
    margin: 20px 0 10px 0 !important;
    text-align: center !important;
  }
}

/* --- WRAITHX: Align "VIEW PRODUCT" buttons on mobile --- */
@media (max-width: 749px) {

  /* Make each product card a full-height column */
  .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Make the info area a flex column so we can push the button down */
  .product-card__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  /* Reserve space for two lines of title text */
  .product-card__title,
  .product-card .h5,
  .product-card .product-title {
    line-height: 1.2;
    min-height: 2.4em;  /* approx two lines */
    display: block;
  }

  /* Keep button aligned at the bottom */
  .product-card__inline-quick-add {
    margin-top: auto;
  }
}

/* Armoury: hide filtered-out patches */
.patch-grid .block.filtered {
  display: none !important;
}

/* ARMOURY: nicer mobile layout for badge grid */
@media (max-width: 749px) {
  /* Use 2-column grid on mobile */
  .patch-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 2.5rem;
  }

  .patch-grid .block {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Standard for rectangular 4x2 and 3x1 badges */
.product-card--rectangle .product-card__media img {
  height: 130px;
  object-fit: contain;
}

/* Standard for round / square badges */
.product-card--square .product-card__media img,
.product-card--round .product-card__media img {
  height: 160px;
  object-fit: contain;
}

/* REMOVE VIEW BADGE DETAILS from CONFIGURATOR only */
.product-configurator .card-config-patch .config-patch-link,
.product-configurator .config-patch-link.wraithx-badge-btn {
    display: none !important;
}