/* ═══════════════════════════════════════════════
   JustOrder Category Pills — Stylesheet
   Mobile-first horizontal pill navigation
   Hardened against theme bleed
   ═══════════════════════════════════════════════ */

.jocp-pills,
.jocp-pills *,
.jocp-pills *::before,
.jocp-pills *::after {
    box-sizing: border-box;
}

/* ─── ROOT WRAPPER ─────────────────────────── */
.jocp-pills {
    --jocp-pill-color:        #374151;
    --jocp-pill-bg:           #f3f4f6;
    --jocp-pill-border:       transparent;
    --jocp-pill-color-hover:  #111827;
    --jocp-pill-bg-hover:     #e5e7eb;
    --jocp-pill-color-active: #ffffff;
    --jocp-pill-bg-active:    var(--jocp-accent, #111118);
    --jocp-pill-radius:       999px;
    --jocp-pill-pad-y:        10px;
    --jocp-pill-pad-x:        16px;
    --jocp-pill-font:         0.875rem;
    --jocp-edge-bg:           #ffffff;

    position: relative;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Contain horizontal overflow so list never blows out the column */
    overflow: hidden;
}

/* ─── SCROLLER ─────────────────────────────── */
/* The element that physically scrolls horizontally on mobile.   */
.jocp-pills .jocp-pills__scroller {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* breathing room so first/last pills aren't kissing the edges
       and so focus rings & active shadows don't get clipped */
    padding: 6px 4px !important;
    margin: -6px -4px !important;
}
.jocp-pills .jocp-pills__scroller::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* When wrap mode is enabled, kill the scrolling behaviour */
.jocp-pills--wrap .jocp-pills__scroller {
    overflow: visible;
    scroll-snap-type: none;
}

/* ─── LIST ─────────────────────────────────── */
.jocp-pills .jocp-pills__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: max-content;             /* lets content extend past container so it scrolls */
    min-width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.jocp-pills--wrap .jocp-pills__list {
    flex-wrap: wrap;
    width: auto;
}

.jocp-pills .jocp-pills__item {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    scroll-snap-align: start;
}
.jocp-pills .jocp-pills__item::before,
.jocp-pills .jocp-pills__item::marker {
    content: none !important;
    display: none !important;
}

/* ─── PILL — base ──────────────────────────── */
/* Selector chain wins against most theme rules like `.entry-content a`. */
.jocp-pills .jocp-pills__list .jocp-pill,
.jocp-pills a.jocp-pill,
.jocp-pills button.jocp-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--jocp-pill-pad-y) var(--jocp-pill-pad-x) !important;
    margin: 0 !important;
    border: 1.5px solid var(--jocp-pill-border) !important;
    border-radius: var(--jocp-pill-radius) !important;
    background-color: var(--jocp-pill-bg) !important;
    background-image: none !important;
    color: var(--jocp-pill-color) !important;
    font-family: inherit !important;
    font-size: var(--jocp-pill-font) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 40px;
    transition: background-color .2s ease,
                color .2s ease,
                border-color .2s ease,
                transform .12s ease,
                box-shadow .2s ease;
}

/* Stop themes from drawing underlines on inner spans */
.jocp-pills .jocp-pill *,
.jocp-pills .jocp-pill *::before,
.jocp-pills .jocp-pill *::after {
    text-decoration: none !important;
    border: none !important;
    background: none;
    box-shadow: none !important;
}

/* Hover */
.jocp-pills .jocp-pill:hover {
    background-color: var(--jocp-pill-bg-hover) !important;
    color: var(--jocp-pill-color-hover) !important;
    border-color: var(--jocp-pill-bg-hover) !important;
    text-decoration: none !important;
}

/* Press feedback — subtle, snappy */
.jocp-pills .jocp-pill:active {
    transform: scale(0.96);
}

/* Keyboard focus ring (a11y)
   Uses currentColor so it never picks up a clashing brand colour */
.jocp-pills .jocp-pill:focus { outline: none !important; }
.jocp-pills .jocp-pill:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

/* Active state (current category page) */
.jocp-pills .jocp-pill.is-active {
    background-color: var(--jocp-pill-bg-active) !important;
    color: var(--jocp-pill-color-active) !important;
    border-color: var(--jocp-pill-bg-active) !important;
    box-shadow: 0 2px 10px rgba(17,17,24,.22) !important;
}
.jocp-pills .jocp-pill.is-active:hover {
    background-color: var(--jocp-pill-bg-active) !important;
    color: var(--jocp-pill-color-active) !important;
    filter: brightness(1.1);
}

/* ─── COUNT BADGE ──────────────────────────── */
.jocp-pills .jocp-pill__label {
    display: inline-block !important;
    color: inherit !important;
    background: transparent !important;
}

.jocp-pills .jocp-pill__count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    padding: 1px 8px !important;
    border-radius: 999px !important;
    background-color: rgba(0,0,0,.06) !important;
    color: inherit !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border: none !important;
    opacity: 0.85;
}

.jocp-pills .jocp-pill.is-active .jocp-pill__count {
    background-color: rgba(255,255,255,.20) !important;
    color: var(--jocp-pill-color-active) !important;
    opacity: 1;
}

/* ────────────────────────────────────────────
   STYLE VARIANT: FILLED (default)
   ──────────────────────────────────────────── */
/* Already handled by base styles above */

/* ────────────────────────────────────────────
   STYLE VARIANT: OUTLINED
   ──────────────────────────────────────────── */
.jocp-pills.jocp-pills--outlined .jocp-pill {
    background-color: transparent !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.jocp-pills.jocp-pills--outlined .jocp-pill:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}
.jocp-pills.jocp-pills--outlined .jocp-pill.is-active {
    background-color: var(--jocp-accent, #111118) !important;
    border-color: var(--jocp-accent, #111118) !important;
    color: #fff !important;
}
.jocp-pills.jocp-pills--outlined .jocp-pill__count {
    background-color: rgba(0,0,0,.05) !important;
}

/* ────────────────────────────────────────────
   STYLE VARIANT: SOFT (tinted accent)
   ──────────────────────────────────────────── */
.jocp-pills.jocp-pills--soft .jocp-pill {
    background-color: color-mix(in srgb, var(--jocp-accent, #111118) 8%, transparent) !important;
    color: var(--jocp-accent, #111118) !important;
    border-color: transparent !important;
}
.jocp-pills.jocp-pills--soft .jocp-pill:hover {
    background-color: color-mix(in srgb, var(--jocp-accent, #111118) 14%, transparent) !important;
}
.jocp-pills.jocp-pills--soft .jocp-pill.is-active {
    background-color: var(--jocp-accent, #111118) !important;
    color: #fff !important;
}
.jocp-pills.jocp-pills--soft .jocp-pill__count {
    background-color: color-mix(in srgb, var(--jocp-accent, #111118) 12%, transparent) !important;
}
.jocp-pills.jocp-pills--soft .jocp-pill.is-active .jocp-pill__count {
    background-color: rgba(255,255,255,.18) !important;
}

/* Fallback for browsers without color-mix() — solid tint based on accent */
@supports not (color: color-mix(in srgb, red, blue)) {
    .jocp-pills.jocp-pills--soft .jocp-pill {
        background-color: rgba(17,17,24,.06) !important;
        color: #111118 !important;
    }
    .jocp-pills.jocp-pills--soft .jocp-pill:hover {
        background-color: rgba(17,17,24,.12) !important;
    }
}

/* ────────────────────────────────────────────
   EDGE FADES — hint that there is more to scroll
   ──────────────────────────────────────────── */
.jocp-pills__edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .25s ease;
}

.jocp-pills__edge--left {
    left: 0;
    background: linear-gradient(to right,
        var(--jocp-edge-bg, #fff) 10%,
        color-mix(in srgb, var(--jocp-edge-bg, #fff) 50%, transparent) 60%,
        transparent 100%);
}
.jocp-pills__edge--right {
    right: 0;
    background: linear-gradient(to left,
        var(--jocp-edge-bg, #fff) 10%,
        color-mix(in srgb, var(--jocp-edge-bg, #fff) 50%, transparent) 60%,
        transparent 100%);
}

/* JS toggles these classes based on scroll position */
.jocp-pills.is-scrollable .jocp-pills__edge--right { opacity: 1; }
.jocp-pills.is-scrolled-start .jocp-pills__edge--left  { opacity: 0; }
.jocp-pills.is-scrolled-mid   .jocp-pills__edge--left  { opacity: 1; }
.jocp-pills.is-scrolled-end   .jocp-pills__edge--right { opacity: 0; }
.jocp-pills.is-scrolled-end   .jocp-pills__edge--left  { opacity: 1; }

/* Fallback edge-fade for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
    .jocp-pills__edge--left,
    .jocp-pills__edge--right {
        background: linear-gradient(to right, var(--jocp-edge-bg, #fff), transparent);
    }
    .jocp-pills__edge--right {
        background: linear-gradient(to left,  var(--jocp-edge-bg, #fff), transparent);
    }
}

/* ────────────────────────────────────────────
   COLLAPSE / SHOW-ALL TOGGLE
   ──────────────────────────────────────────── */

/* Hidden category pills — collapsed state */
.jocp-pills--collapsible.is-collapsed .jocp-pills__item.is-hidden {
    display: none;
}

/* When expanded, show all items with a soft fade-in stagger */
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden {
    animation: jocp-fade-in 0.28s ease both;
}
@keyframes jocp-fade-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}

/* Stagger the reveal a bit (only first 8, anything past that just appears) */
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+1) { animation-delay: 0.00s; }
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+2) { animation-delay: 0.03s; }
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+3) { animation-delay: 0.06s; }
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+4) { animation-delay: 0.09s; }
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+5) { animation-delay: 0.12s; }
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+6) { animation-delay: 0.15s; }
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+7) { animation-delay: 0.18s; }
.jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden:nth-child(n+8) { animation-delay: 0.21s; }

/* The toggle button itself — sits in the row like a pill but visually distinct */
.jocp-pills .jocp-pill--toggle {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--jocp-accent, #111118) !important;
    border: 1.5px dashed color-mix(in srgb, var(--jocp-accent, #111118) 35%, transparent) !important;
    box-shadow: none !important;
}

/* Fallback for no color-mix() */
@supports not (color: color-mix(in srgb, red, blue)) {
    .jocp-pills .jocp-pill--toggle {
        border-color: rgba(17,17,24,.35) !important;
    }
}

.jocp-pills .jocp-pill--toggle:hover {
    background-color: color-mix(in srgb, var(--jocp-accent, #111118) 6%, transparent) !important;
    border-color: var(--jocp-accent, #111118) !important;
    color: var(--jocp-accent, #111118) !important;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .jocp-pills .jocp-pill--toggle:hover {
        background-color: rgba(17,17,24,.06) !important;
    }
}

/* Toggle never gets the active treatment — it's a control, not a category */
.jocp-pills .jocp-pill--toggle.is-active {
    background-color: transparent !important;
    color: var(--jocp-accent, #111118) !important;
}

/* Variant overrides — keep the toggle visually tied to its parent style */
.jocp-pills.jocp-pills--outlined .jocp-pill--toggle {
    border-style: dashed !important;
    border-color: #b3b8c2 !important;
    color: #374151 !important;
}
.jocp-pills.jocp-pills--outlined .jocp-pill--toggle:hover {
    border-color: #6b7280 !important;
    background-color: #f9fafb !important;
    color: #111827 !important;
}

.jocp-pills.jocp-pills--soft .jocp-pill--toggle {
    background-color: transparent !important;
    border-style: dashed !important;
}

/* Compact "+N" badge inside the toggle pill */
.jocp-pills .jocp-pill__count--hidden {
    background-color: color-mix(in srgb, var(--jocp-accent, #111118) 10%, transparent) !important;
    color: var(--jocp-accent, #111118) !important;
    font-weight: 500 !important;
    opacity: 1;
}
@supports not (color: color-mix(in srgb, red, blue)) {
    .jocp-pills .jocp-pill__count--hidden {
        background-color: rgba(17,17,24,.10) !important;
    }
}

/* Chevron — rotates 180° when expanded */
.jocp-pill__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    transition: transform 0.25s ease;
    line-height: 0;
}
.jocp-pill__chevron svg {
    display: block;
    /* Override theme img max-width rules */
    max-width: none;
    height: auto;
}
.jocp-pills.is-expanded .jocp-pill--toggle .jocp-pill__chevron {
    transform: rotate(180deg);
}

/* ────────────────────────────────────────────
   MOBILE TUNING
   ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .jocp-pills {
        --jocp-pill-pad-y: 9px;
        --jocp-pill-pad-x: 14px;
        --jocp-pill-font:  0.8125rem;
    }
    .jocp-pills .jocp-pills__list { gap: 6px; }
    .jocp-pills .jocp-pill { min-height: 38px; }
    .jocp-pills .jocp-pill__count {
        font-size: 0.6875rem !important;
        padding: 1px 7px !important;
    }
}

/* ────────────────────────────────────────────
   REDUCED MOTION
   ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .jocp-pill,
    .jocp-pills__edge,
    .jocp-pills__scroller,
    .jocp-pill__chevron,
    .jocp-pills--collapsible.is-expanded .jocp-pills__item.is-hidden {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
    .jocp-pill:active { transform: none; }
}