/*
 * AUTOBOSS Shop Archive — tablets and phones (media attribute from the settings, default below 1024px).
 * eBay small-screen pattern: a sticky bar with "Filter" (badge = applied count), "Sort" and one chip per group;
 * the rail becomes a dialog (side drawer or bottom sheet) with "Reset" and "Show N results".
 * Geometry comes from custom properties so mobile.css can switch the variant without fighting specificity.
 */

.absa-layout { display: block; margin-top: 16px; }

/* ---------- sticky bar ---------- */
.absa-bar { display: block; margin: 0 calc(50% - 50vw) 12px; padding: 8px calc(50vw - 50%); background: #fff; }
.absa-sticky .absa-bar { position: sticky; top: var(--absa-top, 0px); z-index: 20; box-shadow: 0 1px 0 var(--absa-border); }
/* The bar is a stacking context: while its sort sheet is open it must rise above the site header and tab bar. */
.absa-bar:has(details[open]), .absa-menu-open .absa-bar { z-index: 99995; }
.absa-bar-in { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.absa-bar-in::-webkit-scrollbar { display: none; }
#absa-page .absa-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--absa-strong); border-radius: 18px; background: #fff; color: var(--absa-text); font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; }
#absa-page .absa-chip:hover { border-color: var(--absa-text); }
#absa-page .absa-chip.is-on { border-color: var(--absa-accent); background: var(--absa-chip); box-shadow: inset 0 0 0 1px var(--absa-accent); font-weight: 700; }
.absa-chip-filter { font-weight: 700 !important; }
.absa-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--absa-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; }

/* Sort lives in the bar; its menu becomes a bottom sheet (the bar scrolls horizontally and would clip a dropdown). */
.absa-sort-top { display: none; }
.absa-sort-bar .absa-menu-pop {
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99995;
	max-height: 80vh;
	padding: 0 0 calc(12px + env(safe-area-inset-bottom));
	overflow-y: auto;
	border-radius: 16px 16px 0 0;
	animation: absa-sheet .22s var(--absa-ease);
}
.absa-sort-bar[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 99994; background: rgba(0, 0, 0, .5); cursor: default; }
.absa-sort-bar .absa-menu-head { display: block; padding: 20px 20px 8px; font-size: 18px; font-weight: 700; line-height: 24px; }
.absa-sort-bar .absa-menu-item { min-height: 48px; padding: 12px 20px; font-size: 16px; }
.absa-menu-item .absa-i-check { width: 20px; height: 20px; }

/* ---------- tools ---------- */
.absa-tools { padding-bottom: 0; border-bottom: 0; }
.absa-top { gap: 8px; }

/* ---------- rail → dialog ---------- */
.absa-pt-side { --absa-p-top: 0px; --absa-p-w: min(420px, 88vw); --absa-p-h: 100%; --absa-p-hide: translateX(-100%); --absa-p-r: 0 16px 16px 0; }
.absa-pt-sheet { --absa-p-top: auto; --absa-p-w: 100%; --absa-p-h: 92vh; --absa-p-hide: translateY(100%); --absa-p-r: 16px 16px 0 0; }
@supports (height: 1dvh) { .absa-pt-sheet { --absa-p-h: 92dvh; } }

.absa-rail {
	position: fixed;
	top: var(--absa-p-top);
	bottom: 0;
	left: 0;
	z-index: 99995;
	display: flex;
	flex-direction: column;
	width: var(--absa-p-w);
	height: var(--absa-p-h);
	max-height: 100%;
	border-radius: var(--absa-p-r);
	background: #fff;
	box-shadow: 0 0 32px rgba(0, 0, 0, .2);
	transform: var(--absa-p-hide);
	visibility: hidden;
	transition: transform .28s var(--absa-ease), visibility 0s linear .28s;
}
.absa-open .absa-rail, .absa-rail:target { transform: none; visibility: visible; transition: transform .28s var(--absa-ease); }
.absa-open, .absa-open body { overflow: hidden; }
.absa-backdrop { position: fixed; inset: 0; z-index: 99994; display: block; background: rgba(0, 0, 0, .5); animation: absa-fade .2s; }

.absa-rail-head { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 60px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--absa-border); }
#absa-page .absa-rail-title { font-size: 18px; font-weight: 700; line-height: 24px; }
#absa-page .absa-rail-close { color: var(--absa-text); width: 44px; height: 44px; }
.absa-rail-body { flex: 1; min-height: 0; padding: 0 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.absa-rail-foot { display: flex; gap: 12px; flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--absa-border); background: #fff; }
.absa-rail-foot .absa-btn { flex: 1; height: 48px; border-radius: 24px; font-size: 16px; }
#absa-page .absa-group-head { min-height: 52px; padding: 14px 0; }
#absa-page .absa-group-title { font-size: 16px; }
.absa-opt, .absa-cat { min-height: 44px; align-items: center; padding: 10px 0; font-size: 16px; line-height: 22px; }
.absa-cat { padding-left: calc(var(--absa-d, 0) * 16px); }
.absa-box { width: 20px; height: 20px; margin-top: 0; }
.absa-js .absa-group:not(.is-expanded):not(.is-finding) .is-extra { display: none; }
.absa-more { min-height: 44px; font-size: 16px !important; }
#absa-page .absa-find input { height: 44px; font-size: 16px; }
.absa-price-f { height: 44px; }
#absa-page .absa-price input { font-size: 16px; }
#absa-page .absa-price-go { height: 44px; border-radius: 22px; font-size: 16px; }

@keyframes absa-sheet { from { transform: translateY(100%); } }
@keyframes absa-fade { from { opacity: 0; } }

/* List view: smaller image. */
#absa-page.absa-view-list .abpc-card { grid-template-columns: 160px minmax(0, 1fr); column-gap: 16px; }
#absa-page.absa-view-list .abpc-card > .abpc-actions { display: none; }


/* 1.3.0 · panel refinements. */
#absa-page .absa-chip { height: 32px; border-color: #8f8f8f; border-radius: 16px; }
#absa-page .absa-chip.is-on { border-color: var(--absa-accent); background: var(--absa-accent); box-shadow: none; color: #fff; }
#absa-page .absa-chip.is-on .absa-badge { background: #fff; color: var(--absa-accent); }
#absa-page .absa-group-sel { display: block; flex: 1; min-width: 0; overflow: hidden; color: var(--absa-muted); font-size: 14px; font-weight: 400; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.absa-opt, .absa-cat { font-size: 16px; line-height: 22px; }
.absa-sort-bar .absa-menu-head { display: flex; align-items: center; justify-content: space-between; font-size: 20px; line-height: 28px; }
#absa-page .absa-menu-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -12px -10px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--absa-text); cursor: pointer; }
#absa-page .absa-menu-x:hover { background: var(--absa-chip); }
.absa-backdrop { background: rgba(17, 24, 32, .7); }