/* ============================================================
   ZAHYA — Search page styles
   Page-specific rules only; shared base/design-system rules
   live in style.css (loaded before this file).
   ============================================================ */
.btn-sm{ padding:.68rem 1.4rem; font-size:.72rem; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
/* ---------------- Utility bar ---------------- */
.utility-bar{ background:var(--band); color:var(--text-soft); font-size:.76rem; letter-spacing:.06em; }
/* ---------------- Breadcrumb ---------------- */
.breadcrumb{ background:var(--surface); border-bottom:1px solid var(--line-soft); font-size:.78rem; color:var(--text-soft); }
.breadcrumb .wrap{ display:flex; align-items:center; flex-wrap:wrap; padding-block:1.1rem; }
.breadcrumb a:hover{ color:var(--maroon); }
.breadcrumb .sep{ opacity:.5; margin-inline:.5rem; }
.breadcrumb .current{ color:var(--text); font-weight:600; }
/* ---------------- Search hero ---------------- */
.search-hero{ padding-block:clamp(2.6rem,5vw,4rem) clamp(1.6rem,3vw,2rem); background:var(--ground); }
.search-hero h1{ font-size:clamp(2rem,3.6vw,2.9rem); margin-top:.6rem; word-break:break-word; }
.search-form{ display:flex; align-items:center; gap:.8rem; margin-top:1.7rem; max-width:560px; border-bottom:2px solid var(--line); padding-bottom:.6rem; transition:border-color .3s var(--ease); }
.search-form:focus-within{ border-color:var(--maroon); }
.search-form input{ flex:1; background:none; border:none; font-size:1.05rem; color:var(--text); font-family:var(--font-body); min-width:0; }
.search-form input::placeholder{ color:var(--text-soft); }
.search-form input:focus{ outline:none; }
.search-submit{ display:flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border-radius:50%; transition:background .3s var(--ease); flex:none; }
.search-submit:hover{ background:var(--surface-alt); }
.search-submit svg{ width:19px; height:19px; }
.category-count{ font-size:.78rem; color:var(--text-soft); margin-top:1.3rem; letter-spacing:.08em; text-transform:uppercase; }
/* ---------------- Results list (shared row pattern) ---------------- */
.category-list{ padding-block:.5rem clamp(4.5rem,8vw,7rem); background:var(--ground); }
.cat-row{ display:grid; grid-template-columns:260px 1fr; gap:clamp(1.6rem,3.4vw,2.8rem); padding-block:2.3rem; border-bottom:1px solid var(--line); align-items:start; }
.cat-row:first-child{ padding-top:1.2rem; }
.cat-row-visual{ aspect-ratio:1/1; border-radius:var(--radius); position:relative; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; }
.cat-row-visual img{ width:100%; height:100%; object-fit:contain; padding:1.4rem; box-sizing:border-box; transition:transform .6s var(--ease); }
.cat-row-visual:hover img{ transform:scale(1.06); }
.cat-row-body{ display:flex; flex-direction:column; gap:.8rem; }
.cat-row-top{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.cat-row-catlabel{ font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--olive); margin:0 0 .35rem; }
.cat-row h3{ font-size:1.4rem; }
.cat-row-name-link{ color:inherit; text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0% 1px; transition:background-size .3s var(--ease); }
.cat-row-name-link:hover{ background-size:100% 1px; }
.cat-row-brief{ color:var(--text-soft); font-size:.96rem; max-width:62ch; }
.cat-row-specs{ display:flex; flex-wrap:wrap; gap:.5rem 1.8rem; margin:0; }
.cat-row-specs .spec-pair{ display:flex; align-items:baseline; gap:.35rem; font-size:.84rem; }
.cat-row-specs dt{ margin:0; color:var(--text-soft); text-transform:uppercase; letter-spacing:.05em; font-size:.66rem; }
.cat-row-specs dd{ margin:0; font-weight:600; color:var(--text); }
.cat-row-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.5rem; flex-wrap:wrap; }
.cat-row-price{ font-family:var(--font-display); font-size:1.35rem; color:var(--accent-pop); }
.cat-row-tag{ display:inline-block; background:var(--surface-alt); color:var(--text-soft); font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; margin-top:.2rem; }
.no-results{ text-align:center; padding:clamp(3rem,7vw,5rem) 1rem; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.no-results h3{ font-size:1.5rem; }
.no-results p{ color:var(--text-soft); max-width:46ch; }
/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
    .footer-top{ grid-template-columns:1fr 1fr 1fr; }
    .footer-brand{ grid-column:1/-1; }
  }
@media (max-width:820px){
    .nav-links{ display:none; }
    .nav-burger{ display:flex; }
    .cat-row{ grid-template-columns:1fr; }
    .cat-row-visual{ aspect-ratio:16/10; max-width:340px; max-width:100%; }
    .form-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr 1fr; }
    .utility-bar .wrap{ font-size:.68rem; }
  }
@media (max-width:560px){
    .footer-top{ grid-template-columns:1fr; }
    .cat-row-foot{ flex-direction:column; align-items:flex-start; }
    .cat-row-foot .btn{ width:100%; }
    .search-form{ max-width:100%; }
  }