/**
 * Askie Public — public marketplace pages stylesheet.
 * Theme-independent: works with any WordPress theme.
 * Used by: [askie_listings], [askie_listing], [askie_categories], [askie_requests]
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Uses workspace.css variables when on workspace page.
   Defines own fallbacks for standalone public pages. */
:root {
    --accent:   #1563FF;
    --accent-h: #0F4FCC;
    --accent-l: #EEF3FF;
    --brand:    #111111;
    --green:    #22c55e;
    --red:      #ef4444;
    --amber:    #f59e0b;
    --g0:       #FFFFFF;
    --g50:      #F9F9F9;
    --g100:     #F1F1F1;
    --g200:     #ECECEC;
    --g400:     #999999;
    --g500:     #666666;
    --g700:     #333333;
    --g900:     #111111;
    --r:        12px;
    --rs:       8px;
    --sh:       0 1px 3px rgba(0,0,0,.06);
    --shm:      0 4px 20px rgba(0,0,0,.09);
    --tr:       .15s ease;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.askie-public-wrap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--g900);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Category grid ────────────────────────────────────────── */
/* Column count set by modifier class from shortcode cols= attr */
.askie-cat-grid {
    display:    grid;
    gap:        14px;
    margin:     24px 0;
    grid-template-columns: repeat(4, 1fr); /* default 4 cols */
}
.askie-cat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.askie-cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.askie-cat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.askie-cat-grid--5 { grid-template-columns: repeat(5, 1fr); }
.askie-cat-grid--6 { grid-template-columns: repeat(6, 1fr); }

.askie-cat-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0;
    border:         1.5px solid var(--g200);
    border-radius:  var(--r);
    text-decoration:none;
    color:          var(--g900);
    font-weight:    600;
    font-size:      13px;
    text-align:     center;
    background:     var(--g0);
    transition:     border-color var(--tr), box-shadow var(--tr), transform var(--tr);
    overflow:       hidden;
}
.askie-cat-card:hover {
    border-color:   var(--accent);
    box-shadow:     0 4px 20px rgba(21,99,255,.12);
    transform:      translateY(-2px);
    text-decoration:none;
}

/* Illustration area */
.askie-cat-illus {
    width:          100%;
    height:         90px;
    position:       relative;
    overflow:       hidden;
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
}
.askie-cat-illus-bg {
    position:  absolute;
    inset:     0;
    width:     100%;
    height:    100%;
}
.askie-cat-illus-icon {
    position:  relative;
    z-index:   1;
    font-size: 28px;
    line-height:1;
    filter:    drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

.askie-cat-name {
    font-size:   12px;
    font-weight: 600;
    padding:     10px 8px;
    line-height: 1.35;
    color:       var(--g900);
}
.askie-cat-card:hover .askie-cat-name { color: var(--accent); }

/* ── Public listings grid ─────────────────────────────────── */
.askie-listings-wrap  { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

.askie-listings-search {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    align-items: center;
}
.askie-listings-search input[type=text],
.askie-listings-search input[type=number] {
    padding: 10px 14px;
    border: 1.5px solid var(--g200);
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--tr);
}
.askie-listings-search input:focus { border-color: var(--accent); }
.askie-listings-search input[type=text] { flex: 1; min-width: 180px; }
.askie-listings-search select {
    padding: 10px 14px;
    border: 1.5px solid var(--g200);
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    background: var(--g0);
    cursor: pointer;
}
.askie-search-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--tr);
    white-space: nowrap;
}
.askie-search-btn:hover { background: var(--accent-h); }

.askie-listings-count {
    font-size: 13px;
    color: var(--g500);
    margin-bottom: 16px;
}

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

/* ── Service card ─────────────────────────────────────────── */
.askie-public-card {
    background: var(--g0);
    border: 1.5px solid var(--g200);
    border-radius: var(--r);
    overflow: hidden;
    transition: box-shadow var(--tr), border-color var(--tr), transform var(--tr);
    display: flex;
    flex-direction: column;
}
.askie-public-card:hover {
    box-shadow: var(--shm);
    border-color: var(--g200);
    transform: translateY(-2px);
}
.askie-card-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.askie-card-img-ph {
    width: 100%;
    height: 150px;
    background: var(--g50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}
.askie-card-body   { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.askie-card-cat    { font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.askie-card-title  { font-size: 13px; font-weight: 600; color: var(--g900); margin-bottom: 6px; line-height: 1.4; flex: 1; }
.askie-card-vendor { font-size: 12px; color: var(--g500); margin-bottom: 10px; }
.askie-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 4px;
}
.askie-card-price  { font-size: 16px; font-weight: 700; color: var(--g900); }
.askie-card-meta   { font-size: 12px; color: var(--g400); }
.askie-card-rating { color: var(--amber); font-size: 12px; }
.askie-card-btn {
    display: block;
    background: var(--accent);
    color: #fff;
    text-align: center;
    padding: 9px;
    border-radius: var(--rs);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: background var(--tr);
    width: 100%;
}
.askie-card-btn:hover { background: var(--accent-h); color: #fff; }

/* ── Pagination ───────────────────────────────────────────── */
.askie-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    flex-wrap: wrap;
}
.askie-page-btn {
    padding: 8px 18px;
    border: 1.5px solid var(--g200);
    border-radius: var(--rs);
    background: var(--g0);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    transition: border-color var(--tr), background var(--tr);
}
.askie-page-btn:hover { border-color: var(--accent); background: rgba(21,99,255,.04); }
.askie-page-info { font-size: 13px; color: var(--g500); padding: 8px 4px; }

/* ── Single listing detail ────────────────────────────────── */
.askie-listing-detail {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 900px;
    margin: 0 auto;
}
.askie-listing-gallery {
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 28px;
}
.askie-listing-gallery img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}
.askie-listing-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
}
.askie-listing-gallery-thumbs img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--rs);
    cursor: pointer;
    border: 2px solid transparent;
    max-height: none;
    flex-shrink: 0;
    transition: border-color var(--tr);
}
.askie-listing-gallery-thumbs img.active,
.askie-listing-gallery-thumbs img:hover { border-color: var(--accent); }

.askie-listing-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}
.askie-listing-cat    { font-size: 12px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.askie-listing-title  { font-size: 26px; font-weight: 700; color: var(--g900); margin-bottom: 14px; line-height: 1.25; }
.askie-listing-stats  { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; font-size: 13px; color: var(--g500); }
.askie-listing-stats strong { color: var(--g900); }
.askie-listing-desc   { font-size: 15px; line-height: 1.75; color: var(--g700); white-space: pre-wrap; }

/* Sidebar booking card */
.askie-book-card {
    background: var(--g0);
    border: 1.5px solid var(--g200);
    border-radius: var(--r);
    padding: 24px;
    position: sticky;
    top: 24px;
    box-shadow: var(--shm);
}
.askie-book-price { font-size: 28px; font-weight: 700; color: var(--g900); margin-bottom: 6px; }
.askie-book-delivery { font-size: 13px; color: var(--g500); margin-bottom: 20px; }
.askie-book-btn {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: var(--rs);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--tr), transform var(--tr);
    margin-bottom: 10px;
}
.askie-book-btn:hover { background: var(--accent-h); transform: translateY(-1px); }
.askie-msg-btn {
    width: 100%;
    background: transparent;
    color: var(--g900);
    border: 1.5px solid var(--g200);
    padding: 12px;
    border-radius: var(--rs);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--tr);
}
.askie-msg-btn:hover { border-color: var(--accent); }
.askie-book-escrow {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--g50);
    border-radius: var(--rs);
    font-size: 12px;
    color: var(--g500);
    line-height: 1.6;
}

/* Vendor card in sidebar */
.askie-vendor-card {
    background: var(--g0);
    border: 1.5px solid var(--g200);
    border-radius: var(--r);
    padding: 20px;
    margin-top: 16px;
}
.askie-vendor-head    { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.askie-vendor-avatar  { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.askie-vendor-name    { font-weight: 700; font-size: 14px; color: var(--g900); }
.askie-vendor-since   { font-size: 12px; color: var(--g500); }
.askie-vendor-stats   { display: flex; gap: 12px; font-size: 12px; color: var(--g500); flex-wrap: wrap; }
.askie-vendor-stats strong { color: var(--g900); }

/* Reviews section */
.askie-reviews { margin-top: 40px; }
.askie-reviews-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.askie-reviews-avg   { font-size: 14px; color: var(--g500); margin-bottom: 20px; }
.askie-review-card   {
    padding: 16px 0;
    border-bottom: 1px solid var(--g100);
}
.askie-review-head   { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.askie-review-stars  { color: var(--amber); font-size: 14px; }
.askie-review-author { font-size: 13px; font-weight: 600; color: var(--g900); }
.askie-review-date   { font-size: 12px; color: var(--g400); margin-left: auto; }
.askie-review-body   { font-size: 14px; color: var(--g700); line-height: 1.6; }

/* ── Empty state ──────────────────────────────────────────── */
.askie-public-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--g500);
}
.askie-public-empty-icon { font-size: 48px; margin-bottom: 16px; }
.askie-public-empty h3   { font-size: 18px; font-weight: 700; color: var(--g900); margin-bottom: 8px; }

/* ── Loading ──────────────────────────────────────────────── */
.askie-loading {
    text-align: center;
    padding: 40px;
    color: var(--g400);
    font-size: 14px;
}
.askie-loading::after {
    content: '';
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--g200);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ap-spin .7s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

/* ── Sign up CTA banner ───────────────────────────────────── */
.askie-cta-banner {
    background: linear-gradient(135deg, #0F4FCC, #1563FF);
    border-radius: var(--r);
    padding: 32px;
    text-align: center;
    color: #fff;
    margin: 40px 0;
}
.askie-cta-banner h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.askie-cta-banner p  { font-size: 14px; opacity: .9; margin-bottom: 20px; }
.askie-cta-banner a  {
    display: inline-block;
    background: #fff;
    color: var(--accent);
    padding: 12px 28px;
    border-radius: var(--rs);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform var(--tr);
}
.askie-cta-banner a:hover { transform: translateY(-1px); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .askie-listings-grid      { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .askie-cat-grid           { grid-template-columns: repeat(3, 1fr); }
    .askie-listing-layout     { grid-template-columns: 1fr; }
    .askie-book-card          { position: static; margin-top: 24px; }
    .askie-listing-title      { font-size: 20px; }
    .askie-listings-search    { flex-direction: column; }
    .askie-listings-search input[type=text] { width: 100%; }
}

/* ── Request cards ────────────────────────────────────────── */
.askie-request-card {
    background:     var(--g0);
    border:         1.5px solid var(--g200);
    border-radius:  var(--r);
    padding:        18px 20px;
    margin-bottom:  10px;
    transition:     border-color var(--tr), box-shadow var(--tr);
}
.askie-request-card:hover  { border-color:var(--accent); box-shadow:var(--shm); }
.askie-request-title       { font-size:15px; font-weight:600; color:var(--g900); margin-bottom:6px; line-height:1.4; }
.askie-request-desc        { font-size:13px; color:var(--g500); line-height:1.6; margin-bottom:10px; }
.askie-request-meta        { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--g400); }
.askie-request-meta strong { color:var(--g900); }

/* ── Ratings ──────────────────────────────────────────────── */
.askie-stars { color:var(--amber); }

/* ── Category filter pills ────────────────────────────────── */
.askie-cat-filters {
    display:        flex;
    gap:            8px;
    overflow-x:     auto;
    flex-wrap:      nowrap;
    margin-bottom:  20px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
.askie-cat-filters::-webkit-scrollbar { display:none; }
.askie-cat-filter {
    padding:        7px 16px;
    border:         1.5px solid var(--g200);
    border-radius:  var(--r-xl);
    background:     var(--g0);
    color:          var(--g700);
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    white-space:    nowrap;
    font-family:    inherit;
    transition:     border-color var(--tr), background var(--tr), color var(--tr);
    flex-shrink:    0;
}
.askie-cat-filter:hover {
    border-color:   var(--accent);
    color:          var(--accent);
    background:     var(--g0);
}
.askie-cat-filter.active,
.askie-cat-filter.askie-cat-active {
    border-color:   var(--accent);
    background:     var(--accent);
    color:          #fff;
}

/* ── Generic list ─────────────────────────────────────────── */
.askie-list { display:flex; flex-direction:column; gap:10px; }

/* ── Responsive additions ─────────────────────────────────── */
@media (max-width: 768px) {
    .askie-listing-layout  { grid-template-columns:1fr; }
    .askie-book-card       { position:static; margin-top:24px; }
    .askie-listing-title   { font-size:20px; }
    .askie-listings-search { flex-direction:column; align-items:stretch; }
    .askie-search-btn      { width:100%; }
    .askie-listings-grid   { grid-template-columns:repeat(2,1fr); gap:12px; }
    /* Override all column variants to 3 on tablet */
    .askie-cat-grid,
    .askie-cat-grid--2,.askie-cat-grid--3,.askie-cat-grid--4,
    .askie-cat-grid--5,.askie-cat-grid--6 { grid-template-columns:repeat(3,1fr); gap:10px; }
    .askie-cat-card  { padding:16px 10px; }
    .askie-cat-icon  { font-size:24px; }
    .askie-cat-name  { font-size:11px; }
}
@media (max-width: 480px) {
    .askie-listings-grid   { grid-template-columns:1fr 1fr; gap:8px; }
    .askie-card-img,
    .askie-card-img-ph     { height:100px; }
    .askie-card-body       { padding:10px; }
    .askie-card-price      { font-size:14px; }
    /* 2-column grid on small phones */
    .askie-cat-grid,
    .askie-cat-grid--2,.askie-cat-grid--3,.askie-cat-grid--4,
    .askie-cat-grid--5,.askie-cat-grid--6 { grid-template-columns:repeat(2,1fr); gap:8px; }
    .askie-cat-card  { padding:14px 8px; }
    .askie-cat-icon  { font-size:22px; }
    .askie-listing-title   { font-size:18px; }
    .askie-listing-gallery img { max-height:260px; }
}

/* ── Section title (used by [askie_listings] shortcode) ──── */
.askie-section-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size:   24px;
    font-weight: 700;
    color:       var(--g900);
    margin:      0 0 var(--s2) 0;
    letter-spacing: -.3px;
}

/* ── Text link ────────────────────────────────────────────── */
.askie-link {
    color:           var(--accent);
    text-decoration: none;
    font-weight:     500;
}
.askie-link:hover { text-decoration: underline; }

/* ── Empty states ─────────────────────────────────────────── */
.askie-public-empty {
    text-align:  center;
    padding:     48px 24px;
    color:       var(--g400);
    font-family: 'Inter', -apple-system, sans-serif;
}
.askie-public-empty h3 { font-size:18px; font-weight:700; color:var(--g900); margin:12px 0 8px; }
.askie-public-empty p  { font-size:14px; color:var(--g500); margin:0 0 16px; }

/* ════════════════════════════════════════════════════════════
   [askie_wallet] SHORTCODE WIDGET
   ════════════════════════════════════════════════════════════ */
.askie-wallet-widget {
    font-family: 'Inter', -apple-system, sans-serif;
    max-width:   360px;
}
.askie-wallet-card {
    background:    var(--g900);
    border-radius: var(--r);
    padding:       24px;
    color:         #fff;
    position:      relative;
    overflow:      hidden;
}
.askie-wallet-card::before {
    content:''; position:absolute; width:160px; height:160px; border-radius:50%;
    background:rgba(255,255,255,.05); right:-40px; top:-40px; pointer-events:none;
}
.askie-wallet-label  { font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.65; margin-bottom:6px; }
.askie-wallet-amount { font-size:32px; font-weight:700; letter-spacing:-.5px; margin-bottom:20px; position:relative; z-index:1; }
.askie-wallet-actions { display:flex; gap:8px; position:relative; z-index:1; }
.askie-wallet-btn {
    padding:         9px 18px;
    border-radius:   var(--r-sm);
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    transition:      background var(--tr), opacity var(--tr);
    display:         inline-flex;
    align-items:     center;
}
.askie-wallet-btn             { background:#fff; color:var(--g900); }
.askie-wallet-btn:hover       { background:var(--g100); }
.askie-wallet-btn--ghost      { background:rgba(255,255,255,.12); color:#fff; }
.askie-wallet-btn--ghost:hover{ background:rgba(255,255,255,.2); }

.askie-wallet-history       { background:var(--g0); border:1px solid var(--g200); border-radius:0 0 var(--r) var(--r); border-top:none; padding:0 4px; }
.askie-wallet-history-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--g400); padding:14px 12px 8px; }
.askie-wallet-tx            { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--g100); }
.askie-wallet-tx:last-of-type { border-bottom:none; }
.askie-wallet-tx-icon       { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.askie-wallet-tx-icon--credit { background:var(--green-l); color:var(--green); }
.askie-wallet-tx-icon--debit  { background:var(--red-l);   color:var(--red); }
.askie-wallet-tx-body       { flex:1; min-width:0; }
.askie-wallet-tx-type       { font-size:13px; font-weight:600; color:var(--g900); }
.askie-wallet-tx-date       { font-size:11px; color:var(--g400); margin-top:1px; }
.askie-wallet-tx-amount     { font-size:13px; font-weight:700; flex-shrink:0; }
.askie-wallet-tx-amount--credit { color:var(--green); }
.askie-wallet-tx-amount--debit  { color:var(--red); }
.askie-wallet-see-all       { display:block; text-align:center; padding:12px; font-size:12px; color:var(--accent); text-decoration:none; font-weight:500; }
.askie-wallet-see-all:hover { text-decoration:underline; }

/* ════════════════════════════════════════════════════════════
   [askie_hero] SHORTCODE
   ════════════════════════════════════════════════════════════ */
.askie-hero-wrap {
    font-family:     'Inter', -apple-system, sans-serif;
    background:      linear-gradient(150deg, #0F4FCC 0%, #1563FF 55%, #4C84FF 100%);
    border-radius:   var(--r-lg);
    padding:         56px 48px;
    color:           #fff;
    text-align:      center;
    position:        relative;
    overflow:        hidden;
}
.askie-hero-wrap::before {
    content:''; position:absolute; width:300px; height:300px; border-radius:50%;
    background:rgba(255,255,255,.06); right:-80px; top:-80px; pointer-events:none;
}
.askie-hero-wrap::after {
    content:''; position:absolute; width:200px; height:200px; border-radius:50%;
    background:rgba(255,255,255,.04); left:-60px; bottom:-60px; pointer-events:none;
}
.askie-hero-label {
    display:         inline-block;
    background:      rgba(255,255,255,.15);
    padding:         4px 14px;
    border-radius:   var(--r-xl);
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  .04em;
    text-transform:  uppercase;
    margin-bottom:   16px;
    position:        relative;
    z-index:         1;
}
.askie-hero-title {
    font-size:       40px;
    font-weight:     700;
    line-height:     1.2;
    margin-bottom:   16px;
    letter-spacing:  -.5px;
    position:        relative;
    z-index:         1;
}
.askie-hero-sub {
    font-size:       17px;
    line-height:     1.6;
    opacity:         .85;
    max-width:       600px;
    margin:          0 auto 32px;
    position:        relative;
    z-index:         1;
}
.askie-hero-btns {
    display:         flex;
    gap:             12px;
    justify-content: center;
    flex-wrap:       wrap;
    position:        relative;
    z-index:         1;
}
.askie-hero-btn {
    padding:         13px 28px;
    border-radius:   var(--r-sm);
    font-size:       15px;
    font-weight:     600;
    text-decoration: none;
    transition:      background var(--tr), transform var(--tr);
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    line-height:     1;
}
.askie-hero-btn--primary       { background:#fff; color:#1563FF; }
.askie-hero-btn--primary:hover { background:var(--g50); transform:translateY(-1px); }
.askie-hero-btn--ghost         { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); }
.askie-hero-btn--ghost:hover   { background:rgba(255,255,255,.25); transform:translateY(-1px); }

/* Hero stats row */
.askie-hero-stats {
    display:         flex;
    gap:             32px;
    justify-content: center;
    margin-top:      40px;
    padding-top:     32px;
    border-top:      1px solid rgba(255,255,255,.15);
    flex-wrap:       wrap;
    position:        relative;
    z-index:         1;
}
.askie-hero-stat-num  { font-size:28px; font-weight:700; display:block; }
.askie-hero-stat-lbl  { font-size:13px; opacity:.7; margin-top:2px; display:block; }

/* Mobile */
@media (max-width: 640px) {
    .askie-hero-wrap   { padding:40px 24px; }
    .askie-hero-title  { font-size:28px; }
    .askie-hero-sub    { font-size:15px; }
    .askie-hero-btns   { flex-direction:column; align-items:center; }
    .askie-hero-btn    { width:100%; justify-content:center; }
    .askie-hero-stats  { gap:20px; }
    .askie-hero-stat-num { font-size:22px; }
}

/* ── Listings shortcode extras ────────────────────────────── */
.askie-ls-price-input {
    width:         90px;
    padding:       8px 10px;
    border:        1.5px solid var(--g200);
    border-radius: var(--r-xl);
    font-size:     13px;
    font-family:   inherit;
    background:    var(--g0);
    color:         var(--g900);
}
.askie-ls-price-input:focus { outline:none; border-color:var(--accent); }

.askie-search-btn--ghost {
    background: var(--g100);
    color:      var(--g700);
}
.askie-search-btn--ghost:hover { background:var(--g200); }

/* CTA banner */
.askie-cta-banner {
    margin-top:   48px;
    background:   linear-gradient(150deg, #0F4FCC 0%, #1563FF 55%, #4C84FF 100%);
    border-radius: var(--r-lg);
    padding:      40px 32px;
    text-align:   center;
    color:        #fff;
}
.askie-cta-banner h2 { font-size:24px; font-weight:700; margin:0 0 8px; }
.askie-cta-banner p  { font-size:15px; opacity:.85; margin:0 0 24px; }
.askie-cta-banner-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.askie-cta-banner-btn {
    padding:         11px 24px;
    border-radius:   var(--r-sm);
    font-size:       14px;
    font-weight:     600;
    text-decoration: none;
    transition:      background var(--tr), opacity var(--tr);
    background:      #fff;
    color:           #1563FF;
}
.askie-cta-banner-btn:hover { opacity:.9; }
.askie-cta-banner-btn--ghost {
    background: rgba(255,255,255,.15);
    color:      #fff;
    border:     1px solid rgba(255,255,255,.3);
}
.askie-cta-banner-btn--ghost:hover { background:rgba(255,255,255,.25); }

/* ── 360px breakpoint — service cards 2-col, never overflow ──────── */
/* Added: fixes cards spanning full width on 360px phones */
@media (max-width: 380px) {
    .askie-listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .askie-card-img,
    .askie-card-img-ph { height: 90px; }
    .askie-card-body   { padding: 8px 10px; }
    .askie-card-title  { font-size: 12px; }
    .askie-card-price  { font-size: 13px; }
    .askie-card-btn    { padding: 7px; font-size: 12px; }
    .askie-card-vendor,
    .askie-card-meta   { display: none; }
}