/**
 * Single product page.
 *
 * Auto-enqueued on is_product() by inc/assets.php. Layout and spacing are
 * measured from the mockup product page (/toode/sunshine at 1440px): a
 * breadcrumb-lite back link, then a two-column grid (media | summary) from
 * the lg breakpoint, stacked below it. Every value is a token.
 *
 * The variation <select>, quantity input and buttons already inherit the
 * global form and button specs from components.css — only what this page
 * uniquely needs lives here.
 *
 * @package CreativeCanvas
 */

/* ---------------------------------------------------------------------------
 * Back link — mockup: 13px breadcrumb row, 48px below the header.
 * ------------------------------------------------------------------------ */

.cc-product-back {
	padding-block-start: var(--cc-space-12);
	font-size: var(--cc-text-footnote);
}

.cc-product-back a {
	text-decoration: none;
	color: var(--cc-color-muted);
}

.cc-product-back a:hover,
.cc-product-back a:focus-visible {
	color: var(--cc-color-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------------------
 * Layout — mockup: two 588px columns, 56px apart, 24px below the breadcrumb.
 * Columns are 1fr each; the gap snaps to the spacing scale (48px).
 * ------------------------------------------------------------------------ */

.cc-product {
	padding-block: var(--cc-space-6) var(--cc-section-y);
}

.cc-product__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cc-space-8);
}

@media (min-width: 64rem) {
	.cc-product__layout {
		grid-template-columns: 1fr 1fr;
		gap: var(--cc-space-12);
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
 * Media — one sand aspect-1 tile, same treatment as the card media slot.
 * Since 2026-10-04 it holds every photo in a scroll-snap track (swipe on a
 * phone), with a row of 8px thumbnails under it; the active one carries a
 * action-colour border. Thumbnails are in-page links, so it works without JS.
 * ------------------------------------------------------------------------ */

.cc-product__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
	min-width: 0; /* a grid item; lets the track scroll instead of widening it */
}

.cc-product__media {
	position: relative;
	aspect-ratio: 1;
	background-color: var(--cc-color-sand);
	border-radius: var(--cc-radius); /* 8px, the handoff's photo-tile corner */
	overflow: hidden;
}

.cc-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-product__photos {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cc-product__photos::-webkit-scrollbar {
	display: none;
}

/* Focusable so the swipe track can be scrolled by keyboard (WCAG 2.1.1, axe
   scrollable-region-focusable, 2026-10-18); the ring sits inside, because the
   media frame clips anything drawn outside it. */
.cc-product__photos:focus-visible {
	outline: var(--cc-focus-width) solid var(--cc-focus-color);
	outline-offset: calc(-1 * var(--cc-focus-width));
}

@media (prefers-reduced-motion: no-preference) {
	.cc-product__photos {
		scroll-behavior: smooth;
	}
}

.cc-product__photo {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.cc-product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-product__thumb {
	display: block;
	width: 4.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--cc-color-sand);
	border: 2px solid transparent;
	border-radius: var(--cc-radius);
}

.cc-product__thumb[aria-current="true"] {
	border-color: var(--cc-color-action);
}

.cc-product__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-product__badge {
	position: absolute;
	inset-block-start: var(--cc-space-3);
	inset-inline-start: var(--cc-space-3);
}

/* ---------------------------------------------------------------------------
 * Summary column
 * ------------------------------------------------------------------------ */

.cc-product__eyebrow {
	margin-block-end: var(--cc-space-3);
}

/* Product title — mockup: 36px, not the fluid page-title clamp. */
.cc-product__summary .product_title {
	font-size: var(--cc-text-display-sm);
	line-height: var(--cc-leading-tight);
}

/* Price — mockup: 24px, tabular, ink. Woo prints <p class="price">, with
 * del/ins inside it when on sale: del muted, ins the sale colour, and the
 * browser's default <ins> underline removed.
 *
 * Selector note: woocommerce-general.css paints `div.product p.price` green
 * at 0-3-2, so these carry the extra .product class (the same element wears
 * both) to out-specify it. Woo's stylesheet is still enqueued site-wide —
 * pruning it is bead 8dt.10's business, not this page's. */
.cc-product.product .cc-product__summary .price {
	margin-block-start: var(--cc-space-4);
	color: var(--cc-color-ink);
	font-size: var(--cc-text-xxl);
	font-variant-numeric: tabular-nums;
}

.cc-product.product .cc-product__summary .price del {
	color: var(--cc-color-muted);
	opacity: 1;
}

.cc-product.product .cc-product__summary .price ins {
	text-decoration: none;
	color: var(--cc-color-sale);
	font-weight: var(--cc-weight-regular);
	margin-inline-start: var(--cc-space-2);
}

.cc-product__summary .woocommerce-product-details__short-description {
	margin-block-start: var(--cc-space-4);
	max-width: var(--cc-prose-max);
}

/* ---------------------------------------------------------------------------
 * Cart form
 *
 * Woo's own markup, untouched: table.variations with the native <select>
 * (global .woocommerce select styling applies), then quantity + button.
 * ------------------------------------------------------------------------ */

.cc-product form.cart {
	margin-block-start: var(--cc-space-6);
}

/* Flatten the variations table into label-over-field rows. */
.cc-product .variations,
.cc-product .variations tbody,
.cc-product .variations tr,
.cc-product .variations th,
.cc-product .variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
}

.cc-product .variations .label label {
	display: block;
	font-size: var(--cc-text-footnote);
	font-weight: var(--cc-weight-medium);
	margin-block-end: var(--cc-space-1);
}

.cc-product .variations select {
	max-width: 100%;
}

.cc-product .reset_variations {
	display: inline-block;
	margin-block-start: var(--cc-space-2);
	font-size: var(--cc-text-caption);
	color: var(--cc-color-muted);
}

.cc-product .reset_variations:hover,
.cc-product .reset_variations:focus-visible {
	color: var(--cc-color-ink);
}

/* Woo re-prints the resolved variation's price and availability here. */
.cc-product .woocommerce-variation.single_variation {
	margin-block: var(--cc-space-4);
	font-size: var(--cc-text-ui);
}

/*
 * Woo ships this div visible-but-empty in the server HTML and its JS hides
 * it a beat after load, so the margin above briefly opens a gap the visual
 * suite catches as an unstable page height. Until the div has content it
 * must contribute nothing; Woo's JS shows a filled one with an inline style,
 * which this cannot override.
 */
.cc-product .woocommerce-variation.single_variation:empty {
	display: none;
}

.cc-product .woocommerce-variation-price .price {
	margin-block-start: 0;
}

/* Quantity beside a full-width button — mockup: the button carries the row. */
.cc-product form.cart .woocommerce-variation-add-to-cart,
.cc-product form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: var(--cc-space-3);
	margin-block-start: var(--cc-space-4);
}

.cc-product form.cart .quantity .qty {
	width: 5rem;
	min-height: var(--cc-btn-height);
	text-align: center;
}

.cc-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
}

/* The add-to-cart button wears Woo's `.alt` class, and woocommerce-general.css
 * paints button.button.alt purple at higher specificity than the global
 * button mapping in components.css. Re-assert the primary button spec at a
 * specificity Woo's .alt rules (base, hover, disabled) cannot beat. */
.cc-product.product form.cart .single_add_to_cart_button,
.cc-product.product form.cart .single_add_to_cart_button.alt {
	background-color: var(--cc-color-action);
	border-color: var(--cc-color-action);
	color: var(--cc-color-ground);
}

.cc-product.product form.cart .single_add_to_cart_button:hover,
.cc-product.product form.cart .single_add_to_cart_button:focus-visible {
	background-color: var(--cc-color-action-hover);
	border-color: var(--cc-color-action-hover);
	color: var(--cc-color-ground);
	box-shadow: none;
}

/* Woo's variation JS parks the button on .disabled until a size is chosen. */
body .cc-product.product form.cart button.single_add_to_cart_button.disabled,
body .cc-product.product form.cart button.single_add_to_cart_button:disabled,
body .cc-product.product form.cart button.single_add_to_cart_button.disabled:hover {
	/* Woo also fades disabled buttons to 50% — which left the label unreadable.
	 * A solid Surface Warm pill with muted text says "choose a size first". */
	background-color: var(--cc-color-band);
	border-color: var(--cc-color-band);
	color: var(--cc-color-muted);
	opacity: 1;
	box-shadow: none;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Accordions — hairline-ruled <details>, the design's replacement for
 * WooCommerce's data tabs.
 * ------------------------------------------------------------------------ */

.cc-product__accordions {
	margin-block-start: var(--cc-space-8);
	border-block-start: var(--cc-border);
}

.cc-product__accordion {
	border-block-end: var(--cc-border);
}

.cc-product__accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	padding-block: var(--cc-space-4);
	font-family: var(--cc-font-display);
	font-weight: var(--cc-weight-semibold);
	font-size: var(--cc-text-base);
	letter-spacing: 0;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.cc-product__accordion > summary::-webkit-details-marker {
	display: none;
}

.cc-product__accordion > summary::after {
	content: "+";
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-lg);
	line-height: var(--cc-leading-tight);
	color: var(--cc-color-muted);
}

.cc-product__accordion[open] > summary::after {
	content: "\2212"; /* minus sign */
}

.cc-product__accordion > summary:hover {
	color: var(--cc-color-muted);
}

.cc-product__accordion > summary:focus-visible {
	outline: var(--cc-focus-width) solid var(--cc-focus-color);
	outline-offset: var(--cc-focus-offset);
}

.cc-product__accordion-body {
	padding-block-end: var(--cc-space-5);
	font-size: var(--cc-text-small);
}

/* ---------------------------------------------------------------------------
 * Related products — the shared card grid under a section head, one section
 * rhythm below the product, as in the mockup.
 * ------------------------------------------------------------------------ */

.cc-product__related {
	margin-block-start: var(--cc-section-y);
}