/* Just arrived (patterns/home-arrivals.php), round 3. Loaded after home.css and shop.css on the homepage.
   The cards are the shop's own (inc/shop.php, shop.css), so every rule here is scoped under .jkd-arrivals and
   the shop page keeps its cards untouched. Owner: arrivals.

   The section stays on white. Its one move: the dark band that follows starts under the last row of cards
   (a full-bleed black foot drawn by ::after), so the cards stand over the seam instead of the page just
   switching colour. On phones the grid becomes a spec-sheet list with hairlines and the foot is off. */

.jkd-arrivals {
	--jkd-arrivals-foot: clamp(84px, 7vw, 120px);   /* how far the dark band reaches up under the last row of cards */
	--jkd-arrivals-seam: var(--jkd-gap);             /* the gap to the next section, painted black too (integration: 0 if the bands touch) */
	position: relative;
	isolation: isolate;
	border-top: 1px solid var(--jkd-line);
	padding-top: clamp(22px, 1.8vw, 32px);
}
/* The foot: full-bleed (the site wrapper clips sideways overflow, so 100vw is safe next to a scrollbar), behind the cards */
.jkd-arrivals::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: calc(-1 * var(--jkd-arrivals-seam));
	width: 100vw;
	height: calc(var(--jkd-arrivals-foot) + var(--jkd-arrivals-seam));
	transform: translateX(-50%);
	background: var(--jkd-black);
	pointer-events: none;
}

/* ------------------------------------------------------------------ Head: kicker, title with the link on its baseline, one line under */
.jkd-arrivals .jkd-arrivals__kicker { margin-bottom: clamp(10px, .8vw, 14px); }
.jkd-arrivals .jkd-arrivals__head { align-items: baseline; margin-bottom: 0; row-gap: 10px; }
.jkd-arrivals .jkd-arrivals__head h2 { font-size: clamp(30px, 1.5vw + 12px, 52px); }
.jkd-arrivals .jkd-arrivals__note {
	margin: clamp(8px, .7vw, 12px) 0 clamp(22px, 2vw, 36px);
	max-width: 48em;
	font-size: var(--jkd-fs);
	line-height: 1.5;
	color: var(--jkd-muted);
}

/* ------------------------------------------------------------------ Grid: the shop's, with the homepage's more generous gaps */
.jkd-arrivals .jkd-arrivals__grid .woocommerce { margin: 0; }
.jkd-arrivals .jkd-arrivals__grid ul.products {
	margin: 0;
	padding: 0;
	column-gap: clamp(16px, 1.4vw, 28px);
	row-gap: clamp(16px, 1.4vw, 28px);
}

/* ------------------------------------------------------------------ Cards: a quiet lift, the photo scales, an arrow slides in */
.jkd-arrivals .woocommerce ul.products li.product {
	transition: border-color .25s, box-shadow .35s var(--jkd-ease), transform .35s var(--jkd-ease);
}
.jkd-arrivals .woocommerce ul.products li.product:hover,
.jkd-arrivals .woocommerce ul.products li.product:focus-within {
	border-color: var(--jkd-steel);
	box-shadow: 0 24px 36px -24px rgba(14, 15, 17, .45);
	transform: translateY(-3px);
}
/* Black behind the photo: Hamid's photos are dark, so a letterbox edge never shows grey; the drawings already sit on black */
.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link { background: var(--jkd-black); }
.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link img { transition: transform .7s var(--jkd-ease); }
.jkd-arrivals .woocommerce ul.products li.product:hover a.woocommerce-loop-image-link img,
.jkd-arrivals .woocommerce ul.products li.product:focus-within a.woocommerce-loop-image-link img { transform: scale(1.03); }
/* The arrow, in a white disc at the photo's corner, slides in from the left when the card is hovered or focused */
.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff url(../home/icon-arrow.svg) center / 20px no-repeat;
	box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .25s, transform .35s var(--jkd-ease);
}
.jkd-arrivals .woocommerce ul.products li.product:hover a.woocommerce-loop-image-link::after,
.jkd-arrivals .woocommerce ul.products li.product:focus-within a.woocommerce-loop-image-link::after { opacity: 1; transform: none; }
/* The origin tag sits on the same inset as the card's text */
.jkd-arrivals .jkd-tag { left: 12px; top: 12px; padding: 5px 8px; font-size: 11.5px; }
.jkd-arrivals .jkd-tag--sold { left: auto; right: 12px; }

/* The text: name, then the mileage line promoted (it's the first thing a buyer checks), the fit line quiet, the price big */
.jkd-arrivals .woocommerce ul.products li.product .product-details.entry-content-wrap { gap: 5px; padding: 14px 16px 16px !important; }
.jkd-arrivals .woocommerce ul.products li.product .jkd-card-meta { font-size: 13px; font-weight: 600; color: var(--jkd-steel); }
.jkd-arrivals .woocommerce ul.products li.product .jkd-card-fits { font-size: 12.5px; }
.jkd-arrivals .woocommerce ul.products li.product .jkd-card-row { gap: 12px; padding-top: 12px; }
.jkd-arrivals .woocommerce ul.products li.product .price { font-size: 22px; }
.jkd-arrivals .jkd-card-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.jkd-arrivals .jkd-card-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Keyboard: one red ring around the whole card (the title's own ring goes, so there's no ring inside a ring) */
.jkd-arrivals .woocommerce ul.products li.product:has(a:focus-visible) { outline: 2px solid var(--jkd-red); outline-offset: 3px; }
.jkd-arrivals .woocommerce ul.products li.product:has(a:focus-visible) a:focus-visible { outline: none; }

/* Tablets (768 to 1024): the grid is three across, so the six newest make two full rows (eight would leave a gap on the foot) */
@media (min-width: 768px) and (max-width: 1024px) {
	.jkd-arrivals .woocommerce ul.products li.product:nth-child(n + 7) { display: none; }
}

/* Wide screens: the same steps as shop.css, one size up */
@media (min-width: 1440px) {
	.jkd-arrivals .woocommerce ul.products li.product .jkd-card-meta { font-size: 13.5px; }
	.jkd-arrivals .woocommerce ul.products li.product .jkd-card-fits { font-size: 13px; }
	.jkd-arrivals .woocommerce ul.products li.product .price { font-size: 24px; }
	.jkd-arrivals .jkd-card-stock { font-size: 12px; }
}
@media (min-width: 1800px) {
	.jkd-arrivals .woocommerce ul.products li.product .product-details.entry-content-wrap { gap: 6px; padding: 16px 18px 18px !important; }
	.jkd-arrivals .woocommerce ul.products li.product .jkd-card-meta { font-size: 14px; }
	.jkd-arrivals .woocommerce ul.products li.product .jkd-card-fits { font-size: 13.5px; }
	.jkd-arrivals .woocommerce ul.products li.product .price { font-size: 26px; }
	.jkd-arrivals .jkd-card-stock { font-size: 12.5px; }
	.jkd-arrivals .jkd-tag { left: 14px; top: 14px; font-size: 12px; }
	.jkd-arrivals .jkd-tag--sold { left: auto; right: 14px; }
}

/* ------------------------------------------------------------------ Phones: a spec-sheet list, photo left, hairlines between rows, no foot */
@media (max-width: 575px) {
	.jkd-arrivals::after { display: none; }
	.jkd-arrivals .jkd-arrivals__grid ul.products { row-gap: 0; }
	.jkd-arrivals .woocommerce ul.products li.product {
		grid-template-columns: 124px minmax(0, 1fr);
		column-gap: 14px;
		padding: 14px 0;
		border: 0;
		border-top: 1px solid var(--jkd-line);
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}
	.jkd-arrivals .woocommerce ul.products li.product:last-child { border-bottom: 1px solid var(--jkd-line); }
	.jkd-arrivals .woocommerce ul.products li.product:hover,
	.jkd-arrivals .woocommerce ul.products li.product:focus-within { border-color: var(--jkd-line); box-shadow: none; transform: none; }
	.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link {
		align-self: start;
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
		border-radius: 6px;
	}
	.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link img { position: static; }
	.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link::after { display: none; }
	.jkd-arrivals .jkd-tag { left: 8px; top: 8px; padding: 4px 6px; font-size: 10.5px; }
	.jkd-arrivals .jkd-tag--sold { left: auto; right: 8px; }
	.jkd-arrivals .woocommerce ul.products li.product .product-details.entry-content-wrap { gap: 3px; padding: 2px 0 0 !important; }
	.jkd-arrivals .woocommerce ul.products li.product .jkd-card-row { padding-top: 8px; }
	.jkd-arrivals .woocommerce ul.products li.product .price { font-size: 20px; }
}

/* ------------------------------------------------------------------ Less motion: no lift, no scale, the arrow just appears */
@media (prefers-reduced-motion: reduce) {
	.jkd-arrivals .woocommerce ul.products li.product,
	.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link img,
	.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link::after { transition: none; }
	.jkd-arrivals .woocommerce ul.products li.product:hover,
	.jkd-arrivals .woocommerce ul.products li.product:focus-within { transform: none; }
	.jkd-arrivals .woocommerce ul.products li.product:hover a.woocommerce-loop-image-link img,
	.jkd-arrivals .woocommerce ul.products li.product:focus-within a.woocommerce-loop-image-link img { transform: none; }
	.jkd-arrivals .woocommerce ul.products li.product a.woocommerce-loop-image-link::after { transform: none; }
}