/* SKELBIMŲ SĄRAŠO / PAGRINDINIO STILIAI (.custom-dropdown …) — anksčiau
   <style> templates/listings/listing_list.html {% block extra_css %}
   (~23 KB). Jungiamas toje pačioje vietoje (extra_css, prieš tailwind.css). */
.custom-dropdown { position:absolute; z-index:100; background:#fff; border:1px solid #e5e7eb; border-radius:0.5rem; box-shadow:0 4px 16px rgba(0,0,0,0.1); width:100%; min-width:220px; margin-top:2px; }
.custom-dropdown-list { max-height:300px; overflow-y:auto; }
.custom-item { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; cursor:pointer; font-size:0.875rem; }
.custom-item:hover { background:#f9fafb; }
.custom-item.selected { background:#f3f4f6; color:#111827; font-weight:500; }
.custom-item .item-count { color:#9ca3af; font-size:0.75rem; margin-left:8px; flex-shrink:0; }
.custom-search-input { width:100%; border:none; outline:none; padding:8px 12px; font-size:0.875rem; border-bottom:1px solid #e5e7eb; border-radius:0.5rem 0.5rem 0 0; }
.custom-footer { padding:6px 12px; border-top:1px solid #e5e7eb; }
.custom-footer label { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:#6b7280; cursor:pointer; }
.custom-trigger { width:100%; padding:0.625rem 0.75rem; background:#f9fafb; border:1px solid #e5e7eb; border-radius:0.5rem; font-size:0.875rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.custom-trigger:hover { border-color:#d1d5db; }
.loc-group-header { padding:6px 12px; font-size:0.7rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:0.05em; background:#f9fafb; border-bottom:1px solid #f3f4f6; }
.loc-item { display:flex; align-items:center; padding:6px 12px 6px 20px; cursor:pointer; font-size:0.875rem; color:var(--accent); }
.loc-item:hover { background:#f9fafb; color:#111827; }
.loc-item.selected { background:#f3f4f6; font-weight:500; }
.cat-modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; }
/* Tailwind .hidden ir šis .display:flex turi vienodą specifiškumą — kas laimės,
   priklauso nuo stilių eiliškumo, o CDN jį gali pakeisti. Todėl paslėpimą
   fiksuojam čia: kitaip modalas atsidaro pats įėjus į puslapį. */
.cat-modal-overlay.hidden { display:none !important; }
.cat-modal-box { background:#fff; border-radius:1rem; box-shadow:0 8px 40px rgba(0,0,0,0.18); width:100%; max-width:720px; max-height:80vh; overflow:hidden; display:flex; flex-direction:column; }
.cat-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid #f3f4f6; flex-shrink:0; }
.cat-modal-body { display:flex; flex:1; overflow:hidden; }
.cat-modal-left { width:280px; flex-shrink:0; overflow-y:auto; border-right:1px solid #f3f4f6; }
.cat-modal-right { flex:1; overflow-y:auto; background:#fafafa; }
.cat-modal-right-empty { display:flex; align-items:center; justify-content:center; height:100%; color:#d1d5db; font-size:0.9rem; }
.cat-left-item { display:flex; align-items:center; gap:12px; padding:11px 20px; cursor:pointer; font-size:0.9rem; color:var(--accent); border-bottom:1px solid #f9fafb; transition:background 0.1s; position:relative; }
.cat-left-item:hover, .cat-left-item.active { background:#f3f4f6; color:#111827; }
.cat-left-item.active::after { content:''; position:absolute; right:0; top:0; bottom:0; width:3px; background:var(--accent); border-radius:2px 0 0 2px; }
.cat-left-item .cat-arrow { margin-left:auto; color:#d1d5db; font-size:0.7rem; }
.cat-left-item:hover .cat-arrow, .cat-left-item.active .cat-arrow { color:var(--accent); }
.cat-modal-icon { width:20px; height:20px; flex-shrink:0; color:#9ca3af; }
.cat-left-item:hover .cat-modal-icon, .cat-left-item.active .cat-modal-icon { color:var(--accent); }
/* Font Awesome ikona yra <i>, ne <svg> — jai reikia savo pločio ir centro */
.cat-left-item i.fa-solid { width:20px; text-align:center; flex-shrink:0; color:#9ca3af; }
.cat-left-item:hover i.fa-solid, .cat-left-item.active i.fa-solid { color:var(--accent); }
.cat-right-item { display:flex; align-items:center; gap:10px; padding:10px 20px; cursor:pointer; font-size:0.88rem; color:var(--accent); border-bottom:1px solid #f0f0f0; transition:background 0.1s; }
.cat-right-item:hover { background:#f3f4f6; color:#111827; }
.cat-right-title { padding:12px 20px 8px; font-size:0.75rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:0.05em; }
.cat-right-icon { width:18px; height:18px; flex-shrink:0; color:#9ca3af; }
.cat-right-item:hover .cat-right-icon { color:var(--accent); }
.sidebar-label { font-size:0.7rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.4rem; display:block; }
.sidebar-section { padding-bottom:1rem; border-bottom:1px solid #f3f4f6; margin-bottom:1rem; }
.sidebar-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }

.card-badge-group { display:inline-flex; align-items:stretch; border-radius:5px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.card-badge-new { display:inline-flex; align-items:center; padding:3px 8px; background:rgba(16,185,129,0.3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:0.62rem; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.card-badge-time { display:inline-flex; align-items:center; padding:3px 8px; background:rgba(0,0,0,0.2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:0.62rem; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.card-bottom-left { position:absolute; bottom:8px; left:8px; max-width:calc(100% - 16px); display:flex; flex-direction:column-reverse; gap:3px; align-items:flex-start; }
.card-top-left { position:absolute; top:8px; left:8px; z-index:7; display:flex; gap:4px; align-items:flex-start; }
/* Naršymo kortelėje kairiame kampe jau yra širdelė — žyma šalia jos. */
.h-img-side .card-top-left { left:44px; }

.card-mini-badge { display:inline-flex; align-items:center; gap:2px; padding:2px 6px; border-radius:4px; font-size:0.6rem; font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,0.15); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); line-height:1; }

/* ─── Highlighted listing card (purchased highlight addon) ─── */
.highlighted-card { background: var(--accent-soft) !important; border-color: var(--accent) !important; box-shadow: none !important; }
.h-listing-card.highlighted-card { background: var(--accent-soft) !important; border-color: var(--accent) !important; }
.h-listing-card.highlighted-card .h-img-side { background: transparent !important; }
.card-badge-new { display:inline-flex; align-items:center; padding:3px 8px; background:rgba(16,185,129,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:0.62rem; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.4); }

.sold-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:5; }
.sold-badge-big { padding:5px 16px; background:#16a34a; color:#fff; font-size:0.85rem; font-weight:800; letter-spacing:0.08em; border-radius:5px; box-shadow:0 4px 12px rgba(0,0,0,0.3); transform:rotate(-8deg); }
.sold-card { opacity:0.85; }

.ap-title { font-weight:700; color:#111827; font-size:0.95rem; line-height:1.25; flex:1; min-width:0; word-wrap:break-word; }
.ap-price { font-size:1.05rem; font-weight:800; color:#111827; line-height:1; white-space:nowrap; flex-shrink:0; }
.ap-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }

.ap-spec-line { display:flex; align-items:center; flex-wrap:wrap; gap:0; color:#6b7280; font-size:0.78rem; line-height:1.4; }
.ap-spec-line .sep { margin:0 6px; color:#d1d5db; }

.ap-loc { display:inline-flex; align-items:center; gap:4px; color:#10b981; font-weight:600; font-size:0.78rem; }
.ap-loc i { font-size:0.7rem; }

.ap-card-compact .ap-title { font-size:0.82rem; line-height:1.2; }
.ap-card-compact .ap-price { font-size:0.95rem; }
.ap-card-compact .ap-spec-line { font-size:0.72rem; }
.ap-card-compact .ap-loc { font-size:0.72rem; }
.ap-card-compact .ap-spec-line .sep { margin:0 4px; }

.h-listing-card { display: flex; background: #fff; border: 1px solid #f3f4f6; border-radius: 0.75rem; overflow: hidden; transition: all 0.2s; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.h-listing-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: #d1fae5; }
.h-listing-card.sold-card { opacity: 0.85; }

.h-img-side { position: relative; width: 340px; height: 200px; flex-shrink: 0; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); overflow: hidden; }
.h-img-side img { width: 100%; height: 100%; object-fit: cover; }
.h-img-side .no-img-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 3rem; }
.h-info-side { flex: 1; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

/* Kortelės miniatiūros ir pardavėjo eilutė — tik darbalaukyje.
   Matmenys iš etalono (88×66 px), spalvos iš dizaino sistemos. */
.h-thumbs { position: absolute; left: var(--sp-2); bottom: var(--sp-2); display: flex; gap: var(--sp-1); z-index: 6; }
.h-thumb { width: 56px; height: 42px; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm);
           overflow: hidden; background: none; cursor: pointer; opacity: .85;
           transition: opacity var(--dur), border-color var(--dur); }
.h-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-thumb:hover { opacity: 1; }
.h-thumb.is-on { opacity: 1; border-color: #fff; }
.h-seller { display: flex; align-items: center; gap: var(--sp-1); margin-top: auto;
            font-size: var(--fs-xs); color: var(--text-muted); }
.h-seller svg { width: 14px; height: 14px; flex: 0 0 auto; }
.h-seller-sep { color: var(--border-hover); }
@media (max-width: 1023px) { .h-thumbs { display: none; } }

/* ─── Skelbimo kortelė TELEFONE (etalonas: docs/mobilus-etalonas.md) ──────
   Kortelė buvo sudėta į eilutę su fiksuota 340 px nuotrauka ir be jokio
   mobilaus varianto: 358 px ekrane informacijai likdavo 40 px, todėl
   atrodė, kad kortelė tuščia. Telefone dedam stulpeliu, nuotrauka per visą
   plotį (aukštis pagal proporciją, ne fiksuotas), o parametrai — trimis
   stulpeliais su ikonomis, kaip etalone. */
.card-params { display: none; }
@media (max-width: 1023px) {
  .h-listing-card { flex-direction: column; }
  .h-img-side { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .h-img-side picture, .h-img-side picture > img { display: block; width: 100%; height: 100%; }
  .h-info-side { padding: 10px 12px 12px; gap: 6px; }
  .ap-title-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ap-title { font-size: 15px; }
  .ap-price { font-size: 17px; order: 2; }
  .ap-spec-line { display: none; }          /* pakeičia .card-params */
  .card-params { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
  .cp-item { display: flex; align-items: center; gap: 8px;
             width: calc(33.3333% - 10.6667px); min-width: 0; }
  .cp-item svg { width: 22px; height: 22px; flex: 0 0 auto; color: #9AA0A6; }
  .cp-item div { min-width: 0; }
  .cp-item i { display: block; font-style: normal; font-size: 10.5px; color: #9AA0A6; line-height: 1.2; }
  .cp-item b { display: block; font-size: 12px; font-weight: 600; color: #111827;
               line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: rgba(255,255,255,0.92); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); color: var(--accent); font-size: 0.85rem; z-index: 6; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.h-listing-card:hover .gallery-arrow, .listing-card:hover .gallery-arrow { opacity: 1; }
.gallery-arrow:hover { background: #fff; }
.gallery-arrow.left { left: 8px; }
.gallery-arrow.right { right: 8px; }

.gallery-dots { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 6; pointer-events: none; }
.gallery-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 2px rgba(0,0,0,0.4); transition: background 0.15s; }
.gallery-dot.active { background: #fff; }

.gallery-counter { position: absolute; top: 8px; right: 8px; padding: 2px 7px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.65rem; font-weight: 600; border-radius: 4px; z-index: 6; }

/* ─── Home tabs section ─── */
.home-tabs-section { background: #fff; border-top: 1px solid #f3f4f6; padding: 2.5rem 0; }
.home-tabs-header { display: flex; gap: 1.5rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.5rem; }
/* Telefone skirtukai lieka VIENOJE eilutėje ir stumiami į šoną — tai
   sąmoninga slenkama juosta savo konteineryje, ne netyčinė persipilda
   (žr. išimtį docs/mobilus-etalonas.md). Puslapio ji neplečia: slinkimas
   vyksta .home-tabs-header viduje, docW lieka lygus innerWidth. */
@media (max-width: 1023px) {
  .home-tabs-header {
    flex-wrap: nowrap;
    gap: 1.1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .home-tabs-header::-webkit-scrollbar { display: none; }
  .home-tab-btn { font-size: 0.85rem; padding-bottom: 0.55rem; flex: 0 0 auto; scroll-snap-align: center; }
}
.home-tab-btn { padding-bottom: 0.75rem; padding-left: 0.25rem; padding-right: 0.25rem; border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; font-size: 0.95rem; color: #6b7280; cursor: pointer; background: none; transition: all 0.2s; }
.home-tab-btn:hover { color: #111827; }
.home-tab-btn.active { border-bottom-color: #10b981; color: #10b981; }
.home-tab-btn-hot { color: var(--accent); font-weight: 600; }
.home-tab-btn-hot:hover { color: var(--accent-hover); }
.home-tab-btn-hot.active { border-bottom-color: var(--accent); color: var(--accent); }
.home-tab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
/* „Žiūrėti visus" — antrinis mygtukas, centruotas po kortelėmis.
   Centravimas (`margin-inline: auto`) rašomas ATSKIRAI nuo viršutinio
   tarpo: trumpinyje `margin: var(--X) auto 0` pakanka vienam neapibrėžtam
   kintamajam, ir naršyklė išmeta visą savybę — kartu su `auto`. Būtent
   taip mygtukas ir buvo atsidūręs kairėje. */
.home-tab-visi { display: flex; align-items: center; justify-content: center;
                 max-width: 320px; width: 100%;
                 margin-inline: auto; margin-top: var(--sp-5, 20px);
                 margin-bottom: 0; height: var(--btn-h);
                 border: 1px solid var(--border); border-radius: var(--r-md);
                 background: var(--surface); color: var(--text);
                 font-weight: var(--fw-semibold); text-decoration: none; }
.home-tab-visi:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 640px) { .home-tab-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .home-tab-grid { grid-template-columns: repeat(6, 1fr); } }

.home-tab-card { display: block; background: #fff; border: 1px solid #f3f4f6; border-radius: 0.5rem; overflow: hidden; transition: all 0.2s; cursor: pointer; }
.home-tab-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #d1fae5; }
.home-tab-img { position: relative; aspect-ratio: 4 / 3; background: #f3f4f6; overflow: hidden; }
.home-tab-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.home-tab-card:hover .home-tab-img img { transform: scale(1.05); }
.home-tab-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 2rem; }
.home-tab-info { padding: 0.6rem 0.7rem; }
.home-tab-title { font-size: 0.82rem; font-weight: 600; color: #111827; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-tab-spec { font-size: 0.7rem; color: #6b7280; margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-tab-price { font-size: 0.95rem; font-weight: 800; color: #111827; margin-top: 0.4rem; }
.home-tab-badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; font-size: 0.6rem; font-weight: 700; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
/* Žymos — dizaino sistemos spalvos, be oranžinės (6 skyrius). */
.badge-featured { background: var(--accent-soft); color: var(--accent); }
.badge-featured-paid { background: var(--accent) !important; color: var(--accent-contrast) !important; font-weight: 700; }
.badge-highlight { background: var(--accent) !important; color: var(--accent-contrast) !important; font-weight: 700; }
.badge-stars { background: #fbbf24; color: var(--accent-hover); font-weight: 700; }

/* ─── Day's deals: apmokėtos/paryškintos kortelės — akcento spalva ─── */
.home-tab-card-orange {
    background: var(--accent-soft) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: none !important;
}
.home-tab-card-orange:hover {
    box-shadow: 0 0 8px rgba(0,0,0,.2) !important;
    border-color: var(--accent-hover) !important;
}

/* ─── Day's deals: badges stack (top-left, vertical) ─── */
.home-tab-badges-left {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 5;
}
.home-tab-badges-left .home-tab-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
.badge-featured-paid { background: var(--accent) !important; color: var(--accent-contrast) !important; font-weight: 700; }
.badge-stars { background: #fbbf24; color: var(--accent-hover); font-weight: 700; }

/* ─── Day's deals: apmokėtos kortelės — akcento spalva ─── */
.home-tab-card-paid {
    background: var(--accent-soft) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: none !important;
}
.home-tab-card-paid:hover {
    box-shadow: 0 0 8px rgba(0,0,0,.2) !important;
    border-color: var(--accent-hover) !important;
}

/* ─── Day's deals: badges stack (top-left, vertical) ─── */
.home-tab-badges-left {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 5;
}
.home-tab-badges-left .home-tab-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
.badge-new { background: #10b981; color: #fff; }
.badge-popular { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.badge-premium { background: #8b5cf6; color: #fff; }
.badge-vin { position: absolute; bottom: 6px; left: 6px; padding: 2px 6px; background: #16a34a; color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* ─── More filters link button (top — opens Advanced Search) ─── */
.more-filters-btn { width:100%; padding:0.625rem 1rem; border:2px solid #4b5563; color:var(--accent); background:#fff; font-size:0.875rem; font-weight:600; border-radius:9999px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.5rem; transition:all 0.15s; text-decoration:none; }
.more-filters-btn:hover { background:#f3f4f6; border-color:var(--accent-hover); color:var(--accent-hover); }

/* ─── Add brand+model link ─── */
.add-brand-link { display:flex; align-items:center; gap:0.5rem; color:#4b5563; font-size:0.85rem; font-weight:500; cursor:pointer; background:none; border:none; padding:0; transition:color 0.15s; }
.add-brand-link:hover { color:var(--accent-hover); }
.add-brand-link .plus-icon { width:18px; height:18px; border:1.5px solid #6b7280; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; font-size:0.65rem; color:#6b7280; flex-shrink:0; }

/* ─── Search button (dark gray, matches AutoLeft style) ─── */
.btn-orange-search { width:100%; padding:0.7rem; background:var(--accent); color:#fff; font-size:0.9rem; font-weight:600; border-radius:0.5rem; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.5rem; transition:all 0.15s; box-shadow:0 4px 14px rgba(55,65,81,0.25); }
.btn-orange-search:hover { background:var(--accent-hover); box-shadow:0 6px 18px rgba(31,41,55,0.35); }

/* ─── More features toggle (bottom) ─── */
.more-features-link { color:#4b5563; font-size:0.85rem; font-weight:500; text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; }
.more-features-link:hover { color:var(--accent-hover); }

/* ─── Feature section title ─── */
.feature-section-title { font-size:0.85rem; font-weight:700; color:#111827; margin-bottom:0.5rem; padding-top:0.5rem; }

/* ─── Sidebar checkbox row ─── */
.sb-check-row { display:flex; align-items:center; gap:0.5rem; cursor:pointer; padding:0.25rem 0; }
.sb-check-row input[type="checkbox"] { accent-color:var(--accent); width:14px; height:14px; flex-shrink:0; }
.sb-check-row span { font-size:0.85rem; color:var(--accent); }

/* ─── Brand+Model pair (added dynamically) ─── */
.brand-pair-extra { padding-top:0.75rem; border-top:1px dashed #e5e7eb; margin-top:0.75rem; position:relative; }
.brand-pair-remove { position:absolute; top:0.5rem; right:0; width:20px; height:20px; border:none; background:transparent; color:#9ca3af; cursor:pointer; font-size:0.85rem; display:flex; align-items:center; justify-content:center; }
.brand-pair-remove:hover { color:var(--accent); }

/* ─── Search panel icon rail (autogidas style) ─── */
.sp-rail { border-right:1px solid #f3f4f6; }
.sp-rail-btn { position:relative; width:100%; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:none; }
.sp-rail-btn svg, .sp-rail-btn i { color:#6b7280; transition:color .12s; }
.sp-rail-btn svg { width:26px; height:26px; }
.sp-rail-btn i { font-size:21px; }
.sp-rail-btn:hover svg, .sp-rail-btn:hover i { color:var(--accent); }
.sp-rail-on svg, .sp-rail-on i { color:var(--accent) !important; }
.sp-rail-on::after { content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:32px; height:3px; background:var(--accent); border-radius:2px; }
.sp-label { font-size:0.8rem; font-weight:700; color:#111827; margin-bottom:0.4rem; display:block; }

/* ─── Rail flyout (hover) ─── */
.sp-rail-more { position:relative; width:100%; }
.sp-flyout { display:none; position:absolute; left:100%; top:0; z-index:150; min-width:290px; background:#fff; border:1px solid #e5e7eb; border-radius:0.75rem; box-shadow:0 8px 28px rgba(0,0,0,0.12); padding:0.25rem 0; }
.sp-rail-more:hover .sp-flyout { display:block; }
.sp-fly-item { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; font-size:0.88rem; color:var(--accent); white-space:nowrap; border-bottom:1px solid #f9fafb; text-decoration:none; }
.sp-fly-item:last-child { border-bottom:none; }
.sp-fly-item:hover { background:#f3f4f6; color:#111827; }
.sp-fly-item i { width:22px; text-align:center; color:#9ca3af; font-size:1rem; flex-shrink:0; }
.sp-fly-item:hover i { color:var(--accent); }
a.sp-rail-btn { text-decoration:none; }

[x-cloak] { display: none !important; }