/*
 * AUTOBOSS Product Card — base and desktop.
 * Sample: autoboss-taobao-detail "You may also like" card (square image on #f7f7f7, 14/22 title, small currency + 20px number).
 * Additions: category label and "From" price (autoolstore.com), two-line title, hover panel with buttons.
 * Tablet and phone overrides live in tablet.css / mobile.css (media attributes follow the settings).
 */

.abpc-card {
	--abpc-text: rgba(9, 9, 10, .92);
	--abpc-sub: rgba(9, 9, 10, .52);
	--abpc-weak: rgba(9, 9, 10, .32);
	--abpc-line: rgba(31, 31, 51, .12);
	--abpc-surface: #fff;
	--abpc-accent: var(--theme-palette-color-2, #fdb016);
	--abpc-price: color-mix(in srgb, var(--theme-palette-color-2, #fdb016) 42%, #5a3300);
	--abpc-btn-bg: linear-gradient(90deg, var(--theme-palette-color-1, #fbbf47), var(--theme-palette-color-2, #fdb016));
	--abpc-btn-color: var(--theme-palette-color-4, #212529);
	--abpc-font: var(--autoboss-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--abpc-num: var(--autoboss-font-mono, "SF Mono", Menlo, Consolas, monospace);
	--abpc-pad: 10px;
	--abpc-act-h: 36px;
	--abpc-act-gap: 8px;
	--abpc-title-size: 14px;
	--abpc-title-lh: 22px;
	--abpc-num-size: 20px;
	--abpc-ease: cubic-bezier(.2, .8, .2, 1);
	--abpc-scale: 1.05;
	--abpc-rise: 0px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 100%;
	height: 100%;
	min-width: 0;
	color: var(--abpc-text);
	font-family: var(--abpc-font);
	text-align: left;
	/* Size queries for narrow cards; also makes the card a stacking context for the hover surface. */
	container-type: inline-size;
}

/* Grid item: neutralise theme card styles (Blocksy type-1/2/3, WooCommerce floats). */
ul.products.abpc-grid,
.abpc-grid {
	display: grid;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
ul.products.abpc-grid::before,
ul.products.abpc-grid::after { display: none; }
.abpc-grid > .abpc-item,
.flexy-item > .abpc-item,
.abpc-item {
	position: relative;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	list-style: none;
	text-align: left;
}
.abpc-item > * { margin-bottom: 0; }

/* Image. */
.abpc-top { position: relative; }
.abpc-media {
	position: relative;
	display: block;
	aspect-ratio: var(--abpc-ratio, 1 / 1);
	overflow: hidden;
	border-radius: var(--abpc-radius, 4px);
	background: var(--abpc-img-bg, #f7f7f7);
}
.abpc-media img,
.abpc-card .abpc-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: var(--abpc-fit, contain);
	mix-blend-mode: multiply;
	transition: opacity .35s ease, transform .5s var(--abpc-ease);
}
.abpc-card .abpc-img-alt { opacity: 0; }
.abpc-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	transition: background-color .15s;
	pointer-events: none;
}
.abpc-card.is-out .abpc-img { opacity: .55; }

/* Labels: autoolstore.com card / main image style — frosted brand-colour capsule, 11px/700 uppercase. */
.abpc-badges {
	--abpc-accent: var(--theme-palette-color-2, #fdb016);
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}
/* Product page: a square overlay centred like the detail gallery's square track, so the label sits on the
   image corner even when the stage is wider than the image (desktop). */
.abpc-badges-main {
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 4;
	box-sizing: border-box;
	align-content: flex-start;
	align-items: flex-start;
	max-width: 100%;
	aspect-ratio: 1;
	padding: 20px;
	transform: translateX(-50%);
}
.abtd.is-params-view .abpc-badges-main { display: none; }
.abpc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .64);
	border-radius: 7px;
	background-color: color-mix(in srgb, var(--abpc-accent) 42%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .24), color-mix(in srgb, var(--abpc-accent) 10%, transparent));
	box-shadow: 0 3px 10px rgba(26, 29, 32, .1), inset 0 1px 0 rgba(255, 255, 255, .34);
	color: #171a1d;
	font-family: var(--autoboss-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	font-size: 11px;
	font-weight: 700;
	line-height: 12px;
	letter-spacing: .04em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .32);
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(7px) saturate(130%);
	backdrop-filter: blur(7px) saturate(130%);
}
.abpc-badge.is-new {
	background-color: rgba(53, 162, 54, .78);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(53, 162, 54, .1));
	color: #fff;
	text-shadow: none;
}
.abpc-badge.is-out {
	border-color: rgba(255, 255, 255, .28);
	background-color: rgba(23, 26, 29, .56);
	background-image: none;
	color: #fff;
	text-shadow: none;
}

/* Text. */
.abpc-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding-top: 8px;
}
.abpc-card .abpc-cat {
	display: block;
	overflow: hidden;
	margin: 0 0 2px;
	color: var(--abpc-sub);
	font-family: var(--abpc-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.abpc-card a.abpc-cat:hover { color: var(--abpc-price); }
.abpc-card .abpc-title {
	display: -webkit-box;
	overflow: hidden;
	min-height: calc(var(--abpc-title-lh) * var(--abpc-lines, 2));
	margin: 0;
	padding: 0;
	color: var(--abpc-text);
	font-family: var(--abpc-font);
	font-size: var(--abpc-title-size);
	font-weight: 600;
	line-height: var(--abpc-title-lh);
	letter-spacing: 0;
	text-transform: none;
	word-break: break-word;
	-webkit-line-clamp: var(--abpc-lines, 2);
	line-clamp: var(--abpc-lines, 2);
	-webkit-box-orient: vertical;
}
.abpc-card .abpc-title a { color: inherit; text-decoration: none; }
.abpc-card .abpc-title a:hover { color: inherit; }

.abpc-rating { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--abpc-sub); font-size: 12px; line-height: 18px; }
.abpc-stars { position: relative; display: inline-block; width: 70px; height: 12px; background: linear-gradient(90deg, #e2e5ea 0 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 .5l1.8 3.7 4 .5-3 2.8.8 4L7 9.6 3.4 11.5l.8-4-3-2.8 4-.5z'/%3E%3C/svg%3E") 0 0 / 14px 12px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 .5l1.8 3.7 4 .5-3 2.8.8 4L7 9.6 3.4 11.5l.8-4-3-2.8 4-.5z'/%3E%3C/svg%3E") 0 0 / 14px 12px repeat-x; }
.abpc-stars > span { position: absolute; inset: 0 auto 0 0; background: var(--abpc-accent); }

/* Price row. */
.abpc-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	margin-top: auto;
	padding-top: 2px;
}
.abpc-price {
	display: inline-flex;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	align-items: baseline;
	min-width: 0;
	overflow: hidden;
	color: var(--abpc-price);
	font-family: var(--abpc-num);
	font-weight: 500;
	line-height: 22px;
	white-space: nowrap;
}
.abpc-from {
	margin-right: 4px;
	font-family: var(--abpc-font);
	font-size: 13px;
	font-weight: 500;
}
.abpc-amount { display: inline-flex; align-items: baseline; }
.abpc-cur { font-size: 14px; }
.abpc-amount b { font-size: var(--abpc-num-size); font-weight: 500; line-height: 22px; }
.abpc-dash { padding: 0 2px; }
.abpc-was { overflow: hidden; min-width: 0; margin-left: 6px; color: var(--abpc-weak); font-size: 12px; font-weight: 400; text-overflow: clip; }
.abpc-price.is-empty { color: var(--abpc-sub); font-family: var(--abpc-font); font-size: 14px; }
.abpc-sold { color: var(--abpc-sub); font-family: var(--abpc-font); font-size: 12px; line-height: 22px; white-space: nowrap; }

/* Buttons. */
.abpc-actions { display: flex; gap: var(--abpc-act-gap); }
.abpc-card .abpc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	height: var(--abpc-act-h);
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	font-family: var(--abpc-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .15s, box-shadow .15s, color .15s, opacity .15s;
}
.abpc-card .abpc-btn-cart { flex: 1 1 auto; background: var(--abpc-btn-bg); color: var(--abpc-btn-color); }
.abpc-card .abpc-btn-cart:hover { filter: brightness(.95); color: var(--abpc-btn-color); }
.abpc-card .abpc-btn-details { flex: 0 1 auto; background: var(--abpc-surface); color: var(--abpc-text); box-shadow: inset 0 0 0 1px var(--abpc-line); }
.abpc-card .abpc-btn-details:hover { color: var(--abpc-text); box-shadow: inset 0 0 0 1px var(--abpc-text); }
.abpc-btn-text { overflow: hidden; text-overflow: ellipsis; }
.abpc-icon { flex: none; }
.abpc-card .abpc-btn.loading { opacity: .6; pointer-events: none; }
.abpc-card .abpc-btn.loading::after,
.abpc-card .abpc-btn.added::after { display: none; }
/* WooCommerce appends a "View cart" link after AJAX adds; the side cart / header already shows it. */
.abpc-card .added_to_cart { display: none !important; }
.abpc-card .abpc-btn-icon { display: none; }
.abpc-card :focus-visible { outline: 2px solid var(--abpc-text); outline-offset: 2px; }

/* Narrow cards: icon-only details button, smaller numbers. */
@container (max-width: 220px) {
	.abpc-btn-details .abpc-btn-text { display: none; }
	.abpc-card .abpc-btn-details { width: var(--abpc-act-h); padding: 0; }
}
@container (max-width: 200px) {
	.abpc-was { display: none; }
	.abpc-btn-cart .abpc-icon { display: none; }
	.abpc-card .abpc-btn { padding: 0 8px; font-size: 12px; }
}
@container (max-width: 150px) {
	.abpc-card { --abpc-num-size: 16px; }
	.abpc-from { font-size: 12px; }
	.abpc-cur { font-size: 12px; }
}

/* ---------------------------------------------------------------------
 * Hover (mouse / trackpad only). The grid never moves: the white surface is a pseudo-element
 * drawn at full size and only faded; the button panel is absolutely positioned below the card
 * and covers the next row while the hovered item is raised.
 * ------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	/* Leaving: z-index steps down over the shrink (.06s delay + .12s) instead of dropping at once, so the card
	   is not painted under its neighbours while it scales back. Entering jumps straight to the top, so a newly
	   hovered neighbour is always above a card that is still leaving. */
	.abpc-item { z-index: 0; transition: z-index .3s linear; }
	.abpc-item:hover,
	.abpc-item:focus-within { z-index: 6; transition: none; }

	.abpc-card::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: calc(-1 * var(--abpc-pad));
		border-radius: calc(var(--abpc-radius, 4px) + 4px);
		background: var(--abpc-surface);
		/* Layered shadow for depth: a wide soft drop plus a tight contact shadow. */
		box-shadow: 0 24px 48px -14px rgba(26, 29, 32, .3), 0 10px 20px -8px rgba(26, 29, 32, .14), 0 0 0 1px rgba(26, 29, 32, .04);
		opacity: 0;
		pointer-events: none;
		transition: opacity .12s ease .06s;
	}
	.abpc-card.abpc-h-expand::before { bottom: calc(-1 * (var(--abpc-pad) + var(--abpc-act-gap) + var(--abpc-act-h))); }
	.abpc-card.abpc-h-expand:not(:has(.abpc-actions))::before { bottom: calc(-1 * var(--abpc-pad)); }
	.abpc-card:is(:hover, :focus-within)::before {
		opacity: 1;
		pointer-events: auto;
		transition: opacity .18s var(--abpc-ease);
	}
	.abpc-h-none::before { display: none; }

	/* Grow over the neighbours (3D feel): scale from the centre, optional rise; the grid itself never moves. */
	.abpc-card { transition: transform .12s ease .06s; }
	.abpc-lift { --abpc-rise: -4px; }
	.abpc-card:is(:hover, :focus-within) {
		transform: translateY(var(--abpc-rise)) scale(var(--abpc-scale));
		transition: transform .22s var(--abpc-ease);
	}
	.abpc-h-none:is(:hover, :focus-within) { transform: translateY(var(--abpc-rise)); }
	/* Slider viewports clip: stay inside the card. */
	.abpc-in-slider { --abpc-scale: 1; --abpc-rise: 0px; }
	.abpc-in-slider::before { inset: 0; }

	/* Expand: panel below the card. Hidden with opacity + pointer-events so Tab still reaches it. */
	.abpc-h-expand > .abpc-actions {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		margin-top: var(--abpc-act-gap);
		opacity: 0;
		pointer-events: none;
		transform: translateY(-6px);
		transition: opacity .12s ease .06s, transform .12s ease .06s;
	}
	.abpc-h-expand:is(:hover, :focus-within) > .abpc-actions {
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: opacity .18s var(--abpc-ease), transform .18s var(--abpc-ease);
	}
	/* Room under the last row so the panel does not cover pagination. */
	.abpc-grid-expand { padding-bottom: calc(var(--abpc-act-gap, 8px) + var(--abpc-act-h, 36px) + 28px); }

	/* Overlay: buttons slide up over the bottom of the image (used inside sliders). */
	.abpc-h-overlay .abpc-top > .abpc-actions {
		position: absolute;
		right: 8px;
		bottom: 8px;
		left: 8px;
		z-index: 3;
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity .12s ease .06s, transform .12s ease .06s;
	}
	.abpc-h-overlay:is(:hover, :focus-within) .abpc-top > .abpc-actions {
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: opacity .18s var(--abpc-ease), transform .18s var(--abpc-ease);
	}
	.abpc-h-none .abpc-actions { display: none; }

	/* Image effects. */
	.abpc-i-swap.has-alt:hover .abpc-img-alt { opacity: 1; }
	.abpc-i-swap.has-alt:hover .abpc-img:not(.abpc-img-alt) { opacity: 0; }
	.abpc-i-swap:not(.has-alt):hover .abpc-media::after,
	.abpc-i-darken:hover .abpc-media::after { background: rgba(0, 0, 0, .08); }
	.abpc-i-zoom:hover .abpc-img { transform: scale(1.06); }
}

/* ---------------------------------------------------------------------
 * Touch screens (phones, tablets, touch laptops): no hover. Buttons follow the "touch" setting.
 * ------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
	.abpc-card .abpc-actions { display: none; }
	.abpc-t-full > .abpc-actions { display: flex; margin-top: 8px; }
	.abpc-t-icon .abpc-btn-icon {
		position: relative;
		display: inline-flex;
		width: 32px;
		height: 32px;
		margin-left: auto;
		padding: 0;
		border-radius: 50%;
		background: var(--abpc-btn-bg);
		color: var(--abpc-btn-color);
	}
	/* 44px touch target without a bigger circle. */
	.abpc-t-icon .abpc-btn-icon::before { content: ""; position: absolute; inset: -6px; }
	.abpc-t-icon .abpc-sold { order: 3; flex-basis: 100%; line-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.abpc-card,
	.abpc-card *,
	.abpc-card::before { transition: none !important; }
	.abpc-card:is(:hover, :focus-within) { transform: none; }
	.abpc-i-zoom:hover .abpc-img { transform: none; }
}