/* ============================================================
   PAKO.AL — TREG
   ------------------------------------------------------------
   Utilitar. E verdha e tendave të pazarit si sinjal, jo si dekor.
   Kufij dhe kontrast në vend të hijeve. Numrat në mono, sepse
   çmimet janë të dhëna. Duket si vegël, jo si broshurë.

   Kjo fletë ngarkohet E FUNDIT dhe ri-stilizon klasat `dc-*` që
   ekzistojnë tashmë në template. Pra ndryshon krejt faqja pa u
   rishkruar markup-i — shumë më pak rrezik.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* ── Sinjali ── */
    --tg-signal:      #FFD400;
    --tg-signal-600:  #E8C000;
    --tg-signal-soft: #FFF6CC;
    --tg-on-signal:   #0D0D0D;   /* teksti mbi të verdhë: gjithmonë i errët */

    /* ── Bosht ──
       KUJDES me rolet: --tg-ink është NGJYRA E TEKSTIT dhe përmbyset në
       dark mode. Panelet e errëta (header, footer, app) përdorin
       --tg-inverse, që mbetet i errët në të DYJA temat, me --tg-on-inverse
       si tekst. Fillimisht i bashkova të dyja te --tg-ink dhe në dark mode
       header-i dilte i çelët me tekst të çelët — 1:1. */
    --tg-ink:        #0D0D0D;   /* tekst */
    --tg-ink-2:      #26261F;
    --tg-inverse:    #0D0D0D;   /* panele të errëta */
    --tg-inverse-2:  #23231F;   /* hover mbi panele */
    --tg-on-inverse: #F4F4F0;   /* tekst mbi panele */
    --tg-on-inverse-2: #C9C9C4;
    --tg-on-inverse-3: #8B8B84;
    --tg-inverse-line: #3A3A33;
    --tg-paper:    #F2F2EF;
    --tg-card:     #FFFFFF;
    --tg-line:     #0D0D0D;      /* kufijtë strukturorë */
    --tg-line-2:   #D8D8D2;      /* ndarës të butë */
    --tg-muted:    #55554E;      /* 7.2:1 mbi letër */
    --tg-muted-2:  #6E6E66;

    /* ── Semantike ── */
    --tg-live:   #0B7A3B;
    --tg-danger: #C4261D;

    /* ── Paletë rajonale për kategoritë ──
       Pesë ngjyra nga vendi, jo dymbëdhjetë gradiente pastel. */
    --tg-c1: #1C5C72;   /* adriatik  */
    --tg-c2: #A8451F;   /* terrakotë */
    --tg-c3: #4E5C3C;   /* ulli      */
    --tg-c4: #8A6B23;   /* grurë     */
    --tg-c5: #5B4A6B;   /* rrush     */
    --tg-c6: #7A3B4A;   /* shegë     */

    /* ── Tipografia ── */
    --tg-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
    --tg-body:    'Archivo', system-ui, -apple-system, sans-serif;
    --tg-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ── Gjeometria: e mprehtë ── */
    --tg-r:     2px;
    --tg-r-lg:  3px;
    --tg-bw:    1px;      /* kufi normal */
    --tg-bw-2:  2px;      /* kufi strukturor */
}

/* ══════════════════════════════════════════════════════════
   MBIVENDOSJA E TOKENAVE TË DIZAJNIT EKZISTUES
   design-2026.css i lexon këto; duke i rilidhur, ndryshon gjithçka.
   ══════════════════════════════════════════════════════════ */
:root {
    --color-bg:      var(--tg-paper);
    --color-surface: var(--tg-card);
    --color-text:    var(--tg-ink);
    --color-divider: var(--tg-line-2);

    --color-neutral-100: #EDEDE8;
    --color-neutral-200: #E2E2DC;
    --color-neutral-800: #2B2B25;
    --color-neutral-900: #14140F;

    --color-accent:      var(--tg-ink);
    --color-accent-100:  var(--tg-signal-soft);
    --color-accent-200:  #F0E7A8;
    --color-accent-600:  var(--tg-ink-2);
    --color-accent-700:  var(--tg-ink);
    --color-accent-800:  var(--tg-ink);
    --color-accent-900:  var(--tg-ink);

    --color-accent-2:      var(--tg-signal);
    --color-accent-2-100:  var(--tg-signal-soft);
    --color-accent-2-300:  #F5DE6B;
    --color-accent-2-600:  var(--tg-signal-600);
    --color-accent-2-700:  #6B5600;
    --color-accent-2-800:  var(--tg-ink);     /* çmimet: ink, jo portokalli */
    --color-accent-2-900:  var(--tg-ink);

    --radius-sm: var(--tg-r);
    --radius-md: var(--tg-r);
    --radius-lg: var(--tg-r-lg);

    /* Pa hije. Thellësia vjen nga kufijtë. */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    --font-heading: var(--tg-display);
    --font-body:    var(--tg-body);
    --font-heading-weight: 800;

    --dc-btn-primary-bg:       var(--tg-inverse);
    --dc-btn-primary-bg-hover: var(--tg-inverse-2);
    --dc-border-input:         var(--tg-ink);
}

:root[data-bs-theme="dark"] {
    --tg-paper: #0B0B0A;
    --tg-card:  #141412;
    --tg-ink:   #F4F4F0;      /* teksti përmbyset */
    --tg-ink-2: #E2E2DC;
    /* Panelet mbeten të errëta, por pak të ngritura që të ndahen nga faqja */
    --tg-inverse:    #171714;
    --tg-inverse-2:  #23231F;
    --tg-inverse-line: #33332C;
    --tg-line:  #4A4A42;      /* kufi strukturor i dukshëm, jo verbues */
    --tg-line-2:#2E2E28;
    --tg-muted: #A8A8A0;
    --tg-muted-2: #93938B;
    --tg-signal-soft: #2A2609;
    --tg-live: #35C46F;       /* e gjelbra e errët binte në 3.39:1 */

    --color-neutral-100: #1A1A17;
    --color-neutral-200: #23231F;
    --color-neutral-800: #D8D8D2;
    --color-neutral-900: #F4F4F0;

    /* design-2026.css i rivendos këto tokena nën :root[data-bs-theme="dark"],
       që ka specificitet më të lartë se :root-i ynë më sipër. Pa këtë bllok,
       dark mode-i përzien paletën e Tregut me blu-grinë e dizajnit të vjetër. */
    --color-bg:      var(--tg-paper);
    --color-surface: var(--tg-card);
    --color-text:    var(--tg-ink);
    --color-divider: var(--tg-line-2);

    --color-accent:     var(--tg-signal);
    --color-accent-100: var(--tg-signal-soft);
    --color-accent-200: #4A4212;
    --color-accent-600: var(--tg-signal-600);
    --color-accent-700: var(--tg-signal);
    --color-accent-800: var(--tg-signal);
    --color-accent-900: var(--tg-signal);
    --color-accent-2:      var(--tg-signal);
    --color-accent-2-100:  var(--tg-signal-soft);
    --color-accent-2-300:  #7A6A14;
    --color-accent-2-600:  var(--tg-signal-600);
    --color-accent-2-700: var(--tg-signal);
    --color-accent-2-800: var(--tg-ink);
    --color-accent-2-900: var(--tg-ink);

    --dc-btn-primary-bg:       var(--tg-signal);
    --dc-btn-primary-bg-hover: var(--tg-signal-600);
    --dc-border-input:         var(--tg-muted);
}

/* ══════════════════════════════════════════════════════════
   BAZA
   ══════════════════════════════════════════════════════════ */
body.dc-page {
    font-family: var(--tg-body);
    background: var(--tg-paper);
    color: var(--tg-ink);
    font-size: 14px;
    line-height: 1.5;
}
.dc-page h1, .dc-page h2, .dc-page h3,
.dc-page .dc-sec-title, .dc-page .dc-hero-h1 {
    font-family: var(--tg-display);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .98;
}

/* Numrat: mono kudo ku janë të dhëna, jo dekor */
.dc-card-price, .dc-stats-big, .dc-stats-row b, .dc-stats-foot p:first-child,
.dc-chip-n, .dc-radio-count, .dc-pager a, .dc-pager span, .dc-want-budget {
    font-family: var(--tg-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -.02em;
}

/* ══════════════════════════════════════════════════════════
   HEADER — shirit ink, pa transparencë
   ══════════════════════════════════════════════════════════ */
.dc-header {
    background: var(--tg-inverse);
    border-bottom: 0;
    box-shadow: none;
}
.dc-header .dc-brand { color: var(--tg-on-inverse); }
.dc-logo { filter: invert(1) brightness(1.9) grayscale(1) contrast(1.4); }
:root[data-bs-theme="dark"] .dc-logo { filter: none; }

.dc-header .dc-btn-secondary {
    background: transparent;
    border-color: var(--tg-inverse-line);
    color: var(--tg-on-inverse-2);
    border-radius: var(--tg-r);
}
.dc-header .dc-btn-secondary:hover { background: var(--tg-inverse-2); color: var(--tg-on-inverse); }
.dc-header .dc-btn-primary {
    background: var(--tg-signal);
    border-color: var(--tg-signal);
    color: var(--tg-on-signal);
    border-radius: var(--tg-r);
    font-weight: 800;
}
.dc-header .dc-btn-primary:hover { background: #FFDE33; color: var(--tg-on-signal); }

.dc-hsearch .dc-input {
    background: #fff;
    border-color: #fff;
    border-radius: 0;
    color: #0D0D0D;
}
.dc-hsearch .dc-input:first-child { border-radius: var(--tg-r) 0 0 var(--tg-r); }
.dc-hsearch select.dc-input { border-left: 1px solid #D8D8D2; }
.dc-hsearch .dc-btn-primary {
    border-radius: 0 var(--tg-r) var(--tg-r) 0;
    font-family: var(--tg-mono); font-size: 12px; letter-spacing: .04em;
}
.dc-header .dc-loc-menu, .dc-header .dropdown-menu {
    border: var(--tg-bw-2) solid var(--tg-line);
    border-radius: var(--tg-r);
    box-shadow: none;
    background: var(--tg-card);
}

/* ── Shiriti i kategorive: etiketa mono, jo pilula ── */
.dc-strip-sec {
    background: var(--tg-inverse);
    border-top: 1px solid var(--tg-inverse-line);
    padding-block: 10px;
}
.dc-chip {
    background: transparent;
    border: 1px solid var(--tg-inverse-line);
    border-radius: var(--tg-r);
    color: var(--tg-on-inverse-2);
    font-family: var(--tg-mono);
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 400;
    padding: 6px 11px;
}
.dc-chip:hover, .dc-chip.is-active {
    background: var(--tg-signal);
    border-color: var(--tg-signal);
    color: var(--tg-on-signal);
    transform: none;
}
.dc-chip-ico { display: none; }   /* ikonat e kategorive: zhurmë këtu */
.dc-chip-n { color: inherit; opacity: .65; font-size: 10px; }
.dc-strip-nav {
    background: transparent; border-color: var(--tg-inverse-line); color: var(--tg-on-inverse-2);
    border-radius: var(--tg-r);
}
.dc-strip-nav:hover { background: var(--tg-inverse-2); border-color: var(--tg-inverse-line); }
.dc-mega-btn { background: transparent; border-color: var(--tg-inverse-line); color: var(--tg-on-inverse-2); }
.dc-mega-btn .dc-chip-ico { display: grid; background: transparent; color: inherit; }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
/* Hero i kompaktësuar: kërkimi dhe statistikat mbeten, por nuk hanë
   një ekran të tërë para njoftimeve. */
.dc-hero {
    background: var(--tg-paper);
    border-bottom: var(--tg-bw-2) solid var(--tg-line);
    padding-block: clamp(20px, 2.6vw, 36px);
}
.dc-hero-grid { gap: clamp(20px, 3vw, 40px); align-items: start; }
.dc-hero-h1 { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 6px; }
.dc-hero-p { font-size: 13.5px; margin: 8px 0 16px; max-width: 44ch; }
.dc-hero-badge { margin-bottom: 12px; }
.dc-listings { padding-block: clamp(24px, 3vw, 44px); }
.dc-want-sec { padding-block: clamp(24px, 3vw, 44px); }
.dc-hero-badge {
    background: transparent;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-r);
    color: var(--tg-ink);
    font-family: var(--tg-mono);
    font-size: 11px; font-weight: 400; letter-spacing: .04em;
    text-transform: uppercase;
}
.dc-hero-badge i { background: var(--tg-live); }
.dc-hero-h1 { letter-spacing: -.045em; }
/* Fjala kyçe merr sinjalin, si shirit i pikturuar */
.dc-hero-h1 em {
    background: var(--tg-signal);
    color: var(--tg-on-signal);
    padding: 0 .12em;
    font-style: normal;
}
.dc-hero-p { color: var(--tg-muted); }

.dc-hero-card {
    background: transparent;
    border: 0; box-shadow: none; padding: 0;
}
.dc-seg {
    border: var(--tg-bw-2) solid var(--tg-line);
    border-radius: var(--tg-r);
    overflow: hidden;
}
.dc-seg-opt {
    font-family: var(--tg-mono); font-size: 11.5px;
    letter-spacing: .03em; text-transform: uppercase;
    padding: 8px 15px; color: var(--tg-ink);
}
.dc-seg-opt + .dc-seg-opt { border-left: 1px solid var(--tg-line); }
.dc-seg-opt.is-active { background: var(--tg-inverse); color: var(--tg-on-inverse); }
:root[data-bs-theme="dark"] .dc-seg-opt.is-active { background: var(--tg-signal); color: #0D0D0D; }
.dc-seg-opt:not(.is-active):hover { background: var(--tg-signal-soft); }

.dc-hero-form {
    border: var(--tg-bw-2) solid var(--tg-line);
    border-radius: var(--tg-r);
    box-shadow: none;
    padding: 0 0 0 14px;
    background: var(--tg-card);
}
.dc-hero-form .dc-btn-primary {
    border-radius: 0; padding: 13px 26px;
    background: var(--tg-inverse); color: var(--tg-on-inverse);
    font-family: var(--tg-mono); font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; border: 0;
}
:root[data-bs-theme="dark"] .dc-hero-form .dc-btn-primary { background: var(--tg-signal); color: #0D0D0D; }
.dc-pop a {
    border: 1px solid var(--tg-line-2); border-radius: var(--tg-r);
    background: var(--tg-card); font-size: 12.5px;
}
.dc-pop a:hover { border-color: var(--tg-ink); background: var(--tg-signal-soft); color: var(--tg-ink); }
.dc-pop-lbl {
    font-family: var(--tg-mono); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--tg-muted);
}

/* ── Statistikat: kuti me kufij të ndarë, si tabelë ── */
.dc-stats {
    background: var(--tg-card);
    border: var(--tg-bw-2) solid var(--tg-line);
    border-radius: var(--tg-r);
    box-shadow: none;
    padding: 0;
}
.dc-stats-live {
    padding: 11px 16px; border-bottom: 1px solid var(--tg-line-2);
    font-family: var(--tg-mono); font-size: 11px;
}
.dc-stats-live i { background: var(--tg-live); }
.dc-stats-live span { color: var(--tg-live); text-transform: uppercase; letter-spacing: .06em; }
.dc-stats-big {
    font-size: clamp(38px, 4.4vw, 54px); color: var(--tg-ink);
    padding: 16px 16px 0; margin: 0;
}
.dc-stats-sub {
    padding: 0 16px 14px; margin: 0;
    font-family: var(--tg-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--tg-muted);
}
.dc-stats-rows { border-top: 1px solid var(--tg-line-2); }
.dc-stats-row {
    padding: 9px 16px; border-bottom: 1px solid var(--tg-line-2);
    font-size: 13px;
}
.dc-stats-row:last-child { border-bottom: 0; }
.dc-stats-row b { color: var(--tg-ink); }
.dc-stats-foot {
    gap: 0; margin: 0; border-top: 1px solid var(--tg-line-2);
}
.dc-stats-foot > div {
    flex: 1; padding: 12px 16px; border-right: 1px solid var(--tg-line-2);
}
.dc-stats-foot > div:last-child { border-right: 0; }
.dc-stats-foot p:first-child { color: var(--tg-ink); font-size: 19px; }
.dc-stats-foot p:last-child {
    font-family: var(--tg-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .07em; color: var(--tg-muted);
}
.dc-hero-hr { display: none; }

/* ══════════════════════════════════════════════════════════
   KARTAT — ndarës hairline, jo kuti të pavarura me hapësirë
   ══════════════════════════════════════════════════════════ */
/* Karta më e madhe: 210px → 272px. Fotoja është ajo që shet, pra
   i jepet më shumë sipërfaqe. Ndarja mbetet hairline, pra rrjeta
   nuk shpërhapet as me karta më të mëdha. */
.dc-grid {
    gap: 1px;
    background: var(--tg-line-2);
    border: 1px solid var(--tg-line-2);
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.dc-grid-premium { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 600px) {
    .dc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .dc-grid-premium { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
.dc-card {
    background: var(--tg-card);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: background-color .12s ease-out;
}
.dc-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: var(--tg-signal-soft);
}
.dc-card-img { background: var(--color-neutral-200); }
.dc-card:hover .dc-card-img img { transform: none; }
.dc-card-body { padding: 10px 11px 12px; gap: 4px; }
.dc-card-price {
    font-size: 16px; color: var(--tg-ink); font-weight: 500;
}
.dc-card-price small { font-family: var(--tg-body); color: var(--tg-muted); }
.dc-card-title {
    font-family: var(--tg-body); font-weight: 500;
    font-size: 12.5px; line-height: 1.3; letter-spacing: 0;
}
.dc-card-meta {
    font-family: var(--tg-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .04em; color: var(--tg-muted);
}
.dc-card-meta svg { display: none; }
.dc-card-seller { border-top: 1px solid var(--tg-line-2); font-size: 11px; padding-top: 7px; }
.dc-avatar { border-radius: 0; background: var(--tg-inverse); color: var(--tg-on-inverse); }

.dc-pill-dark {
    background: var(--tg-inverse); color: var(--tg-signal);
    border-radius: var(--tg-r); backdrop-filter: none;
    font-family: var(--tg-mono); font-size: 10px; letter-spacing: .04em;
}
.dc-tag-premium {
    background: var(--tg-signal); border: 0; border-radius: var(--tg-r);
    color: var(--tg-on-signal); font-family: var(--tg-mono);
    font-size: 9px; letter-spacing: .08em; padding: 3px 7px;
}
.dc-card-premium { outline: 2px solid var(--tg-signal); outline-offset: -2px; }
.dc-fav {
    background: var(--tg-card); border: 1px solid var(--tg-line);
    border-radius: var(--tg-r); box-shadow: none;
}
.dc-fav.is-fav { background: var(--tg-signal); color: var(--tg-on-signal); }

/* ══════════════════════════════════════════════════════════
   FILTRAT
   ══════════════════════════════════════════════════════════ */
.dc-rail-head h3, .dc-rail-grp h6 {
    font-family: var(--tg-mono); font-weight: 400;
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--tg-muted);
}
.dc-rail-grp { border-bottom: 1px solid var(--tg-line-2); }
.dc-radio { padding: 5px 0; font-size: 13px; }
.dc-dot { border-radius: 0; border-color: var(--tg-muted-2); }
.dc-radio.is-active .dc-dot {
    background: var(--tg-inverse); border-color: var(--tg-inverse); box-shadow: none;
}
:root[data-bs-theme="dark"] .dc-radio.is-active .dc-dot { background: var(--tg-signal); border-color: var(--tg-signal); }
.dc-radio-count { color: var(--tg-muted); font-size: 10px; }
.dc-check-box { border-radius: 0; border-color: var(--tg-muted-2); }
.dc-check.is-active .dc-check-box { background: var(--tg-inverse); border-color: var(--tg-inverse); color: var(--tg-signal); }
.dc-input, .dc-btn { border-radius: var(--tg-r); }
.dc-btn-secondary { background: var(--tg-card); border-color: var(--tg-line); }
.dc-btn-secondary:hover { background: var(--tg-signal-soft); }
.dc-sort-menu { border: var(--tg-bw-2) solid var(--tg-line); border-radius: var(--tg-r); box-shadow: none; }
.dc-sort-item { border-radius: 0; }
.dc-sort-item:hover { background: var(--tg-signal-soft); }
.dc-sort-item.is-active { color: var(--tg-ink); background: var(--tg-signal-soft); }
.dc-filter-badge { background: var(--tg-inverse); color: var(--tg-signal); border-radius: var(--tg-r); }

/* Faqosja: kuti mono */
.dc-pager a, .dc-pager span {
    border-radius: var(--tg-r); border-color: var(--tg-line-2);
    font-size: 13px; width: 40px; height: 40px;
}
.dc-pager .is-current { background: var(--tg-inverse); border-color: var(--tg-inverse); color: var(--tg-on-inverse); }
:root[data-bs-theme="dark"] .dc-pager .is-current { background: var(--tg-signal); color: #0D0D0D; }
.dc-pager a:hover { border-color: var(--tg-ink); background: var(--tg-signal-soft); color: var(--tg-ink); }
.dc-pager-note { font-family: var(--tg-mono); font-size: 11px; color: var(--tg-muted); }

/* ══════════════════════════════════════════════════════════
   DUA TË BLEJ / SI FUNKSIONON / APP
   ══════════════════════════════════════════════════════════ */
.dc-want { border: 1px solid var(--tg-line-2); border-radius: var(--tg-r); background: var(--tg-card); }
.dc-want:hover { border-color: var(--tg-ink); box-shadow: none; background: var(--tg-signal-soft); }
.dc-want-ico { background: var(--tg-inverse); color: var(--tg-signal); border-radius: var(--tg-r); }
.dc-want-budget { color: var(--tg-ink); font-size: 13px; }
.dc-want-meta { font-family: var(--tg-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }

.dc-how-n { font-family: var(--tg-mono); font-weight: 500; }
.dc-how-n i { background: var(--tg-signal); }
.dc-how h3 { font-family: var(--tg-display); }

.dc-app {
    background: var(--tg-inverse); color: var(--tg-on-inverse);
    border-radius: var(--tg-r-lg); box-shadow: none;
}
.dc-app h2 { color: var(--tg-on-inverse); }
.dc-app p  { color: var(--tg-on-inverse-2); opacity: 1; }
.dc-app .dc-btn {
    background: var(--tg-signal); color: var(--tg-on-signal);
    border-color: var(--tg-signal); border-radius: var(--tg-r); font-weight: 800;
}
.dc-app .dc-btn:hover { background: #FFDE33; color: var(--tg-on-signal); }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.dc-footer {
    background: var(--tg-inverse); color: var(--tg-on-inverse-2);
    border-top: 0;
}
.dc-footer a { color: var(--tg-on-inverse-2); }
.dc-footer a:hover { color: var(--tg-signal); }
.dc-footer h6 {
    font-family: var(--tg-mono); font-weight: 400;
    color: var(--tg-on-inverse-3); letter-spacing: .08em;
}
.dc-footer-legal { color: var(--tg-on-inverse-3); }
.dc-footer-bot { border-top-color: var(--tg-inverse-line); color: var(--tg-on-inverse-3); }
.dc-footer .dc-brand { color: var(--tg-on-inverse); }

/* ══════════════════════════════════════════════════════════
   HERO ME MORPH — kartat marrin gjuhën e njëjtë
   ══════════════════════════════════════════════════════════ */
.hm-card, .hm-card-inner, .hm-face { border-radius: var(--tg-r); }
.hm-face { box-shadow: none; border: 1px solid rgba(13,13,13,.14); }
.hm-back { background: var(--tg-inverse); border-color: var(--tg-inverse-line); }
.hm-back-price { color: var(--tg-signal); font-family: var(--tg-mono); }
.hm-h1, .hm-h2 { font-family: var(--tg-display); letter-spacing: -.045em; }
.hm-h1 em { background: var(--tg-signal); color: var(--tg-ink); padding: 0 .1em; }
.hm-kicker, .hm-hint { font-family: var(--tg-mono); }

/* ══════════════════════════════════════════════════════════
   KATEGORITË: paletë rajonale, e marrë nga drejtimi C
   Zbatohet me nth-child, pra nuk kërkon ndryshim markup-i.
   ══════════════════════════════════════════════════════════ */
.dc-strip .dc-chip:nth-child(6n+1):hover, .dc-strip .dc-chip:nth-child(6n+1).is-active { background: var(--tg-c1); border-color: var(--tg-c1); color: #fff; }
.dc-strip .dc-chip:nth-child(6n+2):hover, .dc-strip .dc-chip:nth-child(6n+2).is-active { background: var(--tg-c2); border-color: var(--tg-c2); color: #fff; }
.dc-strip .dc-chip:nth-child(6n+3):hover, .dc-strip .dc-chip:nth-child(6n+3).is-active { background: var(--tg-c3); border-color: var(--tg-c3); color: #fff; }
.dc-strip .dc-chip:nth-child(6n+4):hover, .dc-strip .dc-chip:nth-child(6n+4).is-active { background: var(--tg-c4); border-color: var(--tg-c4); color: #fff; }
.dc-strip .dc-chip:nth-child(6n+5):hover, .dc-strip .dc-chip:nth-child(6n+5).is-active { background: var(--tg-c5); border-color: var(--tg-c5); color: #fff; }
.dc-strip .dc-chip:nth-child(6n+6):hover, .dc-strip .dc-chip:nth-child(6n+6).is-active { background: var(--tg-c6); border-color: var(--tg-c6); color: #fff; }

/* ══════════════════════════════════════════════════════════
   Bootstrap që mbetet nëpër faqet e brendshme
   ══════════════════════════════════════════════════════════ */
.dc-page .btn { border-radius: var(--tg-r); font-family: var(--tg-body); }
.dc-page .btn-primary { --bs-btn-bg: var(--tg-inverse); --bs-btn-border-color: var(--tg-inverse);
    --bs-btn-hover-bg: var(--tg-ink-2); --bs-btn-hover-border-color: var(--tg-ink-2); }
.dc-page .card { border-radius: var(--tg-r); box-shadow: none; border-color: var(--tg-line-2); }
.dc-page .form-control, .dc-page .form-select { border-radius: var(--tg-r); border-color: var(--tg-muted-2); }
.dc-page .badge { border-radius: var(--tg-r); }

@media (prefers-reduced-motion: reduce) {
    .dc-card, .dc-chip { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE
   ------------------------------------------------------------
   Header-i nuk hynte në 360px: logo 245px e gjerë + vendndodhje +
   pesë butona ikonë + CTA, të gjitha në një flex row pa tkurrje.
   Rezultati ishte overflow horizontal i krejt dokumentit — logoja
   dilte e prerë dhe faqja rrëshqiste anash.
   ══════════════════════════════════════════════════════════ */

/* Rrjetë sigurie: asgjë nuk guxon ta zgjerojë dokumentin anash.
   `clip` në vend të `hidden` — `hidden` do prishte position:sticky. */
html, body.dc-page { max-width: 100%; overflow-x: clip; }

@media (max-width: 900px) {
    /* Kontejneri: padding më i vogël, që të fitohet gjerësi reale */
    .dc-wrap, .dc-wrap-24 { padding-inline: 12px; }

    .dc-header-row {
        gap: 4px;
        padding-block: 8px;
        flex-wrap: nowrap;
        min-width: 0;
    }
    /* Logoja tkurret dhe nuk e shtyn rreshtin */
    .dc-brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
    .dc-logo { height: 24px; }

    /* Butonat: më kompaktë, pa tekst */
    .dc-header .dc-btn { padding: 7px 9px; min-height: 38px; }
    .dc-header .dc-btn-icon { width: 38px; height: 38px; padding: 0; }
    .dc-header-actions { gap: 3px; flex: 0 0 auto; }
    .dc-btn-label { display: none; }
    /* CTA-ja mbetet e dukshme: është veprimi kryesor i faqes */
    .dc-header-actions .dc-btn-primary { padding-inline: 11px; }

    /* Vendndodhja: vetëm ikona */
    .dc-loc .dc-btn { padding-inline: 9px; }
    .dc-loc-menu { width: calc(100vw - 24px); left: 0; }
}

@media (max-width: 560px) {
    /* Nën këtë gjerësi tema dhe mesazhet largohen nga rreshti —
       janë te menuja e profilit gjithsesi. */
    .dc-header .pk-theme-toggle,
    .dc-header .dc-msg-btn { display: none; }
    .dc-logo { height: 21px; }
}

@media (max-width: 400px) {
    /* Vendndodhja del nga header-i; zgjidhet te filtri i qytetit */
    .dc-loc { display: none; }
}

@media (max-width: 1024px) {
    /* Hero: një kolonë e vërtetë. minmax(320px) e detyronte kolonën
       më të gjerë se ekrani në telefona 360px. */
    .dc-hero-grid { grid-template-columns: 1fr !important; }
    .dc-hero-h1 { font-size: clamp(26px, 7vw, 38px); max-width: none; }
    .dc-stats { width: 100%; }
}

/* Elementet e grid-it kanë `min-width: auto`, që zgjidhet në min-content.
   Segmented-i me katër opsione pa mbështjellje e çonte min-content-in në
   352px dhe e zgjeronte kolonën përtej kontejnerit 336px — hero-ja dilte
   4px jashtë ekranit. `min-width: 0` e lejon kolonën të tkurret. */
.dc-hero-grid > *, .dc-layout > * { min-width: 0; }

@media (max-width: 640px) {
    /* Kërkimi i hero-s: butoni poshtë, jo ngjeshur brenda rreshtit */
    .dc-hero-form { flex-wrap: wrap; padding: 8px; gap: 8px; }
    .dc-hero-form .dc-input { flex: 1 1 100%; min-width: 0; }
    .dc-hero-form .dc-btn-primary { flex: 1 1 100%; }

    /* Segmented: rrëshqet nëse s'hyn, nuk shtyn faqen */
    .dc-seg { max-width: 100%; overflow-x: auto; }
    .dc-seg-opt { white-space: nowrap; }

    /* Statistikat: dy kolona në vend të një rreshti të gjatë */
    .dc-stats-foot { flex-wrap: wrap; }
    .dc-stats-foot > div { flex: 1 1 50%; }

    /* Faqosja të mos dalë jashtë */
    .dc-pager { gap: 4px; }
    .dc-pager a, .dc-pager span { width: 36px; height: 36px; font-size: 12px; }
}

/* Çdo rrjetë horizontale duhet të rrëshqasë brenda vetes, jo ta zgjerojë faqen */
.dc-strip, .dc-seg { max-width: 100%; }
.dc-grid, .dc-want-grid, .dc-how-grid, .dc-footer-grid { min-width: 0; }
.dc-card, .dc-want { min-width: 0; }
.dc-card-title, .dc-want h3 { overflow-wrap: anywhere; }

/* Butoni primar behet i verdhe ne dark mode; teksti i bardhe do binte
   ne ~1.7:1, pra detyrohet i erret. */
:root[data-bs-theme="dark"] .dc-btn-primary { color: var(--tg-on-signal); }