/**
 * Shop archive — Shopify collection-page look. Pairs with
 * archive-product.php + content-product.php overrides.
 *
 * 2026-08-18 (r7 shop-grid fix): this file previously began with three
 * stray lines of an ssh client warning banner that were accidentally baked
 * into the file during the 2026-08-14 deploy. That invalid leading text made
 * the browser's CSS error recovery swallow everything up to the first "}" —
 * i.e. the base .td-shop container rule below — so the grid lost its
 * max-width + side padding and ran flush to the viewport edges at >=768px
 * (the <=767px padding survived inside its own @media block). Never let
 * non-CSS text precede the first rule in this file.
 */

.td-shop { max-width: 1360px; margin: 0 auto; padding: 30px 40px 60px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; color: #000; }
@media (max-width: 767px) { .td-shop { padding: 20px 20px 40px; } }

.td-shop__head h1 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 49px; line-height: 1.1; margin: 0 0 8px; color: #000; }
/* Small keyword sub-heading under the category H1 (r13, 2026-08-20). Kept
 * deliberately small/secondary — body font, not the Anton display face — so
 * it reads as supporting copy and never competes with the H1. */
.td-shop__subhead { font-family: inherit; font-weight: 500; font-size: 16px; line-height: 1.35; color: #555; margin: 0 0 10px; max-width: 900px; }
.td-shop__description { font-size: 16px; color: #444; max-width: 900px; margin-bottom: 10px; }

/* ==================== toolbar ==================== */
.td-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin: 22px 0 18px;
}
.td-shop__filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.td-shop__filters-label { font-size: 18px; color: #333; margin-right: 4px; }

.td-shop__facet { position: relative; }
.td-shop__facet summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 30px;
	font-size: 18px;
	padding: 11px 16px;
	user-select: none;
	transition: border-color .12s ease;
}
.td-shop__facet summary::-webkit-details-marker { display: none; }
.td-shop__facet summary:hover { border-color: #000; }
.td-shop__facet summary svg { width: 15px; height: 15px; transition: transform .15s ease; }
.td-shop__facet[open] summary svg { transform: rotate(180deg); }

.td-shop__facet-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	width: 300px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .3);
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .07);
	max-height: 420px;
	overflow-y: auto;
	padding: 14px 0;
}
.td-shop__facet-note { font-size: 13px; color: #777; margin: 0 18px 8px; }
.td-shop__facet-panel ul { list-style: none; margin: 0; padding: 0; }
.td-shop__facet-panel li { margin: 0; }
.td-shop__facet-panel label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	padding: 8px 18px;
	cursor: pointer;
}
.td-shop__facet-panel label:hover { background: #f6f6f6; }
.td-shop__facet-panel input[type="checkbox"] { width: 18px; height: 18px; accent-color: #000; flex: 0 0 auto; margin: 0; }
.td-shop__facet-panel img { width: 24px; height: 24px; flex: 0 0 auto; }
.td-shop__facet-name { flex: 1; }
.td-shop__facet-count { color: #888; font-size: 15px; }

/* Price facet — same pill/panel chrome as the other 4, min/max inputs +
 * Apply instead of a checkbox list (2026-08-12, Shopify parity). */
.td-shop__price-panel { padding: 4px 18px 14px; }
.td-shop__price-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.td-shop__price-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #555; flex: 1 1 0; min-width: 0; }
.td-shop__price-field input {
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}
.td-shop__price-field input:focus { outline: none; border-color: #000; }
.td-shop__price-sep { padding-bottom: 9px; color: #999; }
.td-shop__price-apply {
	width: 100%;
	background: #0c0c0c;
	color: #fff;
	border: none;
	border-radius: 30px;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.td-shop__price-apply:hover { background: #ffe200; color: #0c0c0c; }

.td-shop__sorting { display: flex; align-items: center; gap: 12px; }
.td-shop__sorting label { font-size: 18px; color: #333; white-space: nowrap; }
.td-shop__sorting select {
	font-size: 18px;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 30px;
	padding: 11px 16px;
	background: #fff;
	cursor: pointer;
}
.td-shop__count { font-size: 16px; color: #666; white-space: nowrap; }

/* active pills */
.td-shop__active { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.td-shop__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 30px;
	font-size: 15px;
	color: #000 !important;
	text-decoration: none !important;
	padding: 7px 14px;
	transition: background .12s ease;
}
.td-shop__pill:hover { background: #fee100; }
.td-shop__clear { font-size: 15px; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ==================== grid + cards ==================== */
.td-shop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { .td-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .td-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .td-shop__grid { grid-template-columns: 1fr; } }

.td-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 4px 4px 3px 0 #b9b9b9;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: transform .15s ease, box-shadow .15s ease;
}
.td-card:hover { transform: translateY(-3px); box-shadow: 5px 7px 10px 0 #a8a8a8; }
.td-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #f1f1f1; }
.td-card__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
/* badges sit at the image's top-left, uppercase */
.td-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 3; }
.td-card__badge {
	background: #010002;
	color: #fff;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: .3px;
	border-radius: 3px;
	padding: 1px 7px;
}
.td-card__badge--sale { background: #fee100; color: #000; }
.td-card__badge--free { background: #fff; color: #010002; }
.td-card__badge--new { background: #fee100; color: #010002; }

.td-card__body { padding: 20px; text-align: center; display: flex; flex-direction: column; flex: 1; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; }
.td-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	color: #010002 !important;
	text-decoration: none !important;
}
.td-card__title:hover { text-decoration: underline !important; text-underline-offset: 3px; }
/* price + button + icons pinned to the card's bottom edge so they line up
 * across the row no matter how long the title wraps */
.td-card__bottom { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.td-card__price { font-size: 18px; color: #010002; }
.td-card__price del { color: #999; margin-right: 6px; }
.td-card__price ins { text-decoration: none; }
.td-card__btn {
	/* display !important: an aggregated legacy rule hides .add_to_cart_button */
	display: block !important;
	width: 100% !important;
	background: #010002 !important;
	border: 2px solid #010002 !important;
	border-radius: 30px !important;
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1;
	padding: 11px 12px !important;
	margin: 0 !important;
	text-decoration: none !important;
	transition: background .12s ease, color .12s ease;
	cursor: pointer;
	text-align: center;
}
.td-card__btn::after,
.td-card__btn::before { content: none !important; background: none !important; } /* parent theme injects FA cart/arrow icons */
.td-card__btn:hover,
.td-card__btn:focus { background: #fee100 !important; border-color: #fee100 !important; color: #000 !important; }
/* pressed = flat darker BRAND yellow, matching the PDP add-to-cart button's
 * own pressed state (single-product-shopify.css: #d6b900) — the previous
 * #2b2b2b was a barely-there step off the near-black rest color, effectively
 * invisible feedback on a real tap (2nd addendum fix, 2026-08-13). */
.td-card__btn:active { background: #d6b900 !important; border-color: #d6b900 !important; color: #010002 !important; }
/* the button stays after adding (Filip); Woo's auto-appended "View cart"
 * link is hidden — feedback is a short "Added ✓" swap done in JS */
.td-card__btn.added { display: block !important; }
.td-card__bottom .added_to_cart { display: none !important; }
.td-card__btn.td-just-added { background: #fee100 !important; border-color: #fee100 !important; color: #000 !important; }
/* 2026-08-14 (r5 fix): persistent "In cart ✓" state — these are digital
 * products, can't be bought twice. Rendered server-side on load whenever
 * WC()->cart already has the product, and swapped in permanently by JS
 * right after an AJAX add (see shop-shopify.js). Secondary/"already done"
 * look: inverted from the solid-black "Buy now" so it doesn't read as a
 * fresh call to action. */
.td-card__btn--in-cart {
	background: #fff !important;
	border-color: #010002 !important;
	color: #010002 !important;
}
.td-card__btn--in-cart:hover,
.td-card__btn--in-cart:focus {
	background: #010002 !important;
	border-color: #010002 !important;
	color: #fff !important;
}
/* 2026-08-14 (r5 fix): single-row icon cap. The row is capped to 6 icons
 * server-side (content-product.php, $td_card_icon_max) with a "+N" chip
 * for any overflow, so max-width only ever needs to fit 6 — nowrap so a
 * rendering hiccup can't silently wrap a 2nd row back in.
 * 2026-08-18 (r7): min-height reserves the icon-row slot on every card —
 * the container now renders even with zero icons (content-product.php), so
 * price + button sit at identical offsets across a whole grid row no matter
 * how many (or few) icons a product has. */
.td-card__icons { display: flex; justify-content: center; flex-wrap: nowrap; gap: 6px; min-height: 24px; max-width: calc(6 * 30px); margin: 0 auto; overflow: hidden; }
.td-card__icons img { width: 24px !important; height: 24px !important; flex: none; }
.td-card__icons-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	background: #f1f1f1;
	color: #010002;
	font-size: 11px;
	font-weight: 700;
	cursor: default;
}

/* ==================== pagination ==================== */
.td-shop__pagination { margin: 40px 0 0; text-align: center; }
.td-shop__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	margin: 0 3px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 50%;
	font-size: 17px;
	color: #000 !important;
	text-decoration: none !important;
	transition: background .12s ease;
}
.td-shop__pagination .page-numbers:hover { background: #f2f2f2; }
.td-shop__pagination .page-numbers.current { background: #000; color: #fff !important; border-color: #000; }
.td-shop__pagination .page-numbers.dots { border: 0; }

.td-shop__none { font-size: 18px; margin: 40px 0; }

/* ============ dark-background variant (fix #4, 2026-08-13) ============
 * .td-card's default box-shadow (4px 4px 3px #b9b9b9, a light paper-card
 * offset) is tuned for the white shop/category/search grid. On the cart
 * page's near-black canvas (#0c0c0c — see cart-checkout-shopify.css's
 * dark redesign) that same light-grey shadow is nearly invisible against
 * the dark backdrop, so the "You may be interested in…" cross-sell cards
 * read as flat cut-outs instead of lifted cards. Real elevation shadow +
 * a faint light border instead — same component, dark-page variant only.
 * (Homepage's own dark sections are out of scope — homepage-owned.) */
body.woocommerce-cart .td-card {
	box-shadow: 0 12px 28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .08);
}
body.woocommerce-cart .td-card:hover {
	box-shadow: 0 18px 38px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .4);
	border-color: rgba(255, 255, 255, .16);
}

/* ==================== mobile "Filter & Sort" bottom sheet (item 3, 2026-08-13) ====================
 * Desktop keeps the inline pill/dropdown toolbar above, completely
 * untouched (everything here is gated behind the <992px media query).
 * <992px the SAME <form id="td-shop-filters"> (same fields, same names —
 * see archive-product.php) becomes a full-screen bottom sheet, opened from
 * a full-width trigger bar. Shopify's own mobile collection page
 * (3d-mon.com) uses the same trigger -> sheet pattern for inspiration,
 * just with a small pill button; the spec here calls for a full-width bar
 * instead. */

.td-shop__mbar,
.td-shop__mbackdrop,
.td-shop__panel-head,
.td-shop__panel-foot { display: none; }

@media (max-width: 991px) {

	.td-shop__mbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, .15);
		border-radius: 12px;
		padding: 14px 16px 14px 20px;
		margin: 22px 0 18px;
		font-size: 15px;
	}
	.td-shop__mbar-count { color: #555; }
	.td-shop__mbar-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: #0c0c0c;
		color: #fff !important;
		border: 0;
		border-radius: 30px;
		padding: 10px 18px;
		font-size: 15px;
		font-weight: 700;
		font-family: inherit;
		cursor: pointer;
	}
	.td-shop__mbar-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
	.td-shop__mbar-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		background: #ffe200;
		color: #0c0c0c;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 800;
	}

	.td-shop__mbackdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 100200;
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, visibility 0s linear .2s;
	}
	body.td-shop-panel-open .td-shop__mbackdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity .2s ease;
	}
	body.td-shop-panel-open { overflow: hidden; }

	/* the toolbar/form IS the sheet — always fixed off-screen (never
	 * display:none, so the slide transition can animate), revealed by
	 * .is-open */
	.td-shop__toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 86vh;
		margin: 0;
		background: #0c0c0c;
		border-radius: 18px 18px 0 0;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		padding: 0;
		z-index: 100210;
		transform: translateY(101%);
		visibility: hidden;
		/* the sheet itself does NOT scroll - only the facet region does,
		 * so the Apply/Clear footer is always pinned in view */
		display: flex;
		overflow: hidden;
		transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s;
	}
	.td-shop__toolbar .td-shop__filters {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.td-shop__toolbar.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform .28s cubic-bezier(.32, .72, 0, 1);
	}

	.td-shop__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 20px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		color: #fff;
		font-size: 18px;
		font-weight: 800;
		flex: 0 0 auto;
	}
	.td-shop__panel-close {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .1);
		border: 0;
		color: #fff;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	.td-shop__filters,
	.td-shop__sorting { flex: 0 0 auto; width: 100%; }
	.td-shop__filters { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; }
	.td-shop__filters-label { display: none; } /* redundant with the panel head title on mobile */

	.td-shop__facet { border-bottom: 1px solid rgba(255, 255, 255, .1); position: static; }
	.td-shop__facet summary {
		background: transparent;
		border: 0;
		border-radius: 0;
		color: #fff;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		padding: 16px 20px;
		font-size: 17px;
	}
	.td-shop__facet summary:hover { border-color: transparent; }
	.td-shop__facet-panel {
		position: static;
		width: auto;
		background: transparent;
		border: 0;
		box-shadow: none;
		max-height: none;
		padding: 0 20px 14px;
	}
	.td-shop__facet-panel label { color: #fff; padding: 10px 0; font-size: 16px; }
	.td-shop__facet-panel label:hover { background: transparent; }
	.td-shop__facet-count { color: rgba(255, 255, 255, .55); }
	.td-shop__facet-note { color: rgba(255, 255, 255, .55); margin: 0 0 8px; }
	.td-shop__price-field { color: rgba(255, 255, 255, .7); }
	.td-shop__price-field input { background: #1a1a1a; border-color: rgba(255, 255, 255, .25); color: #fff; }
	.td-shop__price-sep { color: rgba(255, 255, 255, .5); }

	.td-shop__sorting {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 16px 20px;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}
	.td-shop__sorting label { color: #fff; }
	/* "Sort options must never truncate": full-width native select, no
	 * fixed/narrow box and no forced ellipsis — the closed-state label has
	 * the whole sheet width to work with, and the OS-native option list
	 * this opens never truncates on its own. */
	.td-shop__sorting select {
		width: 100%;
		box-sizing: border-box;
		background: #1a1a1a;
		color: #fff;
		border-color: rgba(255, 255, 255, .25);
		white-space: normal;
		text-overflow: clip;
		overflow: visible;
	}
	.td-shop__count { display: none; } /* shown on .td-shop__mbar instead, always visible without opening the sheet */

	.td-shop__panel-foot {
		display: flex;
		gap: 12px;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
		flex: 0 0 auto;
		background: #0c0c0c;
		border-top: 1px solid rgba(255, 255, 255, .12);
		/* pinned: Apply/Clear stay reachable no matter how long the
		 * expanded facet list gets (critic P1: Apply was 1900px below
		 * the fold with Fandom open) */
		position: sticky;
		bottom: 0;
		z-index: 3;
	}
	.td-shop__panel-clear,
	.td-shop__panel-apply {
		min-height: 48px; /* proper touch target (was ~27px) */
	}
	.td-shop__panel-clear {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff !important;
		text-decoration: none !important;
		border: 1px solid rgba(255, 255, 255, .3);
		border-radius: 30px;
		font-size: 15px;
	}
	.td-shop__panel-apply {
		flex: 2;
		background: #ffe200;
		color: #0c0c0c;
		border: 0;
		border-radius: 30px;
		font-size: 16px;
		font-weight: 800;
		font-family: inherit;
		cursor: pointer;
	}

	/* active-filter pills stay in normal flow above the grid, always
	 * visible without opening the sheet (unchanged markup/position —
	 * archive-product.php) */
}