/* ===================================================================
 * Shop archive
 *
 * This is the page customers buy from, and it was the one screen still
 * wearing default WooCommerce blocks: a bare browser <select>, a results
 * sentence with no relationship to it, and a product grid that left a hole
 * where a third card would have been.
 * ================================================================= */

/* ---- Heading band ---- */
.sm-shophead { text-align: center; }
.sm-shophead .sm-crumbs { justify-content: center; }
.sm-crumbs__here { font-weight: 700; color: var(--wp--preset--color--navy); }
.sm-shophead__t {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
	margin: .1em 0 0;
	text-wrap: balance;
}
.sm-shophead__d {
	margin: .7em auto 0;
	max-inline-size: 44rem;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* ---- Toolbar ---- */
.sm-shopbar { margin-block-end: var(--wp--preset--spacing--40); }

.sm-shopbar__cats {
	display: flex;
	flex-wrap: wrap;
	gap: .55em;
	justify-content: center;
}
.sm-chip {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5em 1.1em;
	border: 2px solid #C3D9EC;
	border-radius: 999px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.sm-chip:hover,
.sm-chip:focus-visible { border-color: var(--wp--preset--color--navy); }
.sm-chip.is-current {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}
.sm-chip__n {
	min-inline-size: 1.6em;
	padding: .05em .4em;
	border-radius: 999px;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--navy);
	font-size: .78rem;
	font-weight: 700;
	text-align: center;
	/* Latin digits keep their own order inside an Arabic label. */
	unicode-bidi: isolate;
}
.sm-chip.is-current .sm-chip__n { background: rgba(255, 255, 255, .22); color: var(--wp--preset--color--paper); }

.sm-shopbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--cloud);
}
.sm-shopbar__count {
	margin: 0;
	font-size: .98rem;
	color: var(--wp--preset--color--ink);
	unicode-bidi: isolate;
}

/* ---- Sorting ----
   A real <select>: a custom listbox would have to reimplement keyboard
   handling, typeahead and the mobile picker, and would be worse at all
   three. Styled, with the arrow drawn here so it sits on the correct side
   in both directions. */
.sm-sort { display: flex; align-items: center; gap: .6em; }
.sm-sort label { font-size: .95rem; color: var(--wp--preset--color--ink); opacity: .8; }
.sm-sort__wrap { position: relative; }
.sm-sort select {
	appearance: none;
	-webkit-appearance: none;
	padding-block: .55em;
	padding-inline: 1em 2.4em;
	border: 2px solid #C3D9EC;
	border-radius: 999px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}
.sm-sort select:hover { border-color: var(--wp--preset--color--navy); }
.sm-sort select:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}
.sm-sort__wrap::after {
	content: "";
	position: absolute;
	inset-inline-end: 1em;
	inset-block-start: 50%;
	inline-size: .5em;
	block-size: .5em;
	margin-block-start: -.3em;
	border-inline-end: 2px solid var(--wp--preset--color--navy);
	border-block-end: 2px solid var(--wp--preset--color--navy);
	transform: rotate(45deg);
	pointer-events: none;
}
.sm-sort noscript button {
	padding: .55em 1.1em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ---- Empty state ---- */
.sm-noresults {
	text-align: center;
	padding-block: var(--wp--preset--spacing--50);
}
.sm-noresults__h {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 0 0 .4em;
}
.sm-noresults p { margin: 0 0 1.2em; color: var(--wp--preset--color--ink); }
.sm-noresults__btn {
	display: inline-block;
	padding: .75em 1.7em;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	font-weight: 700;
	text-decoration: none;
}
.sm-noresults__btn:hover { background: var(--wp--preset--color--navy); }

/* ---- Reassurance strip ---- */
.sm-reassure__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.sm-reassure__list li {
	display: grid;
	gap: .3em;
	padding-inline-start: 1em;
	border-inline-start: 4px solid var(--wp--preset--color--sky);
}
.sm-reassure__list li:nth-child(2) { border-inline-start-color: var(--wp--preset--color--grass); }
.sm-reassure__list li:nth-child(3) { border-inline-start-color: var(--wp--preset--color--brand); }
.sm-reassure__list li:nth-child(4) { border-inline-start-color: var(--wp--preset--color--navy); }
.sm-reassure__list b { font-size: 1.05rem; color: var(--wp--preset--color--navy); line-height: 1.3; }
.sm-reassure__list span { font-size: .95rem; line-height: 1.5; color: var(--wp--preset--color--ink); opacity: .85; }

@media (max-width: 1080px) {
	.sm-reassure__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.sm-reassure__list { grid-template-columns: 1fr; }
	.sm-shopbar__row { justify-content: center; }
	.sm-sort { inline-size: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.sm-chip { transition: none; }
}

/* ---- Search results ---- */
.sm-search--inline {
	max-inline-size: 34rem;
	margin: 1.4rem auto 0;
	border-block-start: 0;
	padding-block-start: 0;
}
.sm-search--inline input[type="search"] { border-color: transparent; }
.sm-card__price {
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	unicode-bidi: isolate;
}

/* ---- Sale prices ----
   Browsers underline <ins> and that reads as a link on a price. The old
   price is the one that should look struck; the new one should look loud. */
.sm-card__price del,
.sm-artcta__price del {
	opacity: .55;
	font-weight: 600;
	margin-inline-end: .4em;
}
.sm-card__price ins,
.sm-artcta__price ins {
	text-decoration: none;
	color: var(--wp--preset--color--brand);
	font-weight: 800;
}