/* Single product */
.prewebsite-product {
	padding-block: 28px 80px;
}

.prewebsite-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-breadcrumb a {
	color: var(--prewebsite-color-text-50);
	transition: color var(--prewebsite-transition);
}

.prewebsite-breadcrumb a:hover {
	color: var(--prewebsite-color-primary);
}

.prewebsite-product__top {
	display: grid;
	/* minmax(0, …): a plain 1fr will not shrink below its content, and a long
	   row of thumbnails would widen the gallery, grow the square stage with it
	   and push the summary off the page. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	margin-block-start: 28px;
	align-items: start;
}

/* Gallery: one stage with the slides stacked, thumbnails beneath. */
.prewebsite-product__gallery {
	position: relative;
	order: 0;
	min-inline-size: 0;
}

.prewebsite-product__badge {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 46px;
	block-size: 28px;
	padding-inline: 10px;
	border-radius: 14px;
	background: var(--prewebsite-color-accent);
	font-size: 14px;
	font-weight: 700;
	color: var(--prewebsite-color-surface);
}

.prewebsite-product__stage {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: 30px;
	background: var(--prewebsite-color-tint-1);
	aspect-ratio: 1;
}

.prewebsite-product__slide {
	grid-area: 1 / 1;
	transition: opacity 320ms var(--prewebsite-transition-ease, ease);
}

.prewebsite-product__slide[aria-hidden="true"] {
	opacity: 0;
	pointer-events: none;
}

.prewebsite-product__slide img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.prewebsite-product__thumbs {
	display: flex;
	gap: 12px;
	margin-block-start: 14px;
	overflow-x: auto;
	scrollbar-width: none;
}

.prewebsite-product__thumbs::-webkit-scrollbar {
	display: none;
}

.prewebsite-product__thumb {
	display: block;
	flex: none;
	inline-size: 84px;
	block-size: 84px;
	overflow: hidden;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: 16px;
	background: var(--prewebsite-color-tint-1);
	transition: border-color var(--prewebsite-transition);
}

.prewebsite-product__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.prewebsite-product__thumb[aria-selected="true"] {
	border-color: var(--prewebsite-color-primary);
	border-width: 2px;
}

/* Summary */
.prewebsite-product__summary {
	order: 1;
	padding-block-start: 6px;
}

.prewebsite-product__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--prewebsite-color-text-50);
	transition: color var(--prewebsite-transition);
}

.prewebsite-product__eyebrow:hover {
	color: var(--prewebsite-color-primary);
}

.prewebsite-product__title {
	margin-block-start: 10px;
	font-size: 30px;
	font-weight: 700;
	line-height: 44px;
	color: var(--prewebsite-color-text);
}

.prewebsite-product__excerpt {
	margin-block-start: 14px;
	font-size: 16px;
	line-height: 32px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-product__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-block-start: 24px;
	padding-block: 18px;
	border-block: 1px solid var(--prewebsite-color-trim-30);
}

.prewebsite-product__price-old {
	font-size: 16px;
	font-weight: 700;
	color: var(--prewebsite-color-text-30);
}

.prewebsite-product__price-now {
	font-size: 30px;
	font-weight: 700;
	color: var(--prewebsite-color-accent);
}

.prewebsite-product__price-unit {
	font-size: 18px;
	font-weight: 700;
	color: var(--prewebsite-color-text);
}

.prewebsite-product__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-block-start: 24px;
}

/* The variation swatches take a row of their own above the controls. */
.prewebsite-product__options {
	flex: 1 1 100%;
}

.prewebsite-product__qty {
	display: flex;
	align-items: center;
	flex: none;
	block-size: 52px;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: 26px;
	overflow: hidden;
}

.prewebsite-product__qty-step {
	inline-size: 42px;
	block-size: 100%;
	font-size: 18px;
	color: var(--prewebsite-color-text);
	transition: background-color var(--prewebsite-transition);
}

.prewebsite-product__qty-step:hover {
	background: var(--prewebsite-color-tint-1);
}

.prewebsite-product__qty-input {
	inline-size: 46px;
	block-size: 100%;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: var(--prewebsite-color-text);
	appearance: textfield;
}

.prewebsite-product__qty-input::-webkit-outer-spin-button,
.prewebsite-product__qty-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.prewebsite-product__add {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	block-size: 52px;
	border-radius: 26px;
	background: var(--prewebsite-color-primary);
	font-size: 16px;
	font-weight: 700;
	color: var(--prewebsite-color-surface);
	transition: background-color var(--prewebsite-transition);
}

/* The try-on opener sits under the buy row, in the primary colour. */
.prewebsite-product__tryon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 14px;
	block-size: 48px;
	padding-inline: 22px;
	border: 1px solid var(--prewebsite-color-primary);
	border-radius: 24px;
	background: var(--prewebsite-color-surface);
	color: var(--prewebsite-color-primary);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--prewebsite-transition), color var(--prewebsite-transition);
}

.prewebsite-product__tryon:hover {
	background: var(--prewebsite-color-primary);
	color: var(--prewebsite-color-surface);
}

.prewebsite-product__add:hover {
	background: var(--prewebsite-color-primary-light);
}

.prewebsite-product__add[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}

.prewebsite-product__wish {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: 50%;
	color: var(--prewebsite-color-text);
	transition:
		background-color var(--prewebsite-transition),
		color var(--prewebsite-transition);
}

.prewebsite-product__wish:hover,
.prewebsite-product__wish[aria-pressed="true"] {
	background: var(--prewebsite-color-accent);
	border-color: var(--prewebsite-color-accent);
	color: var(--prewebsite-color-surface);
}

.prewebsite-product__out {
	margin-block-start: 24px;
	padding: 16px 20px;
	border-radius: 16px;
	background: var(--prewebsite-color-tint-1);
	font-weight: 700;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-product__meta {
	display: grid;
	gap: 10px;
	margin-block-start: 26px;
	font-size: 14px;
}

.prewebsite-product__meta li {
	display: flex;
	gap: 8px;
}

.prewebsite-product__meta-label {
	flex: none;
	inline-size: 80px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-product__meta-value a {
	color: var(--prewebsite-color-text);
}

.prewebsite-product__meta-value a:hover {
	color: var(--prewebsite-color-primary);
}

/* Tabs */
.prewebsite-product__tabs {
	margin-block-start: 64px;
}

.prewebsite-product__tabs .prewebsite-tabs__list {
	justify-content: flex-start;
	margin-block-start: 0;
	border-block-end: 1px solid var(--prewebsite-color-trim-30);
}

.prewebsite-product__panel {
	margin-block-start: 28px;
	font-size: 16px;
	line-height: 34px;
	color: var(--prewebsite-color-text);
}

.prewebsite-product__specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 40px;
	max-inline-size: 860px;
}

.prewebsite-product__specs > div {
	display: flex;
	gap: 12px;
	padding-block: 12px;
	border-block-end: 1px solid var(--prewebsite-color-trim-30);
}

.prewebsite-product__specs dt {
	flex: none;
	inline-size: 130px;
	font-size: 14px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-product__specs dd {
	font-size: 14px;
	font-weight: 700;
}

.prewebsite-product__related {
	margin-block-start: 72px;
}

.prewebsite-product__related .prewebsite-product-grid {
	margin-block-start: 40px;
}

@media (max-width: 1023px) {
	.prewebsite-product__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.prewebsite-product__gallery {
		order: 0;
	}

	.prewebsite-product__summary {
		order: 1;
	}

	.prewebsite-product__specs {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.prewebsite-product {
		padding-block: 20px 48px;
	}

	.prewebsite-product__title {
		font-size: 22px;
		line-height: 34px;
	}

	.prewebsite-product__excerpt {
		font-size: 14px;
		line-height: 28px;
	}

	.prewebsite-product__price-now {
		font-size: 24px;
	}

	.prewebsite-product__stage {
		border-radius: 20px;
	}

	.prewebsite-product__thumb {
		inline-size: 64px;
		block-size: 64px;
		border-radius: 12px;
	}

	.prewebsite-product__buy {
		flex-wrap: wrap;
	}

	.prewebsite-product__add {
		order: 3;
		flex-basis: 100%;
	}

	.prewebsite-product__panel {
		font-size: 14px;
		line-height: 30px;
	}
}

/* Rating, options, assurance and reviews */
.prewebsite-product__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 10px;
	font-size: 13px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--prewebsite-color-trim-30);
}

.prewebsite-stars__star.is-on {
	color: #fbbc05;
}

.prewebsite-product__options {
	display: grid;
	gap: 16px;
	margin-block-end: 4px;
}

.prewebsite-product__option-label {
	display: block;
	margin-block-end: 8px;
	font-size: 13px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-product__option-values {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.prewebsite-product__swatch input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
}

.prewebsite-product__swatch span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 56px;
	block-size: 40px;
	padding-inline: 14px;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--prewebsite-color-text);
	cursor: pointer;
	transition:
		background-color var(--prewebsite-transition),
		border-color var(--prewebsite-transition),
		color var(--prewebsite-transition);
}

.prewebsite-product__swatch input:checked + span {
	background: var(--prewebsite-color-primary);
	border-color: var(--prewebsite-color-primary);
	color: var(--prewebsite-color-surface);
}

.prewebsite-product__swatch input:focus-visible + span {
	outline: 2px solid var(--prewebsite-color-primary);
	outline-offset: 2px;
}

.prewebsite-product__swatch input:disabled + span {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Available, but not with what is already chosen: picking it drops the clash. */
[data-prewebsite-variations] input[data-conflict] + span {
	border-style: dashed;
	opacity: 0.6;
}

/* Three dots while a request is in flight: calmer than a spinner and it reads
   as "working" rather than "loading". */
.prewebsite-product__add,
.prewebsite-review-form__submit {
	position: relative;
}

.prewebsite-product__add[aria-busy="true"] .prewebsite-icon,
.prewebsite-product__add[aria-busy="true"] span,
.prewebsite-review-form__submit[aria-busy="true"] {
	color: transparent;
}

.prewebsite-product__add[aria-busy="true"] .prewebsite-icon {
	visibility: hidden;
}

.prewebsite-product__add[aria-busy="true"]::after,
.prewebsite-review-form__submit[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 6px;
	block-size: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	color: var(--prewebsite-color-surface);
	animation: prewebsite-dots 1s ease-in-out infinite;
}

@keyframes prewebsite-dots {
	0%,
	80%,
	100% {
		box-shadow:
			14px 0 0 -1px currentColor,
			0 0 0 -1px currentColor,
			-14px 0 0 -1px currentColor;
	}

	20% {
		box-shadow:
			14px 0 0 1px currentColor,
			0 0 0 -1px currentColor,
			-14px 0 0 -1px currentColor;
	}

	40% {
		box-shadow:
			14px 0 0 -1px currentColor,
			0 0 0 1px currentColor,
			-14px 0 0 -1px currentColor;
	}

	60% {
		box-shadow:
			14px 0 0 -1px currentColor,
			0 0 0 -1px currentColor,
			-14px 0 0 1px currentColor;
	}
}

.prewebsite-review-form__notice {
	margin-block-start: 14px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 700;
}

.prewebsite-review-form__notice[data-tone="ok"] {
	background: color-mix(in srgb, var(--prewebsite-color-primary) 10%, transparent);
	color: var(--prewebsite-color-primary);
}

.prewebsite-review-form__notice[data-tone="error"] {
	background: rgba(200, 162, 160, 0.18);
	color: var(--prewebsite-color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.prewebsite-product__add[aria-busy="true"]::after,
	.prewebsite-review-form__submit[aria-busy="true"]::after {
		animation-duration: 2.5s;
	}
}

.prewebsite-product__assurance {
	display: grid;
	gap: 12px;
	margin-block-start: 24px;
	padding: 16px 18px;
	border: 1px solid var(--prewebsite-color-trim-30);
	border-radius: 18px;
	background: var(--prewebsite-color-tint-1);
}

.prewebsite-product__assurance li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.prewebsite-product__assurance-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: var(--prewebsite-color-trim);
	color: var(--prewebsite-color-primary);
}

.prewebsite-product__assurance strong {
	display: block;
	font-size: 13px;
	color: var(--prewebsite-color-text);
}

.prewebsite-product__assurance em {
	display: block;
	font-size: 11px;
	font-style: normal;
	color: var(--prewebsite-color-text-50);
}

/* Reviews */
.prewebsite-reviews-panel__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--prewebsite-color-trim-30);
	border-radius: 20px;
}

.prewebsite-reviews-panel__score {
	font-size: 32px;
	font-weight: 700;
	color: var(--prewebsite-color-primary);
}

.prewebsite-reviews-panel__summary em {
	display: block;
	margin-block-start: 4px;
	font-size: 12px;
	font-style: normal;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-reviews-panel__list {
	display: grid;
	gap: 18px;
	margin-block-start: 24px;
}

.prewebsite-review {
	display: flex;
	gap: 12px;
	padding-block-end: 18px;
	border-block-end: 1px solid var(--prewebsite-color-trim-30);
}

.prewebsite-avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: hsl(var(--prewebsite-avatar-hue) 30% 90%);
	font-size: 16px;
	font-weight: 700;
	color: hsl(var(--prewebsite-avatar-hue) 40% 32%);
}

.prewebsite-review__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-review__author {
	font-weight: 700;
	color: var(--prewebsite-color-text);
}

.prewebsite-review__text {
	margin-block-start: 6px;
	font-size: 14px;
	line-height: 28px;
}

.prewebsite-reviews-panel__empty {
	padding-block: 24px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-review-form {
	margin-block-start: 28px;
	padding: 22px;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: 22px;
}

.prewebsite-review-form__title {
	font-size: 16px;
	font-weight: 700;
}

.prewebsite-review-form__rating {
	margin-block-start: 16px;
	border: 0;
	padding: 0;
}

.prewebsite-review-form__rating legend {
	margin-block-end: 8px;
	font-size: 13px;
	color: var(--prewebsite-color-text-50);
}

/* Laid out in reverse so a hover lights every star up to the cursor. */
.prewebsite-rating-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.prewebsite-rating-input input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
}

.prewebsite-rating-input label {
	color: var(--prewebsite-color-trim-30);
	cursor: pointer;
	transition: color var(--prewebsite-transition);
}

.prewebsite-rating-input input:checked ~ label,
.prewebsite-rating-input label:hover,
.prewebsite-rating-input label:hover ~ label {
	color: #fbbc05;
}

.prewebsite-rating-input input:focus-visible + label {
	outline: 2px solid var(--prewebsite-color-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.prewebsite-review-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-block-start: 16px;
}

.prewebsite-review-form label span {
	display: block;
	margin-block-end: 6px;
	font-size: 13px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-review-form__field {
	display: block;
	margin-block-start: 16px;
}

.prewebsite-review-form input[type="text"],
.prewebsite-review-form input[type="email"],
.prewebsite-review-form textarea {
	inline-size: 100%;
	padding: 12px 16px;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: 16px;
	background: var(--prewebsite-color-surface);
	font-family: inherit;
	font-size: 14px;
	color: var(--prewebsite-color-text);
	resize: vertical;
}

.prewebsite-review-form input:focus-visible,
.prewebsite-review-form textarea:focus-visible {
	outline: 2px solid var(--prewebsite-color-primary);
	outline-offset: 1px;
}

.prewebsite-review-form__submit {
	margin-block-start: 18px;
	block-size: 46px;
	padding-inline: 30px;
	border-radius: 23px;
	background: var(--prewebsite-color-primary);
	font-size: 14px;
	font-weight: 700;
	color: var(--prewebsite-color-surface);
	transition: background-color var(--prewebsite-transition);
}

.prewebsite-review-form__submit:hover {
	background: var(--prewebsite-color-primary-light);
}

@media (max-width: 767px) {
	/* The buy controls read better as one block on a narrow screen. */
	.prewebsite-product__buy {
		gap: 10px;
		padding: 14px;
		border: 1px solid var(--prewebsite-color-trim-30);
		border-radius: 22px;
		background: var(--prewebsite-color-tint-1);
	}

	.prewebsite-product__qty,
	.prewebsite-product__wish {
		background: var(--prewebsite-color-surface);
	}

	.prewebsite-product__qty {
		flex: 1 1 auto;
		justify-content: space-between;
	}

	.prewebsite-product__add {
		order: 3;
		block-size: 50px;
	}

	.prewebsite-product__assurance {
		grid-template-columns: 1fr;
	}

	.prewebsite-review-form__row {
		grid-template-columns: 1fr;
	}

	.prewebsite-review-form {
		padding: 18px;
	}
}

/* How many are left, under the price; hidden until there is a count. */
.prewebsite-product__stock {
	margin-block-start: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-product__stock[hidden] {
	display: none;
}