/*
 * NLH Commerce Core components. Mobile-first; only --nlh-c-* tokens (each Store Core maps them to its theme),
 * with neutral fallbacks: system colours, system font, currentColor borders. Touch targets >= 44px.
 */

.nlh-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.nlh-hp {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Buttons */
.nlh-button,
.nlh-offer__add,
.nlh-access__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--nlh-c-line, currentColor);
	border-radius: var(--nlh-c-radius, 4px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-family: var(--nlh-c-font, system-ui, sans-serif);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.nlh-button--primary,
.nlh-offer__add,
.nlh-sheet__checkout {
	border-color: var(--nlh-c-accent, CanvasText);
	background: var(--nlh-c-accent, CanvasText);
	color: var(--nlh-c-accent-ink, Canvas);
	font-weight: 600;
}

.nlh-button--quiet {
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.nlh-button:focus-visible,
.nlh-offer a:focus-visible,
.nlh-sheet a:focus-visible,
.nlh-sheet button:focus-visible,
.nlh-access__input:focus-visible {
	outline: 2px solid var(--nlh-c-accent, CanvasText);
	outline-offset: 2px;
}

.nlh-button[disabled],
.nlh-offer__add[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* Offer card: full width of its container (never a narrow centred box). */
.nlh-offer--card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 1rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid var(--nlh-c-line, currentColor);
	border-radius: var(--nlh-c-radius, 4px);
	background: var(--nlh-c-bg, transparent);
	color: var(--nlh-c-ink, inherit);
	font-family: var(--nlh-c-font, inherit);
	overflow-wrap: anywhere;
}

.nlh-offer__media img,
.nlh-offer__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--nlh-c-radius, 4px);
}

.nlh-offer__body > * {
	margin: 0 0 0.5rem;
}

.nlh-offer__name {
	font-family: var(--nlh-c-font-display, var(--nlh-c-font, inherit));
	font-size: 1.125rem;
	line-height: 1.3;
}

.nlh-offer__name a {
	color: inherit;
}

.nlh-offer__because,
.nlh-offer__meta {
	color: var(--nlh-c-muted, inherit);
	font-size: 0.9375rem;
}

.nlh-offer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0.75rem 0 0;
}

.nlh-offer__price {
	font-weight: 600;
}

.nlh-offer__details {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
}

@media (min-width: 600px) {
	.nlh-offer--card {
		grid-template-columns: 160px minmax(0, 1fr);
		padding: 1.25rem;
	}
}

.nlh-offer--card.nlh-offer--noimg {
	grid-template-columns: minmax(0, 1fr);
}

/* Offer line */
.nlh-offer--line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0.75rem 0;
	overflow-wrap: anywhere;
}

.nlh-offer--line .nlh-offer__name {
	font-size: inherit;
	font-weight: 600;
}

.nlh-offer__add--line {
	padding: 0.4rem 0.8rem;
}

/* Offer grid */
.nlh-offers__list,
.nlh-thankyou__list,
.nlh-rv__list,
.nlh-access__downloads,
.nlh-access__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nlh-offers__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.nlh-offers__list .nlh-offer--card {
	height: 100%;
	margin: 0;
}

/* Inside a grid cell the image column stays narrow so the text keeps its width. */
@media (min-width: 600px) {
	.nlh-offers__list .nlh-offer--card {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.nlh-offers__list .nlh-offer--card.nlh-offer--noimg {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* auto-fit collapses empty tracks: one available offer fills the row, never a half-width box. */
@media (min-width: 900px) {
	.nlh-offers__list {
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	}
}

/* Add-to-cart sheet: full-width bottom sheet below 900px, side panel from 900px (no centred box). */
.nlh-sheet {
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	max-width: 100%;
	max-height: 88vh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--nlh-c-radius, 8px) var(--nlh-c-radius, 8px) 0 0;
	background: var(--nlh-c-bg, Canvas);
	color: var(--nlh-c-ink, CanvasText);
	font-family: var(--nlh-c-font, system-ui, sans-serif);
	box-sizing: border-box;
	overflow: auto;
	overscroll-behavior: contain;
}

.nlh-sheet::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.nlh-sheet[open] {
	animation: nlh-sheet-up 0.2s ease-out;
}

.nlh-sheet__panel {
	display: grid;
	gap: 0.75rem;
	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	overflow-wrap: anywhere;
}

.nlh-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.nlh-sheet__status {
	margin: 0;
	font-family: var(--nlh-c-font-display, var(--nlh-c-font, inherit));
	font-size: 1.125rem;
}

.nlh-sheet__close {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.nlh-sheet__item,
.nlh-sheet__rec-row,
.nlh-cart-rec__row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}

.nlh-sheet__rec-row,
.nlh-cart-rec__row {
	grid-template-columns: 64px minmax(0, 1fr) auto;
}

.nlh-sheet__img,
.nlh-cart-rec__img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--nlh-c-radius, 4px);
}

.nlh-sheet__meta > *,
.nlh-cart-rec__meta > * {
	margin: 0 0 0.25rem;
}

.nlh-sheet__name,
.nlh-sheet__rec-name,
.nlh-cart-rec__name {
	font-weight: 600;
	color: inherit;
}

.nlh-sheet__summary,
.nlh-sheet__reason,
.nlh-cart-rec__reason {
	margin: 0;
	color: var(--nlh-c-muted, inherit);
	font-size: 0.9375rem;
}

.nlh-sheet__checkout {
	width: 100%;
}

.nlh-sheet__secondary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
}

.nlh-sheet__rec {
	padding-top: 0.75rem;
	border-top: 1px solid var(--nlh-c-line, currentColor);
}

.nlh-sheet__rec-title,
.nlh-cart-rec__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

@media (min-width: 900px) {
	.nlh-sheet {
		inset: 0 0 0 auto;
		width: 420px;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.nlh-sheet[open] {
		animation-name: nlh-sheet-in;
	}

	.nlh-sheet__panel {
		padding: 1.5rem;
	}
}

@keyframes nlh-sheet-up {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes nlh-sheet-in {
	from { transform: translateX(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.nlh-sheet[open],
	.nlh-sheet {
		animation: none !important;
		transition: none !important;
	}
}

/* Block cart recommendation + checkout notice */
.nlh-cart-rec,
.nlh-checkout-notice {
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--nlh-c-line, currentColor);
	overflow-wrap: anywhere;
}

.nlh-checkout-notice__line {
	margin: 0 0 0.5rem;
	color: var(--nlh-c-muted, inherit);
	font-size: 0.9375rem;
}

.nlh-cart-rec__error {
	margin: 0.5rem 0 0;
}

.nlh-cart-rec__error:empty {
	margin: 0;
}

/* Purchase access */
.nlh-access {
	display: grid;
	gap: 2rem;
	width: 100%;
	font-family: var(--nlh-c-font, inherit);
}

.nlh-access__form {
	display: grid;
	gap: 0.75rem;
	width: 100%;
}

.nlh-access__label {
	font-weight: 600;
}

.nlh-access__input {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--nlh-c-line, currentColor);
	border-radius: var(--nlh-c-radius, 4px);
	background: var(--nlh-c-bg, Field);
	color: var(--nlh-c-ink, FieldText);
	font: inherit;
	box-sizing: border-box;
}

/* The status live region stays rendered (never display:none) so screen readers announce its first
   message; while empty it is only collapsed visually. */
.nlh-access__status:empty {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.nlh-access__order {
	padding: 1rem 0;
	border-top: 1px solid var(--nlh-c-line, currentColor);
}

.nlh-access__order-title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
}

.nlh-access__downloads {
	display: grid;
	gap: 0.5rem;
}

.nlh-access__downloads li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
}

.nlh-access__product {
	color: var(--nlh-c-muted, inherit);
}

.nlh-access__links li,
.nlh-access__library {
	margin: 0.5rem 0;
}

/* Recently viewed */
.nlh-rv__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
}

.nlh-rv__link {
	display: grid;
	gap: 0.5rem;
	color: inherit;
	min-height: 44px;
}

.nlh-rv__link img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--nlh-c-radius, 4px);
}

.nlh-rv__price {
	display: block;
	color: var(--nlh-c-muted, inherit);
}

/* Thank-you */
.nlh-thankyou {
	margin: 1.5rem 0;
}

.nlh-thankyou__heading {
	font-size: 1.125rem;
}