/* ---------------------------------------------------------------------------
   Product rail — the horizontally scrolling row of cards.

   Lifted out of home.css when the 404 page became the third caller of
   partials/product-rail.php. The markup was already shared; leaving the styles
   behind meant the 404 rendered the cards with no sizing at all, so the
   thumbnails came out at their natural resolution.

   Section-heading and view-all styles come along because the partial draws them
   and they are meaningless apart from it.
   --------------------------------------------------------------------------- */

	/* ── Section Headings ── */
	.section-heading {
		font-family: var(--font-display);
		font-size: clamp(1.2rem, 2.5vw, 1.6rem);
		color: #18120c;
		text-align: center;
		margin-bottom: 2rem;
		letter-spacing: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
	}
	.mb0 { margin-bottom: 0; }
	.h-arrow { color: #d21e2a; font-size: 0.9rem; }

	.section-header-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1.5rem;
	}

	.view-all-btn {
		background: #d21e2a;
		color: white;
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.8rem;
		letter-spacing: 1px;
		padding: 0.5rem 1.25rem;
		border-radius: 4px;
		text-decoration: none;
		transition: background 0.2s;
		flex-shrink: 0;
	}
	.view-all-btn:hover { background: #a81722; }
	/* ── TRENDING ── */
	.trending-section {
		padding: 4rem 0;
		background: #f9f5f0;
	}

	.trending-scroll {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		padding-bottom: 0.75rem;
		scrollbar-width: thin;
		scrollbar-color: #d21e2a #ede8e0;
	}
	.trending-scroll::-webkit-scrollbar { height: 4px; }
	.trending-scroll::-webkit-scrollbar-track { background: #ede8e0; border-radius: 2px; }
	.trending-scroll::-webkit-scrollbar-thumb { background: #d21e2a; border-radius: 2px; }

	.trending-card {
		min-width: 175px;
		max-width: 175px;
		background: white;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		transition: transform 0.2s, box-shadow 0.2s;
		flex-shrink: 0;
	}
	.trending-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.14); }

	.trending-img-wrap {
		display: block;
		position: relative;
		height: 155px;
		overflow: hidden;
		background: #f8f8f8;
	}

	.trending-img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 0.5rem;
		transition: transform 0.3s;
	}
	.trending-card:hover .trending-img-wrap img { transform: scale(1.06); }

	.trending-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3rem;
	}

	.sale-badge {
		position: absolute;
		top: 7px;
		left: 7px;
		background: #d21e2a;
		color: white;
		font-size: 0.6rem;
		font-weight: 800;
		padding: 2px 6px;
		border-radius: 4px;
		letter-spacing: 0.5px;
	}

	.trending-info { padding: 0.75rem; }

	.trending-brand {
		font-size: 0.6rem;
		color: #999;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin: 0 0 2px;
		font-weight: 600;
	}

	.trending-name {
		font-size: 0.78rem;
		font-weight: 600;
		color: #18120c;
		margin: 0 0 0.35rem;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}


	.trending-price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.trending-price {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.95rem;
		color: #18120c;
	}

	.add-quick {
		width: 26px;
		height: 26px;
		background: #d21e2a;
		color: white;
		border: none;
		border-radius: 50%;
		font-size: 1.1rem;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.2s;
		line-height: 1;
		padding: 0;
	}
	.add-quick:hover { background: #a81722; }

	/* ── VIEW ALL CARD ── the last stop in a row: the next four products as a
	   2x2 preview, linking to the full list (2026-10-27, as Sweet City). */
	.trending-card-more {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: inherit;
		border: 2px solid #d21e2a;
	}

	.more-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		height: 155px;
		padding: 6px;
		background: #f8f8f8;
	}

	.more-cell {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-radius: 6px;
		background: white;
		font-size: 1.4rem;
	}

	.more-cell img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 3px;
	}

	.more-info {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		text-align: center;
	}

	.more-title {
		font-family: var(--font-display);
		font-size: 1.3rem;
		line-height: 1;
		color: #18120c;
		text-transform: uppercase;
	}

	.more-sub {
		font-size: 0.75rem;
		font-weight: 700;
		color: #d21e2a;
	}

	.trending-card-more:hover .more-sub { text-decoration: underline; }