/* =========================
   SELLER META — CSS VARIABLES
   Card + single-view trust/active/duration typography.
   Designed so a future Customizer control can override these
   without touching the rules below.
========================= */

:root {
    --zl-trust-font-size: 13px;
    --zl-trust-font-weight: 500;
    --zl-trust-font-family: inherit;
    --zl-trust-color: #4b5563;
    --zl-trust-gap: 6px;
    --zl-trust-dot-color: #d1d5db;
}

/* =========================
   HEADER
========================= */

html,
body {
    overflow-x: hidden;
}

body {
    padding-top: 73px;
}

.admin-bar body,
.admin-bar .zl-header {
    top: 32px;
}

.zl-header {

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1100;
}

.zl-header-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 16px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.zl-logo {

    font-size: 24px;

    font-weight: 700;

    color: #111827;
}

.zl-post-btn {

    background: #f59e0b;

    color: #ffffff;

    padding: 12px 18px;

    border-radius: 10px;

    font-weight: 600;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.zl-post-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(245,158,11,0.28);

    opacity: 0.95;
}

/* =========================
   MAIN LAYOUT
========================= */

.zl-home-layout {

    max-width: 1280px;

    margin: 34px auto;

    padding: 0 28px;

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 28px;

    position: relative;
}
/* =========================
   HOME SIDEBAR WRAPPER
========================= */

.zl-home-sidebar {
    width: 100%;
    min-width: 0;
}

/* =========================
   FEED SECTION
========================= */

.zl-feed-section {
    min-width: 0;
    width: 100%;
}



/* =========================
   MARKETPLACE SIDEBAR
========================= */

.zl-marketplace-sidebar {
    width: 100%;
    position: sticky;
    top: 16px;
    align-self: start;
    z-index: 100;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    /* Needed so the panel's height:100% resolves against this container */
    isolation: isolate;
}

.zl-sidebar-categories {
    display: block;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    position: relative;
    /* Independent scroll — listings scroll separately on the right */
    overflow-y: auto;
    max-height: calc(100vh - 32px);
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.zl-sidebar-categories::-webkit-scrollbar {
    display: none;
}

/* Fade indicator — applied via JS only when content is scrollable */
.zl-sidebar-categories.has-scroll-below::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    z-index: 2;
    bottom: 0;
    background: linear-gradient(to top, #ffffff 40%, transparent);
    border-radius: 0 0 20px 20px;
}

/* =========================
   CATEGORY ITEM
========================= */

.zl-sidebar-category {

    position: relative;

    display: block;


    padding: 18px 20px;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.zl-sidebar-category:hover {

    background: #f9fafb;

    transform: translateX(2px);
}

.zl-sidebar-category.active {

    background: #f3f4f6;
}

/* Active left accent bar — clear visual indicator of selected category */
.zl-sidebar-category.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    background: #f59e0b;
    border-radius: 0 3px 3px 0;
}

.zl-sidebar-category.active .zl-category-icon {

    background: #fef3c7;
}

/* =========================
   CATEGORY CONTENT
========================= */

.zl-category-left {

    display: flex;

    align-items: center;

    gap: 14px;
}

/* =========================
   ICON
========================= */

.zl-category-icon {

    width: 48px;

    height: 48px;

    background: #f3f4f6;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.zl-sidebar-category:hover .zl-category-icon {

    background: #e5e7eb;

    transform: scale(1.04);
}

/* =========================
   TEXT
========================= */

.zl-category-text {

    display: flex;

    flex-direction: column;

    min-width: 0;
}

.zl-category-name {

    font-weight: 700;

    margin-bottom: 4px;

    color: #111827;

    line-height: 1.3;
}

.zl-category-count {

    font-size: 13px;

    color: #6b7280;
}

/* =========================
   FLOATING SUBCATEGORY PANEL
========================= */

.zl-sidebar-panel {
    position: absolute;
    top: 0;
    left: calc(100% + 4px);
    width: 240px;
    height: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.10);
    border: 1px solid #f3f4f6;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.2s ease;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* =========================
   SHOW PANEL
========================= */

.zl-marketplace-sidebar:hover .zl-sidebar-panel,
.zl-sidebar-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* =========================
   HOVER BRIDGE
========================= */

.zl-sidebar-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12px;
    width: 16px;
    height: 100%;
    background: transparent;
    z-index: 1001;
}

/* =========================
   PANEL CONTENT
========================= */

.zl-panel-content {

    display: none;

    animation: zlFade 0.18s ease;
}

.zl-panel-content.active {

    display: block;
}

/* =========================
   PANEL LINKS
========================= */

/* consolidated below */

.zl-panel-view-all {
    color: #f59e0b !important;
    font-weight: 600 !important;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.zl-panel-view-all:hover {
    background: #fffbeb !important;
}

/* Divider between view-all and subcategory list */
.zl-panel-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 8px 0 10px;
}

/* Sublinks — slightly lighter text */
.zl-panel-sublink {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    color: #374151 !important;
    font-size: 0.875rem;
    font-weight: 500 !important;
}

.zl-panel-sublink:hover {
    color: #111827 !important;
}

/* =========================
   PANEL ANIMATION
========================= */

@keyframes zlFade {

    from {

        opacity: 0;

        transform: translateY(4px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}

/* =========================
   LISTINGS GRID
========================= */

.zl-listings-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}

/* =========================
   LISTING CARD
========================= */

.zl-card {

    display: block;

    text-decoration: none;

    color: inherit;

    background: #ffffff;

    border-radius: 18px;

    border: 1px solid #f3f4f6;

    overflow: hidden;

    box-shadow: 0 2px 12px rgba(0,0,0,0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    position: relative;
}

.zl-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* =========================
   IMAGE
========================= */

.zl-card-image-wrap {

    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #f3f4f6; /* placeholder colour while image loads */

    border-radius: 8px 8px 0 0;
}

.zl-card-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.3s ease;

    display: block;
}

.zl-card:hover .zl-card-image {

    transform: scale(1.04);
}

/* =========================
   BADGE
========================= */

.zl-card-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    background: #f59e0b;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    padding: 8px 12px;

    border-radius: 999px;

    z-index: 5;
}

/* =========================
   FAVORITE
========================= */

.zl-card-favorite {

    position: absolute;

    top: 14px;

    right: 14px;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.95);

    cursor: pointer;

    font-size: 18px;

    z-index: 5;

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}

.zl-card-favorite:hover {

    transform: scale(1.08);

    background: #ffffff;
}

/* =========================
   CONTENT
========================= */

.zl-card-content {

    padding: 18px;
}

/* =========================
   CONDITION
========================= */

.zl-card-condition {

    display: inline-block;

    background: #f3f4f6;

    color: #374151;

    font-size: 12px;

    font-weight: 600;

    padding: 6px 10px;

    border-radius: 999px;

    margin-bottom: 12px;
}

/* =========================
   TITLE
========================= */

.zl-card-title {

    font-size: 18px;

    line-height: 1.4;

    margin-bottom: 12px;

    color: #111827;
}

/* =========================
   META
========================= */

.zl-card-meta {

    font-size: 14px;

    color: #6b7280;

    margin-bottom: 18px;

    line-height: 1.5;
}

/* =========================
   FOOTER
========================= */

.zl-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;
}

/* =========================
   PRICE
========================= */

.zl-card-price {

    color: #ef4444;

    font-size: 24px;

    font-weight: 700;
}

/* =========================
   SELLER
========================= */

.zl-seller-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #111827;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;
}

/* =========================
   MOBILE SUBCATEGORY DRAWER
========================= */

.zl-mobile-drawer-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.45);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 9998;
}

.zl-mobile-subcategory-drawer {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: #ffffff;

    border-radius: 0 0 28px 28px;

    padding: 22px;

    transform: translateY(-100%);

    transition: transform 0.28s ease;

    z-index: 9999;

    max-height: 82vh;

    overflow-y: auto;

    box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}

/* ACTIVE */

.zl-mobile-drawer-overlay.active {

    opacity: 1;

    visibility: visible;
}

.zl-mobile-subcategory-drawer.active {

    transform: translateY(0);
}

/* =========================
   DRAWER HEADER
========================= */

.zl-mobile-drawer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}

.zl-mobile-drawer-title {

    font-size: 20px;

    font-weight: 700;

    color: #111827;
}

.zl-mobile-drawer-close {

    width: 44px;

    height: 44px;

    border: none;

    border-radius: 50%;

    background: #f3f4f6;

    font-size: 24px;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.zl-mobile-drawer-close:hover {

    background: #e5e7eb;

    transform: rotate(90deg);
}

/* =========================
   MOBILE SUBCATEGORY PANELS
========================= */

.zl-mobile-subcategory-panel {

    display: none;
}

.zl-mobile-subcategory-panel.active {

    display: block;
}

/* =========================
   MOBILE SUBCATEGORY LINKS
========================= */

.zl-mobile-subcategory-panel a {

    display: block;

    padding: 16px 18px;

    border-radius: 16px;

    background: #f8fafc;

    margin-bottom: 12px;

    color: #111827;

    font-weight: 500;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.zl-mobile-subcategory-panel a:hover {

    background: #f1f5f9;

    transform: translateX(4px);
}

/* =========================
   MOBILE CATEGORY GRID
========================= */

.zl-mobile-category-wrap {
    display: none; /* shown on mobile via media query */
}

.zl-mobile-categories-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    margin-bottom: 24px;
}

/* =========================
   MOBILE CATEGORY CARD
========================= */

.zl-mobile-category-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 18px 12px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 110px;

    cursor: pointer;

    border: 1px solid #eef2f7;

    box-shadow: 0 3px 12px rgba(0,0,0,0.04);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.zl-mobile-category-card:hover {

    transform: translateY(-3px);

    border-color: #e5e7eb;

    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

/* =========================
   MOBILE CATEGORY ICON
========================= */

.zl-mobile-category-icon {

    width: 56px;

    height: 56px;

    border-radius: 18px;

    background: #f8fafc;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}

.zl-mobile-category-card:hover .zl-mobile-category-icon {

    background: #f1f5f9;

    transform: scale(1.06);
}

/* =========================
   MOBILE CATEGORY LABEL
========================= */

.zl-mobile-category-label {

    font-size: 14px;

    font-weight: 600;

    color: #111827;

    line-height: 1.35;
}

/* =========================
   FOOTER
========================= */

.zl-footer {

    padding: 30px;

    text-align: center;
}

/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .zl-home-layout {

        grid-template-columns: 1fr;
    }

    .zl-marketplace-sidebar {

        display: none;
    }

    .zl-mobile-category-wrap {

        display: block;
    }

    .zl-listings-grid {

        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {

    .zl-home-layout {

        padding: 0 16px;

        margin: 20px auto;
    }

    .zl-listings-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .zl-mobile-categories-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
    }

    .zl-mobile-category-card {

        padding: 20px 10px;

        min-height: 120px;

        border-radius: 16px;

        gap: 12px;
    }

    .zl-mobile-category-icon {

        width: 64px;

        height: 64px;

        border-radius: 16px;

        font-size: 30px;
    }

    .zl-mobile-category-label {

        font-size: 13px;

        font-weight: 600;
    }

    .zl-header-container {

        padding: 14px 16px;
    }

    .zl-logo {

        font-size: 20px;
    }

    .zl-card-content {

        padding: 16px;
    }

    .zl-card-price {

        font-size: 21px;
    }

    .zl-mobile-subcategory-drawer {

        padding: 18px;
    }
}
/* =========================
   VERY SMALL PHONES
========================= */

@media (max-width: 400px) {

    .zl-mobile-categories-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    .zl-mobile-category-card {

        padding: 16px 8px;

        min-height: 110px;

        gap: 10px;
    }

    .zl-mobile-category-icon {

        width: 56px;

        height: 56px;

        font-size: 26px;
    }

    .zl-mobile-category-label {

        font-size: 12px;
    }
}

/* =========================
   HEADER SEARCH
   The site's one search box. It submits to ZL_Browse (zl_q + zl_cat).
========================= */

.zl-header-search {
    flex: 1;
    max-width: 600px;
    margin: 0 28px;
}

.zl-header-search-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.zl-header-search-wrap:focus-within {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.08);
}

.zl-header-search-icon {
    position: absolute;
    left: 14px;
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
}

.zl-header-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 12px 11px 42px;
    font-size: 14px;
    color: #111827;
    outline: none;
    width: 100%;
    min-width: 100px;
}

.zl-header-search-input::placeholder {
    color: #9ca3af;
}

.zl-header-cat-select {
    border: none;
    border-left: 1.5px solid #f3f4f6;
    background: transparent;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    height: 40px;
    outline: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.zl-header-search-btn {
    color: #fff;
    border: none;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.18s ease;
}

.zl-header-search-btn:hover {
    opacity: 0.9;
}

/* =========================
   HEADER RIGHT SIDE
========================= */

.zl-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.zl-dashboard-btn,
.zl-login-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    transition: background 0.18s ease;
    white-space: nowrap;
}

.zl-dashboard-btn:hover {
    background: #e5e7eb;
}

.zl-post-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
}

.zl-post-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245,158,11,0.3);
    opacity: 0.95;
}

/* =========================
   MOBILE HAMBURGER
========================= */

.zl-mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.zl-mobile-menu-toggle span {
    width: 22px;
    height: 2px;
    background: #111827;
    border-radius: 2px;
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* =========================
   MOBILE PANEL
========================= */

.zl-mobile-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 40px rgba(0,0,0,0.12);
    z-index: 10000;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
}

.zl-mobile-panel.open {
    right: 0;
}

.zl-mobile-panel-inner {
    padding: 24px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zl-mobile-panel-close {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    color: #374151;
    margin-bottom: 12px;
}

.zl-mobile-nav-link {
    display: block;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    transition: background 0.15s ease;
}

.zl-mobile-nav-link:hover {
    background: #f3f4f6;
}

.zl-mobile-post-btn {
    background: #f59e0b;
    color: #fff !important;
    text-align: center;
    border-radius: 10px;
}

.zl-mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.zl-mobile-nav-list li a {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    color: #4b5563;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.zl-mobile-nav-list li a:hover {
    background: #f9fafb;
}

.zl-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
}

.zl-mobile-overlay.open {
    display: block;
}

/* =============================================================
   PLUGIN THEMING HOOKS
   The theme never restyles the Marketplace dashboard's markup. It only
   sets variables the plugin reads (see dashboard.css :root).
   ============================================================= */
/* Set on body (not :root) so it wins over the plugin's :root default regardless of load order. */
body {
    --zl-dash-nav-active: var(--zl-accent, #f59e0b); /* active tab in the mobile bottom nav */
}

/* =========================
   ARCHIVE PAGE
========================= */

.zl-archive-page {
    min-height: 80vh;
}

.zl-archive-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 60px;
}

.zl-archive-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    margin-top: 20px;
}

.zl-archive-sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
    overflow: visible;
    z-index: 100;
}

.zl-archive-header {
    margin: 8px 0 4px;
}

.zl-archive-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
}

.zl-archive-desc {
    color: #6b7280;
    margin-top: 6px;
}

/* =========================
   TAXONOMY FILTER BAR
========================= */

/* Sits between the archive header and the listing grid on category pages.
   Inherits .zl-filter-bar styles from Marketplace's frontend.css.
   This modifier handles margin and the condition select. */
.zl-tax-filter-bar {
    margin-bottom: 20px;
    border-radius: 10px;
}

/* No-JS fallback: show paginate_links nav */
.zl-pagination-noscript {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 24px 0 8px;
}

.zl-pagination-noscript .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.zl-pagination-noscript .page-numbers:hover {
    background: #f3f4f6;
}

.zl-pagination-noscript .page-numbers.current {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

/* When JS is active, browse.js hides the no-script nav */
.zl-pagination-noscript.zl-hidden {
    display: none;
}

/* =========================
   SINGLE LISTING PAGE — base font size
   Slightly larger than the site default (16px) so the title, price,
   description and meta text — which inherit this rather than setting
   their own font-size — read a touch bigger on the single listing page.
========================= */

.zl-listing-wrap {
    font-size: 18px;
}

/* =========================
   BREADCRUMB
========================= */

.zl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.zl-breadcrumb a {
    color: #6b7280;
    transition: color 0.15s ease;
}

.zl-breadcrumb a:hover {
    color: #111827;
}

.zl-bc-sep {
    color: #d1d5db;
}

/* =========================
   PAGINATION
========================= */

.zl-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.zl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    transition: all 0.15s ease;
    text-decoration: none;
}

.zl-pagination .page-numbers.current {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.zl-pagination .page-numbers:hover:not(.current) {
    background: #f3f4f6;
}

.zl-pagination .page-numbers.prev,
.zl-pagination .page-numbers.next {
    width: auto;
    padding: 0 16px;
}

/* =========================
   NO LISTINGS STATE
========================= */

.zl-no-listings {
    text-align: center;
    padding: 80px 40px;
    background: #fff;
    border-radius: 20px;
    border: 1.5px dashed #e5e7eb;
}

.zl-no-listings-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.zl-no-listings h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.zl-no-listings p {
    color: #6b7280;
    margin-bottom: 24px;
}

/* =========================
   SINGLE LISTING PAGE
========================= */

.zl-single-page {
    background: #ffffff;
    min-height: 80vh;
    padding-bottom: 80px;
}

.zl-single-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px;
}

.zl-single-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    margin-top: 16px;
}

.zl-single-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* GALLERY */
.zl-gallery {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.zl-gallery-main {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.zl-gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.zl-single-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zl-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
}

.zl-thumb {
    width: 72px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: border-color 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

.zl-thumb.active,
.zl-thumb:hover {
    border-color: #111827;
    opacity: 1;
}

/* LISTING DETAILS CARD */
.zl-listing-details {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.zl-listing-meta-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.zl-tag {
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.zl-tag:hover {
    background: #e5e7eb;
}

.zl-meta-time-single {
    font-size: 13px;
    color: #9ca3af;
}

.zl-single-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 16px;
}

.zl-single-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1.5px solid #f3f4f6;
    margin-bottom: 24px;
}

.zl-single-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.zl-currency-sym {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.zl-single-price {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.zl-negotiable-badge {
    background: #ecfdf5;
    color: #065f46;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.zl-price-contact {
    font-size: 20px;
    font-weight: 700;
    color: #374151;
}

.zl-single-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.zl-listing-description h3,
.zl-listing-specs h3 {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.zl-desc-content {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.75;
}

.zl-listing-specs {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1.5px solid #f3f4f6;
}

.zl-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.zl-spec-item {
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 16px;
}

.zl-spec-label {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.zl-spec-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

/* SINGLE SIDEBAR */
.zl-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zl-seller-card,
.zl-contact-card,
.zl-listing-meta-card {
    background: #fff;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.zl-seller-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.zl-seller-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.zl-seller-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.zl-seller-card .zl-seller-since,
.zl-seller-since {
    font-size: var(--zl-trust-font-size);
    font-weight: var(--zl-trust-font-weight);
    font-family: var(--zl-trust-font-family);
    color: var(--zl-trust-color);
    margin-top: 2px;
}

.zl-view-profile-btn {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    transition: all 0.15s ease;
}

.zl-view-profile-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.zl-contact-heading {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
}

.zl-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    transition: all 0.18s ease;
    cursor: pointer;
    text-decoration: none;
}

.zl-phone-btn {
    background: #111827;
    color: #fff;
}

.zl-phone-btn:hover {
    background: #374151;
    transform: translateY(-1px);
}

.zl-whatsapp-btn {
    background: #25d366;
    color: #fff;
}

.zl-whatsapp-btn:hover {
    background: #1ebe5d;
    transform: translateY(-1px);
}

.zl-message-btn {
    background: #f3f4f6;
    color: #374151;
}

.zl-message-btn:hover {
    background: #e5e7eb;
}

.zl-safety-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
    line-height: 1.5;
    padding: 10px 14px;
    background: #fffbeb;
    border-radius: 10px;
    border: 1px solid #fde68a;
}

.zl-listing-meta-card .zl-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}

.zl-listing-meta-card .zl-meta-row:last-child {
    border-bottom: none;
}

.zl-listing-meta-card .zl-meta-row span:first-child {
    color: #9ca3af;
    font-weight: 500;
}

.zl-listing-meta-card .zl-meta-row span:last-child {
    font-weight: 600;
    color: #111827;
}

/* =========================
   LISTINGS GRID
========================= */

.zl-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

/* =========================
   CARD STYLES (enhanced)
========================= */

.zl-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1.5px solid #f3f4f6;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.zl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.1);
    border-color: #e5e7eb;
}

.zl-card-image-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f3f4f6;
}

.zl-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.zl-card:hover .zl-card-image {
    transform: scale(1.04);
}

.zl-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 2;
}

.zl-card-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
    color: #d1d5db;
    transition: color 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.zl-card-favorite:hover {
    color: #ef4444;
    transform: scale(1.1);
}

.zl-card-content {
    padding: 14px 16px;
}

.zl-card-condition {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 5px;
}

.zl-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zl-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.zl-meta-location {
    display: flex;
    align-items: center;
    gap: 2px;
}

.zl-card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.zl-card-price {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
}

/* =========================
   SELLER META ROW
   Holds whatever Marketplace exposes (trust badge, active-seller
   signal, membership duration) below the price. Aura arranges and
   styles this; it never calculates the values themselves.
========================= */

.zl-card-seller-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--zl-trust-gap);
    width: 100%;
}

/* Override Marketplace's own .zl-trust-row spacing so it sits
   inline within the seller-meta row instead of as its own
   top-bordered block (that border made sense when it was the
   last element in the footer; it no longer is). */
.zl-card-seller-meta .zl-trust-row {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    gap: var(--zl-trust-gap);
}

/* Same treatment for the single-listing seller card — Active Seller
   sits in a tight 2px-gap stack (name, duration, active, link), so
   Marketplace's default top-border/spacing on .zl-trust-row would
   look like a stray divider there. */
.zl-seller-card .zl-trust-row {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.zl-card-seller-meta .zl-trust-verified,
.zl-card-seller-meta .zl-trust-active,
.zl-seller-card .zl-trust-active,
.zl-card-seller-meta .zl-seller-duration {
    font-size: var(--zl-trust-font-size);
    font-weight: var(--zl-trust-font-weight);
    font-family: var(--zl-trust-font-family);
}

/* The verified badge ships from Marketplace as a solid blue filled
   pill (#2563eb) — appropriate for a single isolated badge, but too
   loud now that it sits in a row of multiple signals under the price.
   Aura restyles it as a quiet outlined pill instead of overriding
   just text size/weight. */
.zl-card-seller-meta .zl-trust-verified {
    padding: 3px 8px 3px 6px;
    background: #eff6ff;
    color: #2563eb;
}

.zl-card-seller-meta .zl-trust-verified svg {
    stroke: #2563eb;
}

/* Active Seller — shared styling, scoped to both surfaces it can
   appear on (card seller-meta row, single-listing seller card) for
   specificity safety rather than relying on stylesheet load order.
   As of this revision render_active() is only actually called from
   the single listing seller card, not the card footer — but the
   toned-down color (vs. Marketplace's saturated green default)
   should apply consistently wherever it's used. */
.zl-card-seller-meta .zl-trust-active,
.zl-seller-card .zl-trust-active {
    color: #6b7280;
}

.zl-card-seller-meta .zl-trust-active svg,
.zl-seller-card .zl-trust-active svg {
    fill: #9ca3af;
    width: 6px;
    height: 6px;
}

/* Tighten the icon-to-text gap now that the icon itself is smaller —
   Marketplace's base 3px gap was tuned for the original 10px icon. */
.zl-seller-card .zl-trust-active {
    gap: 5px;
}

.zl-seller-duration {
    color: var(--zl-trust-color);
    white-space: nowrap;
}

/* Separator dots between seller-meta items, matching the
   "Listed Place • Active Seller • 3 Years" layout. ZL_Trust_Badge
   wraps verified+active in its own .zl-trust-row div, so dots are
   needed both between that row's children and after the row
   itself (before duration) — not just between direct children of
   .zl-card-seller-meta. */
.zl-card-seller-meta > *:not(:last-child)::after,
.zl-card-seller-meta .zl-trust-row > *:not(:last-child)::after {
    content: '•';
    margin-left: var(--zl-trust-gap);
    color: var(--zl-trust-dot-color);
    font-weight: 400;
}

.zl-seller-avatar {
    width: 28px;
    height: 28px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

/* =========================
   FOOTER
========================= */

.zl-footer {
    background: #111827;
    color: #e5e7eb;
    margin-top: 60px;
}

.zl-footer-top {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 28px 40px;
    display: grid;
    grid-template-columns: 1.1fr 2.4fr;
    gap: 60px;
    align-items: start;
}

.zl-footer-brand {
    /* col 1: logo, tagline, social */
}

.zl-footer-logo {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.zl-footer-tagline {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1.6;
}

/* col 2: inner 3-col grid for the link columns */
.zl-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.zl-footer-col h4 {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 16px;
}

.zl-footer-col a {
    display: block;
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 10px;
    transition: color 0.15s ease;
}

.zl-footer-col a:hover {
    color: #e5e7eb;
}

/* Footer Links widget – headings and links inherit col styles */
.zl-footer-widget { width: 100%; }

.zl-footer-col-heading {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 16px;
}

.zl-footer-col-links a {
    display: block;
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 10px;
    transition: color 0.15s ease;
}

.zl-footer-col-links a:hover {
    color: #e5e7eb;
}

.zl-footer-bottom {
    border-top: 1px solid #1f2937;
    padding: 20px 28px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #6b7280;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
    .zl-header-search {
        max-width: 460px;
        margin: 0 14px;
    }

    .zl-single-layout {
        grid-template-columns: 1fr;
    }

    .zl-single-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .zl-listing-meta-card {
        grid-column: 1 / -1;
    }

    .zl-archive-layout {
        grid-template-columns: 220px 1fr;
    }

    .zl-footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .zl-footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Keep the fixed header from becoming cramped before the mobile breakpoint. */
@media (max-width: 900px) and (min-width: 769px) {
    .zl-header-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .zl-header-search {
        max-width: 360px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .zl-header-right {
        gap: 8px;
    }

    .zl-dashboard-btn,
    .zl-login-btn,
    .zl-post-btn {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 768px) {
    /* The fixed header becomes two rows: brand/actions + search. Reserve
       the real space so page content never sits underneath it. */
    body {
        padding-top: 132px;
    }

    .zl-header-container {
        flex-wrap: wrap;
    }

    .zl-header-search {
        order: 3;
        flex: 0 0 100%;
        max-width: none;
        margin: 10px 0 0;
    }

    .zl-header-search-wrap {
        width: 100%;
    }

    .zl-desktop-nav,
    .zl-dashboard-btn {
        display: none;
    }

    /* Redundant on mobile — the plugin's fixed bottom bar has the + (sell)
       button, a better spot for a primary CTA on small screens
       (thumb-reachable, always visible) than a header button squeezed
       next to the logo, search toggle, and hamburger. */
    .zl-post-btn {
        display: none;
    }

    .zl-mobile-menu-toggle {
        display: flex;
    }

    .zl-archive-layout {
        grid-template-columns: 1fr;
    }

    .zl-archive-sidebar {
        display: none;
    }

    .zl-single-sidebar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .zl-listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .zl-home-layout {
        grid-template-columns: 1fr;
        margin: 16px auto;
        padding: 0 14px;
    }

    .zl-sidebar {
        display: none;
    }

    .zl-footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .zl-footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .zl-header-cat-select {
        /* Stays available on phones: a compact picker beside the input. */
        max-width: 96px;
        padding: 0 6px;
        font-size: 12px;
        text-overflow: ellipsis;
    }

    .zl-header-search-btn {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 480px) {
    .zl-listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .zl-header-container {
        padding: 12px 14px;
    }

    .zl-logo {
        font-size: 18px;
    }
}

/* =========================
   MOBILE CATEGORY STRIP
========================= */

.zl-mobile-cat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-bottom: 4px;
}

.zl-mobile-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
    text-decoration: none;
    /* Minimum touch target */
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.zl-mobile-category-card:hover,
.zl-mobile-category-card.active {
    opacity: 0.82;
    background: transparent;
    border: none;
}

.zl-mobile-cat-icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: transform 0.15s ease;
    padding: 6px;
    box-sizing: border-box;
}

.zl-mobile-category-card:hover .zl-mobile-cat-icon,
.zl-mobile-category-card.active .zl-mobile-cat-icon {
    transform: scale(1.04);
}

.zl-mobile-cat-icon img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.zl-mobile-cat-name {
    font-size: 11px;
    font-weight: 600;
    color: #111827;
    text-align: center;
    line-height: 1.3;
    padding: 0 2px;
    word-break: break-word;
}

@media (max-width: 400px) {
    .zl-mobile-cat-strip {
        gap: 8px;
    }

    .zl-mobile-cat-icon {
        border-radius: 14px;
        font-size: 34px;
        padding: 5px;
    }

    .zl-mobile-cat-name {
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .zl-mobile-cat-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================
   CATEGORY SIDEBAR ICONS
========================= */


/* =========================
   SIDEBAR PANEL EXTRAS
========================= */

.zl-panel-heading {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #f3f4f6;
}

/* .zl-panel-content a — consolidated above */

.zl-sub-count {
    font-size: 11px;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.zl-category-left {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    width: 100%;
}

/* =========================
   NOT FOUND PAGE
========================= */

.zl-not-found {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
    padding: 40px;
}

/* =========================
   404 ERROR PAGE
========================= */

.zl-error-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.zl-error-container {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 24px;
}

.zl-error-graphic {
    position: relative;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.zl-error-code {
    font-size: 96px;
    font-weight: 900;
    color: #f3f4f6;
    line-height: 1;
    letter-spacing: -4px;
    user-select: none;
}

.zl-error-icon {
    font-size: 52px;
    position: absolute;
}

.zl-error-title {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
}

.zl-error-message {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 32px;
}

.zl-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.zl-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111827;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.18s ease, transform 0.18s ease;
    text-decoration: none;
}

.zl-btn-primary:hover {
    background: #374151;
    transform: translateY(-2px);
}

.zl-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    color: #374151;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.18s ease;
    text-decoration: none;
}

.zl-btn-secondary:hover {
    background: #e5e7eb;
}

.zl-error-cats p {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.zl-error-cat-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.zl-error-cat-pill {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    color: #374151;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
    text-decoration: none;
}

.zl-error-cat-pill:hover {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

/* =========================
   SEARCH REFINE BAR
========================= */

.zl-search-refine {
    margin-bottom: 24px;
}

.zl-result-count {
    font-size: 16px;
    font-weight: 500;
    color: #9ca3af;
    margin-left: 10px;
}

/* =========================
   POST AD PAGE (wrapper only: the plugin owns the form and its styles)
========================= */

.zl-create-listing-page {
    background: #ffffff;
    min-height: 80vh;
    padding-bottom: 80px;
}

.zl-create-listing-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px;
}

/* =========================
   DASHBOARD PAGE (page shell only)
   The theme owns the frame around the [zl_dashboard] shortcode: page
   background and container width. Everything inside (.zl-dash-*, .zl-mbn-*,
   .zl-mobile-*) belongs to the Marketplace plugin and is NOT styled here.
   Brand colour is passed in through CSS variables (see "Plugin theming hooks").
========================= */

.zl-dashboard-page {
    background: #ffffff;
    min-height: 80vh;
    padding-bottom: 80px;
}

.zl-dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 28px;
}

/* =========================
   CSS CUSTOM PROPERTIES
========================= */

:root {
    --zl-accent:  #f59e0b;
    --zl-hero-bg: #111827;
}

/* =========================
   HERO SECTION
========================= */

.zl-hero {
    background: var(--zl-hero-bg);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.zl-hero-bg-color {
    background: var(--zl-hero-color, var(--zl-hero-bg));
}

/* Slides are stacked in one grid cell, so the hero is as tall as its tallest
   slide and grows on its own when a slide has a lot of text. */
.zl-hero-slides {
    display: grid;
}

.zl-hero-slide {
    grid-area: 1 / 1;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    /* Height is a minimum (Appearance > Customize > Hero Section > Hero Height). */
    min-height: var(--zl-hero-min-height, 340px);
    padding: 56px 24px 64px;
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.zl-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0s;
}

/* A hero that is not a slideshow never fades. */
.zl-hero:not([data-zl-hero]) .zl-hero-slide {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .zl-hero-slide,
    .zl-hero-slide.is-active { transition: none; }
}

/* Overlay for text contrast. Photo slides get a plain scrim (Customizer >
   Text Readability Overlay); the plain-colour hero keeps its warm glow. */
.zl-hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.38));
}

.zl-hero-slide:not(.has-image)::before {
    background: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)), radial-gradient(ellipse 80% 60% at 50% -10%, rgba(245,158,11,0.18) 0%, transparent 70%);
}

.zl-hero-overlay-left .zl-hero-slide.has-image::before {
    background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0) 80%);
}

.zl-hero-overlay-none .zl-hero-slide.has-image::before {
    display: none;
}

/* Clickable background: an invisible link covering the slide, under the text.
   The text block ignores the pointer, so a click anywhere on the banner opens
   the link; only the button keeps its own click. */
.zl-hero-slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.zl-hero-slide-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

.zl-hero-slide.has-bg-link .zl-hero-inner {
    pointer-events: none;
}

.zl-hero-slide.has-bg-link .zl-hero-btn {
    pointer-events: auto;
}

/* Left-aligned content, lined up with the page container. */
.zl-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: left;
}

.zl-hero-heading {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
    max-width: 640px;
    text-align: left;
}

.zl-hero-subtext {
    font-size: 17px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0;
    max-width: 560px;
    text-align: left;
}

.zl-hero-heading + .zl-hero-btn,
.zl-hero-subtext + .zl-hero-btn {
    margin-top: 24px;
}

/* Hero button */
.zl-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zl-hero-btn:hover { transform: translateY(-1px); text-decoration: none; }
.zl-hero-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.zl-hero-btn-light .zl-hero-btn { background: #fff; color: #111827; }
.zl-hero-btn-light .zl-hero-btn:hover { background: #f3f4f6; color: #111827; }

.zl-hero-btn-accent .zl-hero-btn { background: var(--zl-accent, #f59e0b); color: #111827; }
.zl-hero-btn-accent .zl-hero-btn:hover { filter: brightness(1.08); color: #111827; }

.zl-hero-btn-outline .zl-hero-btn { background: transparent; color: #fff; border-color: #fff; }
.zl-hero-btn-outline .zl-hero-btn:hover { background: #fff; color: #111827; }

/* Slideshow controls: dots centred, arrows + pause at bottom right */
.zl-hero-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.zl-hero-dots {
    display: flex;
    gap: 4px;
    pointer-events: auto;
}

.zl-hero-dot {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.zl-hero-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-sizing: border-box;
    background: transparent;
    transition: background-color 0.15s ease;
}

.zl-hero-dot.is-active::after { background: #fff; }
.zl-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 50%; }

.zl-hero-nav {
    position: absolute;
    right: 16px;
    bottom: 0;
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.zl-hero-nav-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: background-color 0.15s ease;
}

.zl-hero-nav-btn:hover { background: #f3f4f6; }
.zl-hero-nav-btn:focus-visible { outline: 3px solid #111827; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

.zl-hero-toggle .zl-ico-play { display: none; }
.zl-hero.is-paused .zl-hero-toggle .zl-ico-play { display: block; }
.zl-hero.is-paused .zl-hero-toggle .zl-ico-pause { display: none; }

/* =========================
   SECTION HEADER
========================= */

.zl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 28px;
}

.zl-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zl-section-accent {
    display: inline-block;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--zl-accent);
    flex-shrink: 0;
}

.zl-see-all {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.zl-see-all:hover {
    color: #111827;
}

/* FEATURED ROW (horizontal scroll on small screens) */
.zl-listings-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 8px;
}

/* Legacy featured styling removed; Spotlight uses the normal card surface. */
/* .zl-featured-row remains a generic row utility when used by other modules. */

/* LOAD MORE */
.zl-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.zl-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #e5e7eb;
    color: #374151;
    padding: 14px 36px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.18s ease;
    text-decoration: none;
}

.zl-load-more-btn:hover {
    border-color: #111827;
    color: #111827;
    transform: translateY(-1px);
}

/* =========================
   SELL CTA BANNER
========================= */

.zl-sell-banner {
    background: #111827;
    margin-top: 60px;
}

.zl-sell-banner-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.zl-sell-banner-text h2 {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.zl-sell-banner-text p {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
}

.zl-sell-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--zl-accent);
    color: #fff;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.18s ease;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.zl-sell-banner-btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245,158,11,0.3);
}

/* =========================
   LISTING CARD UPGRADES
========================= */

.zl-card-condition-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--cond-color, #6b7280);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
}

.zl-card-cat-tag {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.zl-price-sym {
    font-size: 13px;
    font-weight: 700;
    vertical-align: top;
    margin-top: 3px;
    margin-right: 1px;
}

.zl-neg-pill {
    display: inline-flex;
    align-items: center;
    background: #059669;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-left: 6px;
    vertical-align: middle;
}

.zl-price-contact {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    white-space: normal;
    line-height: 1.3;
}

.zl-meta-views {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #9ca3af;
}

.zl-meta-dot {
    color: #d1d5db;
    font-size: 10px;
}

.zl-card-seller-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.zl-verified-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #3b82f6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
}

.zl-card-favorite svg {
    display: block;
}

/* =========================
   SELLER DIRECTORY PAGE
========================= */

.zl-sellers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.zl-seller-dir-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px 16px;
    text-align: center;
    border: 1.5px solid #f3f4f6;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.zl-seller-dir-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.1);
    border-color: #e5e7eb;
}

.zl-seller-dir-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
}

.zl-seller-dir-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.zl-seller-dir-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--zl-accent);
}

.zl-seller-dir-since {
    font-size: 11px;
    color: #9ca3af;
}

/* =========================
   HOMEPAGE RESPONSIVE
========================= */

@media (max-width: 768px) {

    .zl-hero-slide {
        padding: 40px 16px 56px;
        min-height: calc(var(--zl-hero-min-height, 340px) * 0.75);
    }

    .zl-hero-subtext {
        font-size: 15px;
    }

    .zl-hero-nav {
        right: 10px;
    }

    .zl-hero-nav-btn {
        width: 34px;
        height: 34px;
    }

    .zl-hero-controls {
        bottom: 10px;
    }

    /* On photos the left-fade overlay reaches further, so text stays readable
       on narrow screens where it spans most of the picture. */
    .zl-hero-overlay-left .zl-hero-slide.has-image::before {
        background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.2) 100%);
    }

    .zl-sell-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 36px 16px;
    }

    .zl-sell-banner-btn {
        width: 100%;
        justify-content: center;
    }

    .zl-listings-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 560px) {
    .zl-header-cat-select {
        /* Stays available on phones: a compact picker beside the input. */
        max-width: 96px;
        padding: 0 6px;
        font-size: 12px;
        text-overflow: ellipsis;
    }

    .zl-header-search-btn {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 480px) {
    .zl-hero-heading {
        font-size: 26px;
    }
}

/* =========================
   FOOTER UPGRADES
========================= */

.zl-footer-logo-link {
    display: inline-block;
    margin-bottom: 12px;
    text-decoration: none;
}

.zl-footer-logo-img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.zl-footer-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.zl-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.zl-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    transition: background 0.18s ease, color 0.18s ease;
}

.zl-social-icon:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.zl-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
}

.zl-footer-bottom-links a {
    color: #6b7280;
    transition: color 0.15s ease;
}

.zl-footer-bottom-links a:hover {
    color: #9ca3af;
}

/* =========================
   PACKAGES PAGE
========================= */

.zl-packages-page {
    background: #ffffff;
    min-height: 80vh;
    padding-bottom: 80px;
}

.zl-packages-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px;
}

.zl-packages-header {
    text-align: center;
    margin: 16px 0 48px;
}

.zl-packages-title {
    font-size: 34px;
    font-weight: 900;
    color: #111827;
    margin-bottom: 10px;
}

.zl-packages-subtitle {
    font-size: 16px;
    color: #6b7280;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* PRICING CARDS */
.zl-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.zl-pkg-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px 28px;
    border: 2px solid #f3f4f6;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zl-pkg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.zl-pkg-popular {
    border-color: var(--zl-accent);
    box-shadow: 0 8px 32px rgba(245,158,11,0.15);
}

.zl-pkg-current {
    border-color: #10b981;
}

.zl-pkg-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 18px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.zl-pkg-current-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 18px;
    border-radius: 999px;
    white-space: nowrap;
}

.zl-pkg-name {
    font-size: 14px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

.zl-pkg-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.zl-pkg-currency {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.zl-pkg-price {
    font-size: 44px;
    font-weight: 900;
    color: #111827;
    line-height: 1;
}

.zl-pkg-period {
    font-size: 14px;
    color: #9ca3af;
    margin-left: 2px;
}

.zl-pkg-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 24px;
    min-height: 42px;
}

.zl-pkg-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.zl-pkg-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
}

.zl-pkg-feat svg {
    color: #10b981;
    flex-shrink: 0;
}

.zl-pkg-feat--no {
    color: #9ca3af;
}

.zl-pkg-feat--no svg {
    color: #d1d5db;
}

.zl-pkg-cta {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.18s ease;
    text-decoration: none;
    margin-top: auto;
}

.zl-pkg-cta--upgrade {
    background: #111827;
    color: #fff;
}

.zl-pkg-cta--upgrade:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.zl-pkg-cta--free {
    background: #f3f4f6;
    color: #374151;
}

.zl-pkg-cta--free:hover {
    background: #e5e7eb;
}

.zl-pkg-cta--current {
    background: #f0fdf4;
    color: #065f46;
    font-weight: 700;
    border: 2px solid #bbf7d0;
    cursor: default;
}

/* COMPARISON TABLE */
.zl-compare-wrap {
    margin-bottom: 60px;
}

.zl-compare-title {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    text-align: center;
    margin-bottom: 28px;
}

.zl-compare-table-wrap {
    overflow-x: auto;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.zl-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}

.zl-compare-table th,
.zl-compare-table td {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
}

.zl-compare-table th {
    background: #111827;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.zl-compare-table th:first-child,
.zl-compare-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #374151;
}

.zl-compare-table tr:last-child td {
    border-bottom: none;
}

.zl-compare-table tr:nth-child(even) td {
    background: #f9fafb;
}

.zl-yes {
    color: #10b981;
    font-weight: 700;
    font-size: 16px;
}

.zl-no-feat {
    color: #d1d5db;
}

/* FAQ */
.zl-pkg-faq {
    margin-bottom: 40px;
}

.zl-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.zl-faq-item {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.zl-faq-item h3 {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.zl-faq-item p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.65;
}

/* =========================
   WIDGETS
========================= */

.zl-widget {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.zl-widget-title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #f3f4f6;
}

/* Recent / Nearby listing list */
.zl-widget-listing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zl-widget-listing-link {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.zl-widget-listing-link:hover {
    opacity: 0.8;
}

.zl-widget-listing-thumb {
    width: 56px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f3f4f6;
}

.zl-widget-listing-info {
    flex: 1;
    min-width: 0;
}

.zl-widget-listing-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.zl-widget-listing-price {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
}

.zl-widget-oos-badge {
    display: inline-block;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-bottom: 3px;
}

.zl-widget-listing-loc {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* Category list widget */
.zl-widget-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zl-widget-cat-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.zl-widget-cat-link:hover {
    background: #f9fafb;
}

.zl-widget-cat-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.zl-widget-cat-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.zl-widget-cat-count {
    font-size: 11px;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

/* =========================
   PACKAGES RESPONSIVE
========================= */

@media (max-width: 640px) {
    .zl-packages-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .zl-packages-title {
        font-size: 26px;
    }
}

/* category-left link fix */
.zl-category-left { text-decoration: none; color: inherit; }

/* Ensure sidebar visible on desktop */
@media (min-width: 769px) {
    .zl-sidebar, .zl-home-sidebar { display: block !important; }
}

/* =========================
   MOBILE DRAWER - CHILD LINKS
========================= */

.zl-drawer-all-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-radius: 12px;
    background: #f3f4f6;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
    margin-bottom: 12px;
    transition: background 0.15s ease;
}

.zl-drawer-all-link:hover {
    background: #e5e7eb;
}

.zl-drawer-children {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.zl-drawer-child-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1.5px solid #f3f4f6;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s ease;
}

.zl-drawer-child-link:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #111827;
}

/* =========================
   MOBILE CATEGORY CARD (button reset)
========================= */

button.zl-mobile-category-card {
    background: #fff;
    border: 1.5px solid #f3f4f6;
    cursor: pointer;
    font-family: inherit;
}

button.zl-mobile-category-card:hover,
button.zl-mobile-category-card.active {
    border-color: #111827;
    background: #f9fafb;
}

/* =========================
   DESKTOP PANEL CONTENT LINKS - CLEAN SINGLE RULE
========================= */

.zl-panel-content a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    margin-bottom: 3px;
}

.zl-panel-content a:hover {
    background: #f3f4f6;
    color: #111827;
}

.zl-sub-count {
    font-size: 11px;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 6px;
}

/* =========================
   DEFAULT PAGE TEMPLATE
========================= */

.zl-page {
    min-height: 60vh;
    background: #ffffff;
    padding-bottom: 64px;
}

.zl-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.zl-page-title-wrap {
    padding-top: 40px;
    padding-bottom: 8px;
}

.zl-page-title {
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* =========================
   FLEXIBLE CONTENT WIDTH
   Applies to plain block-editor content (Gutenberg core blocks,
   Kadence Blocks, etc.) rendered inside .zl-page-content. Pages built
   with a page builder (Elementor...) skip this wrapper entirely — see
   page.php — because those plugins manage their own section widths.

   Default: regular blocks sit in a comfortable reading column.
   .alignwide: escapes to the page container's 1200px width.
   .alignfull: escapes the container entirely, edge-to-edge.
========================= */

.zl-page-content {
    padding-top: 24px;
    line-height: 1.8;
    font-size: 1rem;
    color: #1f2937;
}

.zl-page-content > * {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.zl-page-content > .alignwide {
    max-width: 1200px;
}

.zl-page-content > .alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.zl-page-content h1,
.zl-page-content h2,
.zl-page-content h3,
.zl-page-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.25;
    color: #111827;
}

.zl-page-content p {
    margin: 0 0 1rem;
}

.zl-page-content ul,
.zl-page-content ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.zl-page-content blockquote {
    border-left: 4px solid #2563eb;
    padding: 12px 16px;
    background: #eff6ff;
    border-radius: 8px;
    margin: 1rem 0;
}

.zl-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.zl-page-content table td,
.zl-page-content table th {
    border: 1px solid #e5e7eb;
    padding: 10px;
}

.zl-page-content pre {
    overflow: auto;
    padding: 16px;
    border-radius: 10px;
    background: #111827;
    color: #f9fafb;
}

.zl-page-content code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #f3f4f6;
}

.zl-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.zl-page-content .wp-block-button__link,
.zl-page-content .kb-button {
    font-weight: 600;
}

@media (max-width: 640px) {
    .zl-page-title {
        font-size: 1.6rem;
    }
    .zl-page-title-wrap {
        padding-top: 24px;
    }
}

/* =========================
   LISTING CARD — v2 UPDATES
========================= */

/* Price + condition stacked wrapper */
.zl-card-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Condition badge — sits above the title */
.zl-card-condition-inline {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--cond-color, #6b7280) 12%, transparent);
    color: var(--cond-color, #6b7280);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--cond-color, #6b7280) 30%, transparent);
    margin-bottom: 8px;
}

/* Favorite button saved state */
.zl-card-favorite.liked {
    color: #ef4444;
}
.zl-card-favorite.liked svg {
    fill: currentColor;
}
.zl-card-favorite:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* Spotlight badge */
.zl-spotlight-badge{
    position:absolute;
    top:12px;
    right:12px;
    min-height:26px;
    padding:5px 9px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:11px;
    line-height:1;
    font-weight:700;
    color:#111827;
    z-index:20;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.zl-spotlight-badge span{line-height:1;}

/* Out of Stock — independent of the Spotlight top-right slot; a
   bottom ribbon plus a dimmed image so it reads at a glance in a grid,
   without needing the top-right corner Spotlight already uses. */
.zl-outofstock-ribbon{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:6px 10px;
    background:rgba(17,17,17,.82);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    text-align:center;
    z-index:20;
}
.zl-card--outofstock .zl-card-image{
    opacity:.6;
    filter:grayscale(.35);
}
.zl-outofstock-notice{
    background:#fef2f2;
    color:#991b1b;
    border:1px solid #fecaca;
    border-radius:6px;
    padding:10px 12px;
    font-size:13px;
    line-height:1.5;
    margin-bottom:14px;
}


/* Blog styling */
.zl-blog-container{max-width:900px;margin:40px auto;padding:0 20px;}
.zl-blog-article{background:#fff;border-radius:18px;padding:32px;box-shadow:0 4px 16px rgba(0,0,0,.08);}
.zl-blog-title{font-size:2.2rem;line-height:1.2;margin:0 0 24px;}
.zl-blog-featured-image{width:100%;height:auto;border-radius:18px;margin-bottom:24px;display:block;}
.zl-blog-content{line-height:1.8;font-size:1rem;}
.zl-blog-content h2,.zl-blog-content h3,.zl-blog-content h4{margin-top:2rem;margin-bottom:1rem;}
.zl-blog-content ul,.zl-blog-content ol{padding-left:1.5rem;margin:1rem 0;}
.zl-blog-content blockquote{border-left:4px solid #2563eb;padding:12px 16px;background:#eff6ff;border-radius:8px;margin:1rem 0;}
.zl-blog-content table{width:100%;border-collapse:collapse;margin:1rem 0;}
.zl-blog-content table td,.zl-blog-content table th{border:1px solid #e5e7eb;padding:10px;}
.zl-blog-content pre{overflow:auto;padding:16px;border-radius:10px;background:#111827;color:#f9fafb;}
.zl-blog-content code{padding:2px 6px;border-radius:4px;background:#f3f4f6;}
.zl-blog-content img{max-width:100%;height:auto;border-radius:12px;}

/* =========================
   UNIFIED SEARCH PAGE
========================= */

.zl-search-page {
    padding: 32px 0 64px;
}

.zl-search-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.zl-search-page-form {
    max-width: 560px;
    margin: 0 0 24px;
}

.zl-search-refine-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 32px;
    font-size: 0.95rem;
}

.zl-search-refine-links a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.zl-search-refine-links a:hover {
    text-decoration: underline;
}

.zl-search-empty-state {
    color: #6b7280;
    font-size: 1rem;
    padding: 40px 0;
    text-align: center;
}

.zl-search-result-count {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0 0 20px;
}

.zl-card--place .zl-card-condition-inline {
    background: rgba(2, 132, 199, 0.1);
}

.zl-filter-form-hidden {
    display: none;
}

/* =========================================================
   Single listing — business (store) card, centred layout
   ---------------------------------------------------------
   The base .zl-business-card rules live in the Marketplace
   plugin's assets/css/frontend.css. The theme owns placement
   and presentation only (see SHARED-TEMPLATE-CONTRACT.md), so
   these are overrides rather than edits to the plugin file.

   Both stylesheets are enqueued on wp_enqueue_scripts at the
   default priority, and the plugin registers its hook first,
   so frontend.css prints before main.css. The selectors below
   are also scoped to .zl-listing-sidebar so they outrank the
   plugin's single-class rules regardless of order.
   ========================================================= */

.zl-listing-sidebar .zl-business-card--centered {
    text-align: center;
}

/* Store name — centred, was a flex row that carried the
   now-removed "Verified Place" badge alongside it. */
.zl-listing-sidebar .zl-business-card--centered .zl-business-seller-name {
    display: block;
    margin-top: 0;
}

.zl-listing-sidebar .zl-business-card--centered .zl-business-seller-name strong {
    display: block;
    font-size: 17px;
    line-height: 1.3;
}

/* Time on platform — sits directly under the store name. */
.zl-listing-sidebar .zl-business-card--centered .zl-business-seller-since {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* Star rating — the plugin renders .zl-stars-display as an
   inline-flex row; centre it within the card. */
.zl-listing-sidebar .zl-business-card--centered .zl-business-trust-block {
    margin-top: 10px;
}

.zl-listing-sidebar .zl-business-card--centered .zl-business-trust-block .zl-stars-display {
    justify-content: center;
}

/* Visit Store link — centred, no trailing arrow. */
.zl-listing-sidebar .zl-business-card--centered .zl-business-profile-link {
    display: block;
    margin-top: 14px;
    text-align: center;
}

/* =========================
   BUY NOW BOX (single-zl_listing.php)
   The card shell (.zl-listing-card: padding/border/radius/shadow) comes
   from the plugin's frontend.css, loaded on every listing page regardless
   of template — this only styles what's inside the box, matching this
   theme's button language (.zl-phone-btn's dark CTA, .zl-contact-btn's
   field rhythm) rather than the plugin's own default green button.
========================= */

.zl-buy-box label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin: 10px 0 4px;
}

.zl-buy-box label small {
    font-weight: 400;
    color: #9ca3af;
}

.zl-buy-box input,
.zl-buy-box select,
.zl-buy-box textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    color: #111827;
}

.zl-buy-box input:focus,
.zl-buy-box select:focus,
.zl-buy-box textarea:focus {
    outline: none;
    border-color: #111827;
}

.zl-buy-box textarea {
    resize: vertical;
}

.zl-buy-box .zl-buy-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s ease;
}

.zl-buy-box .zl-buy-submit:hover {
    background: #374151;
    transform: translateY(-1px);
}

.zl-buy-box .zl-buy-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 8px;
}

.zl-buy-box .zl-buy-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
}

/* Quantity: "Quantity [ 1 v ]" on one line, the only control besides Buy now */
.zl-buy-box .zl-buy-qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.zl-buy-box .zl-buy-qty-row label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.zl-buy-box .zl-buy-qty-row select,
.zl-buy-box .zl-buy-qty-row input {
    width: auto;
    min-width: 88px;
    max-width: 140px;
}

.zl-buy-box .zl-buy-variants {
    margin: 0;
}

.zl-buy-box .zl-buy-submit.is-disabled,
.zl-buy-box .zl-buy-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Delivery details dialog (opens from Buy now when logged in) */
.zl-buy-dialog {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.zl-buy-dialog[hidden] {
    display: none;
}

.zl-buy-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
}

.zl-buy-dialog__panel {
    position: relative;
    width: min(480px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.zl-buy-dialog__panel h2 {
    margin: 0 36px 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.zl-buy-dialog__close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.zl-buy-box .zl-buy-dialog .zl-buy-dialog__submit {
    margin-top: 18px;
}

body.zl-buy-dialog-open {
    overflow: hidden;
}

@media (max-width: 520px) {
    .zl-buy-dialog { padding: 10px; }
    .zl-buy-dialog__panel { padding: 20px; }
}

/* =========================================================
   AURA — WIDE DESKTOP DASHBOARD LAYOUT
   Layout-only refinement. No dashboard markup or functionality
   is changed. The dashboard uses the available desktop width
   more effectively while retaining responsive breakpoints.
========================================================= */
@media (min-width: 1201px) {
    .zl-dashboard-container {
        width: min(calc(100% - 64px), 1480px);
        max-width: 1480px;
        padding: 0 0 56px;
    }
}

@media (min-width: 1500px) {
    .zl-dashboard-container {
        width: min(calc(100% - 80px), 1560px);
        max-width: 1560px;
    }
}

/* =========================
   HOME DISCOVERY FEED
========================= */

.zl-home-discovery-section {
    width: 100%;
    margin: 0 0 34px;
}

.zl-home-discovery-section .zl-section-header {
    margin-top: 0;
}

.zl-home-product-grid,
.zl-home-place-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.zl-home-product-grid > .zl-card,
.zl-home-place-grid > .zl-place-card {
    min-width: 0;
}

/* Place cards are rendered by Zilideon Place (ZL_Place_UI::render_card), not by
   this theme. Aura only skins them, through Place's documented custom
   properties, so they sit comfortably beside Aura's own listing cards. */
.zl-place-card {
    --zl-pc-radius: 18px;
    --zl-pc-border: #f3f4f6;
    --zl-pc-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    --zl-pc-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.10);
    --zl-pc-accent: var(--zl-accent, #0284c7);
    font-family: inherit;
}
.zl-listings-grid > .zl-place-card {
    min-width: 0;
}

@media (max-width: 1100px) {
    .zl-home-product-grid,
    .zl-home-place-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .zl-home-product-grid,
    .zl-home-place-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .zl-home-discovery-section {
        margin-bottom: 26px;
    }

    .zl-home-product-grid,
    .zl-home-place-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* =========================
   HOME "NEAR YOU" DISTRICT PICKER
   The form itself is rendered by Marketplace (ZL_Home_Feed::render_district_picker).
========================= */

.zl-home-discovery-section-near .zl-section-header {
    flex-wrap: wrap;
    gap: 10px;
}

.zl-home-district-form {
    margin: 0;
    max-width: 100%;
}

.zl-home-district-form .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zl-home-district-form select {
    height: 36px;
    max-width: 100%;
    padding: 0 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.zl-home-district-form select:focus {
    border-color: var(--zl-accent, #f59e0b);
    outline: none;
}

.zl-home-district-form button {
    height: 36px;
    margin-left: 6px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--zl-accent, #f59e0b);
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* =========================
   CARD: ITEM RATING + PRICE DROP
   Data comes from Marketplace (ZL_Item_Reviews::card_rating, ZL_Price_Drops::get).
========================= */

.zl-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.zl-card-rating-star {
    color: var(--zl-accent, #f59e0b);
    line-height: 1;
}

.zl-card-rating-count {
    font-weight: 500;
    color: #6b7280;
}

.zl-card-drop {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.zl-card-was {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
}

.zl-card-drop-pct {
    padding: 1px 6px;
    border-radius: 4px;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 800;
}


/* ==========================================================================
   Product page: mobile sticky buy bar + gallery zoom (theme-owned)
   ========================================================================== */
.zl-sticky-bar { display: none; }
@media (max-width: 780px) {
    .zl-sticky-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; /* below modals */
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
        transition: transform .2s ease, visibility .2s;
    }
    .zl-sticky-bar--hidden { transform: translateY(100%); visibility: hidden; }
    .zl-sticky-bar__price {
        min-width: 0; font-size: 17px; font-weight: 700; color: #111827;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .zl-sticky-bar__btn {
        flex: 0 0 auto; border: 0; border-radius: 10px; padding: 12px 22px;
        background: var(--zl-accent, #f59e0b); color: #111827; font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .zl-listing-wrap--has-sticky { padding-bottom: 84px; }
}
body.zl-lightbox-open { overflow: hidden; }
.zl-lightbox { position: fixed; inset: 0; z-index: 100001; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; }
.zl-lightbox-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.zl-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; touch-action: pan-x pan-y pinch-zoom; }
.zl-lightbox--zoomed .zl-lightbox-stage { align-items: flex-start; justify-content: flex-start; }
.zl-lightbox--zoomed .zl-lightbox-img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.zl-lightbox-close, .zl-lightbox-nav {
    position: absolute; z-index: 2; background: rgba(255, 255, 255, .15); color: #fff;
    border: 0; border-radius: 50%; cursor: pointer; width: 44px; height: 44px; font-size: 28px; line-height: 1;
}
.zl-lightbox-close { top: 12px; right: 12px; }
.zl-lightbox-nav { top: 50%; transform: translateY(-50%); }
.zl-lightbox-prev { left: 12px; }
.zl-lightbox-next { right: 12px; }
.zl-lightbox-count { position: absolute; top: 20px; left: 16px; z-index: 2; color: #fff; font-size: 14px; }

/* Product card: shop name */
.zl-card-shop { font-size: 12px; color: #4b5563; margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ==========================================================================
   HOMEPAGE — MARKETPLACE LOOK (v1.7.0)
   Everything here is scoped to .zl-homepage so Browse, category, search and
   the shared listing-card markup are unaffected. Header and hero untouched.

   - Sidebar collapsed: full-width content, categories become a tile row.
   - Product / Place sections are horizontal rails.
   - Cards are flat: image, title, price (with struck-through previous price
     on a price drop) and the shop (Place) name. Nothing else.
   ========================================================================== */

/* ---------- Layout ---------- */
.zl-homepage {
    background: #fff;
}

.zl-homepage .zl-home-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 0;
}

.zl-homepage .zl-home-discovery-section,
.zl-homepage .zl-home-cat-section {
    margin: 0 0 40px;
}

/* ---------- Section headings ---------- */
.zl-homepage .zl-section-header {
    margin: 0 0 16px;
}

.zl-homepage .zl-section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #111827;
}

/* ---------- Rails (product, place and category rows) ---------- */
.zl-homepage .zl-rail {
    position: relative;
}

.zl-homepage .zl-home-product-grid,
.zl-homepage .zl-home-place-grid,
.zl-homepage .zl-cat-tiles {
    --rail-gap: 16px;
    --rail-cols: 6;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols));
    gap: var(--rail-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 3px;
    scrollbar-width: none;
    /* room for the featured / spotlight ring so the scroller doesn't clip it */
    padding: 3px;
    margin: -3px;
}

.zl-homepage .zl-home-product-grid::-webkit-scrollbar,
.zl-homepage .zl-home-place-grid::-webkit-scrollbar,
.zl-homepage .zl-cat-tiles::-webkit-scrollbar {
    display: none;
}

.zl-homepage .zl-home-product-grid > *,
.zl-homepage .zl-home-place-grid > *,
.zl-homepage .zl-cat-tiles > * {
    min-width: 0;
    scroll-snap-align: start;
}

.zl-homepage .zl-cat-tiles {
    --rail-cols: 8;
}

.zl-rail-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.zl-rail-btn:hover {
    background: #f3f4f6;
}

.zl-rail-btn:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

.zl-rail-btn--prev { left: -16px; }
.zl-rail-btn--next { right: -16px; }

.zl-rail-btn svg {
    width: 18px;
    height: 18px;
}

/* Arrows only when the row overflows, and only for mouse users. */
@media (hover: hover) and (min-width: 641px) {
    .zl-rail.has-prev .zl-rail-btn--prev,
    .zl-rail.has-next .zl-rail-btn--next {
        display: flex;
    }
}

/* ---------- Category tiles ---------- */
.zl-home-cat-section {
    display: block;
}

.zl-cat-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #111827;
    text-decoration: none;
}

.zl-cat-tile-art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 4;
    border-radius: 12px;
    background: #f1f1f1;
    font-size: 44px;
    line-height: 1;
}

.zl-cat-tile-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zl-cat-tile:hover .zl-cat-tile-name,
.zl-cat-tile:focus-visible .zl-cat-tile-name {
    text-decoration: underline;
}

.zl-cat-tile:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 3px;
    border-radius: 12px;
}

/* ---------- Product cards: flat, image / title / price / shop ---------- */
:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    transition: none;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card:hover {
    transform: none;
    box-shadow: none;
    border: 0;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-image-wrap {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #f1f1f1;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card:hover .zl-card-image {
    transform: none;
}

/* Sponsored products use the normal product-card surface. */
:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card--spotlight {
    border: 0;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-spotlight-badge {
    top: 8px;
    right: 8px;
    min-height: 24px;
    padding: 4px 7px;
    font-size: 10px;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-content {
    display: flex;
    flex-direction: column;
    padding: 10px 0 0;
}

/* Hidden on the homepage only; the markup stays in the shared card. */
:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-condition-inline,
:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-meta,
:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-rating,
:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-seller-meta {
    display: none;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-title {
    order: 1;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: #111827;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card:hover .zl-card-title {
    text-decoration: underline;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-footer {
    order: 2;
    gap: 0;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-price-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-price {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-drop {
    margin: 0;
    gap: 6px;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-was {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: line-through;
}

:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-drop-pct {
    padding: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: #0f7b3a;
}

/* Shop name stays in the shared card markup; not shown on homepage cards. */
:is(.zl-homepage, #zl-listings-grid, #zl-related-grid) .zl-card-shop {
    display: none;
}

/* ---------- Place cards (rendered by Zilideon Place; skin only) ---------- */
.zl-homepage .zl-place-card {
    --zl-pc-radius: 12px;
    --zl-pc-border: #e5e7eb;
    --zl-pc-shadow: none;
    --zl-pc-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .zl-homepage .zl-home-product-grid,
    .zl-homepage .zl-home-place-grid { --rail-cols: 5; }
    .zl-homepage .zl-cat-tiles { --rail-cols: 6; }
}

@media (max-width: 991px) {
    .zl-homepage .zl-home-product-grid,
    .zl-homepage .zl-home-place-grid { --rail-cols: 4; }

    /* Mobile category strip takes over from the tile row. */
    .zl-home-cat-section { display: none; }
}

@media (max-width: 640px) {
    .zl-homepage .zl-home-layout {
        padding: 16px 16px 0;
        width: 100%;
        max-width: 100%;
    }

    .zl-homepage .zl-home-discovery-section {
        margin-bottom: 28px;
        min-width: 0;
    }

    .zl-homepage .zl-section-title {
        font-size: 20px;
    }

    .zl-homepage .zl-home-product-grid,
    .zl-homepage .zl-home-place-grid {
        --rail-gap: 12px;
        --rail-cols: 2.3;
        width: 100%;
        max-width: 100%;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep the intentional next-card peek, but never allow a card's
       content to force the page itself wider than the viewport. */
    .zl-homepage .zl-home-product-grid > *,
    .zl-homepage .zl-home-place-grid > * {
        min-width: 0;
        max-width: 100%;
    }

    .zl-homepage .zl-card-title {
        overflow-wrap: anywhere;
    }
}

/* ---------- Browse feed (Browse, category and location pages) ----------
   #zl-listings-grid is the container Marketplace's browse.js drives, so this
   also covers cards added by infinite scroll. The card rules above are shared
   with the homepage, so the cards match exactly: photo, title, price. */
#zl-listings-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 24px 16px;
}

@media (max-width: 640px) {
    #zl-listings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }
}

/* WordPress admin bar is taller on narrow screens. Keep the fixed header
   below it and reserve the corresponding extra document space. */
@media (max-width: 782px) {
    .admin-bar .zl-header {
        top: 46px;
    }

    .admin-bar body {
        padding-top: 178px;
    }
}



/* ==========================================================================
   SINGLE LISTING PAGE — storefront layout (v1.7.14)
   eBay / Etsy / Amazon pattern: gallery on the left with a vertical thumbnail
   rail; title, seller, price and buy/contact actions together in the right
   column; specifics, description and reviews full width underneath; similar
   items as a row of product cards.

   Markup keeps every id/class the page script and Marketplace rely on. The
   plugin's frontend.css sets the original layout, so these selectors are
   scoped to .zl-listing-wrap (one class higher) and loaded after it.
   ========================================================================== */

.zl-listing-wrap {
    max-width: 1280px;
    padding: 20px 24px 56px;
}

.zl-listing-wrap .zl-breadcrumb {
    margin-bottom: 18px;
    font-size: 12.5px;
    color: #6b7280;
}

.zl-listing-wrap .zl-breadcrumb a {
    color: #4b5563;
}

.zl-listing-wrap .zl-breadcrumb a:hover {
    color: #111827;
}

.zl-listing-wrap .zl-listing-grid {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: 0 44px;
    align-items: start;
}

.zl-listing-wrap .zl-listing-below {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 40px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

/* ---------- Gallery: vertical thumbnail rail + square, uncropped photo ---------- */
.zl-listing-wrap .zl-gallery {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    align-items: start;
}

.zl-listing-wrap .zl-gallery:not(:has(.zl-gallery-thumbs)) {
    grid-template-columns: minmax(0, 1fr);
}

.zl-listing-wrap .zl-gallery-main {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 1 / 1;
    max-height: 680px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eef0f3;
}

.zl-listing-wrap .zl-gallery:not(:has(.zl-gallery-thumbs)) .zl-gallery-main {
    grid-column: 1;
}

/* Show the whole product; the old 4:3 "cover" crop is a classifieds habit. */
.zl-listing-wrap .zl-main-img {
    object-fit: contain;
}

.zl-listing-wrap .zl-gallery-thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    /* as tall as the photo beside it, scrolling if there are many */
    height: 0;
    min-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.zl-listing-wrap .zl-thumb {
    width: 76px !important;
    height: 76px !important;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #fff;
}

.zl-listing-wrap .zl-thumb:hover {
    border-color: #9ca3af;
}

.zl-listing-wrap .zl-thumb-active {
    border-color: #111827;
}

.zl-listing-wrap .zl-gallery-arrow {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* ---------- Buy column ---------- */
.zl-listing-wrap .zl-listing-sidebar {
    min-width: 0;
}

/* Cards in this column become plain sections, not boxed classifieds panels. */
.zl-listing-wrap .zl-listing-sidebar .zl-listing-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 14px;
}

.zl-listing-wrap .zl-listing-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
}

.zl-listing-wrap .zl-listing-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #6b7280;
}

/* "Free" / "Pro" is the seller's own subscription, not buyer information. */
.zl-listing-wrap .zl-listing-package-badge {
    display: none;
}

.zl-listing-wrap .zl-listing-location,
.zl-listing-wrap .zl-listing-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.zl-listing-wrap .zl-save-btn {
    margin-left: auto;
    padding: 6px 14px 6px 11px;
    font-size: 13px;
}

/* Seller: compact row (name / tenure / stars, Visit Store) */
.zl-listing-wrap .zl-listing-sidebar .zl-seller-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 0;
    margin-bottom: 14px;
    border-top: 1px solid #eef0f3;
    border-bottom: 1px solid #eef0f3;
}

.zl-listing-wrap .zl-seller-info {
    flex: 1 1 auto;
    min-width: 0;
}

.zl-listing-wrap .zl-listing-sidebar .zl-seller-row .zl-business-seller-name strong {
    display: inline;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.zl-listing-wrap .zl-seller-row .zl-business-seller-name a {
    text-decoration: none;
}

.zl-listing-wrap .zl-seller-row .zl-business-seller-name a:hover strong {
    text-decoration: underline;
}

.zl-listing-wrap .zl-listing-sidebar .zl-seller-row .zl-business-seller-since {
    margin-top: 2px;
    font-size: 12.5px;
}

.zl-listing-wrap .zl-listing-sidebar .zl-seller-row .zl-business-trust-block {
    margin-top: 4px;
}

.zl-listing-wrap .zl-listing-sidebar .zl-seller-row .zl-business-trust-block .zl-stars-display {
    justify-content: flex-start;
}

.zl-listing-wrap .zl-listing-sidebar .zl-seller-row .zl-business-profile-link {
    flex: 0 0 auto;
    display: inline-flex;
    margin: 0;
    padding: 8px 16px;
    border: 1.5px solid #111827;
    border-radius: 999px;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.zl-listing-wrap .zl-listing-sidebar .zl-seller-row .zl-business-profile-link:hover {
    background: #111827;
    color: #fff;
}

/* Price */
.zl-listing-wrap .zl-listing-price {
    margin: 0 0 4px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
}

.zl-listing-wrap .zl-price-contact {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.zl-listing-wrap .zl-negotiable {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.zl-listing-wrap .zl-listing-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 0 0 6px;
    font-size: 14px;
}

.zl-listing-wrap .zl-listing-was {
    color: #6b7280;
    text-decoration: line-through;
}

.zl-listing-wrap .zl-listing-drop-pct {
    color: #0f7b3a;
    font-weight: 700;
}

/* Buy / contact actions: dark pills, matching the rest of the theme */
.zl-listing-wrap .zl-buy-box .zl-buy-submit {
    border-radius: 999px;
    padding: 14px 18px;
}

.zl-listing-wrap .zl-listing-sidebar .zl-contact-card {
    gap: 10px;
}

.zl-listing-wrap .zl-contact-btn {
    border-radius: 999px;
    padding: 13px 18px;
    font-size: 15px;
}

.zl-listing-wrap .zl-btn-show-contact,
.zl-listing-wrap .zl-btn-call {
    background: #111827;
    color: #fff;
}

.zl-listing-wrap .zl-btn-show-contact:hover,
.zl-listing-wrap .zl-btn-call:hover {
    background: #374151;
    color: #fff;
}

.zl-listing-wrap .zl-btn-chat {
    background: #fff;
    color: #111827;
    border: 1.5px solid #111827;
}

.zl-listing-wrap .zl-btn-chat:hover {
    background: #f3f4f6;
}

/* Share: quiet row of small pills */
.zl-listing-wrap .zl-social-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0 16px;
}

.zl-listing-wrap .zl-share-label {
    font-size: 13px;
    color: #6b7280;
}

.zl-listing-wrap .zl-share-btn {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
}

/* Safety tip becomes a neutral "buy with confidence" note, not a yellow alert */
.zl-listing-wrap .zl-safety-tip {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left-width: 1px;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
}

.zl-listing-wrap .zl-safety-tip svg {
    color: #0f7b3a;
}

.zl-listing-wrap .zl-report-wrap {
    margin-top: 12px;
}

/* "Sell" call to action: a quiet outlined link, not an orange banner */
.zl-listing-wrap .zl-sell-cta-btn {
    margin-top: 16px;
    padding: 11px 16px;
    background: transparent;
    color: #111827;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    font-size: 14px;
}

.zl-listing-wrap .zl-sell-cta-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

/* ---------- Below the fold: specifics, description, reviews ---------- */
.zl-listing-wrap .zl-listing-below .zl-desc-heading,
.zl-listing-wrap .zl-related-heading {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.zl-listing-wrap .zl-listing-details {
    margin: 28px 0 0;
}

/* Item specifics: two columns of label / value, like eBay */
.zl-listing-wrap .zl-details-table,
.zl-listing-wrap .zl-details-table tbody {
    display: block;
    width: 100%;
}

.zl-listing-wrap .zl-details-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
}

.zl-listing-wrap .zl-details-table tr {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid #f0f1f3;
}

.zl-listing-wrap .zl-details-table th,
.zl-listing-wrap .zl-details-table td {
    display: block;
    padding: 11px 0;
    border: 0;
    background: transparent;
    font-size: 14px;
}

.zl-listing-wrap .zl-details-table th {
    width: auto;
    color: #6b7280;
    font-weight: 500;
}

.zl-listing-wrap .zl-details-table td {
    color: #111827;
    font-weight: 500;
}

.zl-listing-wrap .zl-listing-description {
    margin-top: 32px;
    padding: 0;
    background: transparent;
}

.zl-listing-wrap .zl-listing-description .zl-desc-heading,
.zl-listing-wrap .zl-listing-description .zl-desc-body {
    padding-left: 0;
    padding-right: 0;
}

.zl-listing-wrap .zl-desc-body {
    max-width: 880px;
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
}

/* ---------- Similar items: a row of flat product cards ---------- */
.zl-listing-wrap .zl-related {
    margin-top: 48px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.zl-listing-wrap .zl-related-heading {
    margin-top: 24px;
}

.zl-listing-wrap #zl-related-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 16px;
}

/* ---------- Clear the older boxed-card styling on this page ---------- */
.zl-listing-wrap .zl-gallery {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.zl-listing-wrap .zl-gallery-thumbs {
    padding: 0;
    overflow-x: hidden;
    scrollbar-width: none;
}

.zl-listing-wrap .zl-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.zl-listing-wrap .zl-thumb {
    opacity: 1;
}

.zl-listing-wrap .zl-thumb.active {
    border-color: #111827;
}

.zl-listing-wrap .zl-listing-details {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Seller stars: plain inline text. The plugin boxes .zl-business-trust-block
   (padding, border, grey fill) for its own larger card; here it is one line. */
.zl-listing-wrap .zl-listing-sidebar .zl-seller-row .zl-business-trust-block {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

/* Share: quiet outlined pills instead of brand-coloured blocks */
/* The plugin sets the share colours with !important, so these must too. */
.zl-listing-wrap .zl-share-btn,
.zl-listing-wrap .zl-share-btn:hover {
    background: #fff;
    color: #374151 !important;
    border: 1px solid #d1d5db;
    opacity: 1;
}

.zl-listing-wrap .zl-share-btn:hover {
    background: #f3f4f6;
    color: #111827 !important;
}

.zl-listing-wrap .zl-share-btn svg {
    color: currentColor;
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 960px) {
    .zl-listing-wrap .zl-listing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zl-listing-wrap .zl-listing-sidebar {
        margin-top: 20px;
    }

    .zl-listing-wrap .zl-listing-below {
        margin-top: 24px;
    }

    .zl-listing-wrap #zl-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .zl-listing-wrap {
        padding: 12px 16px 40px;
    }

    /* Thumbnails move under the photo as a swipeable row. */
    .zl-listing-wrap .zl-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .zl-listing-wrap .zl-gallery-main,
    .zl-listing-wrap .zl-gallery:not(:has(.zl-gallery-thumbs)) .zl-gallery-main {
        grid-column: 1;
        max-height: none;
    }

    .zl-listing-wrap .zl-gallery-thumbs {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        height: auto;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .zl-listing-wrap .zl-listing-title {
        font-size: 20px;
    }

    .zl-listing-wrap .zl-listing-price {
        font-size: 28px;
    }

    .zl-listing-wrap .zl-listing-sidebar .zl-seller-row {
        flex-wrap: wrap;
    }

    .zl-listing-wrap .zl-details-table tbody {
        grid-template-columns: minmax(0, 1fr);
    }

    .zl-listing-wrap .zl-listing-below .zl-desc-heading,
    .zl-listing-wrap .zl-related-heading {
        font-size: 19px;
    }

    .zl-listing-wrap #zl-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }
}

/* Seller dashboard on phones is app-style: the plugin draws its own top bar and
   bottom bar (its Shop tab leads back to the site), so the site header, its
   slide-out menu and the space reserved for it are not shown there. */
@media (max-width: 768px) {
    body.zl-dashboard-page .zl-header,
    body.zl-dashboard-page .zl-mobile-panel,
    body.zl-dashboard-page .zl-mobile-overlay { display: none !important; }
    body.zl-dashboard-page,
    .admin-bar body.zl-dashboard-page { padding-top: 0 !important; }
}


/* =============================================================
   MARKETPLACE / AURA SHARED BROWSE PRESENTATION CONTRACT
   Marketplace owns filtering and AJAX. Aura owns shared visual
   tokens and listing-card markup. Keep archive grids responsive
   like the plugin Browse grid to avoid different card densities.
   ============================================================= */
:root {
    --zl-browse-content-max: 1560px;
    --zl-browse-sidebar-width: 250px;
    --zl-browse-layout-gap: 24px;
    --zl-browse-card-gap: 16px;
    --zl-browse-card-radius: 14px;
}
.zl-archive-container {
    width: calc(100% - 48px);
    max-width: var(--zl-browse-content-max);
    margin-left: auto;
    margin-right: auto;
}
.zl-archive-layout {
    grid-template-columns: minmax(220px, var(--zl-browse-sidebar-width)) minmax(0, 1fr);
    gap: var(--zl-browse-layout-gap);
}
.zl-archive-sidebar {
    top: 24px;
}
.zl-listings-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--zl-browse-card-gap);
}
.zl-card {
    border-radius: var(--zl-browse-card-radius);
    box-shadow: 0 1px 8px rgba(0,0,0,.045);
}
.zl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.075);
}
@media (max-width: 900px) {
    .zl-archive-container {
        width: calc(100% - 32px);
        padding-left: 0;
        padding-right: 0;
    }
    .zl-archive-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .zl-archive-sidebar {
        position: static;
    }
    .zl-listings-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
}


/* =========================================================
   BROWSE PAGE — full-width marketplace layout (eBay-style)
   Browse ([zl_listings]) is rendered by page.php inside .zl-browse-page,
   NOT inside the 780px .zl-page-content reading column. Marketplace's
   browse.css owns the inner grid (filter rail + results); the theme only
   provides a wide, edge-aligned canvas and card presentation.
========================================================= */
:root {
    --zl-header-h: 73px;
}
.zl-browse-page {
    width: 100%;
}
/* Header and results share one left/right edge on Browse (no stepped gutters). */
.zl-is-browse {
    --zl-browse-content-max: 1680px;
}
.zl-is-browse .zl-header-container {
    max-width: var(--zl-browse-content-max);
}
.zl-is-browse .zl-page {
    padding-bottom: 0;
}

/* Browse result cards: eBay-style info stack (condition / title / price / shop & place).
   The shared card hides these on the homepage; Browse has room and buyers compare on them. */
#zl-listings-grid .zl-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);
}
#zl-listings-grid .zl-card-condition-inline {
    display: block;
    order: 0;
    margin: 0 0 4px;
    font-size: 12px;
    color: #596273;
}
#zl-listings-grid .zl-card-meta {
    display: flex;
    order: 3;
    margin: 6px 0 0;
    font-size: 12px;
    color: #596273;
}
#zl-listings-grid .zl-card-meta .zl-meta-time,
#zl-listings-grid .zl-card-meta .zl-meta-dot {
    display: none;
}
#zl-listings-grid .zl-card-shop {
    display: block;
    order: 4;
    margin: 2px 0 0;
    font-size: 12px;
    color: #596273;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#zl-listings-grid .zl-card-rating {
    display: flex;
    order: 3;
    margin: 4px 0 0;
}
@media (max-width: 782px) {
    :root { --zl-header-h: 132px; }
}