/* ==========================================================================
   Evara London — collection listing
   Restyles the ecommerce plugin's real filter markup (bb-product-filter-*,
   tp-shop-widget, price-slider). Structure and JS hooks are untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sidebar shell — the plugin ships light panels; strip them back to type
   -------------------------------------------------------------------------- */

.ev-listing__filters .bb-shop-sidebar,
.ev-listing__filters .bb-product-filter,
.ev-listing__filters .bb-product-filter-content,
.ev-listing__filters .tp-shop-widget,
.ev-listing__filters .bb-product-form-filter {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--ev-cream);
}

.ev-listing__filters .bb-product-filter { margin-bottom: clamp(26px, 3vw, 40px); }
.ev-listing__filters .tp-shop-widget { margin-bottom: clamp(22px, 2.6vw, 32px) !important; }

/* --------------------------------------------------------------------------
   Filter headings
   -------------------------------------------------------------------------- */

.ev-listing__filters .bb-product-filter-title,
.ev-listing__filters .tp-shop-widget-title {
    font-family: var(--ev-font-display) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase;
    color: var(--ev-cream) !important;
    background: transparent !important;
    padding: 0 0 12px !important;
    margin: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(163, 152, 115, .35) !important;
}

.ev-listing__filters .bb-product-filter-title .icon,
.ev-listing__filters .bb-product-filter-title svg { color: var(--ev-gold) !important; }

/* --------------------------------------------------------------------------
   Filter lists
   -------------------------------------------------------------------------- */

.ev-listing__filters .bb-product-filter-items,
.ev-listing__filters .product-filter-item,
.ev-listing__filters ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
}

.ev-listing__filters .bb-product-filter-item { margin-bottom: 11px; background: transparent !important; }

.ev-listing__filters .bb-product-filter-link,
.ev-listing__filters .bb-product-filter-item a,
.ev-listing__filters label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ev-font-body) !important;
    font-size: 13.5px !important;
    font-weight: 300 !important;
    letter-spacing: .02em;
    text-transform: none !important;
    color: rgba(255, 255, 255, .74) !important;
    background: transparent !important;
    transition: color .25s ease;
}

.ev-listing__filters .bb-product-filter-link:hover,
.ev-listing__filters .bb-product-filter-item a:hover,
.ev-listing__filters label:hover { color: var(--ev-gold-bright) !important; }

.ev-listing__filters .bb-product-filter-link.active,
.ev-listing__filters .bb-product-filter-items.active > .bb-product-filter-link { color: var(--ev-gold) !important; }

/* the folder / chevron glyphs beside each category */
.ev-listing__filters .bb-product-filter-link .icon,
.ev-listing__filters .bb-product-filter-link svg { color: var(--ev-gold) !important; opacity: .75; width: 14px; height: 14px; }

/* nested children indent rather than sitting flush */
.ev-listing__filters .bb-product-filter-items .bb-product-filter-items { padding-left: 18px; margin-top: 10px; }

/* --------------------------------------------------------------------------
   Checkboxes (metal, attributes)
   -------------------------------------------------------------------------- */

.ev-listing__filters input[type="checkbox"],
.ev-listing__filters input[type="radio"] {
    accent-color: var(--ev-gold);
    width: 14px;
    height: 14px;
    margin: 0 8px 0 0;
    background: transparent;
}

.ev-listing__filters .filter-checkbox label { cursor: pointer; }
.ev-listing__filters .bb-product-filter-attribute-item { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Price slider
   -------------------------------------------------------------------------- */

.ev-listing__filters .price-slider,
.ev-listing__filters .bb-product-price-filter { background: transparent !important; }

.ev-listing__filters .noUi-target,
.ev-listing__filters .ui-slider {
    background: rgba(163, 152, 115, .25) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 2px !important;
    margin: 14px 0 18px;
}

.ev-listing__filters .noUi-connect,
.ev-listing__filters .ui-slider-range { background: var(--ev-gold) !important; }

/* 16px, not 13: these are drag targets, and 13px is a fiddly grab — especially
   on a touch screen. The !important flags are needed to beat theme.css and
   front-ecommerce.css, which both size the jQuery UI handle. */
.ev-listing__filters .noUi-handle,
.ev-listing__filters .ui-slider-handle {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--ev-gold-bright) !important;
    border: 2px solid var(--ev-navy) !important;
    box-shadow: none !important;
    cursor: grab;
    top: -7px !important;
    margin-left: -8px !important;
    transition: transform .2s ease;
}
.ev-listing__filters .ui-slider-handle:hover { transform: scale(1.15); }
.ev-listing__filters .ui-slider-handle:active { cursor: grabbing; }
.ev-listing__filters .ui-slider-handle:focus-visible {
    outline: 2px solid var(--ev-gold-bright);
    outline-offset: 2px;
}

.ev-listing__filters .noUi-handle::before,
.ev-listing__filters .noUi-handle::after { display: none !important; }

.ev-listing__filters .input-range,
.ev-listing__filters .input-range-label,
.ev-listing__filters .from,
.ev-listing__filters .to {
    font-family: var(--ev-font-body) !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, .7) !important;
    background: transparent !important;
    border: 0 !important;
}

.ev-listing__filters .input-range { display: flex; justify-content: space-between; gap: 12px; }

/* --------------------------------------------------------------------------
   Search widget
   -------------------------------------------------------------------------- */

.ev-listing__filters .tp-sidebar-search,
.ev-listing__filters .tp-sidebar-search form { background: transparent !important; }

.ev-listing__filters .tp-sidebar-search-input { position: relative; }

.ev-listing__filters .tp-sidebar-search-input input,
.ev-listing__filters input[type="search"],
.ev-listing__filters input[type="text"] {
    width: 100%;
    background: rgba(11, 23, 49, .5) !important;
    border: 1px solid rgba(163, 152, 115, .35) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
    padding: 12px 44px 12px 16px !important;
    font-family: var(--ev-font-body) !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

.ev-listing__filters input::placeholder { color: rgba(253, 224, 191, .4) !important; }
.ev-listing__filters input:focus { border-color: var(--ev-gold) !important; outline: none; }

.ev-listing__filters .tp-sidebar-search-input button {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 44px;
    background: transparent !important;
    border: 0 !important;
    color: var(--ev-gold) !important;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Toolbar: count + sort
   -------------------------------------------------------------------------- */

.ev-listing__count {
    font-family: var(--ev-font-body);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.ev-listing__sort .ev-select,
.ev-listing__main select {
    background: rgba(11, 23, 49, .5) !important;
    border: 1px solid rgba(163, 152, 115, .35) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
    padding: 11px 38px 11px 16px !important;
    font-family: var(--ev-font-body) !important;
    font-size: 12px !important;
    letter-spacing: .1em;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ev-gold) 50%),
                      linear-gradient(135deg, var(--ev-gold) 50%, transparent 50%) !important;
    background-position: calc(100% - 20px) center, calc(100% - 14px) center !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

.ev-listing__main select option { background: var(--ev-navy-deep); color: var(--ev-cream); }
.ev-listing__sort .ev-select:focus { border-color: var(--ev-gold) !important; outline: none; }

/* --------------------------------------------------------------------------
   Product grid — four across, per the design
   -------------------------------------------------------------------------- */

.ev-listing__main .ev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) { .ev-listing__main .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .ev-listing__main .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .ev-listing__main .ev-grid { grid-template-columns: 1fr; } }

/* sidebar column a touch narrower so the grid gets the room */
.ev-listing { grid-template-columns: 240px minmax(0, 1fr); }

@media (max-width: 991px) { .ev-listing { grid-template-columns: 1fr; } }

/* ==========================================================================
   Evara's own filter blocks (design-exact), and suppression of the plugin's
   category tree + sidebar search which the design does not use.
   ========================================================================== */

/* the design has no sidebar search — search lives in the header */
.ev-listing__filters .tp-sidebar-search { display: none !important; }

/* hide the plugin's category tree (All categories / folder icons / chevrons);
   Evara renders its own flat list above it */
.ev-listing__filters .bb-product-filter:has(> .bb-product-filter-title) .bb-product-filter-items .svg-icon-ti-ti-folder,
.ev-listing__filters .svg-icon-ti-ti-chevron-left,
.ev-listing__filters .svg-icon-ti-ti-folder { display: none !important; }

.ev-filter { margin-bottom: clamp(26px, 3vw, 40px); }

.ev-filter__title {
    font-family: var(--ev-font-display);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ev-cream);
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(163, 152, 115, .35);
}

.ev-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.ev-filter__link {
    font-family: var(--ev-font-body);
    font-size: 13.5px;
    font-weight: 300;
    color: rgba(255, 255, 255, .78);
    transition: color .25s ease;
}

.ev-filter__link:hover { color: var(--ev-gold-bright); }
.ev-filter__link.is-active { color: var(--ev-gold); }
.ev-filter__count { color: rgba(255, 255, 255, .42); font-size: 12px; margin-left: 3px; }

/* ---------- pagination, per the design ---------- */

.ev-pagination .pagination { gap: 10px; }

.ev-pagination .page-item .page-link,
.ev-pagination .page-item span,
.ev-pagination .page-item a {
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(163, 152, 115, .45);
    background: transparent;
    color: var(--ev-cream);
    font-family: var(--ev-font-body);
    font-size: 12px;
    letter-spacing: .14em;
    border-radius: 0;
}

.ev-pagination .page-item.active .page-link,
.ev-pagination .page-item.active span {
    background: var(--ev-gold) !important;
    border-color: var(--ev-gold) !important;
    color: var(--ev-navy) !important;
}

.ev-pagination .page-item a:hover { background: rgba(163, 152, 115, .18); border-color: var(--ev-gold); color: var(--ev-gold-bright); }

/* The plugin's category tree duplicates Evara's flat list — the folder glyph
   only appears there, so it's a safe hook to suppress the whole block. */
.ev-listing__filters .bb-product-filter:has(.svg-icon-ti-ti-folder),
.ev-listing__filters .bb-product-filter:has(.svg-icon-ti-ti-chevron-left) { display: none !important; }

/* Three per row on the listing and category pages: at four across, the name
   and price were too cramped to read at a glance. */
.ev-listing__grid.ev-grid--4,
.ev-listing .ev-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .ev-listing__grid.ev-grid--4,
    .ev-listing .ev-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ev-listing__grid.ev-grid--4,
    .ev-listing .ev-grid--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Filter checkboxes

   front-ecommerce.css hides the native input (.bb-product-filter-items li
   input { display: none }) and expects the theme to draw a replacement on the
   label. Evara never drew one, so "Show only discounted pieces" was a line of
   text with no box and no feedback — operable, because the label is bound to
   the input, but with nothing to tell you so. This is that missing control.
   ========================================================================== */

.ev-listing__filters .bb-product-filter-items.filter-checkbox .bb-product-filter-item {
    display: flex;
    align-items: center;
}

.ev-listing__filters .bb-product-filter-items.filter-checkbox label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-family: var(--ev-font-body);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    transition: color .25s ease;
}
.ev-listing__filters .bb-product-filter-items.filter-checkbox label:hover { color: var(--ev-cream); }

/* the box */
.ev-listing__filters .bb-product-filter-items.filter-checkbox label::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(163, 152, 115, .55);
    background: rgba(5, 13, 31, .6);
    transition: border-color .25s ease, background .25s ease;
}

/* the tick, drawn as a rotated corner so it needs no font or image */
.ev-listing__filters .bb-product-filter-items.filter-checkbox label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 5px;
    height: 9px;
    border: solid var(--ev-navy);
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-60%) rotate(45deg) scale(0);
    transition: transform .18s ease;
}

.ev-listing__filters .bb-product-filter-items.filter-checkbox input:checked + label::before {
    background: var(--ev-gold-bright);
    border-color: var(--ev-gold-bright);
}
.ev-listing__filters .bb-product-filter-items.filter-checkbox input:checked + label::after {
    transform: translateY(-60%) rotate(45deg) scale(1);
}

/* keyboard users need to see focus, since the input itself is invisible */
.ev-listing__filters .bb-product-filter-items.filter-checkbox input:focus-visible + label::before {
    outline: 2px solid var(--ev-gold-bright);
    outline-offset: 2px;
}

/* ---------- price slider ---------- */

/* 13px handles are hard to grab; the track stays slim but the grips do not. */
.ev-listing__filters .price-slider.ui-slider {
    height: 3px;
    margin: 10px 8px 22px;
    border: 0;
    background: rgba(163, 152, 115, .25);
}
.ev-listing__filters .price-slider .ui-slider-range {
    background: var(--ev-gold);
    height: 3px;
}
.ev-listing__filters .bb-product-price-filter-info {
    font-family: var(--ev-font-body);
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(255, 255, 255, .68);
}