/*
 * Stylesheet documented for readability and maintenance.
 */

.attr-inline {
		margin-left: .35rem;
		font-weight: 600;
	}

	.attr-swatch-group {
		margin: 10px 0;
		display: flex;
		gap: 7px;
		flex-wrap: wrap;
	}

	.attr-swatch {
		min-width: 42px;
		min-height: 38px;
		padding: 0 10px;
		border: 2px solid #ddd;
		border-radius: 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		cursor: pointer;
		background: #fff;
		transition: all .15s ease;
	}

	.attr-swatch.is-selected {
		border-color: #000;
		box-shadow: 0 0 0 1px #000 inset;
	}

	.attr-swatch.is-disabled {
		opacity: .4;
		pointer-events: none;
		text-decoration: line-through;
	}

	.attr-swatch--color {
		width: 32px;
		height: 32px;
		padding: 0;
		/* border-radius: 50%; */
		overflow: hidden;
		text-indent: -9999px;
	}

	.variations select.is-hidden {
		position: absolute !important;
		left: -9999px !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
	}

	/* Ensures the theme does not hide WooCommerce tabs. */
	.woocommerce-tabs,
	.wc-tabs-wrapper {
		display: block;
	}

	/* ===== Badges in the top-left corner of the main product image ===== */

	.product-gallery {
		position: relative;
	}

	.product-badges {
		position: absolute;
		top: 10px;
		left: 10px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		z-index: 5;
	}

	.product-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.product-badge {
		display: inline-block;
		padding: 0.5rem 1rem;
		font-weight: 700;
		font-size: 0.85rem;
		line-height: 1;
		border-radius: 0.35rem;
		border: 1px solid transparent;
		text-transform: uppercase;
	}

	.product-badge--new {
		background: #ffffff;
		border-color: #b3b3b3;
		color: #3b3b3b;
	}

	.product-badge--sale {
		background: #e63946;
		border-color: #992630;
		color: #ffffff;
	}

	.product-badge--discount {
		background: #38CB89;
		border-color: #248056;
		color: #ffffff;
	}

	/* ===== Show more / less colors (or options) ===== */

	.attr-swatch-group.is-collapsed .attr-swatch.is-extra-option {
		display: none;
	}

	.attr-swatch-toggle {
		margin-top: 6px;
		font-size: 12px;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		text-decoration: underline;
	}

	.attr-swatch-toggle:hover {
		text-decoration: none;
	}

	.attr-swatch-toggle:focus {
		outline: 1px dotted #000;
		outline-offset: 2px;
	}

	/* ===== Gradient fade at the bottom when there are extra colors ===== */
	.attr-swatch-group.has-gradient {
		position: relative;
	}

	.attr-swatch-group.has-gradient.is-collapsed::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		/* altura do fade */
		background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.attr-swatch-group.has-gradient.is-expanded::after {
		opacity: 0;
	}

<?php if ( get_option('bwear_enable_colored', '0') !== '1' ) : ?>
	.attr-swatch--color {
		width: auto;
		height: auto;
		text-indent: 0;
		overflow: visible;
		padding: 0 10px;
	}

	.attr-swatch {
		padding: 0 10px;
	}
<?php endif; ?>