/* ============================================================
   Amazon Choices — supplemental styles (Mad Cat Man build)
   ------------------------------------------------------------
   Mad Cat Man's own style.css already fully styles the module's shared
   class names — .ac-wrap, .ac-nav, .ac-section, .ac-section-head, .ac-grid,
   .ac-card, .ac-disclosure, .ac-note, .ac-banner — matching the module's own
   class names almost exactly, so none of that is repeated here.
   What was never built (because the old manual/shortcode system didn't need
   it) is: the instant-paint skeleton cards, the CSS that reflows AAWP's own
   real product markup into the existing .ac-card box shape, and the
   empty-section state the scroll-loader's JS toggles on. That is all this
   file adds — using Mad Cat Man's own tokens throughout.
   ============================================================ */

/* ---- skeleton cards (shown instantly, replaced as each product streams in) ---- */
.ac-card.ac-skel { pointer-events: none; }
.ac-skel-thumb {
	aspect-ratio: 1;
	background: var(--line-soft);
	position: relative;
	overflow: hidden;
}
.ac-skel-body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.ac-skel-body span {
	display: block;
	height: 11px;
	border-radius: 4px;
	background: var(--line-soft);
	position: relative;
	overflow: hidden;
}
.ac-skel-body span:nth-child(1) { width: 92%; }
.ac-skel-body span:nth-child(2) { width: 80%; }
.ac-skel-body span:nth-child(3) { width: 50%; margin-bottom: 4px; }
.ac-skel-btn { width: 100% !important; height: 34px !important; margin-top: auto; border-radius: var(--radius); }
.ac-skel-thumb::after,
.ac-skel-body span::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(44, 34, 51, .06), transparent);
	animation: ac-shimmer 1.2s ease-in-out infinite;
}
@keyframes ac-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
	.ac-skel-thumb::after, .ac-skel-body span::after { animation: none; }
}

/* ---- a section with zero resolved products (all skeletons dropped) ---- */
.ac-section.ac-empty { display: none; }

/* ---- resolved card: AAWP's real markup, reflowed into the existing
        .ac-card box shape (thumb / body / title / buy button) ---- */
.ac-card--aawp { padding: 0; }
.ac-card--aawp .aawp-product,
.ac-card--aawp .aawp-product--amzc {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
}
.ac-card--aawp .aawp-product__thumb { margin: 0; display: block; }
.ac-card--aawp .aawp-product__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--line-soft);
	padding: 14px;
}
.ac-card--aawp .aawp-product__content {
	padding: 16px 18px 0;
	flex: 1;
}
.ac-card--aawp .aawp-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--display);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--ink);
	text-decoration: none;
}
.ac-card--aawp .aawp-product__title:hover { color: var(--blue-deep); }
.ac-card--aawp .aawp-product__footer { padding: 12px 18px 18px; margin-top: auto; }
.ac-card--aawp .aawp-button,
.ac-card--aawp .aawp-button--buy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	background: var(--sun);
	color: #3a2c12 !important;
	font-family: var(--sans);
	font-weight: 800;
	font-size: .86rem;
	padding: 11px 14px;
	border: none;
	border-radius: 100px;
	text-decoration: none;
	box-shadow: none;
}
.ac-card--aawp .aawp-button:hover,
.ac-card--aawp .aawp-button--buy:hover { background: var(--coral); color: #fff !important; }
.ac-card--aawp .aawp-button::before,
.ac-card--aawp .aawp-button::after { display: none !important; }
/* AAWP sometimes renders extra rows (price/rating/description) inside its
   default box when the clean-card parse falls back to the raw markup —
   hide everything except image / title / buy button so it still matches
   the .ac-card layout instead of overflowing it. */
.ac-card--aawp .aawp-product__pricing,
.ac-card--aawp .aawp-product__description,
.ac-card--aawp .aawp-product__rating,
.ac-card--aawp .aawp-product__bonus,
.ac-card--aawp .aawp-disclaimer { display: none !important; }