/**
 * Shared components: buttons, badges, product card, section heads, forms.
 *
 * This file exists so template work cannot invent parallel vocabularies — the
 * exact failure the token freeze warns about. If a component is used by more
 * than one template, it lives here; page-specific rules live in
 * assets/css/pages/<page>.css.
 *
 * Every value is a token. The button spec is the live shop's, measured:
 * 47px / 30px inline / 15px type at 1px tracking / radius 0, hover thickens an
 * inner ring in the button's own text colour — fill and text never change.
 *
 * @package CreativeCanvas
 */

/* ---------------------------------------------------------------------------
 * Buttons — the redesign's spec, see tokens.css
 * ------------------------------------------------------------------------ */

.cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--cc-font-body);
	font-size: var(--cc-btn-text);
	font-weight: var(--cc-weight-medium);
	letter-spacing: var(--cc-btn-tracking);
	line-height: 1;
	min-height: var(--cc-btn-height);
	padding: 0 var(--cc-btn-pad-inline);
	border: var(--cc-hairline) solid transparent;
	border-radius: var(--cc-radius-pill);
	box-shadow: var(--cc-shadow);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cc-duration-fast) var(--cc-ease), color var(--cc-duration-fast) var(--cc-ease), transform var(--cc-duration-fast) var(--cc-ease);
}

/* The design's buttons end in an arrow; opt in with the modifier so a
 * button that is not a "go somewhere" action (submit, add to cart) stays plain. */
.cc-btn--arrow::after {
	content: "\2192";
	font-weight: var(--cc-weight-regular);
	transition: transform var(--cc-duration-fast) var(--cc-ease);
}

.cc-btn--arrow:hover::after {
	transform: translateX(2px);
}

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

/* The press: one pixel down, back on release. */
.cc-btn:active {
	transform: translateY(1px);
}

.cc-btn--primary {
	background-color: var(--cc-color-action);
	border-color: var(--cc-color-action);
	color: var(--cc-color-ground); /* Soft White on Espresso, 11.3:1 */
}

.cc-btn--primary:hover,
.cc-btn--primary:focus-visible {
	background-color: var(--cc-color-action-hover);
	border-color: var(--cc-color-action-hover);
	color: var(--cc-color-ground);
}

.cc-btn--secondary {
	background-color: transparent;
	border-color: var(--cc-color-action);
	color: var(--cc-color-action);
}

.cc-btn--secondary:hover,
.cc-btn--secondary:focus-visible {
	background-color: var(--cc-color-accent-soft); /* the action colour at 10% over the ground */
	border-color: var(--cc-color-action);
	color: var(--cc-color-action-hover);
}

.cc-btn:disabled,
.cc-btn[aria-disabled="true"] {
	background-color: var(--cc-color-band);
	border-color: var(--cc-color-band);
	color: var(--cc-color-disabled);
	cursor: not-allowed;
	transform: none;
}

/*
 * WooCommerce renders its own button markup through templates we do not fork
 * just for a class name. Map its selectors onto the same spec so add-to-cart,
 * checkout and cart buttons match without per-template duplication.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce button[name="add-to-cart"],
.woocommerce .checkout-button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cc-font-body);
	font-size: var(--cc-btn-text);
	font-weight: var(--cc-weight-medium);
	letter-spacing: var(--cc-btn-tracking);
	line-height: 1;
	min-height: var(--cc-btn-height);
	padding: 0 var(--cc-btn-pad-inline);
	border: var(--cc-hairline) solid var(--cc-color-action);
	border-radius: var(--cc-radius-pill);
	box-shadow: var(--cc-shadow);
	background-color: var(--cc-color-action);
	color: var(--cc-color-ground);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cc-duration-fast) var(--cc-ease), transform var(--cc-duration-fast) var(--cc-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button[name="add-to-cart"]:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
	background-color: var(--cc-color-action-hover);
	border-color: var(--cc-color-action-hover);
	color: var(--cc-color-ground);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: var(--cc-focus-width) solid var(--cc-focus-color);
	outline-offset: var(--cc-focus-offset);
}

/* Disabled: the state no reference defines — muted on sand, ring removed. */
.cc-btn:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background-color: var(--cc-color-sand);
	color: var(--cc-color-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.cc-btn:disabled::after {
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Badges — ink only. The word does the work; nothing clashes with a photo.
 * ------------------------------------------------------------------------ */

.cc-badge {
	display: inline-block;
	background-color: var(--cc-color-ink);
	color: var(--cc-color-ground);
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-micro);
	font-weight: var(--cc-weight-regular);
	line-height: 1.6;
	padding: 5px 12px;
	border-radius: var(--cc-radius-pill);
}

/* ---------------------------------------------------------------------------
 * Section head — the redesign's uppercase label, the heading, an optional
 * action on the right, and the "optional" pill that marks a placeholder.
 * ------------------------------------------------------------------------ */

/* Uppercase Archivo label: 13 / 12px, 700, 0.16em, muted. */
.cc-eyebrow {
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-micro);
	font-weight: var(--cc-weight-regular);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wider);
	color: var(--cc-color-muted);
	line-height: var(--cc-leading-normal);
}

/* ---------------------------------------------------------------------------
 * Page band — every page's title block in the home page's palette (owner,
 * 2026-10-02): the hero's warm mat (--cc-color-band) on the content width,
 * square like the hero, a block gap under the header. The title, eyebrow and
 * lead inside keep their own classes and sizes; the band only grounds them.
 * Long prose below it stays on the page: boxed text reads worse.
 * ------------------------------------------------------------------------ */

.cc-page-band {
	margin-block-end: var(--cc-space-8);
	padding: var(--cc-space-6) var(--cc-space-5);
	background-color: var(--cc-color-band);
	color: var(--cc-color-ink);
}

@media (min-width: 48rem) {
	.cc-page-band {
		padding: var(--cc-space-10) var(--cc-space-11);
	}
}

/* The band is the first block under the header: a block gap, not a section
 * step, above it — as the home hero sits. */
.cc-section:has(> .cc-page-band:first-child),
.cc-section:has(> article:first-child > .cc-page-band:first-child),
.cc-notfound:has(> .cc-page-band:first-child) {
	padding-block-start: var(--cc-block-gap);
}

.cc-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
	margin-block-end: var(--cc-space-6);
}

/* Head with an action on the right ("Kõik tooted"). */
.cc-section-head--split {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--cc-space-4);
}

/* Label and pill on one line. */
.cc-section-head--inline {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
}

/* The uppercase text link the design uses as a section action. */
.cc-cta-link {
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-small);
	font-weight: var(--cc-weight-regular);
	color: var(--cc-color-action);
	text-decoration: none;
	white-space: nowrap;
}

.cc-cta-link::after {
	content: " \2192";
}

.cc-cta-link:hover,
.cc-cta-link:focus-visible {
	color: var(--cc-color-action-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* A placeholder's inert action: same look, nothing to click. */
.cc-cta-link--static {
	color: var(--cc-color-muted);
	text-decoration: none;
	cursor: default;
}

/* The small framed marker on every placeholder block. Square, like all else. */
.cc-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--cc-space-1) var(--cc-space-2);
	border: var(--cc-border);
	border-radius: var(--cc-radius-sm);
	font-size: var(--cc-text-micro);
	letter-spacing: var(--cc-tracking-wider);
	text-transform: uppercase;
	line-height: var(--cc-leading-normal);
	color: var(--cc-color-muted);
}

/* ---------------------------------------------------------------------------
 * Product card — consumed by home, catalogue and related-products grids.
 * Markup lives in template-parts/product-card.php; keep them in step.
 *
 * The redesign's card: the photo on a sand plate inside a hairline frame with
 * 8px of air (6 on a phone), then the kicker (the product line, uppercase
 * Archivo 11), the name (Archivo 16 / 14, 700) and the price (DM Sans 16 / 15).
 * ------------------------------------------------------------------------ */

.cc-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.cc-card:hover {
	color: inherit;
}

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

.cc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	/*
	 * Owner decision 2026-09-16: no inner frame around photographs. The
	 * design's sand plate with 8px of air is gone; the photo fills the box
	 * edge to edge. Sand stays only as the ground behind a loading image, and
	 * the hairline is transparent until hover, when it becomes the affordance.
	 */
	background-color: var(--cc-color-sand);
	border-radius: var(--cc-radius);
	overflow: hidden;
	margin-block-end: 0;
}

.cc-card:hover .cc-card__media img,
.cc-card:focus-visible .cc-card__media img {
	transform: scale(1.02);
}

.cc-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cc-duration-fast) var(--cc-ease);
}

/*
 * Hover crossfade to the first gallery photo, the shot on a person (owner,
 * 2026-10-10, 9ig.2). Only where the pointer can hover: elsewhere the image
 * is display:none, which also keeps a lazy image from being fetched at all.
 * Opacity only — the existing 1.02 scale carries over, so its transform
 * transition is restated here to keep both images moving together.
 */
.cc-card__media .cc-card__img-alt {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.cc-card__media .cc-card__img-alt {
		display: block;
		position: absolute;
		inset: 0;
		opacity: 0;
		transition:
			opacity var(--cc-duration-mid) var(--cc-ease),
			transform var(--cc-duration-fast) var(--cc-ease);
	}

	.cc-card:hover .cc-card__media .cc-card__img-alt,
	.cc-card:focus-visible .cc-card__media .cc-card__img-alt {
		opacity: 1;
	}
}

.cc-card__badge {
	position: absolute;
	inset-block-start: 13px; /* measured on the handoff: 12px + the tile's own 1px */
	inset-inline-start: 13px;
}

.cc-card__type {
	/* Visually hidden: the handoff's card is name, price, swatches. The line
	 * stays in the markup so assistive tech and the "both product lines"
	 * guard still read it. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cc-card__title {
	font-family: var(--cc-font-body);
	font-weight: var(--cc-weight-regular);
	font-size: var(--cc-text-small);
	letter-spacing: 0;
	line-height: var(--cc-leading-normal);
}

.cc-card__price {
	margin-block-start: 0;
	font-size: var(--cc-text-small);
	color: var(--cc-color-ink);
	font-variant-numeric: tabular-nums;
}

/* Bottom row: the blank-colour swatch on the left, a bag glyph on the right. */
.cc-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2);
}

.cc-card__bag {
	width: 17px;
	height: 17px;
	color: var(--cc-color-ink);
}

/* The garment's blank colour as one small disc, the way the design shows
 * swatches under each card. Read from _cc_blank_colour; absent = no disc. */
.cc-card__swatches {
	display: flex;
	gap: 6px;
	margin-block-start: 0;
}

.cc-card__swatch {
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: var(--cc-border);
	background-color: var(--swatch, var(--cc-color-sand));
}

@media (min-width: 48rem) {
	.cc-card__title,
	.cc-card__price {
		font-size: var(--cc-text-small); /* 14px at every width, as the handoff */
	}
}

.cc-card__price del {
	color: var(--cc-color-muted);
	margin-inline-end: var(--cc-space-2);
}

.cc-card__price ins {
	text-decoration: none;
	color: var(--cc-color-sale);
}

/* Product grid: 2-up on a phone at a 16px gutter, 3-up from md, 4-up from
 * lg at the design's 20px gutter (owner decision 2026-09-14). */
.cc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cc-grid-gap);
}

/* The handoff: four columns from 900px, two below, all the way down to 360. */
@media (min-width: 56.25rem) {
	.cc-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ---------------------------------------------------------------------------
 * Forms — the measured field spec: surface, hairline, ink on focus.
 * ------------------------------------------------------------------------ */

/* One field spec for every form on the site: Soft White, a Light Stone
 * hairline, 8px corners, the 44px touch-target floor. */
.cc-field,
.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce-ordering select {
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-small);
	letter-spacing: var(--cc-tracking-base);
	min-height: 2.75rem;
	padding: var(--cc-space-2) var(--cc-space-4);
	background-color: var(--cc-color-ground);
	color: var(--cc-color-ink);
	border: var(--cc-border);
	border-radius: var(--cc-radius);
	width: 100%;
	transition: border-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-field:focus,
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-ordering select:focus {
	border-color: var(--cc-color-action);
	outline: var(--cc-focus-width) solid var(--cc-focus-color);
	outline-offset: var(--cc-focus-offset);
}

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

/* ---------------------------------------------------------------------------
 * Prose blocks — long-form page content (about, delivery, blog posts).
 * ------------------------------------------------------------------------ */

.cc-prose > * + * {
	margin-block-start: var(--cc-space-4);
}

.cc-prose h2,
.cc-prose h3 {
	margin-block-start: var(--cc-space-8);
}

.cc-prose ul,
.cc-prose ol {
	padding-inline-start: var(--cc-space-5);
}

.cc-prose li + li {
	margin-block-start: var(--cc-space-2);
}

/* ---------------------------------------------------------------------------
 * WooCommerce notices — THE site-wide error/info/success states.
 *
 * Promoted here from pages/cart.css + pages/checkout.css (the cart bead had no
 * shared-file rights and duplicated them under protest). Quiet hairline bands
 * on sand: info = ink, success = ok, error = sale. `body` prefix out-specifies
 * Woo's own notice rules and their icon pseudo-elements.
 * ------------------------------------------------------------------------ */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	position: static;
	background-color: var(--cc-color-sand);
	color: var(--cc-color-ink);
	border: var(--cc-border);
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow);
	padding: var(--cc-space-3) var(--cc-space-4);
	margin: 0;
	font-size: var(--cc-text-small);
	line-height: var(--cc-leading-body);
	list-style: none;
	width: auto;
	/* Contain the floated link Woo puts in the band. Without a formatting root
	 * the float hangs past the band's bottom edge whenever the text wraps —
	 * 2px at 360px wide, measured. */
	display: flow-root;
	word-wrap: normal;
}

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before,
body .woocommerce-message::after,
body .woocommerce-info::after,
body .woocommerce-error::after {
	display: none;
}

body .woocommerce-message {
	color: var(--cc-color-ok);
}

/*
 * Woo drops an ink-fill .button ("Vaata ostukorvi") into its success and info
 * notices and floats it right. A 47px button inside a band padded for one line
 * of small text does not fit: measured on the product page after add-to-cart,
 * its bottom edge sat 12px below the band. The cart page had already decided
 * this reads better as a plain underlined link; that decision now applies to
 * every notice, so the two pages agree and the band keeps its height.
 */
body .woocommerce-message a.button,
body .woocommerce-info a.button {
	display: inline;
	float: right;
	min-height: 0;
	padding: 0;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	box-shadow: var(--cc-shadow);
}

body .woocommerce-message a.button:hover,
body .woocommerce-info a.button:hover {
	background-color: transparent;
	color: var(--cc-color-muted);
	box-shadow: var(--cc-shadow);
}

body .woocommerce-error,
body .woocommerce-error li {
	color: var(--cc-color-sale);
}

body .woocommerce-error li {
	margin: 0;
	padding: 0;
}