/**
 * Product page blocks (artboard 03): gallery, badges and rating, stock,
 * "Best for ages", structured sections, trust ticks, add to cart, mobile
 * sticky bar, added-to-cart toast. Tokens only; logical properties only.
 */

/* Gallery ---------------------------------------------------------------- */
.pc-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-inline-size: 0;
}

.pc-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--radius-panel);
	background-color: var(--color-surface);
	aspect-ratio: 1 / 1;
}

.pc-gallery__track::-webkit-scrollbar {
	display: none;
}

.pc-gallery__track:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.pc-gallery__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.pc-gallery__img,
.pc-gallery__slide img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.pc-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-gallery__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--radius-card);
	background-color: var(--color-surface);
}

.pc-gallery__thumb[aria-current="true"] {
	border-color: var(--color-brand);
}

.pc-gallery__thumb:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.pc-gallery__thumb-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

@media (max-width: 781px) {
	.pc-gallery__track {
		border-radius: var(--radius-card);
	}

	.pc-gallery__thumbs {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-2);
	}
}

/* Badges, rating, stock ---------------------------------------------------- */
.pc-product-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.pc-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-ink);
	font-size: var(--font-size-small);
	text-decoration: none;
}

.pc-rating:hover .pc-rating__count {
	text-decoration: underline;
}

.pc-product-stock {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
}

.pc-product-stock p {
	margin: 0;
}

.pc-product-stock__price .pc-price {
	font-family: var(--font-heading);
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
}

/* Best for ages ------------------------------------------------------------ */
.pc-facts {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pc-facts__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-body);
	font-weight: 700;
}

.pc-facts__bands {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-facts__band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--space-2);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-input);
	background-color: var(--color-card);
	color: var(--color-ink-muted);
	text-align: center;
}

.pc-facts__band--ideal {
	border-color: var(--color-brand);
	background-color: var(--color-brand);
	color: var(--color-ink);
}

.pc-facts__band--great {
	background-color: var(--color-surface);
	color: var(--color-ink);
}

.pc-facts__age {
	font-weight: 700;
}

.pc-facts__fit {
	font-size: var(--font-size-label);
	line-height: var(--line-height-label);
}

.pc-facts__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin: 0;
	color: var(--color-ink);
	font-size: var(--font-size-small);
}

/* Sections ----------------------------------------------------------------- */
.pc-product-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pc-product-section__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
}

.pc-product-section__body > :first-child {
	margin-block-start: 0;
}

.pc-product-section__body > :last-child {
	margin-block-end: 0;
}

.pc-product-section__list,
.pc-product-section__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding-inline-start: var(--space-5);
}

.pc-product-section__steps li::marker {
	color: var(--color-brand-strong);
	font-weight: 700;
}

/* Ticks (trust lines) ------------------------------------------------------ */
.pc-ticks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-ink);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.pc-ticks li {
	position: relative;
	padding-inline-start: var(--space-5);
}

.pc-ticks li::before {
	content: "✓" / "";
	position: absolute;
	inset-inline-start: 0;
	color: var(--color-trust);
	font-weight: 700;
}

/* Add to cart --------------------------------------------------------------- */
.pc-atc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.pc-atc__button {
	flex: 1 1 240px;
}

.pc-atc.is-busy .pc-atc__button {
	opacity: 0.8;
}

.pc-atc__note,
.pc-atc__status {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--font-size-small);
}

.pc-atc__note {
	color: var(--color-cta-strong);
	font-weight: 600;
}

.pc-atc__status:not(.is-error) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pc-atc__status.is-error {
	color: var(--color-error);
}

.pc-atc__status:empty {
	display: none;
}

/* Sticky add-to-cart bar (mobile only) ------------------------------------- */
.pc-sticky-atc {
	display: none;
}

@media (max-width: 781px) {
	.pc-sticky-atc {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 90;
		display: block;
		padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
		border-block-start: var(--border-width) solid var(--color-line);
		background-color: var(--color-bg);
		box-shadow: var(--shadow-soft);
		transition: transform var(--motion-fast);
	}

	.pc-sticky-atc.is-hidden {
		transform: translateY(110%);
	}

	body.pc-has-sticky-bar {
		padding-block-end: calc(var(--touch-target) + var(--space-7));
	}
}

.pc-sticky-atc__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.pc-sticky-atc__price {
	display: flex;
	flex-direction: column;
	margin: 0;
	white-space: nowrap;
}

.pc-sticky-atc__label {
	color: var(--color-ink-muted);
	font-size: var(--font-size-label);
}

.pc-sticky-atc__price .pc-price {
	font-size: var(--font-size-h3);
}

.pc-sticky-atc__button {
	flex: 1;
	min-inline-size: 0;
}

/* Added-to-cart toast ------------------------------------------------------ */
.pc-toast {
	position: fixed;
	inset-block-start: calc(var(--header-height, 72px) + var(--space-3));
	inset-inline-end: var(--gutter);
	z-index: 100;
	inline-size: min(380px, calc(100vw - 2 * var(--gutter)));
}

.pc-toast[hidden] {
	display: none;
}

.pc-toast__panel {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
}

.pc-toast.is-open .pc-toast__panel {
	animation: pc-toast-in 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.pc-toast.is-open .pc-toast__panel {
		animation: none;
	}
}

@keyframes pc-toast-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.pc-toast .pc-character {
	flex: none;
}

.pc-toast__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-inline-size: 0;
}

.pc-toast__body p {
	margin: 0;
}

.pc-toast__title {
	font-family: var(--font-heading);
	font-weight: 700;
}

.pc-toast__product {
	color: var(--color-ink-muted);
	font-size: var(--font-size-small);
}

.pc-toast__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: var(--space-2) !important;
}

.pc-toast__close {
	position: absolute;
	inset-block-start: var(--space-1);
	inset-inline-end: var(--space-1);
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	border: 0;
	background: transparent;
	color: var(--color-ink);
	font-size: var(--font-size-h3);
	cursor: pointer;
}

@media (max-width: 781px) {
	.pc-toast {
		inset-block-start: auto;
		inset-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
		inset-inline: var(--gutter);
		inline-size: auto;
	}

	body.pc-has-sticky-bar .pc-toast {
		inset-block-end: calc(var(--touch-target) + var(--space-8));
	}
}