:root{
      --zem-font-display:Georgia,"Times New Roman","DejaVu Serif",serif;
      --zem-font-serif-body:"Lora",Georgia,"Times New Roman",serif;
      --zem-font-body:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
      --zem-ink:#2d3b1f;
      --zem-ink-soft:#5a6048;
      --zem-muted:#6b6e60;
      --zem-line:#e8e4dc;
      --zem-cream:#fdfbf6;
      --zem-olive:#6b8e23;
      --zem-olive-deep:#4a6118;
      --zem-tobacco:#8a6f3b;
    }
    body{
      font-family:var(--zem-font-body);
      font-size:15px;
      line-height:1.6;
      color:var(--zem-ink);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
    }
    /* Headings — use body-prefixed + !important to win over ClassiPress's
       specific h2/h3 declarations and Arial fallbacks. */
    body h1,body h2,body h3,body h4,body h5,
    body .dotted,
    body .post-block h2,body .post-block h3,
    body article h2,body article h3,
    body .single h2,body .single h3,
    body .content_left h2,body .content_left h3,
    body .post-content h2,body .post-content h3{
      font-family:var(--zem-font-display) !important;
      font-weight:700 !important;
      color:var(--zem-ink);
      letter-spacing:-0.005em;
      line-height:1.3;
    }
    body h1{font-size:24px}
    body h2{font-size:20px}
    body h3{font-size:18px}
    body h4{font-size:16px}
    @media(min-width:768px){
      body{font-size:15px;line-height:1.6}
      body h1{font-size:30px}
      body h2{font-size:24px}
      body h3{font-size:20px}
      body h4{font-size:17px}
    }
    /* ClassiPress section-heading. Soften the dotted line. */
    body .dotted{
      border-bottom:1px dotted var(--zem-line) !important;
      padding-bottom:10px;
      margin-bottom:18px;
    }
    /* Listing card title links — inherit serif from parent h3. */
    .post-block h3 a,
    .post-block h2 a,
    article h3 a,article h2 a{
      font-family:inherit !important;
      font-weight:inherit !important;
    }
    /* Body links: subtle olive on hover instead of bright blue. */
    .content_left a:hover,.content a:hover,article a:hover{
      color:var(--zem-olive-deep);
    }
    /* Prices — find them across the multiple ClassiPress patterns:
       .post-price (numeric), .price_sm (text), .tag .price, etc. */
    body .post-price,
    body .price_sm,
    body span.price,body .price,
    body .ad-price,body .listing-price,
    body .post-block .price,body .post-block .tag,
    body [class*="ad-price"]{
      font-family:var(--zem-font-display) !important;
      font-style:italic !important;
      font-weight:600 !important;
      letter-spacing:-0.005em;
    }
    /* But keep input/select default — don't italicize form fields. */
    input.price,input[class*="price"],select.price{
      font-family:var(--zem-font-body) !important;
      font-style:normal !important;
    }
    /* Buttons keep their identity but use the body font with slight tracking. */
    body .button,body .btn,body .btn_orange,
    body button.button,body input[type="submit"]{
      font-family:var(--zem-font-body) !important;
      font-weight:600 !important;
      letter-spacing:0.015em;
    }
    /* Form input typography. */
    input[type="text"],input[type="email"],input[type="password"],
    input[type="search"],textarea,select{
      font-family:var(--zem-font-body);
      font-size:15px;
    }
    /* Navigation: light tracking. */
    .menu_top a,.menu a,#access a,nav a,.topmenu a{
      letter-spacing:0.01em;
    }

    /* ============================================================
       Pass 2: Color palette polish.
       Audit found the site already runs a coherent olive identity:
         - `.header_menu`, `.footer_menu`, `.tag-head` all use the same
           #679325 olive — strong signature, don't replace it.
         - Body bg is #efefef (cool neutral) — out of step with the
           warm olive. Shift it to a barely-warmer cream-tinted neutral
           (#f4f1e8) for cohesion. Listing cards are white-on-warm-gray,
           which now reads as warm rather than fluorescent.
         - Tag-head pill (price label) is bright olive — slight darken
           and refined radius makes it feel more like a market sign and
           less like a 2012 button.
       Body-text ink (#2d3b1f), link color (#679325), main nav strip
       all preserved. Footer dark gray (#313131) stays — works as
       neutral grounding next to the cream body.
       ============================================================ */
    body{
      background-color:#f4f1e8 !important;
    }
    /* Subtly warmer header band — sits between the cream body and the
       white content area without competing with the olive nav. */
    .menu_top{
      background-color:#faf6ec !important;
      border-bottom:1px solid #e8e4dc;
    }
    /* Price-tag pill on listing cards — deeper olive with refined radius
       and a touch more letter-spacing on the inner price text. */
    body .tag-head,
    body span.tag-head{
      background-color:#536c2e !important;
      border-radius:3px !important;
      letter-spacing:0.01em;
      padding-left:8px;
      padding-right:8px;
    }
    /* Body links: olive on hover (more saturated than default link green
       so it reads as an action). */
    a:hover,a:focus{
      color:var(--zem-olive-deep) !important;
    }
    /* Footer: subtle olive tint instead of plain dark gray, so the bottom
       grounds the page in the same palette as the rest. */
    .footer_menu{
      /* The footer_menu strip is already olive #679325 — keep as is. */
    }
    /* The big dark band at the very bottom (copyright) — align to olive ink */
    body > div[id*="footer"],
    body > footer,
    body > .footer-wrapper,
    .copyright-wrapper{
      background-color:#262d1f !important;  /* very dark olive-ink */
    }

    /* ============================================================
       Pass 3: Card refinement on desktop (≥768px).
       Mobile got the cream/olive/shadow treatment in Pass 4. On desktop
       listing cards are still flat — extend the same visual language so
       cards read as "objects" with depth + interactivity. Proportions
       are scaled up (8px radius vs 6, 18px padding vs 14, hover lifts
       2px instead of 3 because larger cards need less vertical movement).
       ============================================================ */
    @media(min-width:768px){
      body .post-block-out{
        background-color:var(--zem-cream) !important;
        border-radius:8px !important;
        border-left:3px solid var(--zem-olive) !important;
        padding:18px 20px !important;
        margin-bottom:18px !important;
        box-shadow:0 1px 3px rgba(45,59,31,0.06);
        transition:transform 200ms ease,box-shadow 200ms ease;
      }
      body .post-block-out:hover{
        transform:translateY(-2px);
        box-shadow:0 8px 20px -4px rgba(45,59,31,0.12);
      }
      /* On desktop, the cards still inherited the ClassiPress 85×85 thumb
         from the theme default — looks lost inside the new padded card.
         Switch the .post-block to flex so the image + text align cleanly
         and bump the thumb to 130×130 for visual weight. The "full"
         modifier on .post-right is ignored — text simply fills the
         remaining flex space. */
      body .post-block-out .post-block{
        display:flex !important;
        align-items:flex-start;
        gap:18px;
      }
      body .post-block-out .post-left,
      body .post-block-out .post-left a,
      body .post-block-out .post-left a.preview{
        flex:0 0 130px !important;
        width:130px !important;
        height:130px !important;
        float:none !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden;
        border-radius:4px;
        display:block !important;
      }
      body .post-block-out .post-left img{
        display:block !important;
        width:130px !important;
        height:130px !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:cover !important;
        border-radius:4px;
      }
      body .post-block-out .post-right{
        flex:1 1 auto !important;
        margin-left:0 !important;
        width:auto !important;
        min-height:130px;
      }
      /* When a card has no image, .post-right gets the "full" modifier from
         the theme — keep its full flex span clean. */
      body .post-block-out .post-right.full{
        flex:1 1 100% !important;
      }
      /* Featured ads strip items — same card treatment so they pair. */
      body .home-featured-list > li,
      body .featured-listings > li,
      body .featured-ads > li{
        background-color:var(--zem-cream);
        border-radius:6px;
        border-left:2px solid var(--zem-olive);
        padding:10px;
        transition:box-shadow 150ms ease;
      }
      body .home-featured-list > li:hover,
      body .featured-listings > li:hover,
      body .featured-ads > li:hover{
        box-shadow:0 4px 10px rgba(45,59,31,0.08);
      }
    }
    /* On both viewports — keep an "elevated" card feel for the featured
       strip at the very top of the home, so it visually anchors the page. */
    .home-featured-list,
    .featured-listings,
    .featured-ads{
      margin-bottom:24px;
    }

    /* ============================================================
       Pass 5: Header CTA + footer polish.
       Audit found:
         - Primary CTA "НОВА ОБЯВА" (a.obtn.btn_orange) was 34px tall,
           sharp corners, no hover state — feels like a 2010s button.
         - Footer text was rgb(79,79,79) on rgb(49,49,49) background —
           dark gray on dark gray, fails WCAG AA contrast (would be
           ~2.3:1, AA needs 4.5:1 for body text).
       ============================================================ */

    /* Primary CTA refinement — keep the olive identity, add depth + hover */
    body a.obtn,
    body a.obtn.btn_orange,
    body .cp-fixed-color.obtn{
      border-radius:4px !important;
      padding:9px 20px !important;
      font-weight:700 !important;
      letter-spacing:0.04em !important;
      text-transform:uppercase;
      box-shadow:0 1px 2px rgba(45,59,31,0.15);
      transition:background-color 150ms ease,transform 150ms ease,box-shadow 150ms ease;
    }
    body a.obtn:hover,
    body a.obtn.btn_orange:hover{
      background-color:var(--zem-olive) !important;
      transform:translateY(-1px);
      box-shadow:0 4px 10px rgba(45,59,31,0.20);
    }
    body a.obtn:active,
    body a.obtn.btn_orange:active{
      transform:translateY(0);
      box-shadow:0 1px 2px rgba(45,59,31,0.15);
    }

    /* Footer contrast fix — body text was 79,79,79 on 49,49,49 (≈2.3:1).
       Repaint to warm light gray on dark olive ink (≈10:1 AAA). */
    .footer,
    body > .footer{
      background-color:#262d1f !important;
    }
    .footer,
    .footer p,
    .footer span,
    .footer li,
    .footer .footer_main,
    .footer .footer_main *,
    .footer .footer_main_res,
    .footer .footer_main_res *{
      color:#c8c6bc !important;
    }
    .footer a{
      color:#d8d4c5 !important;
      transition:color 120ms ease;
    }
    .footer a:hover,
    .footer a:focus{
      color:#fdfbf6 !important;
    }
    .footer .footer_main,
    .footer .footer_main_res{
      padding:24px 16px !important;
      text-align:center;
      font-size:13px;
      line-height:1.6;
    }
    .footer h2,.footer h3,.footer h4{
      color:#fdfbf6 !important;
      font-family:var(--zem-font-display);
      margin-top:0;
    }
    /* Footer navigation strip — keep olive but add a subtle highlight on
       active link. */
    .footer_menu a:hover{
      color:#fdfbf6 !important;
      text-decoration:underline;
    }

    /* ============================================================
       Pass 6: pixel-perfect polish — sidebar, pagination, meta line,
       buttons, badges, single-page sections.
       Each rule scoped narrowly, every change has a "before/after"
       reason rooted in the audit screenshots.
       ============================================================ */

    /* ---- Sidebar widgets: match the cream-card aesthetic ---- */
    @media(min-width:768px){
      body .sidebar .widget,
      body #sidebar .widget,
      body aside .widget{
        background:var(--zem-cream);
        border-radius:8px;
        border-left:3px solid var(--zem-olive);
        padding:16px 18px;
        margin-bottom:18px;
        box-shadow:0 1px 3px rgba(45,59,31,0.05);
      }
      body .sidebar .widget h2,
      body .sidebar .widget h3,
      body .sidebar .widget .widget-title,
      body #sidebar .widget h2,
      body #sidebar .widget h3{
        font-family:var(--zem-font-display) !important;
        font-weight:700 !important;
        font-size:18px !important;
        color:var(--zem-ink) !important;
        margin:0 0 12px !important;
        padding-bottom:10px;
        border-bottom:1px dotted var(--zem-line);
        letter-spacing:-0.005em;
      }
    }
    /* Sidebar text & links — softer body color, olive hover. */
    body .sidebar a,body #sidebar a{
      color:var(--zem-ink-soft);
    }
    body .sidebar a:hover,body #sidebar a:hover{
      color:var(--zem-olive-deep) !important;
    }

    /* ---- Tag cloud (sidebar "Ключови думи") ---- */
    body .tagcloud a,
    body .widget_tag_cloud a{
      display:inline-block;
      background:#f4f1e8;
      color:var(--zem-ink-soft) !important;
      padding:4px 9px;
      border-radius:3px;
      margin:0 3px 4px 0 !important;
      font-size:12px !important;
      line-height:1.4;
      transition:background 120ms ease,color 120ms ease;
      border:1px solid transparent;
    }
    body .tagcloud a:hover,
    body .widget_tag_cloud a:hover{
      background:var(--zem-cream);
      border-color:var(--zem-olive);
      color:var(--zem-olive-deep) !important;
      text-decoration:none;
    }

    /* ---- Pagination pills (numbered 1, 2, 3, ››) ---- */
    body .pagination,
    body .navigation,
    body .wp-pagenavi,
    body .page-numbers{
      font-family:var(--zem-font-body);
    }
    body span.page-numbers,
    body a.page-numbers{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:38px;
      min-height:38px;
      padding:0 10px;
      margin:0 2px !important;
      border-radius:5px;
      font-weight:600;
      font-size:14px;
      line-height:1;
      letter-spacing:0.02em;
      transition:background 150ms ease,color 150ms ease;
    }
    body a.page-numbers{
      background:var(--zem-cream) !important;
      color:var(--zem-ink) !important;
      border:1px solid var(--zem-line) !important;
    }
    body a.page-numbers:hover{
      background:var(--zem-olive) !important;
      color:#fff !important;
      border-color:var(--zem-olive) !important;
    }
    body span.page-numbers.current{
      background:var(--zem-olive) !important;
      color:#fff !important;
    }

    /* ---- "X дн. остават" / featured-status badge on listing cards ---- */
    body .featured,
    body .tag .tag-corner,
    body span.featured-tag,
    body .deadline{
      font-family:var(--zem-font-body);
      font-size:11px !important;
      letter-spacing:0.05em;
      font-weight:600;
    }

    /* ---- Price tag (.tag-head) — distinctive marketplace ribbon ----
       Replaces ClassiPress's original sharp-green ribbon with a refined
       olive gradient ribbon that points into the card. Georgia italic
       price reads as a vintage market sign. The ::after notch on the
       right edge is what gives the "ribbon-end" arrow shape. */
    body .tags.price-wrap,
    body div.tag{
      position:relative;
      display:inline-block;
      margin:0 0 6px 0;
      overflow:visible;
    }
    body .tag-head{
      display:inline-block !important;
      position:relative !important;
      background:linear-gradient(135deg,#6b8e23 0%,#536c2e 100%) !important;
      color:#fdfbf6 !important;
      padding:7px 16px 7px 12px !important;
      font-family:Georgia,"Times New Roman",serif !important;
      font-style:italic !important;
      font-weight:700 !important;
      font-size:16px !important;
      letter-spacing:-0.005em !important;
      line-height:1.15 !important;
      border-radius:3px 0 0 3px !important;
      box-shadow:-1px 2px 6px rgba(45,59,31,0.18) !important;
      margin-right:8px;
      vertical-align:middle;
      text-shadow:0 1px 1px rgba(45,59,31,0.20);
    }
    /* Ribbon notch on the right (arrow-end pointing right). ClassiPress
       ships its own .tag::after rule, so every property needs !important
       to win. */
    body .tag-head::after{
      content:'' !important;
      position:absolute !important;
      right:-8px !important;
      top:0 !important;
      bottom:0 !important;
      left:auto !important;
      width:8px !important;
      height:auto !important;
      background:linear-gradient(135deg,#6b8e23 0%,#536c2e 100%) !important;
      background-color:#536c2e !important;
      clip-path:polygon(0 0,100% 50%,0 100%) !important;
      -webkit-clip-path:polygon(0 0,100% 50%,0 100%) !important;
      border:none !important;
      box-shadow:none !important;
      transform:none !important;
    }
    /* Kill any inherited ::before from ClassiPress that would conflict. */
    body .tag-head::before{
      content:none !important;
      display:none !important;
    }
    /* Inner <p class="post-price"> — strip its block-paragraph styling. */
    body .tag-head .post-price,
    body .tag-head p.post-price,
    body .tag-head p{
      display:inline !important;
      margin:0 !important;
      padding:0 !important;
      font-family:inherit !important;
      font-style:inherit !important;
      font-weight:inherit !important;
      color:inherit !important;
      font-size:inherit !important;
      line-height:inherit !important;
      letter-spacing:inherit !important;
      background:none !important;
      text-shadow:inherit !important;
    }
    /* Hover state when ribbon is inside a card — slight lift + brighter olive. */
    body .post-block-out:hover .tag-head{
      background:linear-gradient(135deg,#7da32a 0%,#6b8e23 100%) !important;
      transform:translateX(-1px);
      transition:background 180ms ease,transform 180ms ease;
    }
    body .post-block-out:hover .tag-head::after{
      background:linear-gradient(135deg,#7da32a 0%,#6b8e23 100%);
    }
    body .tag-head{
      transition:background 180ms ease,transform 180ms ease,box-shadow 180ms ease;
    }
    /* If price text is non-numeric ("По договаряне", "Free", etc.), make it
       slightly smaller so the long string fits the ribbon. */
    body .tag-head[data-non-numeric] .post-price,
    body .tag-head .post-price:not([class*="num"]){
      font-size:14px;
    }

    /* ---- Listing-card meta row (category | author | date) ---- */
    body .post-meta,
    body .ad_post_meta,
    body .entry-meta{
      font-family:var(--zem-font-body);
      font-size:12px !important;
      color:var(--zem-muted) !important;
      letter-spacing:0.01em;
      margin:6px 0 8px !important;
    }
    body .post-meta a,
    body .ad_post_meta a{
      color:var(--zem-olive) !important;
      text-decoration:none;
    }
    body .post-meta a:hover{
      color:var(--zem-olive-deep) !important;
      text-decoration:underline;
    }
    /* Excerpt text inside listing card — Lora (Google Font) for a
       distinctive marketplace-catalog feel. display=swap means Georgia
       renders first (zero CLS), then Lora swaps in once downloaded.
       v1.31: experiment with web font; v1.30 used system Georgia.
       v1.32: 14px → 15px so Cyrillic Lora reads without strain
       (Bulgarian letterforms have lots of vertical strokes that
       look thinner at small sizes). line-height stays 1.6 unitless
       so it scales proportionally to 24px.
       Easy revert — change var to --zem-font-display. */
    body .post-block-out p,
    body .post-block .excerpt,
    body .post-block-out .excerpt,
    body .post-block-out .post-right > p:not(.post-meta):not(.meta):not(.tags):not(.price-wrap){
      font-family:var(--zem-font-serif-body) !important;
      font-size:15px;
      line-height:1.6;
      color:var(--zem-ink-soft);
      margin:6px 0 0;
      letter-spacing:-0.005em;
    }
    /* Meta line stays in sans for clean scannability. */
    body .post-block-out .post-meta,
    body .post-block-out p.post-meta,
    body .post-block .post-meta{
      font-family:var(--zem-font-body) !important;
    }

    /* Single ad_listing detail page — body paragraph in .single-main > p
       gets the same Lora treatment as the listing-card excerpt. Direct-child
       selector keeps the .zem-similar related-listings block (nested deeper)
       unaffected. Color is the darker --zem-ink (not --zem-ink-soft) because
       this is the main read body, not a summary. */
    body .single-main > p,
    body .single-main > p span,
    body .single-main > p font{
      font-family:var(--zem-font-serif-body) !important;
      font-size:15px !important;
      line-height:1.6 !important;
      color:var(--zem-ink) !important;
      letter-spacing:-0.005em;
    }

    /* News articles — use the same calm Lora typography as listing
       descriptions. Scope to WordPress posts so pages, widgets, metadata,
       headings and navigation keep their existing visual hierarchy. */
    body .type-post .entry-content p:not(.wp-caption-text):not(.gallery-caption),
    body .type-post .entry-content li,
    body .type-post .entry-content blockquote,
    body .type-post .entry-content td,
    body.single-post .content_left .post > p:not(.meta):not(.tags):not(.print),
    body.single-post .content_left .post > ul > li,
    body.single-post .content_left .post > ol > li,
    body.single-post .content_left .post > blockquote,
    body.single-post .content_left .post > table td{
      font-family:var(--zem-font-serif-body) !important;
      font-size:15px !important;
      line-height:1.6 !important;
      color:var(--zem-ink) !important;
      letter-spacing:-0.005em;
    }
    body .type-post .entry-content p a,
    body .type-post .entry-content p span,
    body .type-post .entry-content p strong,
    body .type-post .entry-content p em,
    body .type-post .entry-content li a,
    body .type-post .entry-content li span,
    body .type-post .entry-content li strong,
    body .type-post .entry-content li em,
    body.single-post .content_left .post > p a,
    body.single-post .content_left .post > p span,
    body.single-post .content_left .post > p strong,
    body.single-post .content_left .post > p em,
    body.single-post .content_left .post > ul > li a,
    body.single-post .content_left .post > ol > li a{
      font-family:inherit !important;
    }

    /* Complete the news-section typography: titles, section headings,
       metadata, tags, breadcrumbs and pagination use the same Lora family.
       Sizes and weights stay unchanged so hierarchy remains clear. */
    body.category-1 .content_left .zem-archive-h1,
    body.category-1 .content_left .type-post h1,
    body.category-1 .content_left .type-post h2,
    body.category-1 .content_left .type-post h3,
    body.category-1 .content_left .type-post h4,
    body.category-1 .content_left .type-post h5,
    body.category-1 .content_left .type-post h6,
    body.single-post .content_left .post h1,
    body.single-post .content_left .post h2,
    body.single-post .content_left .post h3,
    body.single-post .content_left .post h4,
    body.single-post .content_left .post h5,
    body.single-post .content_left .post h6{
      font-family:var(--zem-font-serif-body) !important;
    }
    body.category-1 .content_left .type-post h1 a,
    body.category-1 .content_left .type-post h2 a,
    body.category-1 .content_left .type-post h3 a,
    body.category-1 .content_left .type-post h4 a,
    body.single-post .content_left .post h1 a,
    body.single-post .content_left .post h2 a,
    body.single-post .content_left .post h3 a,
    body.single-post .content_left .post h4 a{
      font-family:inherit !important;
    }
    body.category-1 .content_left .type-post .meta,
    body.category-1 .content_left .type-post .meta a,
    body.category-1 .content_left .comment-bubble,
    body.category-1 .content_left .breadcrumb,
    body.category-1 .content_left .breadcrumbs,
    body.category-1 .content_left .pagination,
    body.category-1 .content_left .wp-pagenavi,
    body.category-1 .content_left .page-numbers,
    body.single-post .content_left .post > .meta,
    body.single-post .content_left .post > .meta a,
    body.single-post .content_left .post .prdetails,
    body.single-post .content_left .post .prdetails p,
    body.single-post .content_left .post .prdetails a,
    body.single-post .content_left .breadcrumb,
    body.single-post .content_left .breadcrumbs{
      font-family:var(--zem-font-serif-body) !important;
    }

    /* ---- Search bar (input + select + submit) ---- */
    body .form_search,
    body .search-form{
      align-items:stretch;
    }
    body input.search-field,
    body input[name="s"],
    body input#search-text,
    body select.search-cat{
      height:44px !important;
      padding:0 14px !important;
      border:1px solid var(--zem-line) !important;
      border-radius:5px !important;
      font-size:15px;
      transition:border-color 120ms ease,box-shadow 120ms ease;
    }
    body input.search-field:focus,
    body input[name="s"]:focus,
    body select.search-cat:focus{
      border-color:var(--zem-olive) !important;
      box-shadow:0 0 0 3px rgba(107,142,35,0.12);
      outline:none;
    }

    /* Mobile search bar fix — ClassiPress's max-width:600px rules float
       the input full-width then absolutely-position .btn-topsearch at
       bottom:0 inside .searchbutcat, which drops the magnifier glyph onto
       a separate row below the category select. We rebuild the row as a
       flex container: input takes its own row, then select+button share
       the second row (select flex:1, button 44×44 right-attached). */
    @media (max-width: 767px) {
      body #search-bar{
        padding:0 !important;
      }
      body #search-bar .searchblock{
        padding:14px !important;
        min-height:0 !important;
      }
      body #searchform.form_search{
        display:block !important;
      }
      body .form_search .searchfield{
        float:none !important;
        width:100% !important;
        padding:0 0 10px !important;
        margin:0 !important;
        position:static !important;
      }
      body .form_search .searchfield input#s,
      body .form_search input.editbox_search{
        width:100% !important;
        box-sizing:border-box;
        margin:0 !important;
      }
      body .form_search .searchbutcat{
        float:none !important;
        width:100% !important;
        display:flex !important;
        /* DOM order is button → select; row-reverse swaps so the select
           sits on the left (wide field) and the magnifier button on the
           right — the conventional "field + action" mobile pattern. */
        flex-direction:row-reverse !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        gap:8px !important;
        margin:0 !important;
        padding:0 !important;
        position:static !important;
      }
      body .form_search .searchbutcat select#scat.searchbar,
      body .form_search select#scat.searchbar{
        position:static !important;
        float:none !important;
        flex:1 1 0% !important;
        min-width:0 !important;
        max-width:none !important;
        width:auto !important;
        margin:0 !important;
        height:44px !important;
        line-height:1.2 !important;
        box-sizing:border-box;
      }
      body .form_search .btn-topsearch,
      body #go.btn-topsearch,
      body button#go{
        position:static !important;
        float:none !important;
        flex:0 0 44px !important;
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        bottom:auto !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        background:var(--zem-olive) !important;
        border-radius:5px !important;
        border:none !important;
      }
      body .form_search .btn-topsearch.dashicons-before::before,
      body #go.btn-topsearch::before{
        font-size:22px !important;
        margin:0 !important;
        line-height:1 !important;
        color:#fff !important;
      }
    }

    /* ---- Category grid items (homepage "Обяви - Категории") ---- */
    body .directory li,
    body #directory li,
    body .ad-categories li{
      transition:background 120ms ease,padding-left 120ms ease;
      border-radius:3px;
    }
    body .directory li:hover,
    body #directory li:hover,
    body .ad-categories li:hover{
      background:var(--zem-cream);
      padding-left:10px !important;
    }
    body .directory li a,
    body #directory li a{
      color:var(--zem-ink-soft) !important;
      font-weight:500;
    }
    body .directory li a:hover{
      color:var(--zem-olive-deep) !important;
    }

    /* ---- Single listing page: "Описание", "Подробности" sections ---- */
    body .single-content h2,
    body .listing-content h2,
    body .single-ad h2,
    body .single h2.dotted{
      font-family:var(--zem-font-display) !important;
      font-weight:700;
      font-size:20px;
      color:var(--zem-ink);
      margin:24px 0 14px !important;
      padding-bottom:10px;
      border-bottom:1px dotted var(--zem-line);
    }
    /* Single-listing data box (contact, address) — cream card treatment */
    body .ad-info-box,
    body .listing-info,
    body .contact-info,
    body .ad-meta-box{
      background:var(--zem-cream);
      border-radius:6px;
      border-left:3px solid var(--zem-olive);
      padding:14px 16px;
    }

    /* ---- Cookie consent bar (CookieYes) — make it less invasive ---- */
    body #cookie-law-info-bar{
      font-family:var(--zem-font-body) !important;
      font-size:14px;
      line-height:1.5;
      padding:14px 20px !important;
    }
    body #cookie-law-info-bar a.cli-plugin-button,
    body #cookie-law-info-bar a.cli_action_button{
      border-radius:4px !important;
      padding:8px 18px !important;
      font-weight:600;
      letter-spacing:0.03em;
      transition:background 150ms ease,transform 150ms ease;
    }
    body #cookie-law-info-bar a.cli-plugin-button:hover,
    body #cookie-law-info-bar a.cli_action_button:hover{
      transform:translateY(-1px);
    }

    /* ---- Header logo / nav micro-polish ---- */
    body .site-logo,body .logo{
      letter-spacing:-0.01em;
    }
    /* Top utility bar (greeting line) — refined spacing */
    body .menu_top p{
      font-size:13px !important;
      color:var(--zem-ink-soft) !important;
      letter-spacing:0.01em;
    }
    body .menu_top p a{
      color:var(--zem-olive-deep) !important;
      text-decoration:none;
    }
    body .menu_top p a:hover{
      text-decoration:underline;
    }

    /* ---- Footer typography refinements ---- */
    .footer_menu a{
      letter-spacing:0.02em;
      font-weight:500;
    }
    .footer_main,.footer_main_res{
      font-family:var(--zem-font-body);
    }
    .footer_main p,.footer_main_res p{
      margin:6px 0 !important;
    }

    /* ---- Generic content visual rhythm ---- */
    body .content_left > h1:first-child,
    body .content_left > h2:first-child{
      margin-top:0 !important;
    }
    /* Form inputs general */
    body input[type="text"],
    body input[type="email"],
    body input[type="password"],
    body input[type="tel"],
    body input[type="url"],
    body textarea{
      border:1px solid var(--zem-line);
      border-radius:5px;
      padding:10px 12px;
      transition:border-color 120ms ease,box-shadow 120ms ease;
    }
    body input[type="text"]:focus,
    body input[type="email"]:focus,
    body input[type="password"]:focus,
    body input[type="tel"]:focus,
    body input[type="url"]:focus,
    body textarea:focus{
      border-color:var(--zem-olive);
      box-shadow:0 0 0 3px rgba(107,142,35,0.12);
      outline:none;
    }

    /* ============================================================
       Pass 7: comprehensive font cleanup — kill remaining Arial
       holdouts in ClassiPress's stock chrome (header strip, top
       greeting bar, main nav menu, featured carousel slides) and
       redesign the homepage categories grid so it earns its place
       in the polished palette.
       ============================================================ */

    /* Sweep — anything inside ClassiPress's stock containers that was
       defaulting to Arial gets reset to Open Sans (our body family). */
    body .header_top,body .header_top *,
    body .header_top_res,body .header_top_res *,
    body .header_main,body .header_main *,
    body .header_main_bg,body .header_main_bg *,
    body .header_main_res,body .header_main_res *,
    body .header_menu,body .header_menu *,
    body .menu-item,body .menu-item *,
    body .slide-item,body .slide-item *,
    body #directory,body #directory *,
    body .directory,body .directory *,
    body .featured-list,body .featured-list *,
    body .recommended-list,body .recommended-list *{
      font-family:var(--zem-font-body) !important;
    }
    /* But keep prices inside featured cards in Georgia italic — they're
       price labels, not generic body text. */
    body .slide-item .price,
    body .slide-item .post-price,
    body .slide-item p.price{
      font-family:var(--zem-font-display) !important;
      font-style:italic !important;
      font-weight:600 !important;
      letter-spacing:-0.005em;
    }

    /* ---- Featured carousel slides ("Препоръчани обяви") refinement ---- */
    body .slide-item,
    body li.slide-item{
      font-size:13px;
      line-height:1.4;
    }
    body .slide-item p,
    body .slide-item .post-title{
      font-family:var(--zem-font-body) !important;
      font-weight:600 !important;
      font-size:13px !important;
      color:var(--zem-ink) !important;
      letter-spacing:-0.005em;
      line-height:1.35;
      margin:6px 0 4px;
    }

    /* ---- Mobile "Препоръчани обяви" slider ----
       ClassiPress hides .slider_top on mobile via display:none (style.css
       lines 5959, 6042). On a touch device the desktop jcarousellite slider
       is awkward anyway (prev/next arrow taps, fixed widths). Instead we
       expose the slider as a CSS-only horizontal-scroll strip: pinch-and-
       swipe to scan recommended listings, scroll-snap to feel polished.
       jcarousellite's inline width:0/height:0 (set on load when the parent
       was display:none) is overridden with !important. */
    @media (max-width: 767px) {
      body .shadowblock_out.slider_top{
        display:block !important;
        margin:0 0 16px !important;
      }
      body .shadowblock.sliderblock{
        background:var(--zem-cream);
        /* User reserved the olive border-left for actual listing cards
           (.post-block-out) — slider container is just a section header. */
        border-radius:6px;
        padding:12px 14px 14px;
        box-shadow:0 1px 0 rgba(0,0,0,0.04);
      }
      body .shadowblock.sliderblock h2.dotted{
        font-family:var(--zem-font-display) !important;
        font-size:18px !important;
        font-weight:700 !important;
        color:var(--zem-ink) !important;
        margin:0 0 10px !important;
        padding-bottom:6px;
        border-bottom:1px dotted var(--zem-line);
      }
      /* Prev/next as visible chevron buttons on slider edges. The
         dashicons-before pseudo-element provides the actual arrow glyph
         from ClassiPress's icon font. We make them visible and tap-sized. */
      body .sliderwrap{
        position:relative;
        padding:0 !important;
        margin:0 !important;
      }
      body .sliderblock .prev,
      body .sliderblock .next,
      body .sliderwrap .prev,
      body .sliderwrap .next{
        display:flex !important;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:50%;
        width:26px;
        height:26px;
        margin-top:-13px;
        background:rgba(255,255,255,0.9);
        border:1px solid var(--zem-line);
        border-radius:50%;
        box-shadow:0 1px 4px rgba(0,0,0,0.1);
        z-index:5;
        cursor:pointer;
        font-size:0;
        line-height:1;
        color:transparent;
        padding:0 !important;
        opacity:0.85;
      }
      body .sliderblock .prev{ left:2px; }
      body .sliderblock .next{ right:2px; }
      body .sliderblock .prev::before,
      body .sliderblock .next::before{
        font-family:dashicons;
        font-size:16px;
        color:var(--zem-ink);
        line-height:1;
      }
      body .sliderblock .prev::before{ content:"\f341"; } /* left chevron */
      body .sliderblock .next::before{ content:"\f345"; } /* right chevron */
      body .sliderblock .prev:active,
      body .sliderblock .next:active{
        background:var(--zem-olive);
      }
      body .sliderblock .prev:active::before,
      body .sliderblock .next:active::before{
        color:#fff;
      }
      body .sliderwrap .slider{
        /* ClassiPress style.css sets .slider { display:none; overflow:hidden }
           — only jcarousellite normally makes it visible. We no-op the
           carousel on mobile, so we have to force visibility ourselves. */
        display:block !important;
        visibility:visible !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        width:100% !important;
        height:auto !important;
        position:relative !important;
        left:auto !important;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        scroll-padding:0 14px;
        padding-bottom:4px;
        /* touch-action:auto (default) lets the browser decide based on
           gesture direction — vertical swipe scrolls the page, horizontal
           swipe scrolls the strip. The earlier `pan-x` locked the user
           into horizontal-only here, which felt like a freeze if their
           finger crossed the slider while scrolling down the page. */
        overscroll-behavior-x:contain;
        /* Hide scrollbar — touch swipe + right-edge fade communicate scrollability. */
        scrollbar-width:none;
      }
      body .sliderwrap .slider::-webkit-scrollbar{
        display:none;
      }
      body .sliderwrap .slider ul{
        display:flex !important;
        gap:10px !important;
        margin:0 !important;
        padding:0 !important;
        list-style:none !important;
        width:max-content !important;
        height:auto !important;
        position:static !important;
        left:auto !important;
      }
      body .sliderwrap .slider ul li{
        flex:0 0 140px !important;
        width:140px !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
        float:none !important;
        list-style:none !important;
        scroll-snap-align:start;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
      }
      body .sliderwrap .slider ul li .slide-item{
        display:block !important;
        background:#fff;
        border:1px solid var(--zem-line);
        border-radius:6px;
        padding:8px;
        text-align:left;
        height:auto;
      }
      body .sliderwrap .slider ul li .feat_left{
        display:block !important;
        margin:0 0 6px !important;
        width:100% !important;
        height:auto !important;
        float:none !important;
        text-align:center;
      }
      body .sliderwrap .slider ul li .feat_left a{
        display:block !important;
      }
      body .sliderwrap .slider ul li .feat_left img,
      body .sliderwrap .slider ul li .feat_left a img,
      body .sliderwrap .slider ul li .slide-item img.attachment-ad-medium{
        display:block !important;
        width:100% !important;
        height:110px !important;
        max-width:100% !important;
        object-fit:cover;
        border-radius:4px;
        margin:0 !important;
      }
      body .sliderwrap .slider ul li .slide-item p{
        font-family:var(--zem-font-body) !important;
        font-weight:600 !important;
        font-size:12px !important;
        line-height:1.35 !important;
        color:var(--zem-ink) !important;
        margin:0 0 4px !important;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      body .sliderwrap .slider ul li .slide-item p a{
        color:var(--zem-ink) !important;
        text-decoration:none !important;
      }
      body .sliderwrap .slider ul li .slide-item .price_sm{
        display:inline-block !important;
        font-family:var(--zem-font-display) !important;
        font-style:italic !important;
        font-size:13px !important;
        color:var(--zem-tobacco) !important;
        margin:0 !important;
      }
      /* Right-edge fade hint that more cards exist to scroll. */
      body .sliderwrap::after{
        content:"";
        position:absolute;
        right:0;
        top:0;
        bottom:14px;
        width:24px;
        pointer-events:none;
        background:linear-gradient(90deg, rgba(253,251,246,0), var(--zem-cream));
        border-radius:0 6px 6px 0;
      }
    }

    /* ---- Main nav menu items (Начало, Категории, Новини, Видео) ---- */
    body .header_menu .menu-item a,
    body .header_menu .menu > li > a,
    body .header_menu ul > li > a{
      font-family:var(--zem-font-body) !important;
      font-weight:600 !important;
      font-size:14px !important;
      letter-spacing:0.04em;
      text-transform:none;
    }

    /* ============================================================
       Categories grid — full redesign for the homepage "Обяви -
       Категории" block. Previously: tiny Arial uppercase parent names
       in muted gray, no visual structure. Now: each parent category
       is a distinctive Georgia label, optional subcategory chips
       below, hover with olive underline.
       ============================================================ */
    body #directory .catcol,
    body .directory .catcol{
      padding:0 8px 12px;
      margin-bottom:8px;
      vertical-align:top;
    }
    body #directory .maincat,
    body .directory .maincat{
      list-style:none !important;
      margin:0 0 16px !important;
      padding:0 !important;
    }
    /* Parent category name — Georgia 700, ink color, dotted-line accent
       under it. Looks like a market category header. */
    body #directory .maincat > a,
    body .directory .maincat > a,
    body ul.maincat-list > li.maincat > a{
      font-family:var(--zem-font-display) !important;
      font-weight:700 !important;
      font-size:14px !important;
      color:var(--zem-ink) !important;
      letter-spacing:0.02em !important;
      text-transform:uppercase !important;
      display:inline-block;
      padding:2px 0 5px !important;
      border-bottom:1px dotted var(--zem-line);
      margin-bottom:6px !important;
      transition:color 150ms ease,border-bottom-color 150ms ease;
      text-decoration:none !important;
    }
    body #directory .maincat > a:hover,
    body .directory .maincat > a:hover,
    body ul.maincat-list > li.maincat > a:hover{
      color:var(--zem-olive-deep) !important;
      border-bottom-color:var(--zem-olive) !important;
    }
    /* Subcategory list nested under each parent. */
    body #directory .subcat-list,
    body .directory .subcat-list,
    body ul.subcat-list{
      list-style:none !important;
      margin:0 !important;
      padding:0 0 0 0 !important;
      display:block;
    }
    body #directory .subcat-list li,
    body .directory .subcat-list li,
    body ul.subcat-list > li{
      list-style:none !important;
      margin:0 !important;
      padding:0 !important;
      display:block;
    }
    body #directory .subcat-list a,
    body .directory .subcat-list a,
    body ul.subcat-list a{
      font-family:var(--zem-font-body) !important;
      font-size:13px !important;
      font-weight:400 !important;
      color:var(--zem-ink-soft) !important;
      letter-spacing:0;
      text-transform:none !important;
      padding:3px 0 !important;
      display:inline-block;
      transition:color 120ms ease,padding-left 120ms ease;
    }
    body #directory .subcat-list a:hover,
    body .directory .subcat-list a:hover,
    body ul.subcat-list a:hover{
      color:var(--zem-olive-deep) !important;
      padding-left:4px !important;
      text-decoration:none !important;
    }

    /* When the homepage shows category names ONLY (no subcats expanded),
       use a slightly different rhythm — bigger parent labels, more
       breathing room between them. */
    body .directory.Col .catcol{
      display:inline-block;
      width:auto;
      min-width:140px;
      padding:6px 14px 6px 0;
    }
    body .directory.Col .maincat{
      margin-bottom:12px !important;
    }

    /* ---- Top greeting bar polish (header_top + header_top_res) ----
       The bar background is dark grey #313131 (theme default), so ink/
       olive-deep text from earlier Pass-2 attempts rendered at ~1.1:1
       contrast — invisible. Repaint with light foreground for dark bg
       (~10:1 AAA): warm light gray body, near-white emphasis on the
       username, light olive on the action links. */
    body .header_top,
    body .header_top_res{
      font-size:12px !important;
      color:#c8c6bc !important;
    }
    body .header_top strong,
    body .header_top_res strong{
      color:#fdfbf6 !important;
      font-weight:700;
    }
    body .header_top a,
    body .header_top_res a{
      color:#d4e2a0 !important;
      text-decoration:none;
      transition:color 120ms ease;
    }
    body .header_top a:hover,
    body .header_top_res a:hover{
      color:#fdfbf6 !important;
      text-decoration:underline;
    }

    /* ============================================================
       v1.22 reverts / user-requested fixes:
       1. Categories grid back to compact (no expanded subcats, smaller
          parent labels). v1.21 made it too tall.
       2. Listing-card padding tighter, smaller thumb on desktop —
          user said cards felt "разпънати" (over-stretched).
       3. Price ribbon compact, no extending tail — user said it
          overflowed and bled into the text on both mobile and desktop.
       ============================================================ */

    /* --- 1. Categories: hide subcategories, shrink parent labels --- */
    body #directory .subcat-list,
    body .directory .subcat-list,
    body ul.subcat-list,
    body #directory .maincat ul,
    body .directory .maincat ul{
      display:none !important;
    }
    body #directory .maincat,
    body .directory .maincat,
    body ul.maincat-list > li.maincat{
      margin:0 0 8px !important;
      padding:0 !important;
    }
    body #directory .maincat > a,
    body .directory .maincat > a,
    body ul.maincat-list > li.maincat > a{
      font-family:var(--zem-font-body) !important;
      font-size:12px !important;
      font-weight:600 !important;
      color:var(--zem-ink-soft) !important;
      letter-spacing:0.04em !important;
      text-transform:uppercase !important;
      border-bottom:none !important;
      padding:2px 0 !important;
      margin:0 !important;
      display:block;
      transition:color 120ms ease;
    }
    body #directory .maincat > a:hover,
    body .directory .maincat > a:hover{
      color:var(--zem-olive-deep) !important;
      border-bottom:none !important;
    }
    /* Restore compact column flow */
    body #directory .catcol,
    body .directory .catcol,
    body .directory.Col .catcol{
      display:inline-block !important;
      vertical-align:top;
      min-width:140px !important;
      padding:0 8px 4px 0 !important;
      margin:0 !important;
    }

    /* --- 2. Listing cards: tighter padding, smaller desktop thumb --- */
    @media(min-width:768px){
      body .post-block-out{
        padding:12px 14px !important;
        margin-bottom:12px !important;
      }
      body .post-block-out .post-block{
        gap:14px !important;
      }
      body .post-block-out .post-left,
      body .post-block-out .post-left a,
      body .post-block-out .post-left a.preview{
        flex:0 0 110px !important;
        width:110px !important;
        height:110px !important;
      }
      body .post-block-out .post-left img,
      body .post-block-out .post-left a img{
        width:110px !important;
        height:110px !important;
      }
      body .post-block-out .post-right{
        min-height:110px !important;
      }
    }

    /* --- 3. Price ribbon: compact, contained, no overflow tail --- */
    /* v1.26: flex-center the badge so wheat icon + price text both sit
       on the vertical midline. Wheat is bumped up so it visually
       fills the badge rather than reading as a tiny baseline glyph. */
    body .tag-head{
      display:inline-flex !important;
      align-items:center !important;
      gap:6px;
      padding:6px 14px !important;
      font-size:14px !important;
      line-height:1 !important;
      border-radius:3px !important;
      margin-right:0 !important;
      box-shadow:0 1px 2px rgba(45,59,31,0.18) !important;
      text-shadow:none !important;
      max-width:100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    /* Remove ClassiPress's arrow-tail (was overflowing on mobile). */
    body .tag-head::after{
      content:none !important;
      display:none !important;
    }
    /* Corn glyph as a flex item — sized to fill the badge vertically. */
    body .tag-head::before{
      content:'🌽' !important;
      display:inline-flex !important;
      align-items:center;
      font-size:1.5em !important;
      line-height:1 !important;
      font-style:normal !important;
      margin:0 !important;
      padding:0 !important;
      vertical-align:middle;
      position:static !important;
      width:auto !important;
      height:auto !important;
      background:none !important;
      border:none !important;
      transform:none !important;
      filter:none;
      flex:0 0 auto;
    }
    /* Inner <p class="post-price"> — vertically centered in the badge. */
    body .tag-head .post-price,
    body .tag-head p.post-price,
    body .tag-head > p{
      display:inline-flex !important;
      align-items:center;
      margin:0 !important;
      padding:0 !important;
      line-height:1 !important;
    }
    /* Mobile: slightly tighter padding but keep flex-center + wheat. */
    @media(max-width:767px){
      body .tag-head{
        padding:5px 10px !important;
        font-size:13px !important;
        gap:5px;
      }
      body .tag-head::before{
        font-size:1.4em !important;
      }

      /* Single ad_listing page on mobile: same flex toolbar pattern as
         desktop (back-link left, price ribbon right on one row, title
         below). User originally had price under title in v1.36; on
         further iteration in v1.42 asked to align price WITH the back
         button — restoring the desktop pattern. The toolbar's
         display:flex carries over from base CSS, no override needed. */
      /* Smaller back-link on mobile is intentional — user asked for it
         to be smaller than the previous mobile pill. Inherits base
         (desktop) compact sizing from the rule outside @media. */

      /* User asked: image gallery and description should use full width
         on mobile. ClassiPress hardcodes .bigleft / #main-pic to 240px
         (desktop sidebar size). On mobile we let the gallery and its
         thumb strip span the whole content column. */
      body .content_left .shadowblock > .bigleft,
      body .content_left .bigleft{
        width:100% !important;
        max-width:100% !important;
        float:none !important;
        margin:18px 0 0 !important;
      }
      body .bigleft #main-pic,
      body .bigleft #main-pic a,
      body .bigleft #main-pic img{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        box-sizing:border-box;
      }
      /* Thumbnail strip: each <a> is a flex item taking 25% width minus
         gap. The 50×50 source img inside scales to 100% of its <a>
         parent so the user sees ~70×70 thumbs on a 313px container. */
      body .bigleft #thumbs-pic{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:6px !important;
        margin-top:6px !important;
      }
      body .bigleft #thumbs-pic > a,
      body .bigleft #thumbs-pic > a.post-gallery{
        flex:0 0 calc(25% - 5px) !important;
        width:calc(25% - 5px) !important;
        height:auto !important;
        display:block !important;
        line-height:0;
        box-sizing:border-box;
      }
      body .bigleft #thumbs-pic > a > img,
      body .bigleft #thumbs-pic img{
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        aspect-ratio:1/1;
        object-fit:cover;
        display:block !important;
        border-radius:4px;
      }
      /* Trailing .clr (legacy clearfix) — hide on mobile, flex doesn't
         need it and a zero-height flex item still consumes the gap. */
      body .bigleft #thumbs-pic > .clr{
        display:none !important;
      }
      /* .bigright is contact info / breadcrumbs — keep it full width too. */
      body .content_left .shadowblock > .bigright,
      body .content_left .bigright{
        width:100% !important;
        max-width:100% !important;
        float:none !important;
      }
      /* Free up a few more pixels by trimming .shadowblock's 15px padding
         to 12px on mobile — modest +6px content width per side. */
      body .content_left .shadowblock{
        padding:12px !important;
      }

      /* "Подобни обяви" related-listings grid — user complaint
         "са много в дясно центрирай ги". Root cause: UL default
         padding-inline-start:40px was not killed (our v1.8 CSS set
         `padding:0` without !important, ClassiPress's UA reset still
         wins). Force padding to 0 so the grid spans the section, then
         center the (single column on 480px-) cards via justify-items. */
      body .zem-similar__grid,
      body ul.zem-similar__grid{
        padding:0 !important;
        margin:0 !important;
        justify-items:center !important;
        list-style:none !important;
      }
      body .zem-similar__card{
        width:100% !important;
        max-width:340px;
      }

      /* User: "на мобилна версия няма мап". ClassiPress default hides
         the entire .content_right sidebar (which holds the location map,
         Карта/Контакт/Подател tabs, and sidebar widgets) at mobile
         breakpoints. Show it back, full width below the main content. */
      body .content_botbg > .content_res > .content_right,
      body .content_right{
        display:block !important;
        float:none !important;
        width:100% !important;
        max-width:100% !important;
        margin:24px 0 0 !important;
        padding:0 !important;
      }
      /* The .tabprice block contains the actual map iframe + the contact
         /  sender tabs. Give it some breathing room. */
      body .content_right .tabprice{
        margin:0 0 16px !important;
      }
      /* The map widget itself — make sure it fills the mobile width. */
      body .content_right #gmap,
      body .content_right #map,
      body .content_right #gmap iframe,
      body .content_right #map iframe{
        width:100% !important;
        max-width:100% !important;
      }
      body .content_right #gmap,
      body .content_right #map{
        height:280px !important;
      }
    }

    /* AdSense ad slots — isolate their internal paint/layout work so
       iframe loading + ad refresh inside them doesn't trigger page-wide
       reflows during scrolling. The user reported scroll "забива и на
       никъде" on single ad_listing; multiple <ins.adsbygoogle> blocks
       loading content async are a likely contributor. `contain` keeps
       their layout/style/paint inside the ad box. Applies on all
       viewports — desktop benefits too. */
    ins.adsbygoogle,
    .adsbygoogle{
      contain:layout style paint;
      display:block;
    }

    /* ============================================================
       v1.23 — apply design-critique findings:
       1. Categories: use CSS multi-column on the whole #directory so
          all maincats flow + auto-balance, regardless of how
          ClassiPress splits them across .catcol wrappers.
       2. Price tag: anchor absolutely to card top-right corner so it
          can't overflow into the body text again.
       3. Tighter card top-padding to make room for the absolute tag.
       ============================================================ */

    /* --- Categories grid — CSS multi-column for balanced flow --- */
    body #directory,
    body .directory,
    body .directory.Col{
      column-count:3 !important;
      column-gap:24px !important;
      column-rule:none !important;
      display:block !important;
    }
    body #directory .catcol,
    body .directory .catcol,
    body .directory.Col .catcol{
      display:block !important;
      width:100% !important;
      min-width:0 !important;
      padding:0 !important;
      margin:0 !important;
      break-inside:avoid;
    }
    body #directory .maincat-list,
    body .directory .maincat-list{
      list-style:none !important;
      margin:0 !important;
      padding:0 !important;
    }
    body #directory .maincat,
    body .directory .maincat,
    body ul.maincat-list > li.maincat{
      break-inside:avoid !important;
      page-break-inside:avoid !important;
      -webkit-column-break-inside:avoid !important;
      display:block !important;
      margin:0 0 10px !important;
      padding:0 !important;
    }
    /* Tablet — 2 columns */
    @media(max-width:1024px){
      body #directory,body .directory{
        column-count:2 !important;
      }
    }
    /* Mobile — 1 column */
    @media(max-width:600px){
      body #directory,body .directory{
        column-count:1 !important;
      }
    }

    /* --- Price ribbon: float right of the title, NOT absolute corner.
           Floats are tricky inside flexbox parents (which we use on
           desktop cards), so on desktop the .post-right becomes a
           grid: title left, price right, then meta + excerpt below
           spanning both columns. On mobile we still float to keep
           text wrapping under it. */
    body .post-block-out{
      position:relative !important;
    }
    /* Reset positioning from earlier passes. */
    body .post-block-out .tags,
    body .post-block-out .tags.price-wrap,
    body .post-block-out > .tags,
    body .post-block-out .post-right > .tags{
      position:static !important;
      z-index:auto !important;
      width:auto !important;
      max-width:none !important;
    }

    @media(min-width:768px){
      body .post-block-out{
        padding-top:14px !important;
        padding-right:18px !important;
      }
      body .post-block-out .post-right{
        padding-right:0 !important;
        display:grid !important;
        grid-template-columns:1fr auto;
        grid-template-areas:
          "title price"
          "meta meta"
          "excerpt excerpt";
        column-gap:14px;
        row-gap:4px;
        align-items:start;
      }
      body .post-block-out .post-right > .tags,
      body .post-block-out .post-right > .price-wrap{
        grid-area:price;
        margin:0 !important;
        padding:0 !important;
        align-self:start;
        justify-self:end;
      }
      body .post-block-out .post-right > h2,
      body .post-block-out .post-right > h3{
        grid-area:title;
        margin:0 !important;
      }
      body .post-block-out .post-right > .post-meta,
      body .post-block-out .post-right > .meta,
      body .post-block-out .post-right > .ad_post_meta{
        grid-area:meta;
        margin:4px 0 6px !important;
      }
      /* Everything else (excerpt, leftover paragraphs) goes below. */
      body .post-block-out .post-right > p:not(.post-meta):not(.meta){
        grid-area:excerpt;
        margin:0 !important;
      }
    }
    @media(max-width:767px){
      body .post-block-out{
        padding-top:14px !important;
        padding-right:12px !important;
      }
      body .post-block-out .post-right{
        padding-right:0 !important;
      }
      /* Mobile: tags float right so title text wraps around it
         without overlap; the float clears below for meta + excerpt. */
      body .post-block-out .post-right > .tags,
      body .post-block-out .post-right > .price-wrap{
        float:right !important;
        margin:0 0 4px 10px !important;
        clear:none !important;
      }
      body .post-block-out .post-right > .post-meta,
      body .post-block-out .post-right > .meta,
      body .post-block-out .post-right > .ad_post_meta{
        clear:both !important;
      }
    }

    /* --- "Списък с обяви" / .content_left h1.dotted heading — soften --- */
    body .content_left h1.dotted,
    body .content_left > h1,
    body .content_left > h2.dotted{
      color:var(--zem-ink) !important;
    }

    /* ============================================================
       Hide the redundant CookieYes "View cookie policy" floating link
       ("бисквитки и правила на сайта"). The site already shows Google
       Funding Choices' "Privacy and cookie settings" widget (managed
       by Google AdSense for IAB TCF compliance) at the same spot —
       two floating consent UIs is confusing UX. CookieYes' initial
       opt-in banner (cli-bar) stays in place; this only removes the
       persistent floating link. To re-enable: remove the rule below
       or toggle the option in CookieYes admin (Settings → Customise
       Cookie Bar → "Show again" tab → Disable).
       ============================================================ */
    body #cookie-law-info-again,
    body #cookie-law-info-again *,
    body .cli-show-again,
    body .cli-show-settings{
      display:none !important;
    }

    /* ============================================================
       Google Funding Choices — total suppression.
       User decision: keep the CookieYes consent flow alone; nuke FC
       entirely because (a) the full TCF overlay was dimming the whole
       page and breaking card UX every few ALM cycles, and (b) two
       consent widgets is confusing UX.
       Trade-off documented at top of section: AdSense will serve
       non-personalised ads to EEA visitors (slight CPM impact). For
       complete removal, also disable Privacy & Messaging in the
       publisher's AdSense console (Publishers → Privacy & Messaging
       → the Funding Choices / TCF message → "Disable").
       ============================================================ */
    .fc-consent-root,
    .fc-ab-root,
    .fc-ab-dialog,
    .fc-dialog,
    .fc-dialog-overlay,
    .fc-banner,
    .fc-launcher-button,
    .fc-ab-launcher-button,
    [class^="fc-"],
    [class*=" fc-"],
    [id^="fc-"],
    iframe[src*="fundingchoicesmessages"],
    iframe[src*="consent.google"],
    iframe[src*="tpc.googlesyndication.com/sodar"]{
      display:none !important;
      visibility:hidden !important;
      pointer-events:none !important;
      opacity:0 !important;
    }
    /* Some FC variants lock body scroll while their modal is up. Release it. */
    body.fc-active,
    body.fc-overlay-open,
    html.fc-locked{
      overflow:auto !important;
      position:static !important;
    }

    /* ============================================================
       Pass 4: Mobile spacing & touch targets (under 768px only).
       Audit findings on iPhone-SE width (375px):
       - .post-left (listing card image holder) was collapsed to 6×0px;
         every ad showed text-only with no thumbnail.
       - Top-bar links ("Моите обяви", "Изход") had 14px touch height
         (WCAG AA wants ≥44px for primary actions).
       - "НОВА ОБЯВА" button was 26px tall, social icons 16×16, search
         submit 50×39 — all under the comfortable tap-target floor.
       - Card vertical spacing was 8px — too tight for thumb-scroll
         scanning.
       This pass keeps desktop layout untouched and only kicks in below
       768px. We do not redefine ClassiPress's container widths.
       ============================================================ */
    @media(max-width:767px){
      /* RESTORE listing-card thumbnail visibility.
         ClassiPress hides the image on small screens (.post-left img
         { display:none }) — override with body-prefixed specificity
         and !important. The wrapping <a class="preview"> ships as
         display:inline, which would also collapse the image; force
         block. */
      body .post-block-out .post-left,
      body .post-block .post-left,
      body .post-block-out .post-left a,
      body .post-block-out .post-left a.preview,
      body .post-block .post-left a,
      body .post-block .post-left a.preview{
        display:block !important;
        float:left;
        width:100px !important;
        height:100px !important;
        margin-right:14px !important;
        padding:0 !important;
        overflow:hidden;
        border-radius:4px;
      }
      body .post-block-out .post-left img,
      body .post-block .post-left img,
      body .post-block-out .post-left a img,
      body .post-block .post-left a img{
        display:block !important;
        width:100px !important;
        height:100px !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:cover !important;
        border-radius:4px;
      }
      /* The 'full' modifier means "no image column" — keep it left-aligned
         after we restored the image column. */
      .post-block-out .post-right,
      .post-block .post-right{
        min-height:100px;
      }

      /* CARD spacing — more breathing room while scrolling. */
      .post-block-out{
        margin-bottom:18px !important;
        padding:14px !important;
        background:var(--zem-cream);
        border-radius:6px;
        border-left:3px solid var(--zem-olive);
        box-shadow:0 1px 3px rgba(45,59,31,0.06);
      }
      .post-block-out:hover{
        box-shadow:0 4px 12px rgba(45,59,31,0.10);
      }

      /* TOUCH targets — bring up to WCAG AA 44px for primary actions. */
      .obtn.btn_orange,
      .obtn,a.btn_orange,
      button.btn-topsearch,
      input[type="submit"]{
        min-height:44px !important;
        line-height:1.2 !important;
        padding:10px 16px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
      }
      /* Top-bar greeting links ("Моите обяви", "Изход") — wrap with bigger
         tap area. They live in a <p> usually; padding lifts the line-height. */
      .menu_top p a,.menu_top a,
      body > div p:first-child a{
        padding:6px 6px !important;
        display:inline-block;
        min-height:28px;
        line-height:1.6;
      }
      /* Social icons in header — give them a 44px tap wrapper. */
      .dashicons-before.srvicon,
      a.dashicons-before.srvicon{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-width:44px !important;
        min-height:44px !important;
        margin:0 1px;
      }

      /* Featured ads strip — let each item breathe. */
      .featured-listings li,.featured-ads li,
      .home-featured-list li{
        margin-bottom:12px !important;
      }

      /* Category grid items — more readable spacing. */
      .directory li,#directory li,
      .ad-categories li{
        padding:10px 8px !important;
        line-height:1.45 !important;
      }

      /* Body horizontal padding so content doesn't kiss the screen edge. */
      .content_left,.content_res{
        padding-left:8px;
        padding-right:8px;
      }
    }