/* =============================================================================
   GENERIC PAGE / SEARCH / 404
   One readable column for pages that have no template of their own, search
   results, and the not-found page. Uses only the global tokens.
   ============================================================================= */

.page-generic {
	padding-top: var(--section-y-md);
	padding-bottom: var(--section-y);
}

.page-generic__inner {
	max-width: 820px;
}

.page-generic__header {
	margin-bottom: 28px;
}

.page-generic__eyebrow {
	margin:         0 0 var(--space-xs);
	font-size:      var(--text-body-small);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          var(--color-text-secondary);
}

.page-generic__title {
	margin:    0 0 10px;
	font-size: var(--text-h2);
	text-wrap: balance;
}

p.page-generic__subline {
	margin:    0;
	color:     var(--color-text-secondary);
	max-width: 60ch;
}

/* -- Editor content --------------------------------------------------------- */

.page-generic__content {
	line-height: var(--leading-relaxed);
}

.page-generic__content > * + * {
	margin-top: var(--space-m);
}

.page-generic__content h2 { font-size: var(--text-h3); margin-top: var(--space-2xl); }
.page-generic__content h3 { font-size: var(--text-h4); margin-top: var(--space-xl); }

.page-generic__content ul,
.page-generic__content ol {
	padding-left: var(--space-l);
	list-style:   revert;
}

.page-generic__content li + li {
	margin-top: 6px;
}

.page-generic__content a {
	color:       var(--color-accent);
	font-weight: var(--weight-bold);
}

.page-generic__content table {
	width:           100%;
	border-collapse: collapse;
	font-size:       var(--text-body-small);
}

.page-generic__content th,
.page-generic__content td {
	padding:       10px var(--space-s);
	border-bottom: 1px solid var(--color-border-subtle);
	text-align:    left;
	vertical-align: top;
}

.page-generic__content th {
	font-weight: var(--weight-bold);
	background:  var(--color-bg-subtle);
}

/* -- Search form (search + 404) -------------------------------------------- */

.search-results__form {
	display:   flex;
	gap:       10px;
	flex-wrap: wrap;
	margin:    0 0 var(--space-xl);
}

.search-results__input {
	flex:          1 1 260px;
	min-width:     0;
	padding:       var(--space-s) 14px;
	border:        1px solid var(--color-border-subtle);
	border-radius: var(--radius-s);
	font-size:     var(--text-body);
}

.search-results__input:focus {
	outline:      2px solid var(--color-accent);
	outline-offset: 1px;
	border-color: var(--color-accent);
}

/* -- Results list ----------------------------------------------------------- */

.search-results {
	display: grid;
	gap:     0;
	margin:  0;
	padding: 0;
}

.search-results__item {
	padding:       20px 0;
	border-top:    1px solid var(--color-border-subtle);
}

.search-results__item:last-child {
	border-bottom: 1px solid var(--color-border-subtle);
}

.search-results__type {
	display:        inline-block;
	margin-bottom:  6px;
	font-size: var(--text-xs);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          var(--color-accent);
}

.search-results__title {
	display:         block;
	font-size:       var(--text-h5);
	font-weight:     var(--weight-bold);
	color:           var(--color-text-primary);
	text-decoration: none;
}

.search-results__title:hover {
	color: var(--color-accent);
}

p.search-results__excerpt {
	margin:    6px 0 0;
	font-size: var(--text-body-small);
	color:     var(--color-text-secondary);
}

/* -- SKU matches: listed above the ordinary results ------------------------- */

.search-results__group-title {
	margin:    0 0 var(--space-s);
	font-size: var(--text-h4);
}

/* Spacing before the second group ("Other results"). */
.search-results + .search-results__group-title,
.search-results__note + .search-results__group-title {
	margin-top: var(--space-2xl);
}

/* Item SKU, manufacturer SKU and the variant's options, as one wrapping row. */
p.search-results__skus {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--space-3xs) var(--space-l);
	margin:    6px 0 0;
	font-size: var(--text-body-small);
	color:     var(--color-text-secondary);
}

.search-results__skus strong {
	color: var(--color-text-primary);
}

p.search-results__note {
	margin:    var(--space-s) 0 0;
	font-size: var(--text-body-small);
	color:     var(--color-text-secondary);
}

.search-results__pagination {
	margin-top: var(--space-xl);
}

.search-results__pagination .page-numbers {
	display:    flex;
	gap:        6px;
	flex-wrap:  wrap;
	list-style: none;
	margin:     0;
	padding:    0;
}

.search-results__pagination a.page-numbers,
.search-results__pagination span.page-numbers {
	display:         inline-flex;
	align-items:     center;
	min-height:      40px;
	padding:         0 var(--space-s);
	border:          1px solid var(--color-border-subtle);
	border-radius:   var(--radius-s);
	font-size:       var(--text-body-small);
	font-weight:     var(--weight-bold);
	color:           var(--color-text-primary);
	text-decoration: none;
}

.search-results__pagination span.page-numbers.current {
	background:   var(--color-accent);
	border-color: var(--color-accent);
	color:        var(--color-bg-primary);
}

/* -- Empty state + actions -------------------------------------------------- */

.page-generic__empty {
	padding:       var(--space-xl);
	border:        1px solid var(--color-border-subtle);
	border-radius: var(--radius-m);
	color:         var(--color-text-secondary);
}

.page-generic__empty p + p {
	margin-top: 10px;
}

.page-generic__empty a {
	color:       var(--color-accent);
	font-weight: var(--weight-bold);
}

.page-generic__actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--space-s);
}

@media ( max-width: 600px ) {
	.page-generic {
		padding-top:    28px;
		padding-bottom: var(--section-y);
	}

	.page-generic__title {
		font-size: var(--text-h3);
	}

	.page-generic__actions > a {
		flex:       1 1 100%;
		text-align: center;
	}
}