/*
 * Phase 4 catalog presentation.
 *
 * Global tokens, shells, buttons, product cards, focus treatment, and
 * typography remain owned by style.css. These rules are intentionally scoped
 * to catalog templates so the approved Phase 3 homepage stays unchanged.
 */

.catalog-main {
	padding-block: var(--alkhawatim-spacing-48);
}

.catalog-header,
.catalog-main .listing-header {
	display: grid;
	gap: var(--alkhawatim-spacing-8);
	margin-block-end: var(--alkhawatim-spacing-24);
}

.catalog-header__description,
.catalog-main .listing-header__description {
	max-width: var(--alkhawatim-reading-width);
	margin: 0;
	color: var(--alkhawatim-color-muted);
}

.catalog-header__description > :first-child,
.catalog-main .listing-header__description > :first-child {
	margin-block-start: 0;
}

.catalog-header__description > :last-child,
.catalog-main .listing-header__description > :last-child {
	margin-block-end: 0;
}

/* Compact category entry points. */

.catalog-category-nav {
	margin-block-end: var(--alkhawatim-spacing-48);
}

.catalog-category-nav__all {
	margin-block-end: var(--alkhawatim-spacing-12);
}

.catalog-category-nav__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--alkhawatim-spacing-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.catalog-category-nav__item {
	min-width: 0;
}

.catalog-category-nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--alkhawatim-size-button) + var(--alkhawatim-spacing-8));
	padding: var(--alkhawatim-spacing-8) var(--alkhawatim-spacing-12);
	border: 1px solid var(--alkhawatim-color-border);
	border-radius: var(--alkhawatim-radius-medium);
	background: transparent;
	color: var(--alkhawatim-color-primary);
	font-size: var(--alkhawatim-type-button);
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
}

.catalog-category-nav__link--all {
	width: 100%;
}

.catalog-category-nav__link:hover,
.catalog-category-nav__link[aria-current="page"] {
	border-color: var(--alkhawatim-color-primary);
	background: var(--alkhawatim-color-surface);
	color: var(--alkhawatim-color-primary);
}

.catalog-category-nav__link[aria-current="page"] {
	font-weight: 800;
}

.catalog-grid {
	align-items: start;
}

/* Numbered archive pagination. */

.catalog-pagination {
	margin-block-start: var(--alkhawatim-spacing-48);
}

.catalog-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--alkhawatim-spacing-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.catalog-pagination ul.page-numbers > li {
	display: flex;
}

.catalog-pagination a.page-numbers,
.catalog-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--alkhawatim-size-icon-button);
	min-height: var(--alkhawatim-size-icon-button);
	padding-inline: var(--alkhawatim-spacing-12);
	border: 1px solid var(--alkhawatim-color-border);
	border-radius: var(--alkhawatim-radius);
	background: transparent;
	color: var(--alkhawatim-color-primary);
	font-weight: 700;
	line-height: 1;
}

.catalog-pagination a.page-numbers:hover {
	border-color: var(--alkhawatim-color-primary);
	background: var(--alkhawatim-color-surface);
	color: var(--alkhawatim-color-primary);
}

.catalog-pagination span.page-numbers.current {
	border-color: var(--alkhawatim-color-primary);
	background: var(--alkhawatim-color-primary);
	color: var(--alkhawatim-color-on-dark);
}

.catalog-pagination span.page-numbers.dots {
	border-color: transparent;
}

/* Empty and mixed-result states. */

.catalog-empty {
	max-width: var(--alkhawatim-reading-width);
	padding: var(--alkhawatim-spacing-24);
	border-inline-start: 2px solid var(--alkhawatim-color-champagne);
	border-radius: var(--alkhawatim-radius);
	background: var(--alkhawatim-color-surface-soft);
}

.catalog-empty__title {
	margin: 0;
	color: var(--alkhawatim-color-primary);
	font-family: var(--alkhawatim-font-display);
	font-size: var(--alkhawatim-type-section-title);
	font-weight: 600;
	line-height: 1.25;
}

.catalog-empty__message {
	margin-block: var(--alkhawatim-spacing-8) 0;
	color: var(--alkhawatim-color-muted);
}

.catalog-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alkhawatim-spacing-12);
	margin-block-start: var(--alkhawatim-spacing-24);
}

.search-result {
	grid-column: 1 / -1;
	min-width: 0;
	padding-block: var(--alkhawatim-spacing-16);
	border-block-start: 1px solid var(--alkhawatim-color-champagne);
}

.search-result__title {
	margin: 0;
	color: var(--alkhawatim-color-primary);
	font-family: var(--alkhawatim-font-display);
	font-size: clamp(1.25rem, 4vw, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
}

.search-result__title a {
	color: inherit;
}

.search-result__title a:hover {
	color: var(--alkhawatim-color-secondary);
}

.search-result__summary {
	max-width: var(--alkhawatim-reading-width);
	margin-block: var(--alkhawatim-spacing-8) 0;
	color: var(--alkhawatim-color-muted);
}

/* Search-page form. Header search remains independently scoped in style.css. */

.catalog-search__context {
	max-width: var(--alkhawatim-reading-width);
	margin: 0;
	color: var(--alkhawatim-color-muted);
}

.catalog-search__title {
	font-size: var(--alkhawatim-type-section-title);
}

.catalog-search__form {
	max-width: var(--alkhawatim-reading-width);
	margin-block-start: var(--alkhawatim-spacing-8);
}

.catalog-search__section {
	margin-block-start: var(--alkhawatim-spacing-48);
}

.catalog-search__form .search-form {
	display: grid;
	gap: var(--alkhawatim-spacing-8);
}

.catalog-search__form .search-form label {
	min-width: 0;
}

.catalog-search__form .search-field {
	width: 100%;
	min-height: var(--alkhawatim-size-button);
	padding: var(--alkhawatim-spacing-8) var(--alkhawatim-spacing-12);
	border: 1px solid var(--alkhawatim-color-border);
	border-radius: var(--alkhawatim-radius);
	background: var(--alkhawatim-color-background);
	color: var(--alkhawatim-color-text);
}

.catalog-search__form .search-submit {
	width: 100%;
	min-height: var(--alkhawatim-size-button);
	padding-inline: var(--alkhawatim-button-padding-inline);
	border: 1px solid var(--alkhawatim-color-primary);
	border-radius: var(--alkhawatim-radius-medium);
	background: var(--alkhawatim-color-primary);
	color: var(--alkhawatim-color-on-dark);
	font-size: var(--alkhawatim-type-button);
	font-weight: 700;
	cursor: pointer;
}

.catalog-search__form .search-submit:hover {
	border-color: var(--alkhawatim-color-secondary);
	background: var(--alkhawatim-color-secondary);
}

/* Single-product editorial layout. Media is first in DOM and visual order. */

.product-detail,
.product-detail__layout,
.product-detail__info {
	min-width: 0;
}

.product-detail__layout {
	display: grid;
	gap: var(--alkhawatim-spacing-24);
	align-items: start;
}

.product-detail__info {
	display: grid;
	gap: var(--alkhawatim-spacing-16);
}

.product-detail__category,
.product-detail__categories {
	justify-self: start;
	color: var(--alkhawatim-color-muted);
	font-size: var(--alkhawatim-type-meta);
	font-weight: 700;
}

.product-detail__category:hover,
.product-detail__categories a:hover {
	color: var(--alkhawatim-color-secondary);
}

.product-detail__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alkhawatim-spacing-8);
}

.product-detail__title {
	margin: 0;
}

.product-detail__description {
	max-width: var(--alkhawatim-reading-width);
	color: var(--alkhawatim-color-text);
}

.product-detail__description > :first-child {
	margin-block-start: 0;
}

.product-detail__description > :last-child {
	margin-block-end: 0;
}

.product-detail__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alkhawatim-spacing-12);
	margin-block-start: var(--alkhawatim-spacing-8);
}

.product-detail__availability {
	justify-self: start;
	margin: 0;
	padding: var(--alkhawatim-spacing-8) var(--alkhawatim-spacing-12);
	border: 1px solid var(--alkhawatim-color-primary);
	border-radius: var(--alkhawatim-radius);
	background: var(--alkhawatim-color-surface);
	color: var(--alkhawatim-color-primary);
	font-weight: 700;
	line-height: 1.4;
}

/* Product gallery. The primary panel and compact no-script links remain
 * available without JavaScript; enhancement switches panels inline. */

.product-gallery {
	min-width: 0;
}

.product-gallery__stage {
	display: grid;
	gap: var(--alkhawatim-spacing-8);
	align-items: start;
}

.product-gallery__panel {
	display: grid;
	place-items: center;
	width: 100%;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--alkhawatim-media-ratio, 1 / 1);
	background: var(--alkhawatim-color-surface-soft);
}

.product-gallery__panel--portrait {
	width: min(100%, 36rem);
	margin-inline: auto;
}

.product-gallery__panel--square {
	width: min(100%, 42rem);
	margin-inline: auto;
}

.product-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.product-gallery__image--cover {
	object-fit: cover;
}

.product-gallery__caption {
	align-self: end;
	width: 100%;
	margin: 0;
	padding: var(--alkhawatim-spacing-8) var(--alkhawatim-spacing-12);
	background: var(--alkhawatim-color-surface-soft);
	color: var(--alkhawatim-color-muted);
	font-size: var(--alkhawatim-type-meta);
}

.product-gallery__thumbs {
	display: none;
}

.product-gallery.is-enhanced .product-gallery__thumbs {
	display: flex;
	gap: var(--alkhawatim-spacing-8);
	margin-block-start: var(--alkhawatim-spacing-12);
	padding-block: var(--alkhawatim-spacing-4);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: var(--alkhawatim-spacing-4);
	scroll-snap-type: inline proximity;
}

.product-gallery__thumb {
	display: inline-grid;
	flex: 0 0 var(--alkhawatim-spacing-64);
	place-items: center;
	width: var(--alkhawatim-spacing-64);
	height: var(--alkhawatim-spacing-64);
	padding: var(--alkhawatim-spacing-4);
	border: 1px solid var(--alkhawatim-color-border);
	border-radius: var(--alkhawatim-radius);
	background: var(--alkhawatim-color-surface-soft);
	color: var(--alkhawatim-color-primary);
	cursor: pointer;
	scroll-snap-align: start;
}

.product-gallery__thumb:hover {
	border-color: var(--alkhawatim-color-primary);
	background: var(--alkhawatim-color-surface);
}

.product-gallery__thumb[aria-pressed="true"] {
	border-color: var(--alkhawatim-color-primary);
	border-width: 2px;
	background: var(--alkhawatim-color-surface);
}

.product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Compact metadata definition list. */

.product-details {
	display: grid;
	gap: var(--alkhawatim-spacing-4);
	margin: 0;
}

.product-details__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.2fr);
	gap: var(--alkhawatim-spacing-16);
	padding-block: var(--alkhawatim-spacing-8);
}

.product-details__label {
	color: var(--alkhawatim-color-muted);
	font-weight: 700;
}

.product-details__value {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Related products and other secondary catalog sections. */

.catalog-section {
	margin-block-start: var(--alkhawatim-layout-section);
	padding-block-start: var(--alkhawatim-spacing-32);
	border-block-start: 1px solid var(--alkhawatim-color-champagne);
}

.catalog-section__header {
	margin-block-end: var(--alkhawatim-spacing-24);
}

.catalog-section__title {
	margin: 0;
	color: var(--alkhawatim-color-primary);
	font-family: var(--alkhawatim-font-display);
	font-size: var(--alkhawatim-type-section-title);
	font-weight: 600;
	line-height: 1.25;
}

.catalog-back-link {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	color: var(--alkhawatim-color-muted);
	font-size: var(--alkhawatim-type-meta);
	font-weight: 700;
	line-height: 1.4;
}

@media (min-width: 48rem) {
	.catalog-category-nav__all {
		width: calc((100% - var(--alkhawatim-spacing-32)) / 3);
		margin-block-end: var(--alkhawatim-spacing-16);
	}

	.catalog-category-nav__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--alkhawatim-spacing-16);
	}

	.catalog-category-nav__link {
		min-height: calc(var(--alkhawatim-spacing-48) + var(--alkhawatim-spacing-8));
	}

	.catalog-search__form .search-form {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.catalog-search__form .search-submit {
		width: auto;
	}

	.product-detail__layout {
		grid-template-columns: minmax(0, 1.08fr) minmax(17rem, 0.92fr);
		gap: var(--alkhawatim-spacing-32);
	}
}

@media (min-width: 64rem) {
	.catalog-main {
		padding-block: var(--alkhawatim-spacing-64);
	}

	.catalog-header,
	.catalog-main .listing-header {
		margin-block-end: var(--alkhawatim-spacing-32);
	}

	.catalog-category-nav__all {
		width: calc((100% - (var(--alkhawatim-spacing-16) * 5)) / 6);
	}

	.catalog-category-nav__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.product-detail__layout {
		grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
		gap: var(--alkhawatim-spacing-48);
	}

	.product-gallery__panel {
		max-height: 42.5rem;
	}
}