/*
 * 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: flex; gap: 8px; 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-fix { display: flex; flex: none; gap: 8px; }
.absa-bar-in { display: flex; flex: 1; gap: 8px; min-width: 0; 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, .absa-sort-sheet {
	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, .absa-sort-sheet .absa-menu-head { display: block; padding: 20px 20px 8px; font-size: 18px; font-weight: 700; line-height: 24px; }
.absa-sort-bar .absa-menu-item, .absa-sort-sheet .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, .absa-sort-sheet .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); }

/* JS moves Filter / Sort into the native scroller and the open sheet outside it. */
.absa-js .absa-sort-bar[open] > summary::before { display: none; }
.absa-sort-backdrop { position: fixed; inset: 0; z-index: 99994; background: rgba(0, 0, 0, .5); }

/* Plugin-owned mobile keyboard layout. */
@media (max-width: 1023px), (pointer: coarse) {

.absa-rail { bottom: var(--absa-visible-bottom, 0px); height: min(var(--absa-p-h), calc(var(--absa-visible-height, 100dvh) - 12px)); max-height: calc(var(--absa-visible-height, 100dvh) - 12px); }
.absa-rail.absa-editing { height: calc(var(--absa-visible-height, 100dvh) - 12px); }
.absa-rail-body { min-height: 0; scroll-padding-block: 16px; }
.absa-rail input { font-size: 16px; scroll-margin-block: 16px; }

}

/* 1.6.6 (Claude, 2026-10-13) Keyboard overlay (plan A): while a field is edited the rail keeps its keyboard-free size
   (frontend.js freezes --absa-visible-height; --absa-visible-bottom goes negative while iOS pans the page, so the
   bottom sheet keeps its place on screen) and the keyboard covers its lower part instead of pushing it up. The rail
   body gets the covered height as bottom padding, so even the last field can be scrolled above the keyboard.
   Top-anchored rails (side / full screen) follow the pan through top; for the bottom sheet --absa-p-top is auto,
   which makes the calc() invalid and top stays auto. */
[data-absa-kb] { padding-bottom: calc(var(--absa-kb-pad, 0px) + var(--absa-keyboard, 0px)) !important; }
@media (max-width: 1023px), (pointer: coarse) {
	.absa-rail { top: calc(var(--absa-p-top) + var(--absa-visible-top, 0px)); }
}