`, and this used to
* carry `max-width: 780px`, silently overriding .apl-container's 1200px
* (same specificity, later in the cascade). page.php isn't only used for
* narrow article-style content — "Panel" (dashboard) and "Mapa" are
* WordPress Pages with full app UI embedded via shortcode, rendered
* through this exact template, so they were squeezed to a 780px column
* from both sides too. Removed rather than re-scoped: unlike a blog post,
* a generic Page can contain literally anything, so this template has no
* business asserting an opinion about content width at all.
*/
.apl-page { padding: 32px 16px 56px; }
.apl-page__title { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; }
.apl-page__content { font-size: 17px; line-height: 1.75; color: var(--apl-ink-2); }
.apl-page__content h2 { font-size: 24px; font-weight: 800; margin: 32px 0 14px; color: var(--apl-ink); }
.apl-page__content p { margin: 0 0 18px; }
@media (max-width: 900px) {
.apl-grid--posts { grid-template-columns: repeat(2, 1fr); }
.apl-post__title { font-size: 26px; }
}
@media (max-width: 600px) {
.apl-grid--posts { grid-template-columns: 1fr; }
.apl-post__nav { grid-template-columns: 1fr; }
.apl-post__nav-link--next { text-align: left; grid-column: 1; }
}
.apl-pricebox { background: var(--apl-card,#fff); border: 1px solid var(--apl-line); border-radius: var(--apl-radius); padding: 20px; box-shadow: var(--apl-shadow); display: grid; gap: 12px; margin-bottom: 20px; }
.apl-pricebox__price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.apl-pricebox__seller { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--apl-line); }
.apl-pricebox__avatar { border-radius: 999px; }
.apl-pricebox__seller-name { display: block; font-weight: 700; }
.apl-pricebox__seller-since { display: block; font-size: 12px; color: var(--apl-muted); }
/* [0.53.12] "Travels up to 30 km" line — same quiet, secondary treatment as the location line above the fold. */
.apl-pricebox__radius { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--apl-muted); margin-top: -4px; }
.apl-pricebox__radius .apl-i { flex: none; opacity: .7; }
/* ---------- Paginacja / pusty stan ---------- */
.apl-pagination { margin-top: 28px; }
.apl-pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--apl-line); border-radius: 10px; margin: 2px; background: var(--apl-card,#fff); font-weight: 600; }
.apl-pagination .page-numbers.current { background: var(--apl-primary); color: #fff; border-color: var(--apl-primary); }
.apl-empty { padding: 48px 16px; text-align: center; color: var(--apl-muted); grid-column: 1 / -1; }
/* ---------- Stopka ---------- */
.apl-footer { background: var(--apl-ink); color: #cbd5e1; margin-top: 40px; }
.apl-footer__inner { display: flex; justify-content: space-between; gap: 24px; padding: 40px 16px; flex-wrap: wrap; }
.apl-footer .apl-logo { color: #fff; }
.apl-footer__tag { color: #94a3b8; margin: 8px 0 0; max-width: 320px; }
.apl-footer__menu { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0; flex-wrap: wrap; }
.apl-footer__menu a:hover { color: #fff; }
.apl-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #94a3b8; }
.apl-footer__bottom .apl-container { padding: 16px; }
/* ---------- Mobile bottom tab bar (native-app feel) ---------- */
.apl-bottomnav { display: none; }
@media (max-width: 860px) {
.apl-bottomnav {
display: flex; align-items: flex-end; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
background: var(--apl-card,#fff); /* solid — backdrop-filter caused repaint jank/jumping on scroll */
border-top: 1px solid var(--apl-line);
padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
box-shadow: 0 -6px 24px rgba(15,23,42,.06);
}
.apl-bottomnav__item {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 4px 2px; font-size: 10.5px; font-weight: 600; color: var(--apl-muted);
letter-spacing: .01em; -webkit-tap-highlight-color: transparent;
}
.apl-bnav__svg { width: 24px; height: 24px; display: block; }
.apl-bottomnav__item.is-active { color: var(--apl-primary); }
.apl-bottomnav__item.is-active .apl-bnav__svg { stroke-width: 2.3; }
.apl-bottomnav__item:active { transform: scale(.94); transition: transform .1s; }
/* Icon wrapper (for badges) + avatar + unread badge */
.apl-bnav__ico { position: relative; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.apl-bnav__avatar { width: 25px; height: 25px; border-radius: 999px; display: block; object-fit: cover; box-shadow: 0 0 0 1px var(--apl-line); }
.apl-bottomnav__item.is-active .apl-bnav__avatar { box-shadow: 0 0 0 2px var(--apl-primary); }
.apl-bnav__badge {
position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px;
background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px;
border-radius: 999px; text-align: center; border: 2px solid #fff; box-sizing: content-box;
}
/* Elevated centre "Add" FAB */
.apl-bottomnav__item--cta { color: var(--apl-primary); }
.apl-bottomnav__fab {
width: 52px; height: 52px; margin-top: -26px; margin-bottom: 2px;
display: flex; align-items: center; justify-content: center;
background: var(--apl-primary-aa, #4338ca);
color: #fff; font-size: 30px; font-weight: 400; line-height: 1; border-radius: 50%;
box-shadow: 0 8px 20px color-mix(in srgb, var(--apl-primary) 42%, transparent); border: 4px solid #fff;
}
.apl-bottomnav__item--cta:active .apl-bottomnav__fab { transform: scale(.92); transition: transform .1s; }
/* Declutter the mobile header — the bottom bar + hamburger own navigation.
Hide the sign-in link too, so the top bar is identical before and after
login (logo + menu button only) instead of an item vanishing on login. */
.apl-header__actions .apl-acct,
.apl-header__actions .apl-acct__signin,
.apl-header__add { display: none; }
.apl-header__inner { gap: 10px; }
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.apl-nav--primary, .apl-header__add .apl-btn__label { display: none; }
.apl-nav-toggle { display: flex; }
.apl-archive__layout { grid-template-columns: 1fr; }
/* Filters as a full-screen bottom-sheet-style panel with header + apply bar */
.apl-archive__sidebar {
position: fixed; inset: 0; z-index: 520; background: var(--apl-card,#fff);
display: flex; flex-direction: column; padding: 0;
transform: translateY(100%); transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.apl-archive__sidebar.is-open { transform: translateY(0); }
.apl-filters__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px calc(14px + env(safe-area-inset-top,0px)); border-bottom: 1px solid var(--apl-line); flex: 0 0 auto; }
.apl-filters__bar-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.apl-filters__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: var(--apl-bg-2); border-radius: 999px; color: var(--apl-ink); cursor: pointer; }
.apl-filters__scroll { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px; -webkit-overflow-scrolling: touch; }
.apl-filters__apply { display: block; flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--apl-line); background: var(--apl-card,#fff); box-shadow: 0 -6px 20px rgba(15,23,42,.06); }
.apl-filters__done { width: 100%; justify-content: center; font-size: 16px; padding: 14px; }
.apl-body.apl-filters-open { overflow: hidden; }
.apl-filters-toggle { display: inline-flex; align-items: center; gap: 8px; }
.apl-single__layout { grid-template-columns: 1fr; }
.apl-single__aside { position: static; }
.apl-herosearch { flex-direction: column; border-radius: var(--apl-radius); align-items: stretch; }
.apl-herosearch__field--loc { border-left: none; border-top: 1px solid var(--apl-line); }
.apl-herosearch__submit { width: 100%; }
}
/* Mobile header — slide-out menu (handled in mobile-nav.js) */
.apl-body.apl-menu-open { overflow: hidden; }
/* ---------- Mobile slide-out drawer (fixes: menu did not open) ---------- */
@media (max-width: 860px) {
/* Backdrop behind the drawer. */
.apl-body.apl-menu-open::after {
content: ""; position: fixed; inset: 0; z-index: 390;
background: rgba(15, 23, 42, .48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
animation: aplFade .2s ease;
}
/* The primary nav becomes a right-side drawer when open. */
.apl-nav--primary.is-open {
display: block; position: fixed; top: 0; right: 0; bottom: 0;
width: min(86vw, 340px); z-index: 400; overflow-y: auto;
background: var(--apl-card,#fff); border-left: 1px solid var(--apl-line);
box-shadow: -12px 0 44px rgba(0, 0, 0, .22);
padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
animation: aplSlideIn .22s cubic-bezier(.22, 1, .36, 1);
}
.apl-nav--primary.is-open::before {
content: attr(data-title); display: block;
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--apl-muted); padding: 4px 12px 12px;
}
.apl-nav--primary.is-open .apl-menu { flex-direction: column; flex-wrap: nowrap; gap: 2px; align-items: stretch; }
.apl-nav--primary.is-open .apl-menu > li { position: static; width: 100%; }
.apl-nav--primary.is-open .apl-menu a {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 14px 12px; font-size: 16px; font-weight: 600; border-radius: 12px;
}
.apl-nav--primary.is-open .apl-menu a:active { background: var(--apl-bg-2); }
.apl-nav--primary.is-open .apl-menu .sub-menu {
position: static; display: block; min-width: 0; margin: 2px 0 6px;
padding: 0 0 0 8px; border: 0; border-left: 2px solid var(--apl-line);
border-radius: 0; box-shadow: none;
}
.apl-nav--primary.is-open .apl-menu .sub-menu a { font-size: 15px; font-weight: 500; padding: 11px 12px; }
/* Keep the toggle tappable above the drawer, and morph it into an ✕. */
.apl-nav-toggle { position: relative; z-index: 420; }
.apl-menu-open .apl-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.apl-menu-open .apl-nav-toggle span:nth-child(2) { opacity: 0; }
.apl-menu-open .apl-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
.apl-nav-toggle span { transition: transform .2s ease, opacity .15s ease; }
@keyframes aplSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes aplFade { from { opacity: 0; } to { opacity: 1; } }
/* Drawer account block — hidden on desktop, shown only inside the open drawer */
.apl-drawer-extra { display: none; }
@media (max-width: 860px) {
.apl-nav--primary.is-open .apl-drawer-extra { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--apl-line); }
.apl-drawer__user { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--apl-bg-2); }
.apl-drawer__user:active { background: #eef2ff; }
.apl-drawer__avatar { grid-row: 1 / 3; border-radius: 999px; width: 46px; height: 46px; }
.apl-drawer__uname { font-weight: 800; font-size: 16px; color: var(--apl-ink); align-self: end; }
.apl-drawer__ulink { font-size: 13px; font-weight: 600; color: var(--apl-primary); align-self: start; }
.apl-drawer__links { display: flex; flex-direction: column; gap: 2px; }
.apl-drawer__links a, .apl-drawer__logout {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 13px 12px; border-radius: 12px; font-size: 15.5px; font-weight: 600; color: var(--apl-ink);
}
.apl-drawer__links a:active { background: var(--apl-bg-2); }
.apl-drawer__links .apl-i, .apl-drawer__logout .apl-i { color: var(--apl-muted); flex: 0 0 auto; }
.apl-drawer__badge { margin-left: auto; background: var(--apl-primary); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.apl-drawer__logout { margin-top: 6px; color: #dc2626; }
.apl-drawer__logout .apl-i { color: #dc2626; }
.apl-drawer__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 12px; padding: 13px; border-radius: 12px; font-weight: 700; font-size: 15px; border: 1px solid var(--apl-line); color: var(--apl-ink); }
.apl-drawer__cta--primary { background: var(--apl-primary); border-color: var(--apl-primary); color: #fff; }
.apl-drawer__cta--primary .apl-i { color: #fff; }
}
/* Mobile listing detail: price near the top + sticky contact bar (OLX pattern) */
.apl-single__price-m { display: none; }
.apl-actionbar { display: none; }
@media (max-width: 860px) {
.apl-single__price-m { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--apl-ink); margin: 2px 0 6px; }
.apl-single__head { display: flex; flex-direction: column; }
/* The template used to render the price first and this rule kept it first
when the head became a flex column. Now that the markup leads with the
title, an order override would silently undo that — including for the
reading order a screen reader announces, which follows the DOM while the
eye follows the visual order. Both should agree. */
.apl-single__head .apl-single__price-m { order: 0; }
body.single-addipress_listing .apl-bottomnav { display: none; }
body.single-addipress_listing .apl-single { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.apl-actionbar {
display: flex; align-items: center; gap: 12px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 510;
background: var(--apl-card,#fff); /* solid — avoids backdrop-filter repaint jank on scroll */
border-top: 1px solid var(--apl-line); box-shadow: 0 -6px 24px rgba(15,23,42,.10);
padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
.apl-actionbar__price { font-size: 19px; font-weight: 800; color: var(--apl-ink); white-space: nowrap; }
.apl-actionbar__btns { margin-left: auto; display: flex; gap: 8px; }
.apl-actionbar__btns .apl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.apl-actionbar__btns .apl-btn .apl-i { color: currentColor; }
.apl-actionbar__call { padding: 12px 14px; }
}
/* ============================================================
HARDENING / COMPATIBILITY (v0.2.0)
Resilience against ClassiPress plugin CSS (dark-switcher, trust-core, etc.)
and a tidy header when a large/foreign menu is assigned.
============================================================ */
/* --- Logo: always a sensible size (fixes 0x0 render / huge PNG) --- */
.apl-header__brand img,
.apl-header .custom-logo {
height: 40px !important;
width: auto !important;
max-width: 180px;
object-fit: contain;
display: block;
}
.apl-header__brand { flex: 0 0 auto; display: flex; align-items: center; }
/* --- Menu: do not overflow the screen; sub-menu as a dropdown --- */
.apl-nav--primary { min-width: 0; overflow: hidden; }
.apl-menu { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.apl-menu > li { position: relative; }
.apl-menu .sub-menu {
position: absolute; top: 100%; left: 0; z-index: 200;
display: none; min-width: 200px; margin: 0; padding: 8px;
list-style: none; background: var(--apl-card,#fff); border: 1px solid var(--apl-line);
border-radius: 12px; box-shadow: var(--apl-shadow-lg);
}
.apl-menu li:hover > .sub-menu,
.apl-menu li:focus-within > .sub-menu { display: block; }
.apl-menu .sub-menu a { display: block; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.apl-menu .sub-menu a:hover { background: var(--apl-bg-2); }
.apl-menu a { white-space: nowrap; }
/* --- Pola formularzy w naszych komponentach: wygraj z dark.css wtyczek ---
The .apl-body prefix raises specificity above .cp-dark input[type=text]
from classipress-dark-switcher (which uses !important and loads later). --- */
.apl-body .apl-herosearch input,
.apl-body .apl-herosearch input[type="text"],
.apl-body .apl-herosearch input[type="search"] {
background: transparent !important;
color: var(--apl-ink) !important;
border: none !important;
box-shadow: none !important;
}
.apl-body .apl-herosearch input::placeholder { color: var(--apl-muted) !important; }
.apl-body .apl-filters .apl-input,
.apl-body .apl-filters input,
.apl-body .apl-filters select,
.apl-body .apl-form input,
.apl-body .apl-form select,
.apl-body .apl-form textarea,
.apl-body .apl-searchform .apl-input,
.apl-body .apl-input {
background: var(--apl-card,#fff) !important;
color: var(--apl-ink) !important;
border: 1px solid var(--apl-line) !important;
}
/* --- Karta: zabezpiecz kolory tekstu przed ciemnymi motywami wtyczek --- */
.apl-card,
.apl-card__body { background: var(--apl-card,#fff) !important; }
.apl-card__title,
.apl-card__price { color: var(--apl-ink) !important; }
.apl-card__loc,
.apl-card__date { color: var(--apl-muted) !important; }
/* --- Hide any empty/bare menu items (tokens with no text) --- */
.apl-menu > li:empty { display: none; }
/* ---------- Homepage: popular categories ---------- */
.apl-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.apl-cat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--apl-card,#fff); border: 1px solid var(--apl-line); border-radius: 16px; font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.apl-cat:hover { border-color: var(--apl-primary); transform: translateY(-2px); box-shadow: var(--apl-shadow); }
.apl-cat__name { flex: 1 1 auto; min-width: 0; color: var(--apl-ink); font-size: 15px; line-height: 1.25; }
.apl-cat__count { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--apl-muted); background: var(--apl-bg-2); padding: 3px 9px; border-radius: 999px; }
@media (max-width: 560px) { .apl-cats { grid-template-columns: 1fr 1fr; gap: 10px; } .apl-cat { padding: 12px; gap: 10px; } }
/* Subcategory chips (category archive) */
.apl-subcats { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 18px; }
.apl-subcat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--apl-line); border-radius: 999px; background: var(--apl-card,#fff); font-size: 14px; font-weight: 600; color: var(--apl-ink-2); white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.apl-subcat:hover { border-color: var(--apl-primary); color: var(--apl-primary); }
.apl-subcat.is-active { background: var(--apl-primary); border-color: var(--apl-primary); color: #fff; }
.apl-subcat__n { font-size: 12px; font-weight: 700; opacity: .7; }
.apl-subcat--all { color: var(--apl-primary); }
@media (max-width: 640px) {
.apl-subcats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.apl-subcats::-webkit-scrollbar { display: none; }
.apl-subcat { flex: 0 0 auto; }
}
/* ---------- Homepage: CTA banner ---------- */
.apl-cta { background: var(--apl-ink); color: #fff; margin: 24px 0; }
.apl-cta__inner { text-align: center; padding: 48px 16px; }
.apl-cta__title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: #fff; }
.apl-cta__text { opacity: .85; margin: 0 0 20px; }
/* ---------- Hero style variants ---------- */
.apl-hero--solid .apl-hero__subtitle, .apl-hero--image .apl-hero__subtitle { opacity: .95; }
/* Seller links in the pricebox (Phase 21 — seller storefront) */
.apl-pricebox__seller-name{color:inherit;text-decoration:none;font-weight:700}
.apl-pricebox__seller-name:hover{color:var(--apl-primary,#4f46e5)}
.apl-pricebox__seller-avatar-link{display:inline-block;line-height:0}
.apl-pricebox__seller-profile{display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--apl-primary,#4f46e5);text-decoration:none}
.apl-pricebox__seller-profile:hover{text-decoration:underline}
/* ===== Sidebar widgets (Phase 24 — modern widget styling) ===== */
.apl-widget{background:var(--apl-card,#fff);border:1px solid var(--apl-line,#e2e8f0);border-radius:16px;padding:18px;margin-bottom:18px}
.apl-widget__title{font-size:16px;font-weight:800;margin:0 0 12px}
.apl-widget ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.apl-widget li{font-size:14px;line-height:1.4}
.apl-widget a{color:inherit;text-decoration:none}
.apl-widget a:hover{color:var(--apl-primary,#4f46e5)}
.apl-widget .children{margin-top:9px;padding-left:14px;border-left:2px solid var(--apl-line,#e2e8f0)}
.apl-widget select,.apl-widget input[type=search],.apl-widget input[type=text],.apl-widget input[type=email]{width:100%;border:1px solid var(--apl-line,#e2e8f0);border-radius:10px;padding:10px 12px;font:inherit;background:var(--apl-card,#fff)}
.apl-widget img{max-width:100%;height:auto;border-radius:10px}
.apl-widget p{margin:0 0 10px;font-size:14px;color:var(--apl-ink-2,#334155)}
/* Block-based widgets */
.apl-widget .wp-block-search__inside-wrapper{display:flex;gap:6px}
.apl-widget .wp-block-search__button{background:var(--apl-primary,#4f46e5);color:#fff;border:0;border-radius:10px;padding:0 16px;cursor:pointer;font-weight:700}
.apl-widget .wp-block-search__button:hover{filter:brightness(1.07)}
.apl-widget .wp-block-latest-posts,.apl-widget .wp-block-categories,.apl-widget .wp-block-archives,.apl-widget .wp-block-page-list,.apl-widget .wp-block-latest-comments{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.apl-widget .wp-block-latest-posts__post-date{display:block;font-size:12px;color:var(--apl-muted,#64748b)}
.apl-widget .tagcloud a,.apl-widget .wp-block-tag-cloud a{display:inline-block;background:var(--apl-primary-050,#eef2ff);color:var(--apl-primary-aa,#4338ca);padding:4px 11px;border-radius:999px;font-size:12px!important;margin:2px 3px 2px 0;text-decoration:none}
.apl-widget .tagcloud a:hover,.apl-widget .wp-block-tag-cloud a:hover{background:color-mix(in srgb, var(--apl-primary) 16%, #fff)}
.apl-widget .wp-block-calendar table{width:100%;font-size:13px}
.apl-widget .wp-block-calendar caption{font-weight:700;padding-bottom:6px}
/* Category icons on the homepage (Phase 25) */
.apl-cat__icon{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--apl-primary-050);display:inline-flex;align-items:center;justify-content:center}
/* ============================================================
Gallery pro — thumbnail strip, counter, lightbox (Phase 26)
============================================================ */
.apl-gallery__viewport{position:relative;border-radius:var(--apl-radius);overflow:hidden;background:var(--apl-bg-2)}
.apl-gallery__counter{position:absolute;left:12px;bottom:12px;background:rgba(15,23,42,.72);color:#fff;font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;z-index:2}
.apl-gallery__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.apl-gallery__thumbs::-webkit-scrollbar{height:6px}
.apl-gallery__thumbs::-webkit-scrollbar-thumb{background:var(--apl-line,#e2e8f0);border-radius:3px}
.apl-gallery__thumb{flex:0 0 auto;width:74px;height:56px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;cursor:pointer;opacity:.7;transition:.15s}
.apl-gallery__thumb img{width:100%;height:100%;object-fit:cover}
.apl-gallery__thumb.is-active{opacity:1;border-color:var(--apl-primary)}
.apl-gallery__thumb:hover{opacity:1}
/* Lightbox */
.apl-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(6,10,20,.94)}
.apl-lightbox[hidden]{display:none}
.apl-lightbox__stage{margin:0;max-width:92vw;max-height:86vh;display:flex;align-items:center;justify-content:center}
.apl-lightbox__stage img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px}
.apl-lightbox__close{position:absolute;top:16px;right:18px;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
.apl-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.apl-lightbox__prev{left:16px}
.apl-lightbox__next{right:16px}
.apl-lightbox__nav:hover,.apl-lightbox__close:hover{background:rgba(255,255,255,.28)}
.apl-lightbox__count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em}
@media(max-width:600px){.apl-lightbox__nav{width:44px;height:44px;font-size:24px}}
/* Photo-count badge on cards */
.apl-card__photos{position:absolute;right:10px;bottom:10px;background:rgba(15,23,42,.72);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;z-index:2}
/* [0.53.8] Attribution for card images sourced live from the Google Photos
proxy (no local attachment) — required by the API's attribution
guidelines, same rule the single-listing gallery already follows. */
.apl-card__gattr{position:absolute;left:10px;bottom:10px;background:rgba(15,23,42,.72);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;z-index:2}
/* Owner-config card fields + ad zones (Phase 27) */
.apl-card__cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--apl-primary);margin-bottom:2px}
.apl-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.apl-card__seller{font-size:12px;color:var(--apl-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.apl-adzone{margin:22px auto;text-align:center}
.apl-adzone img{display:inline-block}
/* Demo "house ad" banners (default content of the ad zones) */
.apl-housead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; text-align: left; padding: 16px 20px; border-radius: 16px; background: linear-gradient(120deg, var(--apl-primary-050), #fff); border: 1px solid var(--apl-line); color: var(--apl-ink); transition: box-shadow .16s ease, transform .16s ease; }
.apl-housead:hover { box-shadow: var(--apl-shadow-lg); transform: translateY(-1px); }
.apl-housead__badge { flex: 0 0 auto; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; background: var(--apl-primary); color: #fff; }
.apl-housead__text { flex: 1 1 300px; font-size: 15px; line-height: 1.45; }
.apl-housead__text strong { font-weight: 800; }
.apl-housead__go { flex: 0 0 auto; font-weight: 800; white-space: nowrap; color: var(--apl-primary); }
.apl-housead--accent { border-color: transparent; color: #fff; }
.apl-housead--accent .apl-housead__go { color: #fff; }
.apl-housead--accent .apl-housead__badge { background: rgba(255,255,255,.25); color: #fff; }
.apl-housead--soft { background: var(--apl-bg-2); }
@media (max-width: 600px) { .apl-housead { padding: 14px 16px; gap: 10px; } .apl-housead__go { width: 100%; } }
/* ============================================================
Compare tray (Phase 29)
============================================================ */
.apl-card{position:relative}
.apl-card__compare{position:absolute;left:10px;bottom:10px;top:auto;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#0f172a;font-size:16px;font-weight:800;cursor:pointer;box-shadow:var(--apl-shadow);line-height:1}
.apl-card__compare:hover{background:var(--apl-card,#fff)}
.apl-card__compare.is-on{background:var(--apl-primary);color:#fff}
.apl-compare-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:9990;display:flex;align-items:center;gap:12px;background:#0f172a;color:#fff;padding:10px 14px;border-radius:999px;box-shadow:0 12px 34px rgba(0,0,0,.3)}
.apl-compare-bar[hidden]{display:none}
.apl-compare-bar__n{font-weight:700;font-size:14px}
.apl-compare-bar__open{background:var(--apl-primary);color:#fff;border:0;border-radius:999px;padding:8px 18px;font-weight:800;cursor:pointer}
.apl-compare-bar__clear{background:none;border:0;color:#94a3b8;cursor:pointer;font-size:14px}
@media(max-width:860px){.apl-compare-bar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.apl-compare-modal{position:fixed;inset:0;z-index:100000;background:rgba(6,10,20,.7);display:flex;align-items:center;justify-content:center;padding:16px}
.apl-compare-modal__box{background:var(--apl-card,#fff);border-radius:16px;max-width:900px;width:100%;max-height:86vh;overflow:auto;padding:22px;position:relative}
.apl-compare-modal__close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:18px;cursor:pointer;color:#64748b}
.apl-compare-table{width:100%;border-collapse:collapse}
.apl-compare-table th{text-align:left;font-size:13px;color:#64748b;padding:10px;white-space:nowrap;border-top:1px solid #eef2f7;width:110px}
.apl-compare-table td{padding:10px;border-top:1px solid #eef2f7;vertical-align:top;text-align:center}
.apl-compare-head td{border-top:0}
.apl-compare-head img{width:100%;max-width:150px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin:0 auto 8px}
.apl-compare-title{font-weight:700;color:#0f172a;font-size:14px}
.apl-compare-x{background:#fee2e2;color:#b91c1c;border:0;border-radius:999px;width:24px;height:24px;cursor:pointer;float:right}
/* Promotions — highlighted card + urgent badge (Phase 30) */
.apl-card--highlight{border-color:var(--apl-primary);box-shadow:0 0 0 2px var(--apl-primary) inset,var(--apl-shadow)}
.apl-badge--urgent{background:#dc2626;color:#fff}
/* ============================================================
Header account cluster (giant-style: icons + badges + dropdown)
============================================================ */
.apl-acct{display:flex;align-items:center;gap:6px}
.apl-acct__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;font-size:18px;color:var(--apl-ink-2);text-decoration:none;transition:.15s}
.apl-acct__icon:hover{background:var(--apl-bg-2)}
.apl-acct__badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;background:#dc2626;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;border-radius:999px;border:2px solid #fff}
.apl-acct__signin{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--apl-line);border-radius:999px;font-weight:700;font-size:14px;color:var(--apl-ink)}
.apl-acct__signin:hover{background:var(--apl-bg-2)}
.apl-acct__menu{position:relative}
.apl-acct__toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:4px 8px 4px 4px;border-radius:999px}
.apl-acct__toggle:hover{background:var(--apl-bg-2)}
.apl-acct__avatar{border-radius:999px;width:32px;height:32px}
.apl-acct__name{font-weight:700;font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apl-acct__caret{color:var(--apl-muted);font-size:12px}
.apl-acct__dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--apl-card,#fff);border:1px solid var(--apl-line);border-radius:14px;box-shadow:var(--apl-shadow-lg);padding:8px;z-index:200}
.apl-acct__dropdown[hidden]{display:none}
.apl-acct__link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--apl-ink-2)}
.apl-acct__link:hover{background:var(--apl-bg-2);color:var(--apl-ink)}
.apl-acct__logout{border-top:1px solid var(--apl-line);margin-top:6px;padding-top:12px;color:#b91c1c}
@media(max-width:860px){
.apl-acct__name,.apl-acct__caret,.apl-acct__signin-lbl{display:none}
.apl-acct__signin{padding:8px;border-radius:999px}
.apl-header__add .apl-btn__label{display:none}
}
/* ============================================================
Location selector + Categories mega-menu (header, 2026 UX)
============================================================ */
.apl-loc{position:relative;flex:0 0 auto}
.apl-loc__chip{display:inline-flex;align-items:center;gap:7px;background:var(--apl-bg-2);border:1px solid var(--apl-line);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:14px;color:var(--apl-ink);max-width:200px}
.apl-loc__chip:hover{border-color:var(--apl-primary)}
.apl-loc__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apl-loc__caret{color:var(--apl-muted);font-size:12px}
.apl-loc__panel{position:absolute;left:0;top:calc(100% + 8px);width:300px;max-width:88vw;background:var(--apl-card,#fff);border:1px solid var(--apl-line);border-radius:14px;box-shadow:var(--apl-shadow-lg);padding:14px;z-index:200;display:flex;flex-direction:column;gap:10px}
.apl-loc__panel[hidden]{display:none}
.apl-loc__geo{display:flex;align-items:center;gap:8px;justify-content:center;background:var(--apl-primary);color:#fff;border:0;border-radius:10px;padding:11px;font-weight:700;cursor:pointer}
.apl-loc__input{width:100%;padding:11px 13px;border:1px solid var(--apl-line);border-radius:10px;font-size:15px}
.apl-loc__all{font-size:13px;font-weight:600;color:var(--apl-primary);text-align:center}
.apl-loc__status{font-size:12px;color:var(--apl-muted);min-height:14px;text-align:center}
.apl-mega{position:relative;display:inline-block}
.apl-mega__trigger{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font-weight:600;font-size:15px;color:var(--apl-ink-2);padding:8px 12px;border-radius:8px}
.apl-mega__trigger:hover{background:var(--apl-bg-2);color:var(--apl-ink)}
.apl-mega__panel{position:absolute;left:0;top:calc(100% + 10px);width:640px;max-width:92vw;background:var(--apl-card,#fff);border:1px solid var(--apl-line);border-radius:16px;box-shadow:var(--apl-shadow-lg);padding:16px;z-index:200}
.apl-mega__panel[hidden]{display:none}
.apl-mega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.apl-mega__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--apl-ink-2);font-weight:600;font-size:14px}
.apl-mega__item:hover{background:var(--apl-bg-2);color:var(--apl-ink)}
.apl-mega__ico{font-size:18px}
.apl-mega__count{margin-left:auto;font-size:12px;color:var(--apl-muted);background:var(--apl-bg-2);border-radius:999px;padding:1px 8px}
@media(max-width:960px){.apl-loc,.apl-mega{display:none}}
/* ============================================================
Header polish — one consistent line-icon system, aligned (v0.19)
============================================================ */
.apl-i{display:block;flex:0 0 auto;color:inherit}
.apl-header__inner{gap:14px}
.apl-header__brand{display:flex;align-items:center;flex:0 0 auto}
.apl-header__actions{gap:4px}
/* Location chip */
.apl-loc__chip{height:40px;gap:6px;padding:0 12px}
.apl-loc__pin,.apl-loc__caret{display:flex;align-items:center;color:var(--apl-muted)}
.apl-loc__chip:hover .apl-loc__pin{color:var(--apl-primary)}
/* Account quick icons — uniform buttons */
.apl-acct{gap:2px}
.apl-acct__icon{width:42px;height:42px;border-radius:12px;color:var(--apl-muted);display:inline-flex;align-items:center;justify-content:center;position:relative}
.apl-acct__icon:hover{background:var(--apl-bg-2);color:var(--apl-ink)}
.apl-acct__icon .apl-i{width:22px;height:22px}
.apl-acct__badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;line-height:16px;padding:0 4px;font-size:10px;font-weight:800;background:#ef4444;color:#fff;border:2px solid #fff;border-radius:999px;text-align:center}
/* Avatar toggle */
.apl-acct__toggle{height:42px;gap:8px;padding:0 8px 0 4px;border-radius:999px;display:inline-flex;align-items:center}
.apl-acct__avatar{width:30px;height:30px;border-radius:999px;display:block}
.apl-acct__name{font-weight:700;font-size:14px;color:var(--apl-ink)}
.apl-acct__caret{display:flex;align-items:center;color:var(--apl-muted)}
/* Sign-in (logged out) */
.apl-acct__signin{height:40px;gap:8px;color:var(--apl-ink)}
.apl-acct__signin .apl-i{color:var(--apl-ink-2)}
/* Dropdown links with uniform icons */
.apl-acct__dropdown .apl-acct__link{display:flex;align-items:center;gap:12px}
.apl-acct__link .apl-i{width:18px;height:18px;color:var(--apl-muted)}
.apl-acct__link:hover .apl-i{color:var(--apl-primary)}
.apl-acct__logout .apl-i{color:#b91c1c}
/* ============================================================
Header micro-details (v0.20) — separators, active nav, focus, scroll shadow
============================================================ */
.apl-header{transition:box-shadow .2s ease, background .2s ease}
.apl-header.is-scrolled{box-shadow:0 4px 20px rgba(15,23,42,.07);background:rgba(255,255,255,.97)}
/* Subtle divider between quick icons and the avatar menu (inline so nothing drops) */
.apl-acct{align-items:center}
.apl-acct__menu{position:relative;display:flex;align-items:center}
.apl-acct__menu::before{content:"";flex:0 0 auto;width:1px;height:24px;background:var(--apl-line);margin:0 8px 0 4px}
/* Active item in the primary menu */
.apl-menu .current-menu-item>a,
.apl-menu .current_page_item>a,
.apl-menu .current-menu-parent>a{background:var(--apl-primary-050);color:var(--apl-primary)}
/* Smooth, consistent interactions */
.apl-acct__icon,.apl-acct__toggle,.apl-loc__chip,.apl-menu a{transition:background .15s ease,color .15s ease,transform .1s ease}
.apl-acct__icon:active,.apl-acct__toggle:active,.apl-loc__chip:active{transform:scale(.96)}
/* Avatar ring */
.apl-acct__avatar{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--apl-line)}
.apl-acct__toggle:hover .apl-acct__avatar{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--apl-primary)}
/* Keyboard accessibility — clear focus rings */
.apl-acct__icon:focus-visible,.apl-acct__toggle:focus-visible,.apl-loc__chip:focus-visible,
.apl-acct__signin:focus-visible,.apl-header__add:focus-visible,.apl-acct__link:focus-visible{
outline:2px solid var(--apl-primary);outline-offset:2px;border-radius:12px
}
.apl-acct__dropdown{animation:aplFade .14s ease}
@keyframes aplFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* ============================================================
SVG icon system — global sizing/alignment (replaces all emoji)
============================================================ */
.apl-i{display:inline-block;vertical-align:middle;flex:0 0 auto;color:inherit}
/* Category icons (homepage grid + directory) — uniform, on-brand */
.apl-cat__icon,.apl-dir__icon{color:var(--apl-primary);display:inline-flex;align-items:center;justify-content:center}
.apl-cat__icon .apl-i{width:24px;height:24px}
.apl-dir__icon .apl-i{width:30px;height:30px}
/* Inline icon+label buttons/titles — nudge baseline */
.apl-promote__title .apl-i,.apl-qa__title .apl-i,.apl-offer__open .apl-i,
.apl-savesearch__btn .apl-i,.apl-loc__geo .apl-i,.apl-follow__btn .apl-i{vertical-align:-.22em}
/* Promotions */
.apl-promo-card__ico{color:var(--apl-primary)}
.apl-promo-card.is-active .apl-promo-card__ico{color:#16a34a}
/* Star ratings — filled gold when active */
.apl-star .apl-i,.apl-seller__stars .apl-i{width:16px;height:16px}
.apl-seller__stars{display:inline-flex;gap:1px}
.apl-star{color:#cbd5e1}
.apl-star.on,.apl-star.is-on,.apl-seller__stars .is-on{color:#f59e0b}
.apl-star.on .apl-i,.apl-star.is-on .apl-i,.apl-seller__stars .is-on .apl-i{fill:#f59e0b;stroke:#f59e0b}
/* Small card pills */
.apl-scard__verified .apl-i,.apl-scard__play .apl-i{width:13px;height:13px}
.apl-card__loc-ico .apl-i{width:14px;height:14px;color:var(--apl-muted)}
.apl-card__photos .apl-i,.apl-gallery__counter .apl-i{color:#fff;vertical-align:-.15em}
/* ============================================================
ACCESSIBILITY — WCAG 2.2 AA
Keyboard users must always be able to see where they are, and
motion must never be forced on people who asked for less of it.
============================================================ */
/* 2.4.7 Focus Visible + 2.4.11 Focus Not Obscured.
One consistent, high-contrast focus ring on every interactive
element. :focus-visible keeps it off mouse clicks, so the visual
design is untouched for pointer users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--apl-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* Controls sitting on a coloured/dark surface need a light ring to
stay visible (3:1 contrast against the adjacent colour). */
.apl-hero :where(a, button, input):focus-visible,
.apl-header :where(a, button, input):focus-visible,
.apl-cta :where(a, button):focus-visible,
.apl-card__media :where(a, button):focus-visible {
outline-color: #fff;
box-shadow: 0 0 0 5px rgba(15, 23, 42, .45);
}
/* Never strip focus without replacing it — the search field previously
had outline:none, which hid the caret position from keyboard users. */
.apl-herosearch:focus-within {
outline: 3px solid var(--apl-primary);
outline-offset: 2px;
}
/* Skip link: make it a real, visible target when focused. */
.apl-skip-link:focus-visible { outline: 3px solid var(--apl-primary); outline-offset: 2px; }
/* 2.5.8 Target Size (Minimum) — 24×24 CSS px for every control.
Icon-only buttons were the ones at risk. */
.apl-bottomnav__item,
.apl-acct__icon,
.apl-acct__toggle,
.apl-card__compare,
.apl-card__fav,
.apl-filters__close,
.apl-gallery__nav {
min-width: 44px;
min-height: 44px;
}
/* 1.4.11 Non-text Contrast — borders on inputs and buttons must reach
3:1 against their background. */
.apl-input,
select.apl-input,
textarea.apl-input { border-color: #94a3b8; }
.apl-input::placeholder { color: #64748b; opacity: 1; }
/* 1.4.3 Contrast (Minimum) — muted text on white sat at ~4.4:1.
Nudged to a token that clears 4.5:1 for body-size text. */
:root { --apl-muted: #5b6779; }
/* 2.3.3 Animation from Interactions + honouring the OS setting. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.apl-archive__sidebar { transition: none !important; }
}
/* 1.4.12 Text Spacing — nothing may clip when users override spacing. */
.apl-card__title,
.apl-dash__title,
.apl-single__title { overflow-wrap: break-word; }
/* Forced-colours (Windows High Contrast): keep borders that would
otherwise be painted away with the background. */
@media (forced-colors: active) {
.apl-btn,
.apl-card,
.apl-input { border: 1px solid currentColor; }
:where(a, button):focus-visible { outline: 3px solid Highlight; }
}
/* ==========================================================================
Mobile listing grid — two columns, like every marketplace people already use
--------------------------------------------------------------------------
.apl-grid asks for columns of at least 240px. A 390px phone has about 358px
of usable width, so two of those never fit and every grid silently collapsed
to one card per row. The homepage became 16,263px tall — nineteen screens of
scrolling, most of it one enormous card at a time — and a buyer comparing
prices could only ever see a single listing at once.
Two columns is not a stylistic preference here: it is what OLX, Vinted and
Allegro all do, because scanning a grid is how people shop. It also halves
every listing section on the page.
========================================================================== */
@media (max-width: 600px) {
.apl-grid,
.apl-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Type has to come down with the card, or two columns just clip. */
.apl-card__body { padding: 10px; }
.apl-card__price { font-size: 16px; }
.apl-card__title { font-size: 13.5px; margin: 3px 0 6px; }
.apl-card__loc,
.apl-card__date { font-size: 11.5px; }
.apl-card__foot { margin-top: 8px; padding-top: 8px; }
.apl-badge { font-size: 10px; padding: 3px 7px; }
.apl-card__badges,
.apl-card__actions { top: 7px; }
.apl-card__badges { left: 7px; }
.apl-card__actions { right: 7px; }
}
/* Very narrow phones (320–360px) keep two columns but need tighter gutters. */
@media (max-width: 360px) {
.apl-grid,
.apl-skel-grid { gap: 8px; }
.apl-card__body { padding: 8px; }
.apl-card__price { font-size: 15px; }
}
/* --------------------------------------------------------------------------
Card density at two columns
--------------------------------------------------------------------------
A card is 166px wide once the grid splits in two, and the tallest ones came
out at 357px — more than twice their width — because the body still carried
six stacked rows written for a 280px desktop card: price, category eyebrow,
title, location, PRO badge, then a bordered footer with date and seller.
Nothing is removed here. The seller's PRO badge is a paid perk and the
category still earns its place; they are simply set on one line with the
things they belong beside, which is what the extra height was going on.
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
/*
* One right-hand rail, two opposite corners — overlap made impossible.
*
* The first attempt clustered both controls along the top edge by pushing
* Favourite 43px inward to clear Compare. That assumed Compare was 30px
* wide; it actually renders at 44px, so the two buttons overlapped by 8px
* on every card. Positioning one control from a guess about another's
* width is fragile by construction — an icon font, a longer label or a
* different zoom level breaks it again.
*
* Pinning them to opposite ends of the same edge removes the arithmetic
* altogether: they cannot collide no matter what either one measures, and
* they still read as a pair because they share a rail.
*/
.apl-card__actions { top: 7px; right: 7px; }
.apl-card__compare {
left: auto; right: 7px; top: auto; bottom: 7px;
box-sizing: border-box; width: 34px; height: 34px; font-size: 15px;
}
.apl-card__cat { font-size: 10px; letter-spacing: .02em; margin-bottom: 1px; }
.apl-card__title { -webkit-line-clamp: 2; }
/* Location, PRO and the date belong on the same baseline, not on three. */
.apl-card__loc { margin-top: 2px; }
.apl-pro-badge { font-size: 9.5px; padding: 2px 5px; vertical-align: middle; }
/* The divider bought a border plus 20px of padding for two small figures. */
.apl-card__foot { margin-top: 6px; padding-top: 6px; border-top: 0; }
.apl-card__seller { max-width: 46%; font-size: 11px; }
}
/* --------------------------------------------------------------------------
"Recently viewed" as a swipeable row
--------------------------------------------------------------------------
Six things you already looked at do not deserve 916px of the first screen a
buyer sees — they are a memory aid, not the catalogue. Every marketplace
makes this row swipe sideways for the same reason: it keeps recall cheap and
leaves the fold for listings the buyer has not seen yet.
Scoped to .apl-recent__grid only. The main listing grids keep their two
columns, because those ARE the catalogue and are meant to be scanned.
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
.apl-recent__grid {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Bleed to the screen edges so the row reads as scrollable. */
margin-inline: -16px;
padding: 2px 16px 8px;
scrollbar-width: none;
}
.apl-recent__grid::-webkit-scrollbar { display: none; }
.apl-recent__grid > * {
flex: 0 0 150px;
scroll-snap-align: start;
}
}
/* --------------------------------------------------------------------------
PRO badge shares the location line
--------------------------------------------------------------------------
Measured, not guessed: on a 166px card the badge was taking a whole 19px row
of its own for a chip five characters wide, directly above a footer row that
was half empty. Both are block-level siblings, so shrinking the badge — which
is all the previous pass actually did — changed nothing about the layout.
Making the two inline lets them settle on the same baseline when there is
room, and wrap by themselves when the location is long. The badge keeps its
colour and prominence; it just stops buying a row it does not fill.
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
.apl-card__loc { display: inline-flex; vertical-align: middle; }
.apl-pro-badge { display: inline-flex; vertical-align: middle; margin-left: 6px; }
}
/* --------------------------------------------------------------------------
Listing page on a phone: the photo is the product
--------------------------------------------------------------------------
Measured on a 390px screen: the gallery came out 193px tall and inset inside
the page gutters, while the title above it ran at 28px — larger than the
price. So the first screen of the single most important page gave the most
room to text and the least to the one thing that actually sells the item,
and the number the buyer is deciding on came second to a headline they can
already read in the tab.
Full-bleed and 4:3 is what OLX, Vinted and Allegro all do here, for the same
reason a shop window is glass: on a phone the photograph has to carry the
sale. The price is promoted above the title to match how the decision is
actually made. Both are scoped to phones — desktop keeps its rounded, inset
gallery beside the sticky price box.
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
/*
* Full-bleed measured from the gutter, never from the viewport.
*
* The first version used the usual trick: width:100vw with
* margin-inline: calc(50% - 50vw). It is wrong on any page tall enough to
* scroll, because vw counts the scrollbar and the layout does not. Measured
* here: viewport 375px, gallery 390px, left edge at -8px — fifteen pixels
* too wide and hanging off both sides unevenly, so the photo was cropped
* and off-centre. The overflow guard hid the sideways scroll, which only
* made it harder to spot.
*
* The container's own 16px gutter is the honest reference. Cancelling it
* with a negative margin reaches the screen edges exactly, scrollbar or no
* scrollbar, at any zoom level.
*/
.apl-gallery {
margin-inline: -16px;
width: auto;
border-radius: 0;
}
.apl-gallery__viewport { border-radius: 0; }
/* [0.53.10] Same LiteSpeed-inline-style override as the desktop rule above. */
.apl-gallery__img { aspect-ratio: 4 / 3 !important; }
/* Thumbnails stay inside the gutter — they are navigation, not the subject. */
.apl-gallery__thumbs { padding-inline: 16px; }
/* Price first and loudest; the title supports it. */
.apl-single__title { font-size: 21px; margin: 14px 0 4px; line-height: 1.25; }
.apl-single__price-m { font-size: 28px; margin: 12px 0 2px; }
}
/* --------------------------------------------------------------------------
"Browse by category" — stop the grid pushing the page sideways
--------------------------------------------------------------------------
Measured on a 375px viewport: .apl-cats resolved to columns of 217px and
215px inside a 343px container, so the document became 458px wide and the
whole homepage could be dragged sideways — the single worst thing a phone
layout can do, because it makes every vertical swipe feel broken.
The existing mobile rule already asked for "1fr 1fr". The trap is that 1fr
means minmax(auto, 1fr), and auto refuses to go below the tile's min-content
width — an icon, a long category name and a count badge on one line. The
track therefore ignored the container. minmax(0, 1fr) removes that floor,
and the name is allowed to wrap so it has a smaller minimum to begin with.
-------------------------------------------------------------------------- */
@media (max-width: 560px) {
.apl-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apl-cat { min-width: 0; gap: 8px; padding: 11px 12px; }
/*
* Make room instead of breaking words.
*
* A first attempt used overflow-wrap:anywhere, which stopped the overflow
* but sliced the labels mid-word — "Electr / onics", "Garag / es". That is
* worse than the bug it fixed. The real problem is that a 167px tile spends
* roughly a hundred pixels on a 34px icon, a pill-shaped counter and the
* padding around them, leaving about 69px for a word like "Motorcycles"
* that needs 85px. So the decoration gives the space back: a smaller icon
* and a plain number rather than a badge. Names then wrap at spaces, the
* way words are meant to.
*/
.apl-cat {
/* Stack instead of competing for one line.
Side by side, the icon and the counter left about 69px for the name,
and a single word like "Motorcycles" needs 85px. Because the name box
is allowed to shrink, the word spilled out of it and ran underneath
the number — "Motorcycles32". Giving the name the tile's full width
removes the competition entirely: nothing has to be truncated, broken
mid-word, or shrunk until it stops being readable. */
position: relative;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 11px 12px;
}
.apl-cat__ico, .apl-cat > .apl-i, .apl-cat svg { flex: 0 0 auto; width: 26px; height: 26px; }
.apl-cat__name {
flex: 0 1 auto; width: 100%; font-size: 13px; line-height: 1.3;
overflow-wrap: normal; word-break: normal; hyphens: none;
}
/* The count is a footnote, so it sits out of the way in the corner rather
than bidding for space on the same line as the label. */
.apl-cat__count {
position: absolute; top: 10px; right: 11px;
background: none; padding: 0; font-size: 11.5px; white-space: nowrap;
}
}
/* A page that scrolls sideways is always a bug, never a design. This is the
backstop: if any future element misbehaves it gets clipped instead of
dragging the whole layout with it. */
@media (max-width: 600px) {
html, body.apl-body { overflow-x: hidden; }
}
/* ==========================================================================
DESIGN LAYER — clean Scandinavian
--------------------------------------------------------------------------
Everything before this point makes the theme correct. This makes it look
like it was designed rather than assembled.
The audit found five accent colours competing on one screen — indigo for
primary, orange for PRO, orange for Featured, red for calls to action, green
for both the carbon badge and "Great deal". When five things shout, none of
them is heard, and a card ends up looking like a sticker album. A single
accent with weight and neutral greys doing the rest is what makes Vinted and
Airbnb read as expensive.
Colour is kept for meaning only: the accent marks what is clickable and what
is promoted; green survives in exactly one role — verified identity and
trust — because there it carries information no grey could.
========================================================================== */
.apl-body {
/* One warm neutral instead of pure white; pure #fff makes photography look
cold and every border look harsher than it is. */
--apl-bg: #fcfcfd;
--apl-line: #e8eaee;
--apl-shadow: 0 1px 2px rgba(16, 24, 40, .04);
--apl-shadow-lg: 0 12px 28px rgba(16, 24, 40, .08);
}
/* ---------- Typography: price is not a headline ---------- */
.apl-card__price,
.apl-single__price,
.apl-single__price-m {
/* Tabular figures so prices align down a column and stop shimmering as the
grid scrolls. Tighter tracking gives the number authority without size. */
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.apl-card__title {
font-weight: 500;
color: var(--apl-ink-2, #475569);
}
.apl-section__title,
.apl-archive__title {
font-weight: 700;
letter-spacing: -.025em;
}
/* ---------- One accent, expressed in weight not hue ---------- */
.apl-pro-badge {
background: transparent;
color: var(--apl-muted, #64748b);
border: 1px solid var(--apl-line);
font-weight: 600;
}
.apl-badge--featured {
/* Promoted, not alarming: the accent at low saturation reads as editorial
rather than as a warning label. */
background: var(--apl-primary-050, #eef2ff);
color: var(--apl-primary-aa, #4338ca);
box-shadow: none;
border: 1px solid color-mix(in srgb, var(--apl-primary-aa) 20%, transparent);
}
.apl-card--featured {
border-color: color-mix(in srgb, var(--apl-primary-aa) 34%, transparent);
box-shadow: none;
}
/* ---------- Surfaces: quieter borders, softer lift ---------- */
.apl-card {
border-radius: 14px;
box-shadow: var(--apl-shadow);
}
.apl-card:hover {
transform: translateY(-2px);
box-shadow: var(--apl-shadow-lg);
border-color: var(--apl-line);
}
.apl-cat {
box-shadow: var(--apl-shadow);
border-radius: 14px;
}
.apl-cat:hover {
border-color: var(--apl-line);
box-shadow: var(--apl-shadow-lg);
}
/* ---------- Empty thumbnails should read as "no photo", not as broken ------ */
.apl-card__media { background: #f4f5f7; }
.apl-card__img--ph { opacity: .28; padding: 26%; }
/* ---------- Motion: state changes you can feel ---------- */
@media (prefers-reduced-motion: no-preference) {
.apl-fav, .apl-card__compare, .apl-btn {
transition: transform .16s cubic-bezier(.22, 1, .36, 1),
background-color .16s ease, color .16s ease;
}
.apl-fav:active, .apl-card__compare:active { transform: scale(.9); }
}
/* --------------------------------------------------------------------------
Hero — calm instead of rainbow
--------------------------------------------------------------------------
The old hero ran a 135° gradient from the primary through indigo to the
secondary, which on this install resolved to red → purple → green across the
full width. Three-stop rainbow gradients read as 2021; they also fight every
photograph placed near them and leave no safe colour for a button.
A single deep ink wash with one very soft accent bloom does the same job —
separating the hero from the page — without competing with the product. The
headline carries the personality now, which is what a marketplace should be
selling in the first place.
-------------------------------------------------------------------------- */
.apl-hero {
background:
radial-gradient(90% 120% at 12% 0%, rgba(99, 102, 241, .30) 0%, rgba(99, 102, 241, 0) 60%),
radial-gradient(70% 100% at 100% 0%, rgba(56, 189, 248, .16) 0%, rgba(56, 189, 248, 0) 55%),
#101426;
color: #fff;
padding: 60px 0 68px;
}
.apl-hero__title {
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.06;
}
.apl-hero__sub { color: rgba(255, 255, 255, .72); font-weight: 400; }
/* Category pills: outlined on the dark wash rather than translucent blobs. */
.apl-hero .apl-chip,
.apl-hero__cats a {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .16);
color: #fff;
backdrop-filter: none;
}
.apl-hero .apl-chip:hover,
.apl-hero__cats a:hover { background: rgba(255, 255, 255, .13); }
@media (max-width: 600px) {
.apl-hero { padding: 40px 0 44px; }
.apl-hero__title { font-size: 30px; }
}
/* ==========================================================================
0.48.0 — Typography: two voices instead of one
==========================================================================
Until now the logo, every heading, the body copy and every price shared one
heavy rounded system stack. That is the single loudest signal that a theme was
assembled rather than designed: nothing has a hierarchy of its own, so the
page has to shout with size and weight to create any.
Two self-hosted variable fonts, both OFL, both subset to Latin + Polish:
Plus Jakarta Sans — display. Geometric, a little warmer than a grotesque,
with distinctive terminals that give the logo and headlines a face.
Inter — UI and body. Drawn for screens at small sizes, with real tabular
figures, which is what a price column needs.
Self-hosted rather than pulled from Google: no third-party request on every
page view (a live GDPR question in the EU), no extra DNS + TLS handshake in
the critical path, and the files are subset to ~90 KB for both families
including full Polish coverage.
========================================================================== */
@font-face {
font-family: 'AddiListo Display';
src: url('../fonts/jakarta-latin.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'AddiListo Display';
src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'AddiListo Text';
src: url('../fonts/inter-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'AddiListo Text';
src: url('../fonts/inter-latin-ext.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* The system stack stays as the fallback, so a blocked font file degrades to
what the theme looked like yesterday rather than to Times New Roman. */
--apl-font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--apl-font: 'AddiListo Text', var(--apl-font-sys);
--apl-font-display: 'AddiListo Display', 'AddiListo Text', var(--apl-font-sys);
/* One scale, so sizes stop being invented per component. */
--apl-t-xs: 12px;
--apl-t-sm: 13px;
--apl-t-base: 15px;
--apl-t-md: 17px;
--apl-t-lg: 20px;
--apl-t-xl: 24px;
}
body.apl-body { font-family: var(--apl-font); }
/* Display voice — logo, hero, section and page headings. Tight tracking is what
makes a geometric face read as designed rather than as default. */
.apl-logo,
.apl-hero__title,
.apl-section__title,
.apl-archive__title,
.apl-single__title,
.apl-card__price,
.apl-single__price,
.apl-single__price-m,
h1, h2, h3 {
font-family: var(--apl-font-display);
letter-spacing: -.022em;
}
.apl-logo { font-weight: 800; letter-spacing: -.03em; }
.apl-hero__title { font-weight: 800; letter-spacing: -.035em; }
.apl-section__title,
.apl-archive__title { font-weight: 700; }
/* Text voice — everything a person reads rather than scans. Inter's default
figures are proportional; the price column wants tabular ones. */
.apl-card__price,
.apl-single__price,
.apl-single__price-m,
.apl-check__n,
.apl-archive__count,
.apl-filters__done-n {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1, 'cv05' 1;
}
.apl-card__title {
font-family: var(--apl-font);
font-weight: 500;
letter-spacing: -.006em;
}
.apl-menu a,
.apl-btn,
.apl-input,
.apl-chip { font-family: var(--apl-font); }
/* Inter ships an alternate lowercase L that stops "l" reading as "1" or "I" in
prices and addresses. Cheap to switch on, and it is exactly the kind of
confusion a classifieds site cannot afford. */
.apl-body { font-feature-settings: 'cv05' 1; }
/* ==========================================================================
0.48.0 — Search filter panel
==========================================================================
The panel was a stack of dropdowns. Dropdowns hide their options, allow one
choice, and reveal nothing about inventory. Everything below is built around
three rules: show what you can pick, show how much is behind each pick, and
always show what is currently picked.
========================================================================== */
.apl-filters {
background: var(--apl-card,#fff);
border: 1px solid var(--apl-line);
border-radius: var(--apl-radius);
padding: 6px 16px 16px;
}
.apl-filters.is-loading { opacity: .72; }
.apl-filters.is-loading .apl-facet__list { pointer-events: none; }
/* ---------- Active filter chips ---------- */
.apl-active {
margin: 14px 0 4px;
padding-bottom: 14px;
border-bottom: 1px solid var(--apl-line);
}
.apl-active__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
margin-bottom: 10px;
}
.apl-active__title {
font-size: var(--apl-t-xs); font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--apl-muted);
}
.apl-active__clear {
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-size: var(--apl-t-sm); font-weight: 600;
/* A 13px link has to clear 4.5:1; the raw brand colour often does not. */
color: var(--apl-primary-aa); text-decoration: underline; text-underline-offset: 2px;
}
.apl-active__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.apl-active__chip {
display: inline-flex; align-items: center; gap: 2px;
background: var(--apl-primary-050); color: var(--apl-primary-aa);
border: 1px solid currentColor; border-color: color-mix(in srgb, var(--apl-primary-aa) 22%, transparent);
border-radius: 999px; padding: 4px 4px 4px 11px;
font-size: var(--apl-t-sm); font-weight: 600; max-width: 100%;
}
.apl-active__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apl-active__chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; flex: 0 0 auto;
border: 0; border-radius: 999px; background: transparent;
color: inherit; cursor: pointer; padding: 0;
}
.apl-active__chip-x:hover { background: color-mix(in srgb, var(--apl-primary-aa) 16%, transparent); }
/* ---------- Facet (a collapsible group) ---------- */
.apl-facet { border-bottom: 1px solid var(--apl-line); }
.apl-facet:last-of-type { border-bottom: 0; }
.apl-facet--plain { padding: 14px 0; }
.apl-facet__head {
display: flex; align-items: center; gap: 8px;
padding: 14px 0; cursor: pointer; list-style: none;
user-select: none;
}
.apl-facet__head::-webkit-details-marker { display: none; }
.apl-facet__legend {
font-size: var(--apl-t-sm); font-weight: 700; color: var(--apl-ink);
letter-spacing: -.005em;
}
/* The UA rule for [hidden] is `display:none`, and ANY author `display`
declaration beats it. Without this pair the badge renders a literal "0"
next to every untouched facet. */
.apl-facet__badge[hidden] { display: none; }
.apl-facet__badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px; background: var(--apl-primary-aa); color: #fff;
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.apl-facet__chev { margin-left: auto; color: var(--apl-muted); display: inline-flex; transition: transform .18s ease; }
.apl-facet[open] > .apl-facet__head .apl-facet__chev { transform: rotate(180deg); }
.apl-facet__body { padding-bottom: 14px; }
.apl-facet__find { margin-bottom: 8px; font-size: var(--apl-t-sm); padding: 8px 12px; }
.apl-facet__list {
list-style: none; margin: 0; padding: 0;
/* Capped rather than paginated: a long list you can flick through beats a
short list with a "show more" that costs a click and a reflow. */
max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin;
}
.apl-facet__none { margin: 4px 2px; font-size: var(--apl-t-sm); color: var(--apl-muted); }
/* ---------- Checkbox row with a count ---------- */
.apl-check {
position: relative;
display: flex; align-items: center; gap: 10px;
padding: 7px 2px; cursor: pointer;
font-size: var(--apl-t-base); color: var(--apl-ink-2);
border-radius: 8px;
}
.apl-check:hover { background: var(--apl-bg-2); }
.apl-check input[type="checkbox"],
.apl-check input[type="radio"] {
/* Visually removed, not display:none — it has to stay focusable and stay in
the tab order, and it is what the label is actually toggling. */
position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0;
left: 2px; cursor: pointer;
}
.apl-check__box {
flex: 0 0 auto; width: 19px; height: 19px;
border: 1.5px solid #cbd2dd; border-radius: 6px; background: var(--apl-card,#fff);
display: inline-flex; align-items: center; justify-content: center;
transition: background-color .14s ease, border-color .14s ease;
}
.apl-check__box::after {
content: ''; width: 10px; height: 6px;
border-left: 2px solid #fff; border-bottom: 2px solid #fff;
transform: rotate(-45deg) scale(.5); transform-origin: center;
opacity: 0; transition: opacity .12s ease, transform .12s ease;
margin-top: -2px;
}
.apl-check input:checked ~ .apl-check__box { background: var(--apl-primary-aa); border-color: var(--apl-primary-aa); }
.apl-check input:checked ~ .apl-check__box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.apl-check input:focus-visible ~ .apl-check__box { outline: 3px solid var(--apl-primary); outline-offset: 2px; }
.apl-check__text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apl-check__n {
flex: 0 0 auto; font-size: var(--apl-t-xs); font-weight: 600;
color: var(--apl-muted); background: var(--apl-bg-2);
padding: 2px 7px; border-radius: 999px;
}
.apl-facet__item.is-empty .apl-check { opacity: .42; }
.apl-facet__item.is-empty .apl-check__text { text-decoration: line-through; text-decoration-color: rgba(100,116,139,.5); }
/* ---------- Keyword field with a leading icon ---------- */
.apl-field-icon { position: relative; display: block; }
.apl-field-icon > svg {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--apl-muted); pointer-events: none;
}
.apl-field-icon .apl-input { padding-left: 38px; }
/* ---------- Price ---------- */
.apl-bands { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.apl-band {
border: 1px solid var(--apl-line); background: var(--apl-card,#fff); color: var(--apl-ink-2);
border-radius: 999px; padding: 6px 12px; cursor: pointer;
font: inherit; font-size: var(--apl-t-sm); font-weight: 600;
font-variant-numeric: tabular-nums; transition: .14s ease;
}
.apl-band:hover { border-color: var(--apl-primary-aa); color: var(--apl-primary-aa); }
.apl-band.is-on { background: var(--apl-primary-aa); border-color: var(--apl-primary-aa); color: #fff; }
.apl-filters__price { display: flex; align-items: center; gap: 8px; }
.apl-filters__price .apl-input { font-variant-numeric: tabular-nums; }
.apl-filters__dash { color: var(--apl-muted); }
.apl-filters__hint {
margin: 8px 0 0; font-size: var(--apl-t-sm); color: #b45309;
background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px;
}
/* ---------- Segmented control ---------- */
.apl-segmented {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: var(--apl-bg-2); border: 1px solid var(--apl-line);
border-radius: 10px; padding: 3px; gap: 3px;
}
.apl-segmented__opt { position: relative; display: block; }
.apl-segmented__opt input {
position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%;
margin: 0; cursor: pointer;
}
.apl-segmented__opt span {
display: block; text-align: center; padding: 8px 6px;
border-radius: 8px; font-size: var(--apl-t-sm); font-weight: 600;
color: var(--apl-muted); transition: .14s ease;
}
.apl-segmented__opt input:checked ~ span {
background: var(--apl-card,#fff); color: var(--apl-ink);
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.apl-segmented__opt input:focus-visible ~ span { outline: 3px solid var(--apl-primary); outline-offset: 1px; }
.apl-filters__actions { display: grid; gap: 8px; margin-top: 16px; }
/* On desktop the submit button is redundant — results update live — but it is
the only affordance a keyboard or no-JS user has, so it stays in the DOM and
only leaves the layout where live updating is definitely available. */
@media (min-width: 861px) {
.apl-filters__submit { display: none; }
/* No sticky, height-capped sidebar here, and that is a correction rather
than an omission. With the facet lists already capped at 232px, a capped
sidebar put a second scrollbar directly beside the first: on this catalogue
the panel is ~1450px of filters plus a 578px widget area inside a 674px
viewport, so both bars were live at once and the wheel did something
different depending on which pixel the cursor sat over.
One scroll surface per axis. The panel scrolls with the page; only the
long option lists scroll inside themselves. */
.apl-archive__sidebar { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
.apl-facet__chev { transition: none; }
.apl-check__box, .apl-check__box::after { transition: none; }
}
/* --------------------------------------------------------------------------
0.48.0 — inline icons next to text
--------------------------------------------------------------------------
The shared `.apl-i { display: block }` above was written for icons inside
flex rows, where the value is ignored anyway. Now that former emoji are SVGs
sitting inside sentences and buttons, block-level icons push the words onto
the next line. Inline-block with a baseline nudge restores what an emoji did
for free, and changes nothing inside a flex container.
-------------------------------------------------------------------------- */
.apl-i { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; color: inherit; }
.apl-btn .apl-i,
.apl-facet__chev .apl-i,
.apl-field-icon .apl-i { vertical-align: middle; }
.addilisto-preset__ico .apl-i,
.apl-stat__ico .apl-i,
.apl-feature__ico .apl-i,
.apl-step__ico .apl-i { display: block; vertical-align: baseline; }
/* --------------------------------------------------------------------------
0.48.5 — white text on the brand colour
--------------------------------------------------------------------------
Restoring the owner's brand colour to the primary button (it had been stuck
on a hardcoded indigo by a scoping slip in the plugin) exposed the problem
that slip had been hiding: this install's teal carries white text at 3.0:1,
and WCAG 1.4.3 asks for 4.5:1 at these sizes. The button had been passing by
accident, on a colour nobody chose.
Every surface below is brand-coloured AND carries white text at body size or
smaller, so each one switches to the contrast-corrected shade. Same hue, one
or two stops deeper, computed per install from whatever colour the owner
picked — a lighter brand gets a bigger correction, a dark one gets none.
Deliberately NOT in this list: the hero wash and the house-ad banner, whose
text is display-sized and sits on a gradient, where the raw brand colour is
both legible and the point.
-------------------------------------------------------------------------- */
.apl-btn--primary,
.apl-step__n,
.apl-pagination .page-numbers.current,
.apl-subcat.is-active,
.apl-housead__badge,
.apl-card__compare.is-on,
.apl-compare-bar__open,
.apl-loc__geo,
.apl-widget .wp-block-search__button {
background: var(--apl-primary-aa);
}
.apl-pagination .page-numbers.current,
.apl-subcat.is-active { border-color: var(--apl-primary-aa); }
.apl-btn--primary:hover {
/* Relative, not a second computed colour: --apl-primary-600 is derived from
the raw brand shade and can land LIGHTER than the corrected one, which
would drop the hover state back below the threshold. */
background: var(--apl-primary-aa);
filter: brightness(.92);
}
@media (max-width: 860px) {
.apl-drawer__badge,
.apl-drawer__cta--primary { background: var(--apl-primary-aa); }
.apl-drawer__cta--primary { border-color: var(--apl-primary-aa); }
}
/* ==========================================================================
0.49.0 — Listing card
==========================================================================
Two things were wrong, and they were wrong together.
The markup wrapped the whole card in one with buttons inside it, which
is invalid and made every card announce as a single link. That is fixed in
the template; the styling below implements the stretched-link pattern the
new markup relies on.
The hierarchy was inverted. The price rendered first at 19px/800 in the
display face, the item name below it at 15px/500 in muted grey — the card
led with a number and whispered what the number was for. On a marketplace
the object is the headline; the price is the strongest supporting line, not
the title. The order is now category, name, price, then metadata.
========================================================================== */
.apl-card {
position: relative;
display: flex;
flex-direction: column;
isolation: isolate;
}
/* The stretched link: one anchor, whole-card hit area. */
.apl-card__link { color: inherit; text-decoration: none; }
.apl-card__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.apl-card__link:focus-visible::after {
outline: 3px solid var(--apl-primary-aa);
outline-offset: -3px;
}
/* Controls have to sit above the stretched link or it swallows their clicks. */
.apl-card__compare,
.apl-card__actions,
.apl-card__badges,
.apl-card__photos { position: relative; z-index: 2; }
.apl-card__actions,
.apl-card__badges,
.apl-card__photos,
.apl-card__compare { position: absolute; }
.apl-card__body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
}
.apl-card__cat {
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--apl-muted);
}
/* The name leads. Two lines, clamped, so a long title cannot shove the price
out of alignment with the card beside it. */
.apl-card__title {
margin: 0;
font-family: var(--apl-font);
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.008em;
color: var(--apl-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Underline, not a colour change: an older dark-theme guard further up sets
`.apl-card__title { color: ... !important }`, so a hover colour would simply
never apply. Better an affordance that works than one that reads well in the
stylesheet. */
.apl-card:hover .apl-card__title {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px;
}
/* The price stays the loudest single value, but it now reads as an answer to
the name above it rather than as the headline. */
.apl-card__price {
font-family: var(--apl-font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--apl-ink);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* Location and age on one line: two facts, one row, no vertical noise. */
.apl-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 10px;
margin-top: auto;
padding-top: 8px;
font-size: 12.5px;
color: var(--apl-muted);
}
.apl-card__loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.apl-card__loc .apl-i { color: var(--apl-muted); }
.apl-card__loc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apl-card__date { font-variant-numeric: tabular-nums; }
.apl-card__date::before {
content: '\00b7';
margin-right: 10px;
color: var(--apl-line);
}
.apl-card__meta > :first-child.apl-card__date::before { content: none; margin: 0; }
.apl-card__foot {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--apl-line);
font-size: 12px;
color: var(--apl-muted);
}
/* Badges: one shape, one weight, colour used only to separate meaning. */
.apl-card__badges { display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 60px); }
.apl-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600; letter-spacing: .01em;
padding: 4px 9px; border-radius: 999px;
background: rgba(255, 255, 255, .94);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: var(--apl-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
line-height: 1.2;
}
.apl-badge--featured { background: rgba(255, 255, 255, .94); color: var(--apl-primary-aa); }
.apl-badge--urgent { background: #fef2f2; color: #b91c1c; }
.apl-badge--verified { background: #ecfdf5; color: var(--apl-success); }
.apl-card--featured {
border-color: color-mix(in srgb, var(--apl-primary-aa) 34%, transparent);
box-shadow: none;
}
/* A card with no photo should read as "no photo yet", not as a broken image. */
.apl-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--apl-bg-2); }
.apl-card__img--ph { object-fit: contain; opacity: .22; padding: 28%; }
/* Four corners, four jobs, every offset stated.
-----------------------------------------------------------------------
An earlier rule pinned compare to bottom-left with `top: auto`. Setting only
`top` and `right` here left `left` and `bottom` still in force, and with a
definite width the browser honours `left` in a left-to-right document — so
the button landed top-left, on top of the Featured badge. Each corner now
resets the two offsets it does not use.
----------------------------------------------------------------------- */
.apl-card__badges { top: 10px; left: 10px; right: auto; bottom: auto; }
.apl-card__actions { top: 10px; right: 10px; left: auto; bottom: auto; }
.apl-card__compare { bottom: 10px; right: 10px; top: auto; left: auto; }
.apl-card__photos {
bottom: 10px; left: 10px; top: auto; right: auto;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 999px;
background: rgba(16, 24, 40, .62); color: #fff;
font-size: 11px; font-weight: 600;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.apl-card__actions { display: flex; gap: 6px; }
/* The PRO marker arrives from the plugin through the card-meta slot. It was a
full-saturation orange-to-red gradient sitting mid-body, louder than both the
name and the price. Same information, ambient weight. */
.apl-card__body .apl-pro-badge {
align-self: flex-start;
background: #f1f3f6 !important;
background-image: none !important;
color: #5b6779 !important;
border: 1px solid var(--apl-line);
font-weight: 700;
font-size: 10px;
letter-spacing: .06em;
padding: 2px 7px;
border-radius: 5px;
}
@media (max-width: 600px) {
.apl-card__body { padding: 11px; gap: 5px; }
.apl-card__title { font-size: 14.5px; }
.apl-card__price { font-size: 16.5px; }
.apl-card__meta { font-size: 12px; padding-top: 6px; }
/* On a 165px column two facts do not fit side by side without truncating
the city to three letters, so the age drops below. */
.apl-card__meta { gap: 2px 8px; }
.apl-card__date::before { content: none; margin: 0; }
.apl-card__meta { flex-direction: column; align-items: flex-start; }
}
/* --------------------------------------------------------------------------
0.49.1 — cards without a photo
--------------------------------------------------------------------------
Half the listings in this catalogue have no image, and at 4:3 in a five-column
grid that is a large empty rectangle with a 22%-opacity icon floating in it.
It reads as a failed image load rather than as "no photo yet".
A faint diagonal hatch plus a slightly firmer icon makes the empty state look
deliberate. It costs no request — it is a gradient — and it disappears the
moment a real photo exists.
-------------------------------------------------------------------------- */
.apl-card__media:has(.apl-card__img--ph) {
background-color: #f4f6f8;
background-image: repeating-linear-gradient(
135deg,
rgba(15, 23, 42, .028) 0 10px,
rgba(15, 23, 42, 0) 10px 20px
);
}
.apl-card__img--ph { opacity: .3; padding: 30%; }
/* --------------------------------------------------------------------------
0.49.2 — the invalid-field border has to survive the theme's own guard
--------------------------------------------------------------------------
Further up, a defensive block forces `border: 1px solid var(--apl-line)
!important` on every form control, so that a plugin with a dark palette
cannot leave inputs unreadable. It also flattened the red border the plugin
paints on an invalid field: the message appeared, the field did not change.
The theme wrote that guard, so the theme owns the exception. Higher
specificity and the same weight, scoped to the error state only.
-------------------------------------------------------------------------- */
.apl-body .apl-form .apl-field.is-invalid input:not([type="checkbox"]):not([type="radio"]),
.apl-body .apl-form .apl-field.is-invalid select,
.apl-body .apl-form .apl-field.is-invalid textarea {
border-color: #d92d20 !important;
background: #fffbfa !important;
}
.apl-body .apl-form .apl-field.is-invalid input:not([type="checkbox"]):not([type="radio"]):focus,
.apl-body .apl-form .apl-field.is-invalid select:focus,
.apl-body .apl-form .apl-field.is-invalid textarea:focus {
box-shadow: 0 0 0 3px rgba(217, 45, 32, .14) !important;
}
/* --------------------------------------------------------------------------
0.49.3 — the empty gallery
--------------------------------------------------------------------------
A listing with no photos rendered the full gallery stage anyway: 842px of
empty grey before anything with words in it. The placeholder is information —
"this seller posted no pictures" — and information that size is a statement.
Capped, centred, and quiet enough to read as an absence rather than a fault.
-------------------------------------------------------------------------- */
.apl-gallery--empty {
aspect-ratio: auto;
max-height: 260px;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f4f6f8;
background-image: repeating-linear-gradient(
135deg,
rgba(15, 23, 42, .028) 0 10px,
rgba(15, 23, 42, 0) 10px 20px
);
border: 1px solid var(--apl-line);
border-radius: var(--apl-radius);
overflow: hidden;
}
.apl-gallery--empty img {
width: auto;
height: auto;
max-height: 110px;
max-width: 40%;
opacity: .3;
padding: 0;
object-fit: contain;
}
/* The head now sits above the gallery, so it carries the top margin. */
.apl-single__head { margin-bottom: 16px; }
.apl-single__head + .apl-gallery { margin-bottom: 20px; }
@media (max-width: 860px) {
/* The full-bleed treatment applies to a real gallery, not to a placeholder
that would then run edge to edge for no reason. */
.apl-gallery--empty { margin-inline: 0; border-radius: var(--apl-radius); max-height: 200px; }
}
/* --------------------------------------------------------------------------
0.49.4 — the listing header on a phone
--------------------------------------------------------------------------
With the price moved below the title, the two need sizes that say which one
leads. The name gets the display face and the larger size; the price stays
heavy and tabular but steps down. The fixed action bar carries the price at
all times anyway, so this copy of it is a reference, not the headline.
-------------------------------------------------------------------------- */
@media (max-width: 860px) {
.apl-single__title {
font-size: 23px;
line-height: 1.22;
margin: 0 0 6px;
}
.apl-single__price-m {
font-size: 21px;
font-weight: 700;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: var(--apl-ink);
margin: 0 0 4px;
}
.apl-single__loc { font-size: 13.5px; }
}
/* ==========================================================================
0.50.0 — the last two-hue gradient
==========================================================================
The promo banner ran `linear-gradient(120deg, var(--apl-primary), #6366f1)`.
With a teal brand that resolved to teal → indigo across the full width of the
busiest page on the site: the same three-stop-rainbow look that was taken out
of the hero, still sitting two screens below it, and with the second hue
hardcoded so it could never follow the owner's palette.
Same job — separate the banner from the page — done with one deep ink surface
and a single soft bloom of the brand colour. It reads as a surface rather than
as decoration, and it inherits whatever colour the owner picks.
========================================================================== */
.apl-housead--accent {
background:
radial-gradient(120% 180% at 8% 0%, color-mix(in srgb, var(--apl-primary) 42%, transparent) 0%, transparent 62%),
#101426;
color: #fff;
}
.apl-housead--accent .apl-housead__go { color: #fff; }
.apl-housead--accent .apl-housead__badge {
background: rgba(255, 255, 255, .14);
color: #fff;
border: 1px solid rgba(255, 255, 255, .22);
}
/* The PRO marker, everywhere rather than only inside a card body. A saturated
orange-to-red gradient was the loudest object in every context it appeared. */
.apl-pro-badge {
background: #f1f3f6 !important;
background-image: none !important;
color: #5b6779 !important;
border: 1px solid #e3e7ec;
font-weight: 700;
letter-spacing: .06em;
}
/* --------------------------------------------------------------------------
0.50.0 — one price at a time
--------------------------------------------------------------------------
The header states the price and the fixed bar states it again, both on screen
at once on a phone. The bar now holds its copy back until the header's has
scrolled out of sight; `--smart` is added by script, so with JavaScript off
the price simply stays put and nothing is lost.
-------------------------------------------------------------------------- */
.apl-actionbar--smart .apl-actionbar__price {
opacity: 0;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.apl-actionbar--smart.is-price-visible .apl-actionbar__price {
opacity: 1;
transform: none;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.apl-actionbar--smart .apl-actionbar__price { transition: none; transform: none; }
}
/* ==========================================================================
ENDED LISTINGS
--------------------------------------------------------------------------
An expired ad keeps its page so its address keeps answering, but it has to
read as an archive record rather than an offer. The banner says so once, in
plain words, and carries the only action still worth taking; the photos and
the price are muted so the eye does not read them as live.
========================================================================== */
.apl-expired {
display: flex;
align-items: flex-start;
gap: .8rem;
padding: .95rem 1.05rem;
margin: 0 0 1.1rem;
border: 1px solid #fcd34d;
border-left: 4px solid #d97706;
border-radius: var(--apl-radius, 14px);
background: #fffbeb;
color: #713f12;
}
.apl-expired__icon { flex: 0 0 auto; display: flex; color: #b45309; padding-top: .1rem; }
.apl-expired__body { flex: 1 1 auto; min-width: 0; }
.apl-expired__title { display: block; font-size: 1rem; line-height: 1.35; }
.apl-expired__text { margin: .2rem 0 0; font-size: .875rem; line-height: 1.45; color: #78350f; }
.apl-expired__cta { flex: 0 0 auto; align-self: center; white-space: nowrap; }
/* The banner stacks on a phone: a nowrap button beside two lines of text is
what pushed the old promo panel off-screen, and this one would do the same. */
@media (max-width: 560px) {
.apl-expired { flex-wrap: wrap; }
.apl-expired__cta { width: 100%; align-self: stretch; text-align: center; margin-top: .2rem; }
}
/* Muted, not hidden — the photos are still the record of what was sold. */
.apl-single--expired .apl-gallery,
.apl-single--expired .apl-single__price-m,
.apl-single--expired .apl-pricebox__price { filter: grayscale(.35); opacity: .82; }
.apl-single--expired .apl-single__price-m,
.apl-single--expired .apl-pricebox__price { text-decoration: line-through; text-decoration-thickness: 2px; }
.apl-pricebox__ended {
margin: 0 0 .7rem;
font-size: .875rem;
line-height: 1.45;
color: var(--apl-muted, #64748b);
}
/* Card badge, for the dashboard and any archive that deliberately includes
ended listings (the seller's own, most of all). */
.apl-badge--ended { background: #78350f; color: #fff; }
/* ==========================================================================
FLOATING WIDGETS vs THE MOBILE TAB BAR
--------------------------------------------------------------------------
Plugins drop their own round buttons into the bottom-right corner — a chat
launcher, a quick-post shortcut — and they do it with a fixed offset of a
couple of dozen pixels and a z-index in the millions. The theme's tab bar
lives in exactly that spot, so on a phone the chat bubble sat squarely on
top of the "Chat" and "Account" tabs and swallowed every tap meant for them.
Two of the five destinations in the main mobile navigation were unreachable.
The tab bar cannot win that fight on z-index and should not try: a chat
launcher belongs on top of page content. What it can do is claim the strip
it occupies, and ask floating widgets to sit above it. The offset below is
the bar's height plus the safe area, plus a small gap.
Selectors are deliberately id-based and narrow. A blanket rule for every
fixed element would move cookie banners and modals as well, which belong
where their own authors put them.
========================================================================== */
@media (max-width: 860px) {
/* Height of the bar: padding + icon + label, plus the phone's safe area. */
:root { --apl-bottomnav-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
/* [0.53.14] #sb-fab and #qp-fab are now dead weight in this list — the
Faza "Przebudowa FAB" merge (see class-quick-post.php / class-
salary-intelligence.php) hid both behind display:none!important and
replaced them with a single #apx-launcher, but that rename was never
carried over here. Result: the old (now-invisible) buttons stayed
correctly lifted above the tab bar while the real, visible launcher
sat unprotected at its default bottom:28px and covered the "Chat"/
"Account" tabs exactly like the chat widgets did before this whole
block existed. Selectors kept for the (harmless) legacy targets in
case any cached/older plugin build still emits them; #apx-launcher
added as the actual fix. */
#apx-launcher,
#sb-fab,
#qp-fab,
.tidio-chat-widget,
#crisp-chatbox,
.smartsupp-widget-container {
bottom: calc(var(--apl-bottomnav-h) + 12px) !important;
}
/*
The quick-post button is not merely in the way, it is a second copy of
an action the tab bar already carries in its centre slot. Two identical
buttons a thumb apart is worse than one, so on phones the tab bar keeps
the job and this one steps aside. It stays untouched on desktop, where
there is no tab bar and no duplication.
*/
#qp-fab { display: none !important; }
}
/* --------------------------------------------------------------------------
Capability profile & bookings (dashboard "Capacity & Bookings" tab,
addipress-listings Faza 7.2 — class-capability.php).
The plugin already emits proper .apl-field / .apl-note / .apl-booking__*
class names (BEM-style, matching the rest of this design system) but this
theme never shipped rules for them, so the tab rendered as unstyled
default browser form controls next to an otherwise fully themed
dashboard. Additive only — no existing selector below is touched.
-------------------------------------------------------------------------- */
.apl-cap-form {
background: var(--apl-bg);
border: 1px solid var(--apl-line);
border-radius: var(--apl-radius);
box-shadow: var(--apl-shadow);
padding: 20px;
margin-bottom: 20px;
}
.apl-cap-form fieldset { border: 0; padding: 0; margin: 0; }
.apl-cap-form legend { font-weight: 700; font-size: 16px; padding: 0 0 14px; color: var(--apl-ink); }
.apl-cap-form .apl-field { margin-bottom: 14px; }
.apl-cap-form .apl-field:last-of-type { margin-bottom: 16px; }
.apl-cap-form .apl-field label {
display: block; font-weight: 600; font-size: 13px; color: var(--apl-ink-2); margin-bottom: 6px;
}
.apl-cap-form .apl-field--inline {
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.apl-cap-form .apl-field--inline label {
display: inline; font-weight: 500; font-size: 14px; color: var(--apl-ink); margin: 0;
}
.apl-cap-form .apl-field--inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--apl-primary); }
.apl-cap-form select,
.apl-cap-form input[type="number"] {
padding: 10px 12px; border: 1px solid var(--apl-line); border-radius: var(--apl-radius-sm);
font-size: 14px; background: var(--apl-card,#fff); color: var(--apl-ink); width: 100%; max-width: 260px;
}
.apl-cap-form .apl-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.apl-cap-form .apl-field-row .apl-field { flex: 1; min-width: 140px; }
.apl-note {
padding: 12px 16px; border-radius: var(--apl-radius-sm); margin-bottom: 16px; font-size: 14px; font-weight: 500;
}
.apl-note--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.apl-note--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.apl-bookings { display: flex; flex-direction: column; gap: 12px; }
.apl-booking {
background: var(--apl-bg); border: 1px solid var(--apl-line); border-radius: var(--apl-radius);
box-shadow: var(--apl-shadow); padding: 16px;
}
.apl-booking__listing a { font-weight: 700; color: var(--apl-ink); font-size: 15px; }
.apl-booking__listing a:hover { color: var(--apl-primary); }
.apl-booking__desc { color: var(--apl-muted); font-size: 14px; margin: 6px 0; }
.apl-booking__buyer { font-size: 14px; color: var(--apl-ink-2); margin-bottom: 8px; }
.apl-booking__quote { font-weight: 700; color: var(--apl-primary); margin-bottom: 10px; font-size: 15px; }
.apl-booking__status {
display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px;
border-radius: 999px; background: var(--apl-bg-2); color: var(--apl-ink-2); margin-bottom: 10px;
}
.apl-booking--confirmed .apl-booking__status,
.apl-booking--accepted .apl-booking__status { background: #f0fdf4; color: #166534; }
.apl-booking--declined .apl-booking__status { background: #fef2f2; color: #991b1b; }
.apl-cap-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.apl-cap-confirm label { font-size: 13px; font-weight: 600; color: var(--apl-ink-2); display: flex; align-items: center; gap: 6px; }
.apl-cap-confirm input[type="number"] {
padding: 8px 10px; border: 1px solid var(--apl-line); border-radius: var(--apl-radius-sm); width: 100px;
}
.apl-booking__drop { color: var(--apl-muted); font-size: 13px; text-decoration: underline; margin-left: 4px; }
.apl-booking__drop:hover { color: var(--apl-ink); }