/**
 * TopDrop — Shop catalog page (/products/).
 *
 * Layout: sticky left sidebar + 4-col responsive product grid.
 * Cards: 1:1 image, 2-line truncated title, drop price, stock badge,
 * wishlist heart.
 */

.td-shop {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	max-width: 1280px;
	margin: 0 auto 60px;
	padding: 0;
}

/* ============================================================
 * Sidebar — sticky on scroll
 * ============================================================ */
.td-shop__sidebar {
	position: sticky;
	top: 16px;
	align-self: start;
	max-height: calc( 100vh - 32px );
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
}

.td-shop__menu {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 7px;
	padding: 4px;
	flex-shrink: 0;
}
.td-shop__menu-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	text-decoration: none;
	border-radius: 5px;
	transition: background-color .12s, color .12s;
}
.td-shop__menu-icon {
	flex-shrink: 0;
	display: inline-flex;
	color: #4e7184;
	transition: color .12s;
}
.td-shop__menu-link:hover {
	background: #f2f6f9;
	color: #1f2937;
	text-decoration: none;
}
.td-shop__menu-link.is-active {
	background: #4e7184;
	color: #ffffff;
}
.td-shop__menu-link.is-active .td-shop__menu-icon {
	color: #ffffff;
}
.td-shop__menu-link.is-active:hover {
	background: #446472;
}
.td-shop__menu-divider {
	display: block;
	height: 1px;
	background: #f1f5f9;
	margin: 2px 6px;
}

/* Categories block — fixed height with inner scroll */
.td-shop__cats-wrap {
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 7px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
	overflow: hidden;
}
.td-shop__cats-head {
	padding: 11px 14px;
	font-size: 12px;
	font-weight: 600;
	background: #f9f9f9;
	color: #4e7184;
	border-bottom: 1px solid #e4e7ea;
	flex-shrink: 0;
}
.td-shop__cats {
	overflow-y: auto;
	padding: 6px;
	flex: 1;
	min-height: 0;
}
.td-shop__cats-loading,
.td-shop__cats-empty {
	padding: 16px;
	text-align: center;
	color: #7c7c7c;
	font-size: 12px;
}
.td-shop__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	font-size: 12.5px;
	color: #1f2937;
	text-decoration: none;
	border-radius: 5px;
	line-height: 1.35;
	transition: background-color .12s, color .12s;
}
.td-shop__cat:hover {
	background: #f2f6f9;
	color: #1f2937;
	text-decoration: none;
}
.td-shop__cat.is-active {
	background: #4e7184;
	color: #ffffff;
}
.td-shop__cat.is-active:hover {
	background: #446472;
	color: #ffffff;
}
.td-shop__cat-name {
	flex: 1;
	min-width: 0;
	word-break: break-word;
}

/* Custom scrollbar — subtle */
.td-shop__cats::-webkit-scrollbar { width: 6px; }
.td-shop__cats::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.td-shop__cats::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.td-shop__cats::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
 * Main area
 * ============================================================ */
.td-shop__main {
	min-width: 0;
}
.td-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.td-shop__empty {
	grid-column: 1 / -1;
	padding: 60px 20px;
	text-align: center;
	color: #7c7c7c;
	font-size: 14px;
	background: #f8fafc;
	border-radius: 7px;
}
.td-shop__loader,
.td-shop__loader-inline {
	margin: 20px 0;
	padding: 16px;
	text-align: center;
	color: #7c7c7c;
	font-size: 12px;
}
.td-shop__loader-inline {
	grid-column: 1 / -1;
}
.td-shop__sentinel {
	height: 1px;
	width: 100%;
}

/* ============================================================
 * Product card
 * ============================================================ */
.td-shop-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 7px;
	overflow: hidden;
	transition: box-shadow .12s, transform .12s;
}
.td-shop-card:hover {
	box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.td-shop-card--oos {
	opacity: .68;
}
.td-shop-card--oos:hover {
	opacity: 1;
}
.td-shop-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.td-shop-card__link:hover {
	color: inherit;
	text-decoration: none;
}

.td-shop-card__img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f2f6f9;
	overflow: hidden;
}
.td-shop-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.td-shop-card__img--empty {
	background:
		linear-gradient(45deg, #f1f5f9 25%, transparent 25%) 0 0/16px 16px,
		linear-gradient(-45deg, #f1f5f9 25%, transparent 25%) 0 0/16px 16px,
		#f8fafc;
}

.td-shop-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px 10px;
}
.td-shop-card__title {
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	line-height: 1.35;
	min-height: calc( 1.35em * 2 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
}
.td-shop-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.td-shop-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 12px 12px;
	margin-top: auto;
}
.td-shop-card__label {
	font-size: 11.5px;
	color: #636c72;
}
.td-shop-card__price {
	font-size: 13px;
	font-weight: 700;
	color: #2dc270;
	font-variant-numeric: tabular-nums;
}
.td-shop-card__stock {
	font-size: 11.5px;
	font-weight: 400;
}
.td-shop-card__stock--in  { color: #2dc270; }
.td-shop-card__stock--out { color: #e5484d; }

.td-shop-card__wish {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 26px;
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 5px;
	color: #afc3ce;
	cursor: pointer;
	transition: color .12s, border-color .12s, background-color .12s;
}
.td-shop-card__wish:hover {
	color: #e5484d;
	border-color: #e5484d;
	background: #fff;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 1024px) {
	.td-shop__grid { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
 * Mobile sidebar (≤768px)
 *
 * Replaces the desktop vertical menu + cats-wrap with a single
 * trigger row containing two buttons:
 *   - Label area (~90%): opens .td-shop__menu (3 top-level views)
 *   - Icon button (~10%, 1:1 square): opens .td-shop__cats-wrap
 *     (categories panel — same DOM as desktop, repositioned)
 *
 * State lives in [data-shop-open] on .td-shop__sidebar so CSS can
 * swap which panel is visible. Only one open at a time; both
 * dropdowns absolute-position below the trigger row.
 * ============================================================ */
.td-shop__menu-mobile  { display: none; }
.td-shop__spacer       { display: none; }
.td-shop__sticky-sentinel { display: none; }

@media (max-width: 900px) {
	.td-shop {
		display: block;
		margin-bottom: 16px;
	}
	.td-shop__sidebar {
		/* Sticky in flow on mobile. The visible "bar" treatment
		 * (full-viewport-width, bg, padding, shadow) is OFF here —
		 * it lives on the .is-stuck modifier below, which JS toggles
		 * via an IntersectionObserver watching .td-shop__sticky-sentinel
		 * the moment the sidebar actually stops scrolling and pins to
		 * the viewport top. Until then, the sidebar is just a
		 * transparent container around the trigger pill. */
		display: block;
		position: sticky;
		top: 0;
		z-index: 50;
		max-height: none;
		min-height: auto;
		align-self: auto;
		gap: 0;
	}
	/* Toolbar treatment — only when JS confirms the sidebar is stuck.
	 *
	 * The -16px side margins break it out of the .td-shell 16px gutter
	 * so the bar reaches edge-to-edge of the viewport — much easier to
	 * notice when scrolling. The 16px horizontal padding restores that
	 * gutter on the inside so the trigger pill keeps the same
	 * horizontal position as the rest of the page content.
	 *
	 * Background matches .td-header__row--top so the sticky bar reads
	 * as a continuation of the page header — visual continuity with
	 * the existing chrome, no new color introduced. */
	.td-shop__sidebar.is-stuck {
		margin-left: -16px;
		margin-right: -16px;
		padding: 10px 16px;
		background: #f2f6f9;
		box-shadow: 0 4px 12px rgba( 15, 23, 42, .18 );
	}
	/* Sentinel — invisible 1px element placed RIGHT BEFORE the sidebar
	 * in DOM so an IntersectionObserver can watch it. The moment this
	 * sentinel scrolls above the viewport's top edge, the sidebar
	 * itself must be flush against the top (i.e. stuck), and JS adds
	 * the .is-stuck class. Negative margin-bottom keeps it from
	 * contributing any visible vertical space. */
	.td-shop__sticky-sentinel {
		display: block;
		height: 1px;
		margin-bottom: -1px;
	}
	.td-shop__spacer {
		display: block;
		height: 16px;
		flex-shrink: 0;
	}
	.td-shop__grid { grid-template-columns: repeat(2, 1fr); }

	/* Trigger row */
	.td-shop__menu-mobile {
		display: flex;
		align-items: stretch;
		width: 100%;
		height: 44px;
		background: #ffffff;
		border: 1px solid #e4e7ea;
		border-radius: 7px;
		overflow: hidden;            /* clips icon button's right corners */
	}
	.td-shop__menu-mobile-label {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0 12px;
		min-width: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		font-family: inherit;
	}
	.td-shop__menu-mobile-text {
		flex: 1;
		font-size: 13px;
		font-weight: 600;
		color: #1f2937;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.td-shop__menu-mobile-chevron {
		flex-shrink: 0;
		color: #4e7184;
		transition: transform .15s ease;
	}
	.td-shop__menu-mobile-label[aria-expanded="true"] .td-shop__menu-mobile-chevron {
		transform: rotate( 180deg );
	}
	.td-shop__menu-mobile-icon {
		flex-shrink: 0;
		width: 44px;                 /* 1:1 — matches trigger row height */
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #4e7184;
		color: #ffffff;
		border: 0;
		cursor: pointer;
		font-family: inherit;
		transition: background .15s ease;
	}
	.td-shop__menu-mobile-icon[aria-expanded="true"] { background: #446472; }
	.td-shop__menu-mobile-icon svg { width: 22px; height: 22px; }

	/* Dropdown panels — both hidden by default on mobile; one shown
	 * based on sidebar's data-shop-open. Position:absolute under the
	 * trigger row (sidebar's flow height = 44px since dropdowns are
	 * out of flow), so top:calc(100% + 6px) anchors below the trigger.
	 * When not stuck, the sidebar sits at the .td-shell content gutter
	 * so left/right: 0 aligns the panel with the trigger naturally.
	 * When stuck, the sidebar extends 16px beyond the trigger on each
	 * side (negative margins) — the .is-stuck override below pushes
	 * the panel back in by 16px so it stays aligned with the trigger
	 * inside the extended bar instead of spanning the full viewport. */
	.td-shop__menu,
	.td-shop__cats-wrap {
		display: none;
		position: absolute;
		top: calc( 100% + 6px );
		left: 0;
		right: 0;
		z-index: 50;
		box-shadow: 0 6px 18px rgba( 15, 23, 42, .12 );
	}
	.td-shop__sidebar.is-stuck .td-shop__menu,
	.td-shop__sidebar.is-stuck .td-shop__cats-wrap {
		left: 16px;
		right: 16px;
	}
	.td-shop__sidebar[data-shop-open="menu"] .td-shop__menu       { display: flex; }
	.td-shop__sidebar[data-shop-open="cats"] .td-shop__cats-wrap  { display: flex; }

	/* Cats panel sizing — it's the primary mobile control for picking
	 * a category, so give it a taller scroll area than the desktop. */
	.td-shop__cats-wrap { max-height: 70vh; }
}
@media (max-width: 420px) {
	.td-shop__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.td-shop-card__body { padding: 8px 10px 10px; }
	.td-shop-card__title { font-size: 12.5px; }
}