/*
 * Podium Chasers components (unlayered by decision: ARCHITECTURE §3).
 * Single-class selectors and :where(); values come from tokens.css. Breakpoints: 1100 / 850 / 620 / 370 (max-width).
 * Inventory and rationale: docs/storefront/coverage/design-system.md.
 */

/* ---------- Utilities ---------- */
.pc-visually-hidden,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.pc-skip:focus { border: var(--pc-border-width) solid var(--pc-color-ink); font-size: var(--pc-text-sm); font-weight: var(--pc-weight-bold); } /* "Skip to results" (collections): visible when keyboard-focused */
.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	z-index: calc(var(--pc-z-popover) + 10);
	padding: var(--pc-space-3) var(--pc-space-4);
	background: var(--pc-color-surface);
	color: var(--pc-color-ink);
}
/* JS-only controls never appear inert without JS; their no-JS twins disappear once JS runs. */
:root.pc-no-js .pc-js-only,
:root.pc-js .pc-no-js-only { display: none; }
/* Block editor canvas previews the JS presentation. */
.pc-no-js-only:where(.editor-styles-wrapper *) { display: none; }

/* ---------- Icons (Lucide sprite) ---------- */
.pc-icon {
	display: inline-block;
	flex-shrink: 0;
	width: var(--pc-icon-md);
	height: var(--pc-icon-md);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--pc-icon-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}
.pc-icon--sm { width: var(--pc-icon-sm); height: var(--pc-icon-sm); }
.pc-icon--lg { width: var(--pc-icon-lg); height: var(--pc-icon-lg); }

/* ---------- Focus ---------- */
:where(.pc-storefront) :where(summary, [tabindex]):focus-visible {
	outline: var(--pc-focus-width) solid var(--pc-color-focus);
	outline-offset: var(--pc-focus-offset);
}
:where(.pc-on-dark) :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--pc-color-focus-inverse); /* sky on navy (owner decision #11) */
}

/* ---------- Buttons ---------- */
.pc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-space-2);
	min-height: var(--pc-control-height);
	padding: var(--pc-space-2) var(--pc-space-5);
	border: var(--pc-border-width) solid var(--pc-color-ink);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-color-surface);
	color: var(--pc-color-ink);
	font-size: var(--pc-text-sm);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-leading-compact);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.pc-button:hover { background: var(--pc-color-hover); }
.pc-button--primary { background: var(--pc-color-ink); color: var(--pc-color-inverse); }
.pc-button--primary:hover { background: var(--pc-color-disabled-dark); border-color: var(--pc-color-disabled-dark); }
.pc-button--secondary { border-color: var(--pc-color-line-strong); }
.pc-button--secondary:hover { border-color: var(--pc-color-ink); background: var(--pc-color-surface); }
.pc-button--quiet { border-color: transparent; background: transparent; }
.pc-button--quiet:hover { background: var(--pc-color-hover); }
.pc-button--block { display: flex; width: 100%; }
.pc-button--pill { border-radius: var(--pc-radius-pill); }
.pc-button:disabled,
.pc-button[aria-disabled="true"] { opacity: var(--pc-disabled-opacity); cursor: not-allowed; }

.pc-link {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-1);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: var(--pc-text-sm);
	font-weight: var(--pc-weight-bold);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: var(--pc-space-1);
	text-decoration-thickness: var(--pc-border-width);
	cursor: pointer;
}
.pc-link:hover { text-decoration-thickness: var(--pc-focus-width); }
.pc-link--small { font-size: var(--pc-text-xs); font-weight: var(--pc-weight-regular); }
.pc-link--muted { color: var(--pc-color-muted); font-weight: var(--pc-weight-regular); }

.pc-icon-button {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--pc-control-height);
	height: var(--pc-control-height);
	padding: 0;
	border: 0;
	border-radius: var(--pc-radius-pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.pc-icon-button:hover { background: var(--pc-color-hover); }
.pc-icon-button--outline { border: var(--pc-border-width) solid var(--pc-color-line-strong); background: var(--pc-color-surface); }
.pc-icon-button--outline:hover:not(:disabled) { background: var(--pc-color-ink); border-color: var(--pc-color-ink); color: var(--pc-color-inverse); }

/* ---------- Fields ---------- */
.pc-field { display: grid; gap: var(--pc-space-1); min-width: 0; }
.pc-field__label { font-size: var(--pc-text-sm); font-weight: var(--pc-weight-bold); }
.pc-field__optional { font-weight: var(--pc-weight-regular); color: var(--pc-color-muted); }
.pc-field__hint { font-size: var(--pc-text-xs); color: var(--pc-color-muted); }
.pc-field__error {
	display: flex;
	gap: var(--pc-space-1);
	align-items: flex-start;
	font-size: var(--pc-text-xs);
	color: var(--pc-color-error);
}
.pc-input,
.pc-select,
.pc-textarea {
	width: 100%;
	min-height: var(--pc-control-height);
	padding: var(--pc-space-2) var(--pc-space-3);
	border: var(--pc-border-width) solid var(--pc-color-field-border);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-color-surface);
	color: var(--pc-color-ink);
	font-size: var(--pc-text-base);
	line-height: var(--pc-leading-compact);
}
.pc-textarea { min-height: calc(var(--pc-control-height) * 3); resize: vertical; line-height: var(--pc-leading-body); }
.pc-select { appearance: none; padding-right: var(--pc-space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.125rem) 50%, calc(100% - 0.8125rem) 50%; background-size: 0.3125rem 0.3125rem; background-repeat: no-repeat; }
.pc-input::placeholder,
.pc-textarea::placeholder { color: var(--pc-color-subtle); opacity: 1; }
.pc-input:hover,
.pc-select:hover,
.pc-textarea:hover { border-color: var(--pc-color-ink); }
.pc-input:focus-visible,
.pc-select:focus-visible,
.pc-textarea:focus-visible { outline-offset: 0; border-color: var(--pc-color-ink); }
.pc-input[aria-invalid="true"],
.pc-select[aria-invalid="true"],
.pc-textarea[aria-invalid="true"] { border-color: var(--pc-color-error); }
.pc-input:disabled,
.pc-select:disabled,
.pc-textarea:disabled { background: var(--pc-color-disabled); cursor: not-allowed; opacity: 1; } /* Chromium adds 0.7 on disabled selects; one look in every engine */

.pc-check {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	min-height: var(--pc-control-height-compact);
	font-size: var(--pc-text-sm);
	cursor: pointer;
}
.pc-check > input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--pc-color-ink); flex-shrink: 0; }
.pc-check--small { font-size: var(--pc-text-xs); }
@media (pointer: coarse) {
	.pc-check { min-height: var(--pc-control-height); }
}

/* ---------- Chips ---------- */
.pc-chips { display: flex; flex-wrap: wrap; gap: var(--pc-space-2); margin: 0; padding: 0; list-style: none; }
.pc-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	min-height: var(--pc-control-height-compact);
	padding: var(--pc-space-1) var(--pc-space-3);
	border: var(--pc-border-width) solid var(--pc-color-search-border);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-color-surface);
	color: var(--pc-color-ink);
	font-size: var(--pc-text-sm);
	text-decoration: none;
	cursor: pointer;
}
.pc-chip:hover { border-color: var(--pc-color-ink); }
.pc-chip--selected { border-color: var(--pc-color-ink); background: var(--pc-color-soft); font-weight: var(--pc-weight-bold); }
@media (pointer: coarse) { .pc-chip { min-height: var(--pc-control-height); } }

/* ---------- Notices (live-region friendly: put role="status"/"alert" on the notice, or announce via PC.announce) ---------- */
.pc-notice {
	display: flex;
	gap: var(--pc-space-3);
	align-items: flex-start;
	padding: var(--pc-space-3) var(--pc-space-4);
	border: var(--pc-border-width) solid var(--pc-color-search-border);
	border-left: calc(var(--pc-border-width) * 3) solid var(--pc-color-ink);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-color-soft);
	color: var(--pc-color-ink);
	font-size: var(--pc-text-sm);
	line-height: var(--pc-leading-body);
}
.pc-notice > .pc-icon { margin-top: 0.15em; }
.pc-notice p { margin: 0; }
.pc-notice--info { border-left-color: var(--pc-color-muted); }
.pc-notice--success { border-left-color: var(--pc-color-ink); }
.pc-notice--warning { border-left-color: var(--pc-color-ink); background: var(--pc-color-surface); }
.pc-notice--error { border-color: var(--pc-color-error); border-left-color: var(--pc-color-error); background: var(--pc-color-error-surface); }
.pc-notice--error > .pc-icon { color: var(--pc-color-error); }

/* ---------- Fitment line / badge (no red/green verdicts; ARCHITECTURE §6) ---------- */
.pc-fit {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--pc-space-1) var(--pc-space-2);
	margin: 0;
	font-size: var(--pc-text-sm);
	line-height: var(--pc-leading-compact);
	color: var(--pc-color-ink);
}
.pc-fit > .pc-icon { margin-top: 0.05em; }
.pc-fit > span:not(.pc-fit__text),
.pc-fit__action > span,
.pc-fit__text > span { flex: 1 1 0; min-width: 0; } /* text wraps beside its icon, never under it */
.pc-fit--unconfirmed { color: var(--pc-color-muted); }
.pc-fit--universal > span:first-of-type,
.pc-fit--fits > span { font-weight: var(--pc-weight-bold); }
.pc-fit__evidence { flex-basis: 100%; padding-left: calc(var(--pc-icon-sm) + var(--pc-space-2)); color: var(--pc-color-muted); font-size: var(--pc-text-xs); }
.pc-fit__action,
.pc-fit__text { display: inline-flex; align-items: flex-start; gap: var(--pc-space-2); }
.pc-fit__action {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: var(--pc-space-1);
	cursor: pointer;
}
.pc-fit--badge {
	display: inline-flex;
	padding: var(--pc-space-1) var(--pc-space-2);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-color-soft);
	font-size: var(--pc-text-xs);
	font-weight: var(--pc-weight-bold);
}

/* ---------- Availability ---------- */
.pc-availability {
	display: grid;
	gap: 0.125rem;
	margin: 0;
	font-size: var(--pc-text-sm);
	line-height: var(--pc-leading-compact);
	color: var(--pc-color-muted);
}
.pc-availability__state { color: var(--pc-color-ink); }
.pc-availability--unknown .pc-availability__state,
.pc-availability--out-of-stock .pc-availability__state { color: var(--pc-color-muted); }
.pc-availability--backorder .pc-availability__state { color: var(--pc-color-ink); } /* "Available to order" (#5e): orderable, not a warning */
.pc-availability__detail { font-size: var(--pc-text-xs); }

/* ---------- Price ---------- */
.pc-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pc-space-1) var(--pc-space-2);
	margin: 0;
	font-size: var(--pc-product-price-size);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-leading-compact);
	font-variant-numeric: tabular-nums;
}
.pc-price ins { text-decoration: none; }
.pc-price del { color: var(--pc-color-muted); font-size: var(--pc-text-sm); font-weight: var(--pc-weight-regular); }
.pc-price--none { font-size: var(--pc-text-sm); font-weight: var(--pc-weight-regular); color: var(--pc-color-muted); }
.pc-price__flag { font-size: var(--pc-text-xs); font-weight: var(--pc-weight-regular); color: var(--pc-color-muted); }
.pc-price__range { white-space: normal; } /* may wrap after the dash ("$1,299 –" / "$1,399"); amounts never split */

/* ---------- Rating (only when count > 0; static) ---------- */
.pc-rating { display: inline-flex; align-items: center; gap: var(--pc-space-2); margin: 0; font-size: var(--pc-text-xs); color: var(--pc-color-muted); }
.pc-rating__stars { position: relative; display: inline-block; line-height: 0; }
.pc-rating__base,
.pc-rating__fill { display: inline-flex; gap: 0.0625rem; white-space: nowrap; }
.pc-rating__base { color: var(--pc-color-line-strong); }
.pc-rating__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--pc-color-ink); }
.pc-rating .pc-icon { width: var(--pc-rating-star-size); height: var(--pc-rating-star-size); fill: currentColor; stroke: none; }

/* ---------- Breadcrumbs ---------- */
.pc-breadcrumbs { font-size: var(--pc-text-xs); color: var(--pc-color-muted); }
.pc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pc-space-1) var(--pc-space-2); margin: 0; padding: 0; list-style: none; }
.pc-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--pc-space-2); }
.pc-breadcrumbs li + li::before { content: ""; width: 0.375rem; height: 0.375rem; border-top: var(--pc-border-width) solid currentColor; border-right: var(--pc-border-width) solid currentColor; transform: rotate(45deg); }
.pc-breadcrumbs a { color: inherit; text-decoration: none; }
.pc-breadcrumbs a:hover { color: var(--pc-color-ink); text-decoration: underline; }
.pc-breadcrumbs [aria-current] { color: var(--pc-color-ink); }
/* Phones: the current page's crumb repeats the H1 just below and pushed the trail onto two lines (as in the
   prototype, the trail ends at the parent); it stays available to screen readers. */
@media (max-width: 620px) {
	.pc-breadcrumbs li:last-child:is([aria-current], :has([aria-current])) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Rail: one horizontal scroller (manual only, snap, arrows; PC.rail) ---------- */
.pc-rail { --pc-rail-columns: var(--pc-product-rail-columns); --pc-rail-gap: var(--pc-product-grid-gap); min-width: 0; }
.pc-rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pc-space-4); margin-bottom: var(--pc-space-5); }
.pc-rail__controls { display: flex; gap: var(--pc-space-2); flex-shrink: 0; }
.pc-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--pc-rail-columns) - 1) * var(--pc-rail-gap)) / var(--pc-rail-columns));
	gap: var(--pc-rail-gap);
	margin: 0;
	padding: var(--pc-space-1) var(--pc-space-1) var(--pc-space-4);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pc-space-1);
	scroll-behavior: var(--pc-scroll-behavior);
	scrollbar-width: thin;
	scrollbar-color: var(--pc-color-line-strong) transparent;
}
.pc-rail__track > * { display: flex; min-width: 0; scroll-snap-align: start; }
.pc-rail__track > * > .pc-card { flex: 1; } /* equal-height cards: fit lines align across the row */
@media (max-width: 850px) { .pc-rail { --pc-rail-columns: var(--pc-product-rail-columns-tablet); } }
@media (max-width: 620px) { .pc-rail { --pc-rail-columns: var(--pc-product-rail-columns-mobile); --pc-rail-gap: var(--pc-product-grid-gap-mobile); } }

/* ---------- Overlay shells (native <dialog>; PC.overlay owns behavior) ---------- */
.pc-dialog {
	width: min(var(--pc-dialog-width), calc(100% - var(--pc-page-gutter) * 2));
	max-height: calc(100dvh - var(--pc-space-6));
	margin: auto;
	padding: var(--pc-space-5);
	overflow: auto;
	overscroll-behavior: contain;
	border: var(--pc-border-width) solid var(--pc-color-search-border);
	border-radius: var(--pc-garage-radius);
	background: var(--pc-color-surface);
	color: var(--pc-color-ink);
	box-shadow: var(--pc-shadow-dropdown);
	font-family: var(--pc-font-sans);
	font-size: var(--pc-text-base);
	line-height: var(--pc-leading-body);
}
.pc-dialog::backdrop { background: var(--pc-color-backdrop); }
.pc-dialog[open] { animation: pc-panel-enter var(--pc-motion-enter) var(--pc-ease-enter) both; }

/* Sheet: bottom sheet; header pinned so Close stays reachable on short screens. */
.pc-sheet {
	display: none;
	flex-direction: column;
	inset: auto 0 0;
	width: 100%;
	max-width: 100%;
	max-height: var(--pc-sheet-max-height);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--pc-garage-sheet-radius) var(--pc-garage-sheet-radius) 0 0;
}
.pc-sheet[open] { display: flex; animation-name: pc-sheet-enter; }
.pc-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-3);
	flex-shrink: 0;
	padding: var(--pc-space-2) var(--pc-space-3) var(--pc-space-2) var(--pc-space-5);
	border-bottom: var(--pc-border-width) solid var(--pc-color-search-border);
}
.pc-sheet__title { font-size: var(--pc-text-lg); letter-spacing: var(--pc-tracking-heading); }
.pc-sheet__title:focus { outline: none; }
.pc-sheet__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--pc-space-4) var(--pc-space-5) calc(var(--pc-space-6) + env(safe-area-inset-bottom)); }
@keyframes pc-sheet-enter {
	from { transform: translateY(var(--pc-space-4)); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* Drawer: right-side panel (cart track). */
.pc-drawer {
	inset: 0 0 0 auto;
	width: min(var(--pc-cart-drawer-width), 100%);
	max-width: 100%;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border-radius: 0;
	display: none;
	flex-direction: column;
}
.pc-drawer[open] { display: flex; }

/* Popover: non-modal panel anchored to a trigger (search panel, flyouts use their own). */
.pc-popover {
	position: absolute;
	z-index: var(--pc-z-popover);
	padding: var(--pc-space-4);
	border: var(--pc-border-width) solid var(--pc-color-search-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-color-surface);
	box-shadow: var(--pc-shadow-dropdown);
}
.pc-popover:not([hidden]) { animation: pc-panel-enter var(--pc-motion-enter) var(--pc-ease-enter) both; }

/* Scroll lock (PC.overlay): scrollbar compensation keeps the layout from shifting. */
:root.pc-scroll-locked { overflow: hidden; }
:root.pc-scroll-locked body { padding-right: var(--pc-scrollbar-comp, 0px); }

/* ---------- Empty state ---------- */
.pc-empty { display: grid; justify-items: start; gap: var(--pc-space-2); padding-block: var(--pc-space-8); }
.pc-empty > .pc-icon { color: var(--pc-color-muted); }
.pc-empty__title { font-size: var(--pc-text-lg); font-weight: var(--pc-weight-bold); letter-spacing: var(--pc-tracking-heading); }
.pc-empty__text { color: var(--pc-color-muted); font-size: var(--pc-text-sm); max-width: 36rem; }
.pc-empty--compact { padding-block: var(--pc-space-3); }
.pc-empty--compact .pc-empty__title { font-size: var(--pc-text-base); }

/* ---------- Skeleton (static: no perpetual shimmer) ---------- */
.pc-skeleton { display: block; border-radius: var(--pc-radius-sm); background: var(--pc-color-soft); color: transparent; }
.pc-skeleton--text { height: 1em; margin-block: 0.25em; }
.pc-skeleton--media { aspect-ratio: var(--pc-product-media-ratio); }
[aria-busy="true"] > .pc-skeleton { opacity: 1; }

/* ---------- Product card (pc_render_card) ---------- */
.pc-card { position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--pc-color-ink); }
.pc-card__link { display: block; color: inherit; text-decoration: none; }
/* The whole card is one target (stretched link); the fit action sits above it. */
.pc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pc-card__link:focus-visible { outline: none; }
.pc-card:has(.pc-card__link:focus-visible) { outline: var(--pc-focus-width) solid var(--pc-color-focus); outline-offset: var(--pc-focus-offset); border-radius: var(--pc-radius-sm); }
.pc-card__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: var(--pc-product-media-ratio);
	margin-bottom: var(--pc-space-4);
	overflow: hidden;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-product-media-surface);
}
/* Two classes on purpose (S3-1): WooCommerce's classic `.woocommerce img { height: auto }` (0,1,1) would otherwise top-align the
   image in its frame on any page where Woo's stylesheets load (ARCHITECTURE §3, the two-class exception). */
.pc-card__media .pc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; padding: var(--pc-card-media-padding); object-fit: contain; mix-blend-mode: multiply; } /* whole part visible, never cropped */
/* Card fit tag over the image, bottom-left (owner decision #1, approved prototype). The tag box mirrors the media box
   (same width and ratio, at the card's top-left) because the tag sits outside the card link. Only the "Select a
   vehicle" button takes pointer events (a 44px-tall target whose visible part is the tag); the rest of the image still
   opens the part. Opaque surface + border keeps it legible on any image. */
.pc-card__tagbox {
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	aspect-ratio: var(--pc-product-media-ratio);
	padding: var(--pc-space-2);
	pointer-events: none;
}
.pc-card--grid .pc-card__tagbox { aspect-ratio: var(--pc-collection-media-ratio); }
.pc-card__tag {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-1);
	max-width: 100%;
	margin: 0;
	padding: var(--pc-space-1) var(--pc-space-2);
	border: var(--pc-border-width) solid var(--pc-color-line);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-color-surface);
	color: var(--pc-color-ink);
	font-size: var(--pc-text-xs);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-leading-compact);
	text-align: left;
}
.pc-card__tag > .pc-icon { flex-shrink: 0; }
.pc-card__tag > span { min-width: 0; overflow-wrap: anywhere; }
.pc-card__tag--unconfirmed { color: var(--pc-color-muted); }
.pc-card__tag-action {
	display: flex;
	align-items: flex-end;
	max-width: 100%;
	min-height: var(--pc-control-height);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	pointer-events: auto;
}
.pc-card__tag-action .pc-card__tag { text-decoration: underline; text-underline-offset: var(--pc-space-1); }
.pc-card__tag-action:hover .pc-card__tag { border-color: var(--pc-color-ink); }
.pc-card__tag-action:focus-visible { outline: none; }
.pc-card__tag-action:focus-visible .pc-card__tag { outline: var(--pc-focus-width) solid var(--pc-color-focus); outline-offset: var(--pc-focus-offset); }
/* The image keeps a strip free for the tag (two lines on the narrowest cards), so the tag never covers the part. */
.pc-card--grid .pc-card__media,
.pc-card--rail .pc-card__media { padding-bottom: var(--pc-space-10); }
.pc-card--grid .pc-card__media .pc-card__img,
.pc-card--rail .pc-card__media .pc-card__img { padding-bottom: calc(var(--pc-card-media-padding) + var(--pc-space-10)); }
.pc-card__no-media { display: grid; justify-items: center; gap: var(--pc-space-2); color: var(--pc-color-muted); font-size: var(--pc-text-xs); }
.pc-card__brand { display: block; font-size: var(--pc-text-xs); line-height: var(--pc-leading-compact); letter-spacing: var(--pc-tracking-label); text-transform: uppercase; color: var(--pc-color-muted); }
.pc-card__name {
	display: -webkit-box;
	margin-top: var(--pc-space-2);
	overflow: hidden;
	font-size: var(--pc-product-title-size);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-leading-compact);
	letter-spacing: var(--pc-tracking-heading);
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--pc-card-title-lines);
	line-clamp: var(--pc-card-title-lines);
}
.pc-card__link:hover .pc-card__name { text-decoration: underline; text-underline-offset: var(--pc-space-1); }
.pc-card__ids { margin-top: var(--pc-space-1); font-size: var(--pc-text-xs); color: var(--pc-color-muted); overflow-wrap: break-word; } /* break between codes, mid-code only if one can't fit */
.pc-card__facts { display: grid; gap: var(--pc-space-2); margin-top: var(--pc-space-3); margin-bottom: auto; } /* pushes the fit line to the card foot */
.pc-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-2);
	min-height: var(--pc-control-height);
	margin-top: var(--pc-space-3);
	border-bottom: var(--pc-border-width) solid var(--pc-color-line);
	font-size: var(--pc-text-xs);
	font-weight: var(--pc-weight-bold);
	letter-spacing: var(--pc-tracking-label);
	text-transform: uppercase;
}
.pc-card:hover .pc-card__cta { border-color: var(--pc-color-ink); }
/* Grid: collection proportions. */
.pc-card--grid .pc-card__media { aspect-ratio: var(--pc-collection-media-ratio); }
.pc-card--grid .pc-card__name { font-size: var(--pc-collection-card-title); letter-spacing: -0.02em; }
/* Compact: search suggestion row (thumbnail 56px desktop / 48px phone). */
.pc-card--compact {
	display: grid;
	grid-template-columns: var(--pc-search-thumbnail-size) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--pc-space-3);
	padding: var(--pc-space-2);
	border-radius: var(--pc-radius-sm);
	text-decoration: none;
}
.pc-card--compact:hover,
.pc-card--compact:focus-visible { background: var(--pc-color-search-surface); }
.pc-card--compact .pc-card__media { width: var(--pc-search-thumbnail-size); height: var(--pc-search-thumbnail-size); margin: 0; aspect-ratio: 1; }
.pc-card--compact .pc-card__img { padding: var(--pc-space-1); }
.pc-card--compact .pc-card__body { display: grid; gap: var(--pc-space-1); min-width: 0; }
.pc-card--compact .pc-card__name { margin: 0; font-size: var(--pc-text-sm); letter-spacing: 0; -webkit-line-clamp: 2; line-clamp: 2; }
.pc-card--compact .pc-card__meta { font-size: var(--pc-text-xs); color: var(--pc-color-muted); overflow-wrap: anywhere; }
.pc-card--compact .pc-fit { font-size: var(--pc-text-xs); }
.pc-card--compact .pc-card__price .pc-price { font-size: var(--pc-text-sm); white-space: nowrap; }
@media (max-width: 620px) {
	.pc-card--compact { grid-template-columns: var(--pc-search-thumbnail-size-mobile) minmax(0, 1fr); align-items: start; row-gap: var(--pc-space-1); }
	.pc-card--compact .pc-card__media { width: var(--pc-search-thumbnail-size-mobile); height: var(--pc-search-thumbnail-size-mobile); grid-row: 1 / 3; }
	.pc-card--compact .pc-card__price { grid-column: 2; }
	.pc-card__media { margin-bottom: var(--pc-space-3); }
	.pc-card--grid .pc-card__name { font-size: var(--pc-text-base); }
}
@media (max-width: 370px) {
	.pc-card--grid .pc-card__name { font-size: var(--pc-text-sm); }
}

/* Grid container helper for later tracks: auto-fill up to five columns by available width. */
.pc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(var(--pc-collection-card-min-width), (100% - (var(--pc-collection-columns) - 1) * var(--pc-collection-grid-gap)) / var(--pc-collection-columns)), 1fr));
	gap: var(--pc-collection-row-gap) var(--pc-collection-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pc-card-grid > * { display: flex; min-width: 0; }
.pc-card-grid > * > .pc-card { flex: 1; }
@media (max-width: 620px) { .pc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pc-space-6) var(--pc-product-grid-gap-mobile); } }

/* ---------- Recovery (404 / unavailable / no results) ---------- */
.pc-recovery { display: grid; gap: var(--pc-space-8); max-width: 48rem; padding-block: var(--pc-space-12) var(--pc-space-16); }
.pc-recovery__intro { display: grid; justify-items: start; gap: var(--pc-space-3); }
.pc-recovery__icon { color: var(--pc-color-muted); }
.pc-recovery__title { font-size: var(--pc-heading-display); line-height: var(--pc-leading-display); letter-spacing: var(--pc-tracking-display); }
h2.pc-recovery__title { font-size: var(--pc-heading-section); line-height: var(--pc-leading-heading); letter-spacing: var(--pc-tracking-heading); }
.pc-recovery__text { color: var(--pc-color-muted); font-size: var(--pc-text-md); max-width: 38rem; }
.pc-recovery__block { display: grid; justify-items: start; gap: var(--pc-space-3); }
.pc-recovery__heading { font-size: var(--pc-text-xs); letter-spacing: var(--pc-tracking-label); text-transform: uppercase; color: var(--pc-color-muted); }
.pc-recovery__search { width: 100%; }
.pc-recovery__support { display: flex; flex-wrap: wrap; gap: var(--pc-space-2) var(--pc-space-6); margin: 0; padding: 0; list-style: none; }
.pc-recovery__support .pc-link { min-height: var(--pc-control-height); }
.pc-recovery--compact { gap: var(--pc-space-4); padding-block: var(--pc-space-4); }
.pc-recovery--compact .pc-recovery__text { font-size: var(--pc-text-sm); }

.pc-search-inline { display: flex; gap: var(--pc-space-2); width: 100%; max-width: 36rem; }
.pc-search-inline .pc-search__box { flex: 1; }

/* ---------- Page content (generic pages) ---------- */
.pc-main { min-height: 50vh; }
.pc-page { padding-block: var(--pc-space-10) var(--pc-space-16); }
.pc-page__title { margin-bottom: var(--pc-space-6); font-size: var(--pc-collection-title-size); line-height: var(--pc-leading-heading); letter-spacing: var(--pc-tracking-display); }
.pc-prose { max-width: var(--pc-pdp-description-width); font-size: var(--pc-text-md); line-height: var(--pc-leading-body); }
.pc-prose > * + * { margin-top: var(--pc-space-4); }
.pc-prose a { color: inherit; text-underline-offset: var(--pc-space-1); }

/* ---------- Touch text fields: never below 16px (prevents iOS focus zoom) ----------
 * base.css sets this in the layered pc-base, but unlayered component and plugin rules
 * (.pc-input/.pc-select/.pc-textarea, hsf- forms, finder) beat any layered rule. Kept here, last,
 * at (0,1,1)+ specificity so every storefront text field on a coarse pointer is at least 16px. */
@media (pointer: coarse) {
	.pc-storefront input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
	.pc-storefront select,
	.pc-storefront textarea {
		font-size: max(1rem, 1em);
	}
}
/* Touch: small text links that navigate (breadcrumbs, the PDP brand) get a 44px-tall hit area without moving the
   layout (padding offset by an equal negative margin). */
@media (pointer: coarse) {
	.pc-breadcrumbs a,
	.pc-pdp-brand a { display: inline-flex; align-items: center; min-height: var(--pc-control-height); margin-block: calc((1lh - var(--pc-control-height)) / 2); }
}