/* ============================================================
   CATEGORY / ALL BUSINESSES PAGE  — its own visual identity
   (distinct from the marketing homepage; clean directory feel)
   ============================================================ */

.catpage{ padding-top: 8px; }

/* ── Category header band ─────────────────────────────────── */
.cat-header{
  display:flex; align-items:flex-start; gap:18px;
  padding:22px 24px; margin-bottom:20px; width:100%; box-sizing:border-box; min-width:0;
  background:var(--white);
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--cat-color,var(--saffron)) 12%, #fff),
    color-mix(in srgb, var(--cat-color,var(--saffron)) 4%, #fff));
  border:1px solid var(--border);
  border:1px solid color-mix(in srgb, var(--cat-color,var(--saffron)) 22%, var(--border));
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.cat-header-icon{
  flex-shrink:0; width:64px; height:64px; border-radius:18px; margin-top:2px;
  display:flex; align-items:center; justify-content:center; font-size:32px;
  background:var(--cat-color,var(--saffron)); color:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 6px 18px color-mix(in srgb,var(--cat-color,var(--saffron)) 35%, transparent);
}
.cat-header-icon .ph{ font-size:30px; line-height:1; }
.cat-header-icon .emoji{ font-size:30px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.cat-header-text{ min-width:0; flex:1 1 auto; }
.cat-header-text h1{
  font-family:var(--font-display); font-size:clamp(22px,2.8vw,30px);
  font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.2;
  margin:0; overflow-wrap:break-word; word-break:break-word; text-wrap:balance; max-width:28ch;
}
.cat-header-sub{ margin:6px 0 0; font-size:13.5px; color:var(--slate); line-height:1.55; }
.cat-header-count{ color:var(--navy); font-weight:700; }

/* ── Subcategory chips (main-category drill-down) ─────────── */
.cat-subnav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.cat-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:100px; font-size:13px; font-weight:500;
  background:var(--white); border:1px solid var(--border); color:var(--text);
  text-decoration:none; transition:all .18s;
}
.cat-chip:hover{
  border-color:var(--cat-color,var(--saffron));
  color:var(--cat-color,var(--saffron));
  background:color-mix(in srgb, var(--cat-color,var(--saffron)) 12%, #fff);
}
.cat-chip--active{
  background:var(--cat-color,var(--saffron)); border-color:var(--cat-color,var(--saffron)); color:#fff;
}
.cat-chip--active:hover{
  background:color-mix(in srgb, var(--cat-color,var(--saffron)) 82%, #000);
  border-color:transparent;
  color:#fff;
}
.cat-chip small{ opacity:.7; font-weight:500; }

/* ── Toolbar: search + sort + filters + view ──────────────── */
.cat-toolbar{
  position:sticky; top:calc(var(--navbar-h) + 8px); z-index:40;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:20px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.cat-search{ position:relative; flex:1; min-width:200px; }
.cat-search input{
  width:100%; height:42px; padding:0 14px 0 40px;
  border:1.5px solid var(--border); border-radius:100px; font-size:14px;
  font-family:var(--font-body); color:var(--text); background:var(--surface); outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.cat-search input:focus{ border-color:var(--saffron); box-shadow:0 0 0 3px rgba(255,107,26,.1); background:#fff; }
.cat-search .ph{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.cat-toolbar-sort{ display:flex; align-items:center; gap:6px; }
.cat-toolbar-sort label{ font-size:12px; color:var(--muted); white-space:nowrap; }

/* Location + category pickers (primary narrowing controls) */
.cat-locbar{ display:flex; gap:8px; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.cat-field{ position:relative; flex:1 1 150px; min-width:130px; display:flex; align-items:center; }
.cat-field > .ph{ position:absolute; left:11px; color:var(--saffron); pointer-events:none; font-size:16px; }
.cat-field .cat-select{ width:100%; height:42px; padding-left:34px; font-weight:500; }
.cat-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cat-select{
  height:38px; padding:0 32px 0 12px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-body);
  color:var(--text); background:var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A9E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  -webkit-appearance:none; appearance:none; cursor:pointer; outline:none;
}
.cat-select:focus{ border-color:var(--saffron); }
.cat-filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cat-filter{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 12px; border:1.5px solid var(--border); border-radius:100px;
  font-size:13px; color:var(--slate); background:var(--white); user-select:none; transition:all .18s;
}
.cat-filter input{ position:absolute; opacity:0; width:0; height:0; }
.cat-filter:hover{ border-color:var(--saffron); color:var(--saffron); }
.cat-filter.is-on{ background:var(--saffron-light); border-color:var(--saffron); color:var(--saffron); font-weight:500; }
.cat-view{ display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.cat-view-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:var(--white); border:none; cursor:pointer; color:var(--muted); transition:var(--transition);
}
.cat-view-btn.is-active{ background:var(--saffron); color:#fff; }

/* ── Results meta row ─────────────────────────────────────── */
.cat-meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cat-meta-count{ font-size:14px; color:var(--slate); }
.cat-meta-count strong{ color:var(--text); }
.cat-active-filters{ display:flex; gap:6px; flex-wrap:wrap; }
.cat-active-filters a{ font-size:12px; color:var(--saffron); text-decoration:none; }

/* ── Grid + cards ─────────────────────────────────────────── */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr)); gap:14px; }
.cat-card{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s; position:relative;
}
.cat-card:hover{ box-shadow:var(--shadow-md); border-color:#cbd5e1; }
.cat-card-media{
  position:relative; height:148px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, color-mix(in srgb,var(--cat,var(--navy-mid)) 72%, #0f1b3c), #0f172a);
  overflow:hidden;
}
.cat-card-media img{ width:100%; height:100%; object-fit:cover; }
.cat-card-media .ph{ font-size:46px; color:rgba(255,255,255,.4); }
.cat-card-badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.cat-badge{ font-size:10px; font-weight:500; padding:3px 8px; border-radius:100px; display:inline-flex; align-items:center; gap:3px; }
.cat-badge .ph{ font-size:12px; }
.cat-badge--verified{ background:var(--green); color:#fff; }
.cat-badge--trending{ background:var(--saffron); color:#fff; }
.cat-card-body{ padding:14px; display:flex; flex-direction:column; flex:1; }
.cat-card-cat{
  align-self:flex-start; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.5px;
  color:var(--cat,var(--saffron)); margin-bottom:6px;
}
.cat-card-name{ font-family:var(--font-display); font-size:16px; font-weight:600; line-height:1.25; margin-bottom:6px; }
.cat-card-name a{ color:var(--navy); text-decoration:none; }
.cat-card-name a:hover{ color:var(--saffron); }
.cat-card-rating{ display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:6px; }
.cat-card-rating .stars{ color:#F5A623; letter-spacing:1px; }
.cat-card-rating b{ color:var(--text); }
.cat-card-rating span{ color:var(--muted); }
.cat-card-loc{ display:flex; align-items:flex-start; gap:5px; font-size:13px; color:var(--slate); margin-bottom:10px; }
.cat-card-loc .ph{ color:var(--saffron); margin-top:1px; flex-shrink:0; }
.cat-card-foot{ display:flex; gap:8px; margin-top:auto; }
.cat-card-foot .btn{ flex:1; }
.cat-pill{ font-size:11px; font-weight:500; padding:2px 9px; border-radius:100px; white-space:nowrap; }
.cat-pill.open{ background:var(--green-light); color:var(--green); }
.cat-pill.closed{ background:#FDECEC; color:var(--red); }
.cat-card-tags{ display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.cat-price{ font-size:12px; color:var(--slate); font-weight:500; }

/* ── List view ────────────────────────────────────────────── */
.cat-grid.is-list{ grid-template-columns:1fr; gap:12px; }
.cat-grid.is-list .cat-card{ flex-direction:row; }
.cat-grid.is-list .cat-card-media{ width:180px; height:auto; min-height:150px; flex-shrink:0; }
.cat-grid.is-list .card-body{ padding:16px 18px; }
.cat-grid.is-list .card-actions{ max-width:360px; }

/* ── Empty state ──────────────────────────────────────────── */
.cat-empty{ text-align:center; padding:64px 20px; border:1.5px dashed var(--border); border-radius:var(--radius-lg); background:var(--white); }
.cat-empty .ph{ font-size:56px; color:var(--muted); }
.cat-empty h3{ font-size:20px; margin:14px 0 6px; color:var(--text); font-family:var(--font-display); }
.cat-empty p{ color:var(--slate); max-width:420px; margin:0 auto 18px; }

/* ── Skeleton (shown while navigating to new sort/filter/page) ── */
.cat-skeleton{ display:none; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.cat-skeleton.is-on{ display:grid; }
.cat-skeleton.is-on ~ .cat-grid,
.cat-skeleton.is-on ~ .cat-pagination{ display:none; }
.sk-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.sk-img{ height:128px; background:var(--surface); }
.sk-body{ padding:14px; }
.sk-line{ height:12px; background:var(--surface); border-radius:6px; margin-bottom:9px; }
.sk-line.w70{ width:70%; } .sk-line.w90{ width:90%; } .sk-line.w50{ width:50%; } .sk-line.w40{ width:40%; }

/* ── Pagination ───────────────────────────────────────────── */
.cat-pagination{ display:flex; justify-content:center; align-items:center; gap:6px; margin:28px 0 8px; flex-wrap:wrap; }
.cat-pagination a, .cat-pagination span{
  min-width:38px; height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-weight:500;
  color:var(--text); text-decoration:none; background:var(--white); transition:all .18s;
}
.cat-pagination a:hover{ border-color:var(--saffron); color:var(--saffron); }
.cat-pagination .is-current{ background:var(--saffron); border-color:var(--saffron); color:#fff; }
.cat-pagination .is-disabled{ opacity:.4; pointer-events:none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:768px){
  .cat-toolbar{ position:static; }
  .cat-toolbar-sort{ flex:1; }
  .cat-grid.is-list .cat-card{ flex-direction:column; }
  .cat-grid.is-list .cat-card-media{ width:100%; min-height:0; height:128px; }
}
@media (max-width:520px){
  .cat-header{ padding:16px; gap:14px; }
  .cat-header-icon{ width:52px; height:52px; font-size:26px; }
  .cat-grid{ grid-template-columns:1fr; gap:12px; }
  .cat-card-media{ height:104px; }
  .cat-card-foot{ flex-direction:column; }
}
@media (max-width:380px){
  .cat-grid{ grid-template-columns:1fr; }
}

/* Initial-letter logo when a listing has no photo */
.cat-card-initial { font-family: var(--font-display); font-size: 52px; font-weight:700; color: #fff; line-height: 1; letter-spacing: -1px; text-shadow: 0 2px 12px rgba(0,0,0,.25); }

/* ── Live search: spinner, highlight, keyboard focus ──────── */
.cat-search-spinner{
  position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px;
  border:2px solid var(--border); border-top-color:var(--saffron); border-radius:50%;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.cat-toolbar.is-loading .cat-search-spinner{ opacity:1; animation:cat-spin .6s linear infinite; }
@keyframes cat-spin{ to{ transform:rotate(360deg); } }
mark.cat-hl{ background:var(--saffron-light, #FFE7D6); color:inherit; border-radius:3px; padding:0 1px; }
.cat-card-name a:focus-visible{ outline:2px solid var(--saffron); outline-offset:2px; border-radius:4px; }

/* Skeleton shimmer + fresh-results fade-in */
.pulse{ animation:cat-pulse 1.2s ease-in-out infinite; }
@keyframes cat-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.cat-grid.is-fresh .cat-card,.cat-grid.is-fresh .business-card{ animation:cat-fade .25s ease both; }
@keyframes cat-fade{ from{ opacity:0; transform:translateY(4px); } }
@media (prefers-reduced-motion: reduce){
  .pulse, .cat-grid.is-fresh .cat-card, .cat-toolbar.is-loading .cat-search-spinner{ animation:none; }
}

/* ── Price chips ─── */
.cat-price-chips{display:flex;align-items:center;gap:6px;padding:8px 24px 4px;flex-wrap:wrap;}
.cat-price-label{font-size:12px;font-weight:500;color:var(--slate);text-transform:uppercase;letter-spacing:.4px;}
.cat-price-chip{font-size:13px;padding:4px 12px;border-radius:100px;border:1.5px solid var(--border);background:var(--white);color:var(--slate);text-decoration:none;transition:all .15s;font-weight:500;cursor:pointer;user-select:none;}
.cat-price-chip:hover{border-color:var(--saffron);color:var(--saffron);background:var(--saffron-light);}
.cat-price-chip.cat-chip--active{background:var(--saffron);color:#fff;border-color:var(--saffron);}
.cat-price-chip.cat-chip--active:hover{background:var(--saffron-mid);border-color:var(--saffron-mid);color:#fff;}
.cat-price-chip input{position:absolute;opacity:0;width:0;height:0;}

/* All-category responsive hardening */
.catpage,
.cat-header,
.cat-header-text,
.cat-toolbar,
.cat-toolbar-sort,
.cat-locbar,
.cat-field,
.cat-controls,
.cat-filters,
.cat-grid,
.cat-card,
.cat-card-body,
.cat-card-foot,
.cat-meta,
.cat-active-filters{min-width:0;}

.cat-grid,
.cat-skeleton{grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));}

.cat-header-text h1,
.cat-header-sub,
.cat-chip,
.cat-card-cat,
.cat-card-name,
.cat-card-name a,
.cat-card-rating,
.cat-card-loc,
.cat-price,
.cat-pill,
.cat-active-filters a{overflow-wrap:anywhere;}

.cat-card .card-actions{flex-wrap:nowrap;}
.cat-select,
.cat-search input{max-width:100%;min-width:0;}

@media(max-width:640px){
  .cat-price-chips{padding-inline:0;}
  .cat-subnav{gap:6px;}
  .cat-chip{padding:6px 10px;font-size:12px;}
  .cat-toolbar{align-items:stretch;}
  .cat-search,
  .cat-locbar,
  .cat-controls,
  .cat-filters,
  .cat-toolbar-sort,
  .cat-toolbar-sort .cat-select{width:100%;flex:1 1 100%;}
  .cat-field{flex-basis:100%;}
  .cat-view{width:100%;}
  .cat-view-btn{flex:1;}
  .cat-grid.is-list .cat-card{display:flex;flex-direction:column;}
  .cat-grid.is-list .cat-card-media{width:100%;height:118px;min-height:0;}
  .cat-grid.is-list .cat-card-foot{max-width:none;}
}

@media(max-width:420px){
  .cat-header{align-items:flex-start;}
  .cat-card-foot{flex-direction:column;}
  .cat-card-foot .btn{width:100%;}
}