/*
 * ChoiceKite Shortlist, Quick Answer and Our Top Picks in Detail (v2.15.0).
 * Article-first: light surfaces, hairline borders, no shadows, no motion
 * beyond one short transition. Native scroll-snap carousel (no library).
 * Retailer buttons use the shared .dp2-rbtn from dp2-product-reveal.css.
 * Container queries size the cards to the ARTICLE column, not the viewport.
 */
.dp2-sl,
.dp2-tp {
	--dp2sl-ink: #14181c;
	--dp2sl-soft: #4b5563;
	--dp2sl-line: #e5e7eb;
	--dp2sl-surface: #f8f9fb;
	--dp2sl-accent: var(--dp2sp-accent, #5b3fe0);
	--dp2sl-accent-soft: var(--dp2sp-accent-soft, #efebff);
	--dp2sl-gap: 14px;
	box-sizing: border-box;
	margin: 32px 0;
	color: var(--dp2sl-ink);
	max-width: 100%;
}
.dp2-sl *,
.dp2-tp * { box-sizing: border-box; }
.dp2-sl { container-type: inline-size; }

/* Small green check used for feature lines (same asset as the panel). */
.dp2-tick {
	display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -0.12em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.6 3.6 7.4-8' fill='none' stroke='%2316a34a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Quick Answer ---------- */
.dp2-sl-qa {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 14px 16px;
	align-items: center;
	padding: 16px;
	margin: 0 0 24px;
	background: var(--dp2sl-surface);
	border: 1px solid var(--dp2sl-line);
	border-radius: 12px;
}
.dp2-sl-qa:not(:has(.dp2-sl-qa-media)) { grid-template-columns: minmax(0, 1fr); }
.dp2-sl-qa-media { width: 88px; aspect-ratio: 1 / 1; background: #fff; border-radius: 8px; overflow: hidden; }
.dp2-sl-qa-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dp2-sl-qa-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--dp2sl-accent); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dp2-sl-qa-name { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--dp2sl-ink); }
.dp2-sl-qa-verdict { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--dp2sl-soft); }
.dp2-sl-qa-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Heading + arrows ---------- */
.dp2-sl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.dp2-sl-title { margin: 0; font-size: 24px; line-height: 1.25; color: var(--dp2sl-ink); }
.dp2-sl-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--dp2sl-soft); }
.dp2-sl-controls { display: flex; gap: 8px; flex: 0 0 auto; }
.dp2-sl-controls[hidden] { display: none; }
.dp2-sl-arrow {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px; line-height: 1;
	color: var(--dp2sl-accent); background: #fff; border: 1px solid var(--dp2sl-line);
	transition: background-color .15s ease, border-color .15s ease;
}
.dp2-sl-arrow:hover:not(:disabled) { background: var(--dp2sl-accent-soft); border-color: var(--dp2sl-accent); }
.dp2-sl-arrow:disabled { opacity: .4; cursor: default; }

/* ---------- Carousel ---------- */
.dp2-sl-viewport {
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin: 0; padding: 2px 0 4px;
}
.dp2-sl-viewport::-webkit-scrollbar { display: none; }
.dp2-sl-viewport { cursor: grab; }
.dp2-sl-viewport a, .dp2-sl-viewport button { cursor: pointer; }
.dp2-sl-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.dp2-sl-viewport.is-dragging * { user-select: none; -webkit-user-select: none; pointer-events: none; }
.dp2-sl-track { position: relative; }
.dp2-sl-viewport:focus-visible { outline: 2px solid var(--dp2sl-accent); outline-offset: 2px; border-radius: 8px; }
.dp2-sl-track { display: flex; gap: var(--dp2sl-gap); list-style: none; margin: 0; padding: 0; }
.dp2-sl-slide { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; list-style: none; margin: 0; padding: 0; display: flex; }
.dp2-sl-slide::marker { content: ""; }
.dp2-sl-slide > .dp2-product-reveal { display: flex; flex: 1 1 auto; min-width: 0; }
@container (min-width: 560px) { .dp2-sl-slide { flex-basis: calc((100% - var(--dp2sl-gap)) / 2); } }
@container (min-width: 820px) { .dp2-sl-slide { flex-basis: calc((100% - 2 * var(--dp2sl-gap)) / 3); } }
@container (min-width: 1080px) { .dp2-sl-slide { flex-basis: calc((100% - 3 * var(--dp2sl-gap)) / 4); } }

/* ---------- Card ---------- */
.dp2-sl-card {
	display: flex; flex-direction: column; flex: 1 1 auto; width: 100%;
	padding: 14px; background: #fff; border: 1px solid var(--dp2sl-line); border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.dp2-sl-media { aspect-ratio: 4 / 3; width: 100%; background: var(--dp2sl-surface); border-radius: 8px; overflow: hidden; margin: 0 0 12px; }
.dp2-sl-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; user-select: none; -webkit-user-drag: none; }
.dp2-sl-body { display: flex; flex-direction: column; gap: 6px; }
.dp2-sl-role {
	align-self: flex-start; display: inline-block; max-width: 100%;
	padding: 2px 9px; border-radius: 999px; font-size: 12px; line-height: 1.5; font-weight: 600;
	color: var(--dp2sl-accent); background: var(--dp2sl-accent-soft);
}
.dp2-sl-name { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--dp2sl-ink); }
.dp2-sl-verdict, .dp2-sl-bestfor, .dp2-sl-features { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dp2sl-soft); }
.dp2-sl-verdict, .dp2-sl-bestfor, .dp2-sl-features-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp2-sl-features { display: flex; gap: 6px; align-items: flex-start; }
.dp2-sl-features .dp2-tick { margin-top: 0.28em; width: 0.95em; height: 0.95em; }
.dp2-sl-bestfor-label { font-weight: 700; color: var(--dp2sl-ink); }
.dp2-sl-actions { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* Secondary action: View Product Details */
.dp2-sl-details {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; padding: 0 16px; border-radius: 999px;
	font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center;
	color: var(--dp2sl-accent); background: #fff; border: 1px solid var(--dp2sl-accent);
	transition: background-color .15s ease;
}
.dp2-sl-details:hover { background: var(--dp2sl-accent-soft); }
.dp2-sl-details:focus-visible,
.dp2-sl-chip:focus-visible,
.dp2-tp-trigger:focus-visible { outline: 2px solid var(--dp2sl-accent); outline-offset: 2px; }

/* Retailer CTA block */
.dp2-sl-cta { display: flex; flex-direction: column; gap: 8px; }
a.dp2-rbtn.dp2-sl-buy { width: 100%; min-height: 44px; justify-content: center; }
.dp2-sl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dp2-sl-chip {
	appearance: none; -webkit-appearance: none; cursor: pointer; text-decoration: none;
	display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
	color: var(--dp2sl-ink); background: #fff; border: 1px solid var(--dp2sl-line); border-radius: 999px;
}
.dp2-sl-chip:hover { border-color: var(--dp2sl-accent); color: var(--dp2sl-accent); }
@media (pointer: coarse) { .dp2-sl-chip { min-height: 40px; } }

/* Disclosure under the carousel (one capsule, from DP_EE_Retailer_Offers) */
.dp2-sl .dp2-disclosure-capsule { margin: 14px 0 0; padding: 7px 14px; font-size: 13px; line-height: 1.4; border-radius: 18px; box-sizing: border-box; }
.dp2-sl .dp2-disclosure-capsule__icon { width: 18px; height: 18px; font-size: 11px; }
@media (max-width: 480px) { .dp2-sl .dp2-disclosure-capsule { display: flex; width: auto; max-width: 100%; overflow-wrap: anywhere; } }

/* ---------- Our Top Picks in Detail (one vertical accordion, open by default) ---------- */
.dp2-tp { container-type: inline-size; }
.dp2-tp-title { margin: 0 0 14px; font-size: 24px; line-height: 1.25; color: var(--dp2sl-ink); }
.dp2-tp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--dp2sl-line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.dp2-tp-item { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dp2sl-line); }
.dp2-tp-item:first-child { border-top: 0; }
.dp2-tp-item::marker { content: ""; }
.dp2-tp-heading { margin: 0; font-size: inherit; }
.dp2-tp-trigger {
	appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; text-align: left;
	display: flex; align-items: center; gap: 12px;
	min-height: 56px; padding: 10px 16px; font: inherit; color: var(--dp2sl-ink); background: #fff; border: 0;
}
.dp2-tp-trigger:hover { background: var(--dp2sl-surface); }
.dp2-tp-num { flex: 0 0 26px; font-size: 14px; font-weight: 700; color: var(--dp2sl-accent); }
.dp2-tp-thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--dp2sl-surface); overflow: hidden; }
.dp2-tp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp2-tp-titles { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp2-tp-name { font-size: 16px; font-weight: 700; line-height: 1.3; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.dp2-tp-line { font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--dp2sl-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp2-tp-toggle { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dp2sl-line); border-radius: 50%; background: #fff; }
.dp2-tp-trigger:hover .dp2-tp-toggle { border-color: var(--dp2sl-accent); }
.dp2-tp-chevron { width: 8px; height: 8px; border-right: 2px solid var(--dp2sl-soft); border-bottom: 2px solid var(--dp2sl-soft); transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.dp2-tp-trigger[aria-expanded="true"] .dp2-tp-chevron { transform: translateY(2px) rotate(-135deg); }
.dp2-tp-panel[hidden] { display: none; }

/* Body: wide editorial zone + facts zone. Sized by the ARTICLE column (container query). */
.dp2-tp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 4px 16px 20px; }
.dp2-tp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.dp2-tp-gallery { width: 100%; max-width: 420px; min-width: 0; }
.dp2-tp-desc { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--dp2sl-ink); }
.dp2-tp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 14px; }
.dp2-tp-actions > .dp2-product-reveal { display: inline-flex; }
.dp2-tp-actions .dp2-sl-cta { min-width: 220px; }

.dp2-tp-facts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dp2-tp-fact-title { margin: 0 0 6px; font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dp2sl-ink); }
.dp2-tp-fact-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dp2sl-soft); }
.dp2-tp-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.5; color: var(--dp2sl-soft); }
.dp2-tp-features li { position: relative; margin: 0; padding-left: 22px; }
.dp2-tp-features li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: .95em; height: .95em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.6 3.6 7.4-8' fill='none' stroke='%2316a34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dp2-tp-features .dp2-feature-label { color: var(--dp2sl-ink); font-weight: 600; }

@container (min-width: 720px) {
	.dp2-tp-body { grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); gap: 28px; padding: 6px 20px 22px; }
	.dp2-tp-body--solo { grid-template-columns: minmax(0, 1fr); }
	.dp2-tp-facts { padding-left: 24px; border-left: 1px solid var(--dp2sl-line); }
	.dp2-tp-body--solo .dp2-tp-facts { padding-left: 0; border-left: 0; }
}
@container (min-width: 1000px) {
	.dp2-tp-main.has-media { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
	.dp2-tp-gallery { max-width: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
	.dp2-sl-title, .dp2-tp-title { font-size: 21px; }
	.dp2-sl-qa { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; }
	.dp2-sl-qa-media { width: 72px; }
	.dp2-sl-qa-name { font-size: 18px; }
	.dp2-sl-qa-actions > .dp2-sl-details, .dp2-sl-qa-actions > .dp2-sl-cta { width: 100%; }
	.dp2-tp-trigger { padding: 10px 14px; gap: 10px; }
	.dp2-tp-body { padding: 2px 14px 18px; }
	.dp2-tp-actions > .dp2-product-reveal, .dp2-tp-actions .dp2-sl-details, .dp2-tp-actions .dp2-sl-cta { width: 100%; }
	.dp2-tp-actions .dp2-sl-cta { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.dp2-sl *, .dp2-tp * { transition: none !important; scroll-behavior: auto !important; }
}