/* Product card (assets/php/card.php), handle parking-card. Look from category.src.html (card CSS), tokens from the theme. */
.park-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 0; padding: 0; }
.park-cards.scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
	/* room for the hover lift and shadow, which a scroll container would clip */
	padding: 10px 20px 50px; margin: -10px -20px -50px; scroll-padding-inline: 20px; }
.park-cards.scroll::-webkit-scrollbar { display: none; }
.park-cards.scroll > .park-card { flex: 0 0 236px; scroll-snap-align: start; }

/* Enters with a transform-only spring: no opacity, so the first image paints at once (LCP). */
@keyframes park-card-in { from { transform: translateY(10px) scale(.94); } }
.park-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--park-card); border: 1px solid var(--park-line);
	padding: 10px; color: var(--park-fg); min-width: 0;
	transition: transform .55s var(--park-spring), box-shadow .25s, background-color var(--park-theme), border-color var(--park-theme);
	animation: park-card-in .55s var(--park-spring) both; animation-delay: calc(var(--i, 0) * 25ms); }
.park-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px var(--park-drop); }
.park-card a { color: inherit; text-decoration: none; }
.park-card .ph { position: relative; border-radius: 18px; background: #fff; aspect-ratio: 1; max-width: 100%; overflow: hidden; }
.park-card .strip { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.park-card .strip::-webkit-scrollbar { display: none; }
.park-card .strip a { flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; }
.park-card .strip img { width: 84%; height: 84%; object-fit: contain; transition: transform .6s var(--park-spring); }
.park-card:hover .strip img { transform: scale(1.05); }

.park-card .ic { position: absolute; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
	color: #14161c; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 14px rgba(20, 25, 50, .16); transition: transform .5s var(--park-spring), opacity .2s; }
.park-card .ic[hidden] { display: none; }
.park-card .ic:hover { transform: scale(1.12); }
.park-card .ic:active { transform: scale(.85); transition-duration: .12s; }
.park-card .ic svg { width: 18px; height: 18px; }
.park-card .ic:focus-visible, .park-card .park-add:focus-visible, .park-card a:focus-visible { outline: 2px solid var(--park-accent); outline-offset: 2px; }
.park-card .nav { top: 50%; margin-top: -18px; opacity: 0; }
.park-card .nav.prev { left: 8px; }
.park-card .nav.next { right: 8px; }
.park-card:hover .nav, .park-card .nav:focus-visible { opacity: 1; }
.park-card .nav[disabled] { opacity: 0 !important; pointer-events: none; }
.park-card .park-fav { top: 8px; right: 8px; }
.park-card .park-fav[aria-pressed="true"] { color: var(--park-danger); }
.park-card .park-fav[aria-pressed="true"] svg { fill: currentColor; animation: park-heart .7s var(--park-spring); }
.park-card .park-fav.burst::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--park-danger); animation: park-burst .6s ease-out forwards; }
@keyframes park-heart { 0% { transform: scale(.4); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes park-burst { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.park-card .badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 10px; border-radius: 99px; background: var(--park-accent); color: #fff;
	font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.park-card .dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.park-card .dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(20, 22, 28, .22); transition: width .45s var(--park-spring), background-color .2s; }
.park-card .dots i.on { width: 16px; background: rgba(20, 22, 28, .75); }

.park-card .meta { display: flex; align-items: center; gap: 8px; margin: 12px 4px 2px; min-height: 17px; }
.park-card .brand { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--park-muted); font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.park-card .rate { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.park-card .rate svg { width: 13px; height: 13px; fill: var(--park-star); }
.park-card .rate small { color: var(--park-muted); font-weight: 500; }
.park-card .nm { margin: 0 4px; font-size: 14px; line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 2.7em; }
.park-card .stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--park-muted); margin: 6px 4px 0; }
.park-card .stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--park-ok); }
.park-card .stock.out::before { background: color-mix(in srgb, var(--park-muted) 55%, transparent); }
.park-card .row { display: flex; align-items: center; justify-content: space-between; margin: auto 4px 2px; padding-top: 12px; gap: 8px; }
.park-card .pr { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.park-card .pr s { display: block; font-size: 12px; font-weight: 500; color: var(--park-muted); }
.park-card .pr small { font-size: 12px; font-weight: 600; color: var(--park-muted); }
.park-card .pr .was { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.park-card .pr .was s { display: inline; }
.park-card .pr .park-price-lowest { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--park-muted); }
.park-card .pr .b2b { font-size: 11px; font-weight: 700; color: var(--park-accent); letter-spacing: .02em; white-space: nowrap; }
.park-card .park-add { width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; color: #fff; background: var(--park-accent); display: grid;
	place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px color-mix(in srgb, var(--park-accent) 45%, transparent);
	transition: transform .5s var(--park-spring), background-color .2s; }
.park-card .park-add:hover { transform: scale(1.1); }
.park-card .park-add:active { transform: scale(.85); transition-duration: .12s; }
.park-card .park-add svg { width: 21px; height: 21px; grid-area: 1 / 1; }
.park-card .park-add svg + svg, .park-card .park-add.done svg:first-child { display: none; }
.park-card .park-add.done { background: var(--park-ok); }
.park-card .park-add.done svg + svg { display: block; }
.park-card .park-add[disabled] { background: color-mix(in srgb, var(--park-muted) 35%, var(--park-card)); box-shadow: none; cursor: not-allowed; transform: none; }

/* The image that flies into the rail's cart. */
.park-fly { position: fixed; left: 0; top: 0; z-index: 80; width: 64px; height: 64px; border-radius: 16px; background: #fff center / contain no-repeat;
	pointer-events: none; box-shadow: 0 10px 30px var(--park-drop); }

@media (hover: none) { .park-card .nav { opacity: 1; width: 30px; height: 30px; margin-top: -15px; } }
@media (max-width: 700px) {
	.park-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.park-cards.scroll > .park-card { flex-basis: 46vw; }
	.park-card { border-radius: 20px; padding: 8px; }
	.park-card .pr { font-size: 17px; }
	.park-card .park-add { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.park-card, .park-card .park-fav[aria-pressed="true"] svg, .park-card .park-fav.burst::after { animation: none; }
	.park-card .park-fav.burst::after { display: none; }
	.park-card, .park-card .ic, .park-card .park-add, .park-card .strip img { transition-timing-function: ease; }
}