/* ── Catalog Hero ─────────────────────────────────────────────── */
.catalog-hero{padding:var(--sp-12) 0 var(--sp-8);border-bottom:1px solid var(--clr-border)}
.catalog-hero__title{font-size:var(--fs-4xl);margin-bottom:var(--sp-2)}
.catalog-hero__sub{color:var(--clr-muted);font-size:var(--fs-lg);margin:0}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.breadcrumbs{font-size:var(--fs-xs);color:var(--clr-dim);margin-bottom:var(--sp-5);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.breadcrumbs a{color:var(--clr-muted)}
.breadcrumbs a:hover{color:var(--clr-text)}
.breadcrumbs span{color:var(--clr-dim)}

/* ── Catalog Layout ──────────────────────────────────────────── */
.catalog-body{padding:var(--sp-10) 0}
.catalog-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--sp-8)}

/* ── Sidebar Filters ─────────────────────────────────────────── */
.catalog-sidebar{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto}
.filter-group{margin-bottom:var(--sp-6)}
.filter-group__title{font-family:var(--ff-heading);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.1em;color:var(--clr-dim);margin-bottom:var(--sp-3)}
.filter-list{list-style:none}
.filter-list li{margin-bottom:1px}
.filter-list a{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);color:var(--clr-muted);border-radius:var(--r-sm);transition:all var(--dur)}
.filter-list a:hover{background:var(--clr-surface);color:var(--clr-text)}
.filter-list li.active a{background:var(--clr-surface);color:var(--clr-accent);font-weight:var(--fw-semibold)}
.filter-count{font-size:var(--fs-xs);color:var(--clr-dim);min-width:30px;text-align:right}

/* ── Topbar ──────────────────────────────────────────────────── */
.catalog-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5);font-size:var(--fs-sm);color:var(--clr-muted)}
.catalog-topbar strong{color:var(--clr-text)}

/* ── Psychic Card Grid ───────────────────────────────────────── */
.psychic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.psychic-grid--sm{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.psychic-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-xl);overflow:hidden;transition:all var(--dur) var(--ease)}
.psychic-card:hover{border-color:var(--clr-accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.psychic-card__link{display:block;text-decoration:none;color:inherit}

.psychic-card__photo{position:relative;width:100%;aspect-ratio:1;background:var(--clr-bg);overflow:hidden}
.psychic-card__photo img{width:100%;height:100%;object-fit:cover}
.psychic-card__avatar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-heading);font-size:var(--fs-4xl);font-weight:var(--fw-black);color:var(--clr-dim);background:linear-gradient(135deg,var(--clr-surface),var(--clr-bg))}
.psychic-card__status{position:absolute;top:var(--sp-3);right:var(--sp-3);width:12px;height:12px;border-radius:50%;border:2px solid var(--clr-surface)}
.psychic-card__status--online{background:var(--clr-green)}

.psychic-card__body{padding:var(--sp-4)}
.psychic-card__name{font-size:var(--fs-base);font-weight:var(--fw-bold);margin-bottom:var(--sp-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psychic-card__rating{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2)}
.psychic-card__score{font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--clr-accent)}
.psychic-card__reviews{font-size:var(--fs-xs);color:var(--clr-dim)}

.psychic-card__tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--sp-2)}
.psychic-card__footer{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-xs);color:var(--clr-muted)}
.psychic-card__readings{color:var(--clr-dim)}

/* ── Tags / Badges ───────────────────────────────────────────── */
.tag{display:inline-block;padding:2px 8px;font-size:var(--fs-xs);border-radius:var(--r-full);background:rgba(255,255,255,0.06);color:var(--clr-muted);border:1px solid var(--clr-border);white-space:nowrap}
.tag--link{transition:all var(--dur)}
.tag--link:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.tag--skill{background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.2)}

/* ── Price Tag ───────────────────────────────────────────────── */
.price-tag{font-weight:var(--fw-semibold);color:var(--clr-green);font-size:var(--fs-sm)}
.price-tag--na{color:var(--clr-dim)}

/* ── Rating Badge ────────────────────────────────────────────── */
.rating-badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:2px 8px;font-size:var(--fs-sm);font-weight:var(--fw-bold);border-radius:var(--r-md)}
.badge--gold{background:var(--clr-accent);color:var(--clr-bg)}
.badge--silver{background:var(--clr-muted);color:var(--clr-bg)}
.badge--bronze{background:var(--clr-dim);color:var(--clr-bg)}

/* ── Availability ────────────────────────────────────────────── */
.avail-dot{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.avail-dot__circle{width:8px;height:8px;border-radius:50%}
.avail--online .avail-dot__circle{background:var(--clr-green)}
.avail--offline .avail-dot__circle{background:var(--clr-dim)}
.avail--busy .avail-dot__circle{background:var(--clr-accent)}
.avail--online{color:var(--clr-green)}
.avail--offline{color:var(--clr-dim)}

/* ── Stars ───────────────────────────────────────────────────── */
.stars-precise{display:inline-flex;gap:1px}
.stars-precise svg,.star{width:16px;height:16px}
.star--full{color:var(--clr-accent)}
.star--empty{color:var(--clr-border)}

/* ── Pagination ──────────────────────────────────────────────── */
.catalog-pagination{margin-top:var(--sp-8);text-align:center}
.catalog-pagination ul{display:flex;justify-content:center;gap:var(--sp-1);list-style:none}
.catalog-pagination a,.catalog-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--sp-3);border:1px solid var(--clr-border);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--clr-muted);transition:all var(--dur)}
.catalog-pagination a:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.catalog-pagination .current{background:var(--clr-accent);border-color:var(--clr-accent);color:var(--clr-bg);font-weight:var(--fw-bold)}

/* ── Catalog Empty ───────────────────────────────────────────── */
.catalog-empty{text-align:center;padding:var(--sp-16) 0;color:var(--clr-muted)}

/* ── Profile Hero ────────────────────────────────────────────── */
.profile-hero{padding:var(--sp-10) 0;border-bottom:1px solid var(--clr-border)}
.profile-header{display:grid;grid-template-columns:180px 1fr;gap:var(--sp-8);margin-top:var(--sp-5)}
.profile-header__photo{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1;background:var(--clr-surface)}
.profile-header__photo img{width:100%;height:100%;object-fit:cover}
.profile-header__avatar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-heading);font-size:4rem;font-weight:var(--fw-black);color:var(--clr-dim);background:linear-gradient(135deg,var(--clr-surface),var(--clr-bg))}
.profile-header__top{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.profile-header__name{font-size:var(--fs-3xl);margin:0}
.profile-header__rating{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.profile-header__score{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--clr-accent)}
.profile-header__reviews{font-size:var(--fs-sm);color:var(--clr-muted)}
.profile-header__meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.profile-meta-item{display:flex;flex-direction:column;gap:2px}
.profile-meta-item__label{font-size:var(--fs-xs);color:var(--clr-dim);text-transform:uppercase;letter-spacing:0.05em}
.intro-offer{font-size:var(--fs-xs);color:var(--clr-green);font-weight:var(--fw-medium)}

/* ── Profile Tags ────────────────────────────────────────────── */
.profile-tags{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.profile-tags__label{font-size:var(--fs-xs);color:var(--clr-dim);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.05em}

/* ── Profile Body ────────────────────────────────────────────── */
.profile-body{padding:var(--sp-10) 0}
.profile-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--sp-8)}
.profile-section{margin-bottom:var(--sp-10)}
.profile-section h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-4)}
.profile-bio{font-size:var(--fs-base);line-height:1.7;color:var(--clr-muted)}
.review-count{font-size:var(--fs-base);font-weight:var(--fw-regular);color:var(--clr-dim)}

/* ── Detail Grid ─────────────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-4)}
.detail-item{padding:var(--sp-4);background:var(--clr-surface);border-radius:var(--r-lg);border:1px solid var(--clr-border)}
.detail-item__label{display:block;font-size:var(--fs-xs);color:var(--clr-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--sp-1)}
.detail-item__value{font-size:var(--fs-sm);color:var(--clr-text)}

/* ── Reviews ─────────────────────────────────────────────────── */
.review-list{display:flex;flex-direction:column;gap:var(--sp-4)}
.review-item{padding:var(--sp-5);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-lg)}
.review-item__header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2);flex-wrap:wrap}
.review-item__author{font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--clr-text)}
.review-item__date{font-size:var(--fs-xs);color:var(--clr-dim)}
.review-item__text{font-size:var(--fs-sm);color:var(--clr-muted);line-height:1.6;margin:0}

/* ── Profile Sidebar ─────────────────────────────────────────── */
.profile-sidebar__box{padding:var(--sp-5);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-lg);margin-bottom:var(--sp-4)}
.profile-sidebar__box h4{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:var(--sp-3)}
.source-list{list-style:none}
.source-list li{margin-bottom:var(--sp-2)}
.source-list a{font-size:var(--fs-sm);color:var(--clr-muted)}
.source-list a:hover{color:var(--clr-accent)}
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.photo-grid img{border-radius:var(--r-md);aspect-ratio:1;object-fit:cover}
.photo-grid__placeholder{border-radius:var(--r-md);aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--ff-heading);font-size:var(--fs-2xl);font-weight:var(--fw-black);color:var(--clr-dim);background:linear-gradient(135deg,var(--clr-surface),var(--clr-bg))}

/* ── Browse Section (front page) ─────────────────────────────── */
.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-3)}
.browse-card{display:block;padding:var(--sp-4) var(--sp-5);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-lg);text-decoration:none;transition:all var(--dur)}
.browse-card:hover{border-color:var(--clr-accent);transform:translateY(-1px)}
.browse-card__name{font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--clr-text);margin-bottom:2px}
.browse-card__count{font-size:var(--fs-xs);color:var(--clr-dim)}

/* ── Tablet ──────────────────────────────────────────────────── */
@media(max-width:1024px){
    .psychic-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media(max-width:768px){
    .catalog-layout{grid-template-columns:1fr}
    .catalog-sidebar{position:static;max-height:none;display:flex;gap:var(--sp-4);overflow-x:auto;padding-bottom:var(--sp-3);border-bottom:1px solid var(--clr-border);margin-bottom:var(--sp-4)}
    .filter-group{flex-shrink:0;min-width:160px;margin-bottom:0}
    .psychic-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
    .profile-header{grid-template-columns:120px 1fr;gap:var(--sp-4)}
    .profile-header__name{font-size:var(--fs-2xl)}
    .profile-layout{grid-template-columns:1fr}
    .profile-sidebar{order:-1}
    .browse-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
