/* Zerostock – shop layout + sidebar. Adjust colours to the theme variables. */

.zs-shop {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: start;
}

.zs-shop-sidebar { position: sticky; top: 6em; }
.zs-shop-sidebar__toggle { display: none; }

.zs-filter { border-bottom: 1px solid #0f2140; padding: 1rem 0; }
.zs-filter__title { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; cursor: pointer; list-style: none; color:#0f2140 }
.zs-filter__title::-webkit-details-marker { display: none; }
details.zs-filter > summary::after { content: "–"; float: right; }
details.zs-filter:not([open]) > summary::after { content: "+"; }

/* Search */
.zs-search { display: flex; border: 1px solid #0f2140; border-radius: 6px; overflow: hidden; }
.zs-search input { flex: 1; border: 0; padding: .6rem .75rem; min-width: 0; }
.zs-search button { border: 0; background: #0f2140; padding: 0 .75rem; cursor: pointer; color: white;}

/* Categories */
.zs-cat-list { list-style: none; margin: 0; padding: 0; }
.zs-cat-list--sub { padding-left: .9rem; margin: .1rem 0 .3rem; border-left: 2px solid #e5e7eb; }
.zs-cat > a,
.zs-cat-all {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    margin: 0 -.5rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}
.zs-cat > a:hover,
.zs-cat-all:hover { background: #0f2140; color: white }
.zs-cat.is-current > a,
.zs-cat-all.is-current { font-weight: 600; color: white; background: #0f2140; }
.zs-cat.is-ancestor > a { font-weight: 600; }
.zs-cat__count { margin-left: auto; font-size: .85em; opacity: .6;}
.zs-cat__count.is-current { margin-left: auto; font-size: .85em; opacity: .6; color: white}

/* Brand checkboxes */
.zs-check-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.zs-check { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; cursor: pointer; }
.zs-check input { margin: 0; }
.zs-check__count { margin-left: auto; font-size: .85em; opacity: .6; }

/* Price / quantity sliders
   Change --zs-accent to the Zerostock brand colour. */
.zs-shop-sidebar,
.zs-slider {
    --zs-accent: #0f2140;
    --zs-track: white;
    --zs-thumb: 18px;
}

.zs-slider__track {
    position: relative;
    height: var(--zs-thumb);
    margin: .25rem calc(var(--zs-thumb) / 2) 1rem;
}
.zs-slider__track::before,
.zs-slider__fill {
    content: "";
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 2px;
}
.zs-slider__track::before { left: 0; right: 0; background: var(--zs-track); }
.zs-slider__fill { background: var(--zs-accent); left: 0; right: 0; }

.zs-slider input[type="range"] {
    position: absolute;
    left: calc(var(--zs-thumb) / -2);
    width: calc(100% + var(--zs-thumb));
    top: 0;
    height: var(--zs-thumb);
    margin: 0;
    background: none;
    pointer-events: none; /* only the handles react */
    -webkit-appearance: none;
    appearance: none;
    z-index: 3;
}
.zs-slider input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; }
.zs-slider input[type="range"]::-moz-range-track { background: none; border: 0; }

.zs-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: var(--zs-thumb);
    height: var(--zs-thumb);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--zs-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: grab;
}
.zs-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: var(--zs-thumb);
    height: var(--zs-thumb);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--zs-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: grab;
}
.zs-slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.zs-slider input[type="range"]:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.1); }
.zs-slider input[type="range"]:focus { outline: none; }
.zs-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(31, 111, 235, .25); }
.zs-slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(31, 111, 235, .25); }

/* Number fields under the slider */
.zs-range { display: flex; align-items: center; gap: .5rem; }
.zs-range__field {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 .5rem;
    background: #fff;
}
.zs-range__field:focus-within { border-color: var(--zs-accent, #1f6feb); }
.zs-range__prefix { opacity: .6; margin-right: .25rem; font-size: .9em; }
.zs-range__field input {
    width: 100%;
    min-width: 0;
    border: 0;
    padding: .45rem 0;
    background: transparent;
    -moz-appearance: textfield;
}
.zs-range__field input:focus { outline: none; }
.zs-range__field input::-webkit-outer-spin-button,
.zs-range__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zs-range__sep { opacity: .5; }

/* Actions */
.zs-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.zs-filter-submit { padding: .6rem 1.25rem; border: 0; border-radius: 6px; cursor: pointer; }
.zs-filter-reset { font-size: .9rem; }

@media (max-width: 991px) {
    .zs-shop { grid-template-columns: 1fr; }
    .zs-shop-sidebar { position: static; }
    .zs-shop-sidebar__toggle { display: block; width: 100%; padding: .75rem; }
    .zs-shop-sidebar__inner { display: none; }
    .zs-shop-sidebar.is-open .zs-shop-sidebar__inner { display: block; }
}