@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&display=swap');

.alan-sans-400 {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body {
	font-family: "Alan Sans", sans-serif;
}

.product-single__meta {

	.product-block {

		.ready-to-ship-block {

			text-align: center;
			text-transform: uppercase;
			border-radius: 2px;
			padding: 6px 10px;
			font-size: 14px;
			display: none;
			margin: 0 0 16px 0;
			font-family: var(--typeBasePrimary),var(--typeBaseFallback);

			&.active {
				display: block;
			}

		}

		.linked-hats-row {
			display: flex;
			justify-content: flex-start;
			gap: 4px;
			flex-wrap: nowrap;
			padding: 20px 0 0 0;
			position: relative;
		}

		.linked-hat-thumb {

			flex: 1 1 0;
			max-width: 110px;
			padding: 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: border-color 0.2s ease, box-shadow 0.2s ease;

			.color-label {
				position: absolute;
				top: -10px;
				left: 0;
				font-size: 14px;
				white-space: nowrap;
				opacity: 0;
				transition: .2s all;
			}

			&:hover {
				.color-label {
					opacity: 1;
				}
			}

		}

		.linked-hat-thumb.active-hat {
			border-color: #000000;
			box-shadow: 0 0 0px rgba(0, 0, 0, 0.2);
		}
		.linked-hat-image {
			width: 100%;
			height: auto;
			border: 1px solid #000000;
			border-radius: 6px;
		}

	}

}

#variant_button_overrides {
	display: none;
}

.collapsible-trigger-btn--borders,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner,
.collapsibles-wrapper--border-bottom {
	border: none;
}

.product-block--tab {
	.collapsible-trigger-btn--borders {
		text-align: left;
	}
}

.product-section {

	position: relative;

	#sticky-add-to-cart {

		display: none;

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

			display: block;
			position: fixed;
			z-index: 9999;
			bottom: -300px;
			left: 0;
			width: 100%;
			background: #fff;
			text-align: left;
			padding: 20px;
			border-top: 1px solid #ccc;
			transition: .3s all;

			&.scrolled {
				bottom: 0;
			}

			.sticky--product-title {
				margin: 0 0 10px 0;
				.variant-data {
					position: relative;
					&::before {
						content: '/ ';
					}
				}
			}

			.sticky--add-to-bag {

				color: #fff;
				background: #000;
				display: block;
				width: 100%;
				text-align: center;
				padding: 14px 20px;
				text-transform: uppercase;
				font-size: 14px;

			}

		}

	}

}