/* ===========================================================
   Trending Products – phone layout (<=550px), added 2026-09-24
   "#1 spotlight + swipe rail" built by javascript/cjsTrendingMobile.js
   from the cached cards in Panels/coreyWeeklyBestsellers.html.
   Everything visual is scoped to #coreyWeeklyBestsellers.cjs-trend-on,
   which the script only sets on phones; desktop is untouched.
   Rollback: remove the <link>/<script> pair from the panel.
=========================================================== */
#coreyWeeklyBestsellers .cjs-trend,
#coreyWeeklyBestsellers .cjs-trend-live,
#coreyWeeklyBestsellers .cjs-trend-all { display: none; }

@keyframes cjsTrendLive {
	0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

@media (max-width: 550px) {
	#coreyWeeklyBestsellers.cjs-trend-on {
		--cjs-tg: 15px; /* Bootstrap .container gutter: rails bleed to the screen edge */
		padding: 20px 0 6px;
		/* cart.php: the section follows the floated cart column; without this the
		   flex/grid boxes shrink to 0px beside the float and overflow the page. */
		clear: both;
	}
	#coreyWeeklyBestsellers.cjs-trend-on .product-slide-wrap { margin-bottom: 12px; }
	#coreyWeeklyBestsellers.cjs-trend-on .product-box-slide { display: none; }

	/* ---- Header: live eyebrow / title / See all ---- */
	#coreyWeeklyBestsellers.cjs-trend-on .product-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "live all" "title all";
		align-items: end;
		column-gap: 12px;
		row-gap: 6px;
		padding: 0;
		margin: 0 0 14px;
		border-bottom: 0;
	}
	#coreyWeeklyBestsellers.cjs-trend-on .product-head .product-head-sub { display: none; }
	#coreyWeeklyBestsellers.cjs-trend-on .cjs-trend-live {
		grid-area: live;
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .7px;
		line-height: 1.2;
		text-transform: uppercase;
		color: #15803d;
	}
	#coreyWeeklyBestsellers.cjs-trend-on .cjs-trend-live::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #16a34a;
		flex-shrink: 0;
		animation: cjsTrendLive 2.4s ease-out infinite;
	}
	#coreyWeeklyBestsellers.cjs-trend-on .product-head h2 {
		grid-area: title;
		padding: 0;
		font-size: 22px;
		line-height: 1.05;
		text-transform: uppercase;
		min-width: 0;
	}
	#coreyWeeklyBestsellers.cjs-trend-on .product-head h2::before { display: none; }
	#coreyWeeklyBestsellers.cjs-trend-on .cjs-trend-all {
		grid-area: all;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-height: 44px;
		font-size: 14px;
		font-weight: 700;
		color: #cd1e24;
		text-decoration: none;
		white-space: nowrap;
	}

	/* ---- Body ---- */
	#coreyWeeklyBestsellers.cjs-trend-on .cjs-trend {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	/* Category chips */
	#coreyWeeklyBestsellers .cjs-trend-chips {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		margin: 0 calc(-1 * var(--cjs-tg));
		padding: 0 var(--cjs-tg);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	#coreyWeeklyBestsellers .cjs-trend-chips::-webkit-scrollbar { display: none; }
	#coreyWeeklyBestsellers .cjs-trend-chip {
		flex-shrink: 0;
		height: 44px;
		padding: 0 16px;
		border-radius: 22px;
		border: 1px solid #dedede;
		background: #fff;
		color: #1a1a1a;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	#coreyWeeklyBestsellers .cjs-trend-chip-n { font-size: 12px; color: #6b6b6b; font-weight: 600; }
	#coreyWeeklyBestsellers .cjs-trend-chip[aria-pressed="true"] {
		background: #1a1a1a;
		border-color: #1a1a1a;
		color: #fff;
	}
	#coreyWeeklyBestsellers .cjs-trend-chip[aria-pressed="true"] .cjs-trend-chip-n { color: #c9c9c9; }

	/* #1 spotlight */
	#coreyWeeklyBestsellers .cjs-trend-top {
		display: flex;
		gap: 14px;
		padding: 12px;
		border: 1px solid #f0d4d5;
		border-radius: 16px;
		background: #fff8f8;
		color: #1a1a1a;
		text-decoration: none;
	}
	#coreyWeeklyBestsellers .cjs-trend-top-art {
		width: 104px;
		height: 138px;
		flex-shrink: 0;
		border-radius: 10px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	#coreyWeeklyBestsellers .cjs-trend-top-art img,
	#coreyWeeklyBestsellers .cjs-trend-card-art img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
	}
	#coreyWeeklyBestsellers .cjs-trend-top-body {
		flex-grow: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	#coreyWeeklyBestsellers .cjs-trend-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
	#coreyWeeklyBestsellers .cjs-trend-rank1,
	#coreyWeeklyBestsellers .cjs-trend-instant {
		height: 22px;
		padding: 0 8px;
		border-radius: 11px;
		color: #fff;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .5px;
		text-transform: uppercase;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		white-space: nowrap;
	}
	#coreyWeeklyBestsellers .cjs-trend-rank1 { background: #cd1e24; }
	#coreyWeeklyBestsellers .cjs-trend-instant { background: #1a1a1a; }
	#coreyWeeklyBestsellers .cjs-trend-top-title {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	#coreyWeeklyBestsellers .cjs-trend-top .cjs-trend-plat { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
	#coreyWeeklyBestsellers .cjs-trend-top-foot {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 4px 8px;
		margin-top: auto;
	}
	#coreyWeeklyBestsellers .cjs-trend-top .cjs-trend-price { font-size: 23px; letter-spacing: -.3px; }
	#coreyWeeklyBestsellers .cjs-trend-top .cjs-trend-sold { font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }

	/* Shared bits */
	#coreyWeeklyBestsellers .cjs-trend-plat {
		display: block;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .4px;
		text-transform: uppercase;
		color: #6b6b6b;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#coreyWeeklyBestsellers .cjs-trend-price { font-size: 17px; font-weight: 800; color: #cd1e24; line-height: 1.1; }
	#coreyWeeklyBestsellers .cjs-trend-sold { font-size: 11px; font-weight: 600; color: #9a3412; white-space: nowrap; }
	#coreyWeeklyBestsellers .cjs-trend-meter {
		display: block;
		height: 4px;
		border-radius: 2px;
		background: #f1f1f1;
		overflow: hidden;
	}
	#coreyWeeklyBestsellers .cjs-trend-meter > span { display: block; height: 100%; border-radius: 2px; background: #f08a24; }
	#coreyWeeklyBestsellers .cjs-trend-meter--top { height: 6px; border-radius: 3px; background: #f3dfe0; }
	#coreyWeeklyBestsellers .cjs-trend-meter--top > span { background: #cd1e24; }

	/* Rail */
	#coreyWeeklyBestsellers .cjs-trend-railhead {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-bottom: -4px;
	}
	#coreyWeeklyBestsellers .cjs-trend-railtitle { font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #1a1a1a; }
	#coreyWeeklyBestsellers .cjs-trend-swipe { font-size: 12px; color: #6b6b6b; display: inline-flex; align-items: center; gap: 4px; }
	#coreyWeeklyBestsellers .cjs-trend-swipe svg { width: 14px; height: 14px; }
	#coreyWeeklyBestsellers .cjs-trend-rail {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--cjs-tg);
		margin: 0 calc(-1 * var(--cjs-tg));
		padding: 2px var(--cjs-tg) 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
	#coreyWeeklyBestsellers .cjs-trend-rail::-webkit-scrollbar { display: none; }
	#coreyWeeklyBestsellers .cjs-trend-card {
		flex: 0 0 150px;
		scroll-snap-align: start;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 7px;
		padding: 8px 8px 10px;
		border: 1px solid #ececec;
		border-radius: 12px;
		background: #fff;
		color: #1a1a1a;
		text-decoration: none;
	}
	#coreyWeeklyBestsellers .cjs-trend-card-art {
		position: relative;
		height: 150px;
		border-radius: 8px;
		background: #f4f4f5;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	#coreyWeeklyBestsellers .cjs-trend-rank {
		position: absolute;
		top: 6px;
		left: 6px;
		height: 24px;
		min-width: 24px;
		box-sizing: border-box;
		padding: 0 7px;
		border-radius: 12px;
		background: #1a1a1a;
		color: #fff;
		font-size: 12px;
		font-weight: 800;
		line-height: 24px;
		text-align: center;
	}
	#coreyWeeklyBestsellers .cjs-trend-card-title {
		font-size: 13.5px;
		font-weight: 600;
		line-height: 1.3;
		height: 35px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	#coreyWeeklyBestsellers .cjs-trend-card-row {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 6px;
		margin-top: auto;
	}
	#coreyWeeklyBestsellers .cjs-trend-more {
		flex: 0 0 120px;
		scroll-snap-align: start;
		box-sizing: border-box;
		border: 1px dashed #d4d4d4;
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 12px;
		text-align: center;
		text-decoration: none;
		color: #1a1a1a;
		font-size: 13.5px;
		font-weight: 700;
	}
	#coreyWeeklyBestsellers .cjs-trend-more-dot {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: #cd1e24;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#coreyWeeklyBestsellers .cjs-trend-progress {
		height: 4px;
		border-radius: 2px;
		background: #ececec;
		overflow: hidden;
		margin-top: -4px;
	}
	#coreyWeeklyBestsellers .cjs-trend-progress > span {
		display: block;
		height: 100%;
		width: 30%;
		border-radius: 2px;
		background: #1a1a1a;
		transition: width .12s linear;
	}
}

@media (max-width: 550px) and (prefers-reduced-motion: reduce) {
	#coreyWeeklyBestsellers.cjs-trend-on .cjs-trend-live::before { animation: none; }
	#coreyWeeklyBestsellers .cjs-trend-progress > span { transition: none; }
}