/**
 * Çipi "Kategoria: … ✕" — ai që zë vendin e breadcrumb-it te faqet e kategorive.
 *
 * Një pilulë e vetme: ✕-ja majtas (heq kategorinë), pastaj rruga — prindërit si
 * linqe të qeta, kategoria e hapur me bojë të plotë. Pa dy rreshta që thonë të
 * njëjtën gjë (breadcrumb + çip), sepse pikërisht ajo e ngatërronte klientin.
 *
 * ⚠️ Pamja nuk mbështetet te ikonat e temës: ✕-ja është SVG brenda HTML-së. Edhe
 *    nëse ky skedar nuk ngarkohet (cache, bllokues), rruga lexohet dhe linqet punojnë.
 */

.ss-kat {
    /* Neutrale të NGROHTA: sfondi i dyqanit është krem, dhe gri mbi krem duket i pistë. */
    --ss-ink:   #1f1d1b;
    --ss-line:  rgba(31, 29, 27, .16);
    --ss-soft:  rgba(31, 29, 27, .05);
    --ss-hover: rgba(31, 29, 27, .11);

    /* Bllok: kështu çipi ndjek drejtimin (majtas/qendër) që i jep tema kutisë. */
    display: block;
    margin: 0;
}

/* ⚠️ Tema u vë `text-shadow` linqeve — mbi krem shkronjat dilnin me "glow". */
.ss-kat,
.ss-kat * {
    text-shadow: none !important;
    filter: none !important;
}

.ss-kat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 16px 5px 6px;
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    background-color: var(--ss-soft);
    color: var(--ss-ink);
    line-height: 1.35;
    text-align: start;
}

/* ── ✕ — link më vete, me objektiv preku të vërtetë ───────────────────────── */
.ss-kat-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--ss-ink) !important;
    text-decoration: none !important;
    opacity: .7;
    transition: background-color .15s ease, opacity .15s ease;
}

.ss-kat-x:hover,
.ss-kat-x:focus {
    background-color: var(--ss-hover);
    color: var(--ss-ink) !important;
    opacity: 1;
}

.ss-kat-x:focus-visible {
    outline: 2px solid var(--ss-ink);
    outline-offset: 1px;
}

/* ── Rruga ────────────────────────────────────────────────────────────────── */
.ss-kat-t {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;            /* emrat e gjatë mbështillen, nuk e shtyjnë faqen anash */
    gap: 4px 6px;
    min-width: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.ss-kat-lead { opacity: .55; }

.ss-kat-up {
    color: var(--ss-ink) !important;
    text-decoration: none !important;
    opacity: .7;
    transition: opacity .15s ease;
}

.ss-kat-up:hover,
.ss-kat-up:focus {
    opacity: 1;
    text-decoration: underline !important;
}

.ss-kat-sep { opacity: .4; }

.ss-kat-cur { font-weight: 500; }

/* Rrjeta e fundit (JS-i e vendos mbi produkte) — pak ajër që të mos ngjitet te grila. */
.ss-kat-standalone { margin: 0 0 15px; }

/* Telefon: objektiv preku më i rehatshëm dhe shkronja që lexohen. */
@media (hover: none) {
    .ss-kat-chip { padding: 6px 16px 6px 6px; }
    .ss-kat-x    { width: 32px; height: 32px; opacity: .8; }
    .ss-kat-t    { font-size: 14px; }
}