/*
 * Component: Store (catalog page).
 *
 * Scoped to .ati-store only. The results grid itself uses the shared
 * .ati-grid--cards (3 columns ≥1024px), so the canonical product card and the
 * shared grid are reused unchanged; this file only adds the store shell:
 * hero spacing, filter sidebar, toolbar, states and pagination.
 */

.ati-store__layout {
	display: grid;
	gap: var(--ati-space-6);
	padding-block: var(--ati-space-6) var(--ati-space-12);
}

/*
 * Store hero typography.
 *
 * The page-hero title/lead are shared components; these two rules only balance
 * the (longer) Store heading so it never leaves a one-word orphan line and can
 * never break mid-word. No width cap is applied: the heading keeps the full
 * container so it wraps naturally at real word boundaries at every width.
 */
.ati-store__hero .ati-page-hero__title {
	text-wrap: balance;
	overflow-wrap: break-word;
}

/*
 * Store hero description.
 *
 * The shared .ati-page-hero__lead caps at 70ch (~551px) inside a 1136px column,
 * which forced this sentence into two unbalanced lines with an isolated trailing
 * phrase. The Store hero lets the description use the full content column (the
 * same width as the heading) and balances any wrap, so it reads as one line on
 * desktop and wraps naturally on tablet/mobile. No font, text, height or
 * overflow change.
 */
.ati-store__hero .ati-page-hero__lead {
	max-width: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* ---- Sidebar ---- */
.ati-store__sidebar {
	min-width: 0;
}

.ati-store__sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-3);
	margin-bottom: var(--ati-space-3);
}

.ati-store__sidebar-title {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	margin: 0;
	font-size: var(--ati-text-h3);
	font-weight: 600;
}

.ati-store__sidebar-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-store__sidebar-icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-store__filters-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	min-height: 44px;
	padding: 0 var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text);
	font: inherit;
	font-size: var(--ati-text-body);
	font-weight: 600;
	cursor: pointer;
}

.ati-store__filters-trigger-icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-store__filters-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--ati-space-1);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
	font-size: var(--ati-text-spec);
	font-weight: 700;
}

.ati-store__filters-count[hidden] {
	display: none;
}

.ati-store__drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text-muted);
	cursor: pointer;
}

.ati-store__drawer-close:hover {
	color: var(--ati-color-primary);
	border-color: var(--ati-color-primary);
}

.ati-store__drawer-close .ati-icon {
	width: 18px;
	height: 18px;
}

/* ---- Search ---- */
.ati-store__search {
	margin-bottom: var(--ati-space-3);
}

.ati-store__search-field {
	position: relative;
	display: flex;
	align-items: center;
}

.ati-store__search-icon {
	position: absolute;
	inset-inline-start: var(--ati-space-3);
	display: inline-flex;
	color: var(--ati-color-text-muted);
	pointer-events: none;
}

.ati-store__search-icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-store__search-input {
	width: 100%;
	min-height: 44px;
	padding-block: var(--ati-space-2);
	padding-inline-start: calc(var(--ati-space-3) + 24px);
	padding-inline-end: calc(var(--ati-space-3) + 24px);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text);
	font: inherit;
	font-size: var(--ati-text-body);
}

.ati-store__search-input::placeholder {
	color: var(--ati-color-text-muted);
}

.ati-store__search-input:focus-visible {
	outline: none;
	border-color: var(--ati-color-primary);
	box-shadow: var(--ati-focus-ring);
}

.ati-store__search-clear {
	position: absolute;
	inset-inline-end: var(--ati-space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--ati-radius-full);
	background: transparent;
	color: var(--ati-color-text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.ati-store__search-clear:hover {
	color: var(--ati-color-primary);
}

.ati-store__search-clear[hidden] {
	display: none;
}

.ati-store__suggestions {
	margin-top: var(--ati-space-2);
	padding: var(--ati-space-2);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
}

.ati-store__suggestions[hidden] {
	display: none;
}

.ati-store__suggestions-title {
	margin: 0 0 var(--ati-space-1);
	padding-inline: var(--ati-space-2);
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-text-muted);
}

.ati-store__suggestions-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-store__suggestion {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	width: 100%;
	min-height: 40px;
	padding: var(--ati-space-2) var(--ati-space-3);
	border: 0;
	border-radius: var(--ati-radius-sm);
	background: transparent;
	color: var(--ati-color-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ati-store__suggestion:hover {
	background: var(--ati-color-surface-container);
	color: var(--ati-color-primary);
}

.ati-store__suggestion-name {
	min-width: 0;
	overflow-wrap: break-word;
}

.ati-store__suggestion-count {
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

.ati-store__suggestions-empty {
	margin: 0;
	padding: var(--ati-space-2) var(--ati-space-3);
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
}

.ati-store__cats,
.ati-store__children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-store__children {
	margin-inline-start: var(--ati-space-3);
	padding-inline-start: var(--ati-space-3);
}

/*
 * Hierarchy guide.
 *
 * The guide used to be a single border on the whole child <ul>, so a parent's
 * line ran the full height of the list — including down alongside a nested
 * grandchild list that sits inside one of its <li>s (the packaging line kept
 * going beside hardbox's children). It is now drawn as one segment per DIRECT
 * child row, so each segment spans only its own row and can never cross into a
 * deeper level. Positioned at the list's start edge via the row's own box.
 */
.ati-store__children > .ati-store__cat-item > .ati-store__cat-row {
	position: relative;
}

.ati-store__children > .ati-store__cat-item > .ati-store__cat-row::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(-1 * var(--ati-space-3));
	width: 2px;
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-divider);
}

/* Row separators stay inside their own list. */
.ati-store__cats > .ati-store__cat-item + .ati-store__cat-item,
.ati-store__children > .ati-store__cat-item + .ati-store__cat-item {
	border-top: 1px solid var(--ati-color-divider);
}

.ati-store__cat-item {
	margin: 0;
}

.ati-store__cat-row {
	display: flex;
	align-items: center;
	gap: var(--ati-space-1);
}

.ati-store__cat {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	min-height: 44px;
	padding: var(--ati-space-2) var(--ati-space-3);
	border-radius: var(--ati-radius-sm);
	color: var(--ati-color-text);
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.ati-store__cat:hover {
	background: var(--ati-color-surface-container);
	color: var(--ati-color-primary);
}

/* Selected: tint + weight + a shape accent (never colour alone). */
.ati-store__cat.is-active {
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
	font-weight: 600;
}

.ati-store__cat.is-active::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary);
}

.ati-store__cat:focus-visible,
.ati-store__cat-toggle:focus-visible,
.ati-store__filters-trigger:focus-visible,
.ati-store__drawer-close:focus-visible,
.ati-store__suggestion:focus-visible,
.ati-store__clear-all:focus-visible,
.ati-store__children-retry:focus-visible {
	outline: none;
	box-shadow: var(--ati-focus-ring);
}

.ati-store__cat-name {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Leading icon on the first top-level category row (packaging). Decorative —
 * hidden from assistive tech in the markup; the accessible name stays the
 * category title. */
.ati-store__cat-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ati-color-primary);
}

.ati-store__cat-icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-store__cat-count {
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

.ati-store__cat.is-active .ati-store__cat-count {
	color: var(--ati-color-primary);
}

.ati-store__cat-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--ati-radius-sm);
	background: transparent;
	color: var(--ati-color-text-muted);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.ati-store__cat-toggle:hover {
	background: var(--ati-color-surface-container);
	color: var(--ati-color-primary);
}

.ati-store__cat-toggle .ati-icon {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
	transition: transform 160ms ease;
}

.ati-store__cat-toggle[aria-expanded="true"] .ati-icon {
	transform: rotate(-90deg);
}

/* Lazy-children states */
.ati-store__children-loading {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: var(--ati-space-2) var(--ati-space-3);
}

.ati-store__children-error {
	padding: var(--ati-space-2) var(--ati-space-3);
}

.ati-store__children-retry {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ati-color-primary);
	font: inherit;
	font-size: var(--ati-text-caption);
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.ati-store__children-retry:hover {
	text-decoration: underline;
}

/* ---- Results ---- */
.ati-store__results {
	min-width: 0;
}

.ati-store__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-3);
	margin-bottom: var(--ati-space-4);
}

.ati-store__count {
	margin: 0;
	color: var(--ati-color-text-muted);
}

.ati-store__active-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ati-space-2);
}

.ati-store__active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
}

.ati-store__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
	padding: var(--ati-space-1) var(--ati-space-2) var(--ati-space-1) var(--ati-space-3);
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
	font-size: var(--ati-text-caption);
	font-weight: 600;
}

.ati-store__chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: var(--ati-radius-full);
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ati-store__chip-remove:hover {
	background: rgba(15, 124, 117, 0.12);
}

.ati-store__chip-label {
	min-width: 0;
	overflow-wrap: break-word;
}

.ati-store__clear-all {
	border: 0;
	background: transparent;
	color: var(--ati-color-text-muted);
	font: inherit;
	font-size: var(--ati-text-caption);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ati-store__clear-all:hover {
	color: var(--ati-color-primary);
}

.ati-store__clear-all[hidden] {
	display: none;
}

/* ---- Infinite scroll ---- */
.ati-store__sentinel {
	height: 1px;
	margin-top: var(--ati-space-4);
}

.ati-store__sentinel[hidden],
.ati-store__loader[hidden],
.ati-store__loadmore[hidden],
.ati-store__end[hidden] {
	display: none;
}

.ati-store__loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ati-space-2);
	padding: var(--ati-space-6) 0;
	color: var(--ati-color-text-muted);
}

.ati-store__spinner {
	width: 1.1em;
	height: 1.1em;
	border: 2px solid var(--ati-color-border);
	border-top-color: var(--ati-color-primary);
	border-radius: var(--ati-radius-full);
	animation: ati-store-spin 0.8s linear infinite;
}

.ati-store__loadmore {
	display: flex;
	justify-content: center;
	padding: var(--ati-space-4) 0;
}

.ati-store__end {
	margin: var(--ati-space-4) 0 0;
	text-align: center;
	color: var(--ati-color-text-muted);
}

.ati-store__error {
	margin-bottom: var(--ati-space-6);
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface-container);
	text-align: center;
}

.ati-store__error p {
	margin: 0 0 var(--ati-space-3);
}

.ati-store__error[hidden] {
	display: none;
}

.ati-store__empty {
	padding: var(--ati-space-12) var(--ati-space-4);
	border: 1px dashed var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
	text-align: center;
}

.ati-store__empty-title {
	margin: 0 0 var(--ati-space-2);
	font-size: var(--ati-text-h3);
	font-weight: 600;
}

.ati-store__empty-text {
	margin: 0 0 var(--ati-space-4);
	color: var(--ati-color-text-muted);
}

/* Loading: dim the grid while a batch is in flight. */
.ati-store.is-loading .ati-store__grid-wrap {
	opacity: 0.6;
}

@keyframes ati-store-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ati-store__spinner {
		animation: none;
	}
}

/* ---- Tablet / desktop ---- */
@media (min-width: 1024px) {
	.ati-store__layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--ati-space-8);
		align-items: start;
	}

	.ati-store__sidebar {
		position: sticky;
		top: var(--ati-space-6);
	}

	.ati-store__filters-trigger,
	.ati-store__drawer-close,
	.ati-store__sidebar-overlay {
		display: none;
	}
}

/* ---- Mobile: the filter panel becomes a right-side drawer ---- */
@media (max-width: 1023px) {
	.ati-store__sidebar {
		position: fixed;
		inset: 0;
		z-index: 120;
		display: none;
	}

	.ati-store__sidebar.is-open {
		display: block;
	}

	.ati-store__sidebar-panel {
		position: absolute;
		inset-block: 0;
		right: 0;
		width: min(380px, 100vw);
		max-width: 100%;
		padding: var(--ati-space-4);
		overflow-y: auto;
		background: var(--ati-color-surface);
		border-inline-start: 1px solid var(--ati-color-border);
		box-shadow: var(--ati-shadow-micro);
	}

	.ati-store__sidebar-overlay {
		position: fixed;
		inset: 0;
		z-index: 119;
		background: rgba(24, 34, 53, 0.45);
	}

	.ati-store__sidebar-overlay[hidden] {
		display: none;
	}

	body.ati-store-drawer-open {
		overflow: hidden;
	}

	/* Touch-friendly expansion targets on small screens. */
	.ati-store__cat-toggle {
		width: 44px;
		height: 44px;
	}
}