/* ============================================================================
   MarCa — Search Products (pro + lively)
   File: /MarCa/search/css/search-products.css
   Notes:
   - Keeps layout in normal flow (footer fix)
   - No internal scrolling on results grid
   - Typography & colors tuned for crisp readability
   ========================================================================== */

/* Fonts (safe if blocked — will fall back to system) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* --- Design tokens (local to this sheet) --- */
:root{
  --brand: #1567eb;
  --brand-600:#155ee0;
  --brand-700:#0d49ba;
  --ink:#0f172a;               /* slate-900 */
  --muted:#475569;             /* slate-600 */
  --subtle:#64748b;            /* slate-500 */
  --line:#e7eaf0;
  --card:#ffffff;
  --card-2:#f7f8fb;
  --glow:0 10px 22px rgba(8,44,88,.14);
  --sh-1:0 2px 10px rgba(16,24,40,.07);
  --sh-2:0 12px 28px rgba(16,24,40,.10);
  --rad:14px;
}

/* Base type tweaks just inside the search page */
#searchPage, #searchPage *{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.01em;
}

/* Headings (product titles) use Plus Jakarta for a friendly, modern look */
#searchPage .product-title{
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* --- Ensure results section contributes height to page flow --- */
#resultsWrap { position: static; min-height: 1px; }
#resultsGrid::after, #resultsList::after { content: ""; display: block; clear: both; }

/* ───────── Layout: grid (default 5 cols) ───────── */
#resultsGrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px 18px;
  margin-bottom:1.25rem;
  align-items:stretch;
}
@media (max-width:1400px){#resultsGrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1100px){#resultsGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){#resultsGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){#resultsGrid{grid-template-columns:1fr}}

/* List mode: 2 per row, then 1 */
#resultsGrid.list-view{grid-template-columns:repeat(2,1fr)!important;gap:24px 18px}
@media (max-width:900px){#resultsGrid.list-view{grid-template-columns:1fr!important}}

/* ───────── Card shell ───────── */
.card.search-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--card);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:box-shadow .18s ease, transform .14s ease, border-color .18s ease;
  min-width:0; min-height:0; height:100%;
  isolation:isolate;             /* keeps ribbon glow tidy */
}
.card.search-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow);
  border-color:#dee2ea;
}

/* ───────── Media ───────── */
.card.search-card .card-img-box{
  width:100%; height:168px;
  background:linear-gradient(180deg,#f8faff 0%, #f2f5fb 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  border-bottom:1px solid #f1f3f8;
}
.card.search-card .product-card-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:0 0 12px 12px;
  transition:transform .25s ease, filter .2s ease;
}
.card.search-card:hover .product-card-img{ transform:scale(1.02) }
.card.search-card .product-card-img[src*="no-image"]{ filter:grayscale(.35) contrast(.9) }

/* Ribbon (premium) */
.card.search-card .ribbon-premium{
  position:absolute; top:.55rem; left:.55rem;
  padding:.24rem .56rem;
  font-size:.72rem; font-weight:700;
  color:#1f2a37; background:#f6c23e;
  border-radius:.5rem;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  z-index:2;
}

/* ───────── Body ───────── */
.card.search-card .card-body{
  padding:14px 16px 12px;
  display:flex; flex-direction:column; align-items:flex-start;
  row-gap:6px; min-width:0;
}
.card.search-card .product-title{
  font-size:1.06rem; font-weight:800; color:var(--ink);
  margin:0; line-height:1.2; max-width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.card.search-card .meta-line{
  display:flex; align-items:center; gap:10px;
  font-size:.95rem; font-weight:600; color:var(--muted);
}
.card.search-card .price{
  color:var(--brand-700);
  font-weight:800; font-size:1.08rem;
  letter-spacing:.005em;
}
.card.search-card .discount-line{
  font-size:.93rem; color:#0c7a44; font-weight:700;
}
.card.search-card .sep{opacity:.25}
.card.search-card .stock{
  color:#0f172a; font-size:.95rem; font-weight:700;
}

/* Vendor / tag row (optional support—won’t break if absent) */
.card.search-card .tag-row{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;
}
.card.search-card .tag{
  font-size:.72rem; font-weight:700; color:#0f274e;
  background:#eaf2ff; border:1px solid #d9e6ff;
  padding:.18rem .5rem; border-radius:999px;
}

/* ───────── Actions (button) ───────── */
.card.search-card .card-actions{ margin-top:auto; width:100% }
.card.search-card .btn-visit{
  display:block; width:100%;
  border-radius:10px;
  font-weight:800; font-size:1.02rem;
  background:var(--brand);
  color:#fff; border:1px solid transparent;
  padding:10px 0; margin-top:8px;
  text-align:center; letter-spacing:.01em;
  box-shadow:0 2px 6px rgba(21,103,235,.12);
  transition:background .16s ease, transform .08s ease, box-shadow .18s ease;
}
.card.search-card .btn-visit:hover{
  background:var(--brand-600);
  box-shadow:0 6px 18px rgba(21,103,235,.18);
}
.card.search-card .btn-visit:active{ transform:translateY(1px) }
.card.search-card .btn-visit:focus-visible{
  outline:3px solid rgba(21,103,235,.28);
  outline-offset:2px;
}

/* Links: clean look */
.card.search-card a{ text-decoration:none!important; color:inherit }

/* ───────── Grid/List helpers ───────── */
#resultsGrid.list-view{
  display:grid!important;
  justify-content:center; align-items:stretch;
}

/* Keep grid in normal flow (no internal scroll here) */
#resultsGrid.grid-mode{
  display:grid!important;
  grid-template-columns:repeat(5,1fr);
  gap:24px 18px; justify-content:center; align-items:stretch;
}
@media (max-width:1400px){#resultsGrid.grid-mode{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1100px){#resultsGrid.grid-mode{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){#resultsGrid.grid-mode{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){#resultsGrid.grid-mode,#resultsGrid.list-view{grid-template-columns:1fr}}

/* ───────── Optional compact horizontal variant ───────── */
.card.search-card.layout-center{
  max-width:100%; margin:0; min-height:200px;
  border-radius:var(--rad); border:1px solid #e8eaf0;
  background:var(--card);
  display:flex; flex-direction:row; align-items:center;
  box-shadow:var(--sh-1); overflow:hidden;
}
.card.search-card.layout-center .card-img-box{
  flex:0 0 110px; height:110px;
  background:linear-gradient(180deg,#f7f9ff 0%, #f1f4fb 100%);
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid #eff2f8; border-radius:0;
}
.card.search-card.layout-center .product-card-img{
  width:84px; height:84px; border-radius:10px;
  object-fit:cover; border:1px solid #ebeff7;
}
.card.search-card.layout-center .card-body{
  flex:1 1 auto; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding:14px 22px 14px 18px; min-width:0;
}
.card.search-card.layout-center .product-title{
  font-size:1.04rem; font-weight:800; color:#1b2437; line-height:1.16; margin-bottom:2px;
}
.card.search-card.layout-center .meta-line{
  display:flex; align-items:center; gap:14px;
  font-size:.98rem; font-weight:600; color:#334155; margin-bottom:6px;
}
.card.search-card.layout-center .btn-visit{
  margin-top:9px; background:var(--brand); color:#fff;
  border-radius:9px; padding:8px 22px; font-size:1rem; font-weight:800;
  border:none; box-shadow:0 2px 6px rgba(21,97,230,.12);
}
.card.search-card.layout-center .btn-visit:hover{ background:var(--brand-600) }