/* =========================================================
   threadslabin - SHOP PAGE
   Body class: custom-woo-shop-listing

   Save as: assets/css/shop.css
   Loaded on shop, category and tag archives by inc/page-styles.php.
   ========================================================= */

/*
 * The tokens sit on .tl-card as well as .tl-shop.
 *
 * The card is printed by threadslabin_shop_card() and now appears on the
 * front page strip and the 404 page too, where there is no .tl-shop
 * wrapper. Without this the variables resolved to nothing there and the
 * "View Product" button lost its background entirely, rendering as a
 * plain underlined link.
 */
.tl-shop,
.tl-card {
	--sh-accent: var(--madder, #a8402f);
	--sh-accent-dark: #8c3526;
	--sh-accent-soft: #faf1ef;

	--sh-ink: var(--ink, #1a1d1a);
	--sh-text: var(--ink-soft, #5d625c);
	--sh-muted: #8a8f89;

	--sh-border: rgba(26, 29, 26, 0.12);
	--sh-border-soft: rgba(26, 29, 26, 0.07);

	--sh-shadow: 0 14px 34px rgba(26, 29, 26, 0.07);
	--sh-radius: 14px;
	--sh-radius-sm: 9px;
}

/* Lift the theme's narrow page column */
body.custom-woo-shop-listing .site-main .wrap,
body.custom-woo-product-category .site-main .wrap,
body.custom-woo-product-tag .site-main .wrap {
	width: min(100% - 2.5rem, 1360px);
}

/* =========================================================
   1. HEADER
   ========================================================= */

.tl-shop__header {
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
}

.tl-shop__title {
	margin: 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(2.6rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--sh-ink);
}

.tl-shop__intro {
	max-width: 62ch;
	margin: 0.9rem auto 0;
	color: var(--sh-text);
}

/* =========================================================
   2. LAYOUT

   One full width column, so the grid lines up with the header
   and the footer.
   ========================================================= */

.tl-shop__main { min-width: 0; }

/* =========================================================
   3. TOP BAR: count + sorting
   ========================================================= */

.tl-shop__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--sh-border);
}

.tl-shop__count {
	margin: 0;
	font-size: 0.95rem;
	color: var(--sh-text);
}

.tl-shop__sort { margin: 0; }

.tl-shop .tl-shop__sort select {
	min-width: 220px;
	min-height: 44px;
	padding: 0.5em 2.2em 0.5em 0.9em;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius-sm);
	background: #fff;
	font-family: var(--body, system-ui, sans-serif);
	font-size: 0.92rem;
	color: var(--sh-ink);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1d1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7em center;
	background-size: 16px;
}

/* =========================================================
   4. PRODUCT GRID
   ========================================================= */

.tl-shop__results { position: relative; min-height: 200px; }

.tl-shop__results.is-busy { opacity: 0.45; pointer-events: none; }

.tl-products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tl-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0.75rem;
	background: #fff;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tl-card:hover {
	border-color: var(--sh-ink);
	box-shadow: var(--sh-shadow);
	transform: translateY(-2px);
}

.tl-card__media {
	position: relative;
	display: block;
	margin-bottom: 0.85rem;
	border-radius: 10px;
	overflow: hidden;
	background: var(--chalk, #f3f2ed);
}

.tl-card__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.tl-card:hover .tl-card__media img { transform: scale(1.04); }

/* ---------- Second image on hover ----------

   The gallery image sits on top of the main one and fades in. Both are
   in the flow only once: the hover image is absolutely positioned, so it
   adds no height and the card never shifts.

   Touch devices have no hover, so it is left hidden there rather than
   firing on tap and swallowing the first tap on the link. */

.tl-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.tl-card:hover .tl-card__img--hover { opacity: 1; }
	.tl-card:hover .tl-card__img--main { opacity: 0; }
}

.tl-card__img--main { transition: opacity 0.35s ease, transform 0.35s ease; }

.tl-card__noimg { display: block; aspect-ratio: 4 / 5; }

.tl-card__sale {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.35em 0.55em;
	background: var(--sh-accent);
	color: #fff;
	border-radius: 4px;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}

.tl-card__title {
	margin: 0 0 0.25rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

.tl-card__title a { color: var(--sh-ink); text-decoration: none; }
.tl-card__title a:hover { color: var(--sh-accent); }

.tl-card__sizes {
	margin: 0 0 0.6rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px dotted var(--sh-border);
	font-size: 0.84rem;
	color: var(--sh-muted);
}

.tl-card__price {
	margin: 0 0 0.9rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--sh-ink);
}

.tl-card__price del { color: var(--sh-muted); font-weight: 400; margin-right: 0.35em; }
.tl-card__price ins { text-decoration: none; color: var(--sh-accent); }

/*
 * Solid black at rest, inverted on hover: the fill drops away and the
 * button becomes an outline in the same colour.
 *
 * Black rather than madder because the Sale badge and the sale price are
 * already madder. With a madder button too, three things on one card
 * competed for the same attention and none of them won.
 */
.tl-card .tl-card__button {
	margin-top: auto;
	display: block;
	padding: 0.8em 1em;
	background: var(--sh-ink);
	border: 1px solid var(--sh-ink);
	border-radius: var(--sh-radius-sm);
	color: #fff;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/*
 * The whole card is one target, so hovering the image or anywhere in the
 * box flips the button too, not only a direct hover on it.
 *
 * transparent, not white: the card is white today, but if it is ever
 * given a tinted background the button follows it instead of showing a
 * white rectangle.
 */
.tl-card:hover .tl-card__button,
.tl-card .tl-card__button:hover,
.tl-card .tl-card__button:focus-visible {
	background: transparent;
	border-color: var(--sh-ink);
	color: var(--sh-ink);
}

/* Keyboard users get a visible ring on top of the inverted state */
.tl-card .tl-card__button:focus-visible {
	outline: 2px solid var(--sh-ink);
	outline-offset: 2px;
}

/* ---------- Nothing found ---------- */
.tl-empty {
	display: grid;
	gap: 0.4rem;
	padding: 2.5rem 1.5rem;
	background: #fff;
	border: 1px solid var(--sh-border);
	border-left: 3px solid var(--sh-accent);
	border-radius: var(--sh-radius);
	text-align: center;
}

.tl-empty strong {
	font-family: var(--display, system-ui, sans-serif);
	font-size: 1.1rem;
	color: var(--sh-ink);
}

.tl-empty span { color: var(--sh-text); }

/* =========================================================
   5. LOADER
   ========================================================= */

/* The loader floats over the grid so the page does not grow a strip at the
   bottom every time the sorting or the page changes. */
.tl-shop__main { position: relative; }

.tl-shop__loader {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.1rem;
	background: #fff;
	border: 1px solid var(--sh-border);
	border-radius: 999px;
	box-shadow: var(--sh-shadow);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sh-ink);
	transform: translate(-50%, -50%);
}

.tl-shop__loader[hidden] { display: none; }

.tl-shop__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--sh-border);
	border-top-color: var(--sh-accent);
	border-radius: 50%;
	animation: tl-shop-spin 0.8s linear infinite;
}

@keyframes tl-shop-spin { to { transform: rotate(360deg); } }

/* =========================================================
   6. PAGINATION
   ========================================================= */

.tl-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 2.25rem;
}

.tl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.7em;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius-sm);
	background: #fff;
	color: var(--sh-ink);
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.94rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tl-pagination a.page-numbers:hover {
	background: var(--sh-ink);
	border-color: var(--sh-ink);
	color: #fff;
}

.tl-pagination .page-numbers.current {
	background: var(--sh-accent);
	border-color: var(--sh-accent);
	color: #fff;
}

.tl-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
}

/* =========================================================
   7. RESPONSIVE
   ========================================================= */

/* Laptop: tighter gutters, still three across */
@media (max-width: 1200px) {
	.tl-products { gap: 1.25rem 1rem; }
}

/* Tablet: two products across */
@media (max-width: 960px) {
	.tl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tl-shop__bar { padding-bottom: 0.85rem; }
	.tl-shop .tl-shop__sort select { min-width: 190px; }
}

/* Phone */
@media (max-width: 600px) {
	.tl-shop__header { margin-bottom: 1.5rem; }

	.tl-shop__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}

	.tl-shop .tl-shop__sort select { width: 100%; min-width: 0; }

	.tl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }

	.tl-card { padding: 0.55rem; }
	.tl-card__title { font-size: 0.95rem; }
	.tl-card .tl-card__button { padding: 0.7em 0.6em; font-size: 0.85rem; }

	.tl-pagination .page-numbers { min-width: 38px; height: 38px; }
}

@media (max-width: 400px) {
	.tl-products { grid-template-columns: 1fr; }
}

/* =========================================================
   8. MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.tl-card,
	.tl-card__img--hover,
	.tl-card__media img,
	.tl-shop__spinner { transition: none !important; animation: none !important; }
}