/* LEGACY FILTER RAIL — scv2 RESTYLE (2026-08-06, preview-gated; r3 rework after operator
 * rejected the r2 look — now mirrors templates6/category_v2/filters.tpl's rendered values).
 *
 * Brings templates6/components/filters_container.tpl into visual line with the category-v2
 * rail WITHOUT rewriting its filter machinery. Deliberate: that rail is 273 lines covering
 * brand checkboxes, stock, price intervals and param filters in five render modes (checkbox
 * lists, plain selects, select2 multiselects, interval sliders), every one carrying an
 * onchange="filter_product_listing(...)" that must keep working. The r3 pass added three
 * GATED MARKUP touches in filters_container.tpl (a Marcă group header, parens stripped off
 * counts, currency word on RON price rows) — label text only, never a name=/value=/onchange=.
 *
 * Scope: .sc-legacyrail = the sidebar column, added by product_categories_pictures_front.tpl
 * ONLY while the scv2 preview gate is on. .sc-legacyrow = the listing row (H1, sort select,
 * mobile Filtru trigger), same gate. With the gate off this file is not even loaded. The
 * sidebar also carries .scv2 so the design tokens (--scv2-*) resolve there — they are
 * declared on .scv2 itself in category_v2.css, not on :root. .sc-legacyrow does NOT carry
 * .scv2 (it would retype the whole legacy toolbar/pager), so every var() here keeps an
 * explicit fallback matching category_v2.css's token block.
 *
 * ⚠ DO NOT rename this to .scv2-rail. That class is ALREADY the v2 design's own filter rail
 * (templates6/category_v2/page.tpl:44), and category_v2.css declares `.scv2-rail{display:none}`
 * plus a desktop sticky override. This page loads category_v2.css for the cards, so reusing
 * the name silently applies both. The distinct prefix is deliberate.
 *
 * ⚠ Checkbox visuals live on label:before, NOT on the input. custom.css's .skinnedCheckBox
 * skin sets input{display:none} and draws a FontAwesome glyph via +label:before — these
 * selectors deliberately out-specify that skin (extra .sc-legacyrail class + li element).
 *
 * ⚠ The !importants in this file are LOAD-BEARING, not sloppiness (r6 review fix). The legacy
 * skin fights back at higher specificity or with !important of its own, and this sheet is
 * gate-scoped so the nuclear option cannot leak: `.filtersContainer .element .filterTitle`
 * (0,3,0) + its `.bordered` arm (0,4,0) beat our (0,2,0) title rule; the `.m-b-1` utility is
 * margin-bottom:1rem!important; the shared alias block in custom.css sets border-radius:0
 * !important on `.filtersContainer .element select` AND the toolbar sort select; and the
 * skinnedCheckBox `+label:before` margin-right:.5rem has an !important duplicate. Same war in
 * the mobile overlay at (1,3,1)/(1,4,1). Removing any !important below silently re-legacies
 * that property — check the r6 review findings before "cleaning" them.
 *
 * NOT a pixel-match for the v2 rail's DATA: v2 facet structures (Disponibilitate/Livrare
 * groups, facet search, selected-filter pills, coverage-ranked default_open) are v2-computed
 * and the legacy arm never builds them. This is coherence, not equivalence.
 */

/* ---- the rail shell -------------------------------------------------- */
.sc-legacyrail {
    background: #fff;
    padding: 0 .25rem 1rem 0;
}

/* "Filtrare produse:" heading — the v2 rail has none; start at the first group */
.sc-legacyrail .sideBarHeader { display: none; }

/* ---- group blocks — v2 .scv2-fgroup: border-TOP separators ------------ */
.sc-legacyrail .element {
    border-top: 1px solid var(--scv2-line, #E7E4EF);
    border-bottom: 0;
    padding: 13px 0;
    margin: 0;
}
.sc-legacyrail .element:first-of-type {
    border-top: 0;
    padding-top: 2px;
}

/* group headings — legacy span.filterTitle, v2 .scv2-fgt type treatment.
   Collapse behaviour = the tiny inline script in the page template. */
.sc-legacyrail .filterTitle {
    display: flex !important;
    align-items: center;
    position: relative;
    margin: 0 0 9px 0 !important;
    padding: 0 1.1rem 0 0 !important;
    font-size: 11px;
    font-weight: 800 !important;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--scv2-ink, #201D33);
    background: none;
    border: 0 !important;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
/* caret — same triangle as v2 .scv2-car */
.sc-legacyrail .filterTitle:after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--scv2-soft, #6B6580);
    transition: transform .18s;
}
.sc-legacyrail .filterTitle.sc-legacyrail-closed:after { transform: rotate(-90deg); }
/* collapsed: hide everything after the title inside the group (ul, selects, sliders) */
.sc-legacyrail .filterTitle.sc-legacyrail-closed ~ * { display: none; }

/* ---- option rows — v2 .scv2-fopt rhythm ------------------------------- */
.sc-legacyrail ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sc-legacyrail li {
    margin: 0;
    padding: 0;
}
.sc-legacyrail li label {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 5px 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--scv2-ink2, #3A3550);
    cursor: pointer;
}

/* the checkbox — drawn on label:before (see header note on the FA skin) */
.sc-legacyrail li input[type=checkbox] + label:before {
    content: "";
    font-family: inherit;
    display: block;
    flex: none;
    margin: 0 !important;
    width: 17px;
    height: 17px;
    box-sizing: border-box;
    border: 1.5px solid var(--scv2-line2, #D8D4E4);
    border-radius: 4px;
    background: #fff no-repeat center;
    transition: background-color .12s, border-color .12s;
}
.sc-legacyrail li input[type=checkbox]:checked + label:before {
    content: "";
    border-color: var(--scv2-accent, #D72680);
    background-color: var(--scv2-accent, #D72680);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9'%3E%3Cpath d='M1 4.5 4 7.5 10 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* hover darkens to ink (v2 .scv2-fopt:hover), replacing the skin's old pink */
.sc-legacyrail li input[type=checkbox] + label:hover { color: var(--scv2-ink, #201D33); }

/* per-option count — legacy renders <small>N</small> (parens stripped by the
   gated markup); pushed into its own right-aligned column like v2 .scv2-n */
.sc-legacyrail li label small {
    flex: none;
    margin-left: auto;
    padding-left: 8px;
    font-size: 12px;
    color: var(--scv2-soft, #6B6580);
    font-variant-numeric: tabular-nums;
}
/* unavailable options: legacy wraps the name in <s>. The <s> wraps BOTH the name
   and the <small> count, so it must itself become the flex row filler — otherwise
   the count's margin-left:auto has no flex context and the bare gated number
   renders glued to the struck name ("Mahon3"). */
.sc-legacyrail li label s {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    color: #b3adc2;
    text-decoration: line-through;
}

/* "-- mai multe --" reveal link on >10-value param lists */
.sc-legacyrail .showAllFilterDetails a {
    display: inline-block;
    padding: 5px 0 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--scv2-accent, #D72680);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- selects (param interval endpoints, forced dropdowns) -------------
   .element in the selector: must at least tie .filtersContainer .element select
   (0,2,1) — which sets width:100% and border-color:#eee — so our later-in-order
   width:auto/border win the tie. width matters because the r6 template pass gated
   OFF the legacy inline width:auto on the interval pair; without this rule the
   two selects go 100%-wide and stack vertically. radius needs !important against
   custom.css's border-radius:0!important alias block. */
.sc-legacyrail .element select {
    width: auto;
    max-width: 100%;
    margin: 2px 0 6px 0;
    padding: .35rem .5rem;
    font-size: 13px;
    font-family: inherit;
    color: var(--scv2-ink, #201D33);
    background-color: #fff;
    border: 1.5px solid var(--scv2-line, #E7E4EF);
    border-radius: var(--scv2-radius-sm, 6px) !important;
}
.sc-legacyrail .element select:focus {
    outline: 0;
    border-color: var(--scv2-ink2, #3A3550);
}
/* select2 multiselects (>10-value params with force_drop_down): box only */
.sc-legacyrail .select2-container .select2-selection--multiple,
.sc-legacyrail .select2-container .select2-selection--single {
    border: 1.5px solid var(--scv2-line, #E7E4EF);
    border-radius: var(--scv2-radius-sm, 6px);
}

/* ---- "șterge filtrele" reset link ------------------------------------ */
.sc-legacyrail .b-t-1 { border-top-color: var(--scv2-line, #E7E4EF) !important; }
.sc-legacyrail .b-t-1 a.small {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--scv2-accent, #D72680);
}

/* ---- below-rail blocks: Ghiduri / Categorii similare / Recomandări ----
   These sit OUTSIDE .element (legacy grey-bar styling in custom.css:15507);
   neutralise the grey bar + -25px bleed and retype as v2 groups. */
.sc-legacyrail .siblingCategoriesContainer,
.sc-legacyrail .sideBarContainer {
    margin: 10px 0 0 0;
    padding: 13px 0 0 0;
    border-top: 1px solid var(--scv2-line, #E7E4EF);
    background: none;
}
.sc-legacyrail .siblingCategoriesContainer h4,
.sc-legacyrail .sideBarContainer h4 {
    margin: 0 0 9px 0;
    padding: 0;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--scv2-ink, #201D33);
    background: none;
    border: 0;
}
.sc-legacyrail .siblingCategoriesContainer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sc-legacyrail .siblingCategoriesContainer ul li a,
.sc-legacyrail .siblingCategoriesContainer ul li span {
    display: block;
    padding: 5px 0;
    font-size: 13.5px;
    line-height: 1.35;
    border: 0;
    background: none;
}
.sc-legacyrail .siblingCategoriesContainer ul li a { color: var(--scv2-ink2, #3A3550); }
.sc-legacyrail .siblingCategoriesContainer ul li a:hover {
    color: var(--scv2-accent, #D72680);
    background: none;
}
.sc-legacyrail .siblingCategoriesContainer ul li span { color: var(--scv2-soft, #6B6580); }

/* ---- mobile filter overlay — #filtersMobileOverlay is the legacy modal the
   filter form is MOVED into on phones (site_tiles.js). It sits OUTSIDE
   .sc-legacyrail, but this stylesheet only loads while the gate is on, so the
   id scope is inherently gated. Mirrors the rail treatment; NO caret and no
   pointer cursor on titles — the collapse script requires a .sc-legacyrail
   ancestor and is deliberately inert here. Without the flex/right-align rules
   the gated bare counts read glued to the label ("500–1000 Lei1"). ---- */
#filtersMobileOverlay .modal-body > div .element {
    border-top: 1px solid #E7E4EF;
    border-bottom: 0;
    padding: 13px 0;
    margin: 0;
}
#filtersMobileOverlay .modal-body > div .element:first-of-type {
    border-top: 0;
    padding-top: 2px;
}
#filtersMobileOverlay .filterTitle {
    display: block !important;
    margin: 0 0 9px 0 !important;
    padding: 0 !important;
    font-size: 11px;
    font-weight: 800 !important;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: #201D33;
    background: none;
    border: 0 !important;
}
#filtersMobileOverlay .modal-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#filtersMobileOverlay .modal-body li {
    margin: 0;
    padding: 0;
}
#filtersMobileOverlay .modal-body li label {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.35;
    color: #3A3550;
}
#filtersMobileOverlay .modal-body li input[type=checkbox] + label:before {
    content: "";
    font-family: inherit;
    display: block;
    flex: none;
    margin: 0 !important;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1.5px solid #D8D4E4;
    border-radius: 4px;
    background: #fff no-repeat center;
}
#filtersMobileOverlay .modal-body li input[type=checkbox]:checked + label:before {
    content: "";
    border-color: #D72680;
    background-color: #D72680;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9'%3E%3Cpath d='M1 4.5 4 7.5 10 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#filtersMobileOverlay .modal-body li label small {
    flex: none;
    margin-left: auto;
    padding-left: 8px;
    font-size: 12.5px;
    color: #6B6580;
    font-variant-numeric: tabular-nums;
}
#filtersMobileOverlay .modal-body li label s {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    color: #b3adc2;
    text-decoration: line-through;
}

/* ---- page chrome under the gate (scoped by .sc-legacyrow on the listing row):
   H1, sort select and the mobile Filtru trigger read v2 instead of legacy ---- */
.sc-legacyrow h1 {
    font-size: 33px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--scv2-ink, #201D33);
}
@media (max-width: 760px) {
    .sc-legacyrow h1 { font-size: 26px; }
}
/* the legacy toolbar span draws a 1px #eee box with 48px left padding (reserved
   for the hidden list-view toggle) — kill the box, keep only the select */
.sc-legacyrow .listPageTools_top .sortingContainer span {
    padding-left: 0;
    border: 0;
}
.sc-legacyrow .sortingContainer select.custom-select {
    height: 36px;
    padding: 0 1.75rem 0 .75rem;
    font-size: 13px;
    font-family: inherit;
    color: var(--scv2-ink, #201D33);
    border: 1.5px solid var(--scv2-line2, #D8D4E4);
    /* !important vs custom.css's shared border-radius:0!important alias, which
       names this exact sort select — see the header note */
    border-radius: 8px !important;
    background-color: #fff;
}
/* mobile filter-overlay trigger — inline plum style is gated OFF in the template.
   Specificity must beat custom.css's `.listPageTools_top .sortingContainer span
   #showFiltersOverlay` (1,2,2), so the full chain is spelled out — WHICH ALSO
   out-specifies the legacy desktop display:none media rule, hence the paired
   min-width:992px re-hide below. Ship these two together or the trigger appears
   on desktop. */
.sc-legacyrow .listPageTools_top .sortingContainer span #showFiltersOverlay {
    display: inline-block;
    padding: .4rem .8rem;
    margin: 0 .5rem 0 0;
    background: var(--scv2-ink, #201D33);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    border-radius: 8px;
}
@media (min-width: 992px) {
    .sc-legacyrow .listPageTools_top .sortingContainer span #showFiltersOverlay { display: none; }
}