/* ===== Modern Product Cards (Uniform height + alignment) ===== */

:root{
  --cio-card: #fff;
  --cio-border: rgba(0,0,0,.10);
  --cio-shadow: 0 14px 36px rgba(0,0,0,.10);
  --cio-text: #111;
  --cio-muted: rgba(0,0,0,.72);
  --cio-brand: #E17A30;
  --cio-gap: 18px;
}

.wbc-section{max-width:1200px;margin:28px auto;padding:0 24px}
.wbc-section__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.wbc-h{margin:0;letter-spacing:-.01em}
.wbc-link{font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;opacity:.9}
.wbc-link:hover{opacity:1}
.wbc-empty{opacity:.7;margin:8px 0 0}

/* ===== Featured Categories (compact grid) ===== */
.wbc-catgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
  align-items:stretch;
}
.wbc-catcard{
  display:flex;
  flex-direction:column;
  text-align:center;
  padding:0; /* card body controls spacing */
}
.wbc-catcard .wbc-card__media{
  aspect-ratio:1/1;
  display:grid;place-items:center;padding:10px;background:transparent;border-bottom:0;
}
.wbc-catcard .wbc-card__media img{
  width:72%;height:72%;object-fit:contain;display:block;margin:0 auto;
}
.wbc-catcard .wbc-card__body{
  padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.wbc-catcard .wbc-card__title{font-size:15px;font-weight:800;line-height:1.2}
.wbc-catcard .wbc-card__sub{font-size:13px;color:var(--cio-muted)}

@media (max-width:640px){
  .wbc-catgrid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
  .wbc-catcard .wbc-card__media img{width:64%;height:64%}
}

/* Toggle */
.wbc-viewtoggle{display:flex;align-items:center;gap:8px}
.wbc-viewtoggle__btn{
  appearance:none;border:1px solid var(--cio-border);background:#fff;
  border-radius:999px;padding:.45rem .8rem;font-weight:700;cursor:pointer;
}
.wbc-viewtoggle__btn[aria-pressed="true"]{
  background:var(--cio-brand);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(225,122,48,.35)
}

/* Buttons */
.wbc-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;border-radius:999px;padding:.6rem 1rem;font-weight:700;
  border:1px solid var(--cio-border);background:#fff;white-space:nowrap}
.wbc-btn--primary{background:var(--cio-brand);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(225,122,48,.35)}
.wbc-btn--ghost{background:transparent}

/* Card base */
.wbc-card{
  display:flex;flex-direction:column;
  background:var(--cio-card);
  border:1px solid var(--cio-border);
  border-radius:16px;
  box-shadow:var(--cio-shadow);
  overflow:hidden;
  color:var(--cio-text);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%; /* uniform height for grid alignment */
}
.wbc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(0,0,0,.14);
  border-color:rgba(0,0,0,.14)
}

/* Image */
.wbc-card__media{
  position:relative;
  background:#faf7f3;
  border-bottom:1px solid var(--cio-border);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
}
.wbc-card__media img{width:100%;height:100%;object-fit:contain}
.wbc-badge{
  position:absolute;top:10px;left:10px;font-size:12px;font-weight:800;
  padding:.28rem .55rem;border-radius:999px;background:var(--cio-brand);color:#fff;
  box-shadow:0 8px 20px rgba(225,122,48,.35)
}

/* Body */
.wbc-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:14px 16px;
  gap:.55rem;
}
.wbc-card__title{font-weight:800;margin:0;font-size:16px;line-height:1.3}
.wbc-card__titlelink{text-decoration:none;color:inherit}
.wbc-card__desc{
  margin:0;color:var(--cio-muted);
  font-size:14.5px;line-height:1.55;
  flex-grow:1; /* pushes meta + buttons to bottom for alignment */
}
.wbc-card__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.wbc-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  border:1px solid var(--cio-border);
  background:rgba(0,0,0,.05);
  padding:.18rem .5rem;border-radius:999px;
  font-size:12px;
}
.wbc-chip.in{background:#f0fff5}
.wbc-chip.out{background:#fff5f5}
.wbc-card__meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:.4rem;
}
.wbc-card__price{font-weight:800;font-size:15px}
.wbc-rating .star-rating{margin:0}

/* Actions (always bottom-aligned) */
.wbc-card__actions{
  display:flex;gap:.6rem;flex-wrap:wrap;
  margin-top:auto; /* ensures consistent alignment at bottom */
  padding-top:.4rem;
}

/* Grid */
.wbc-prodgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--cio-gap);
  align-items:stretch;
}

/* Tiles */
.wbc-prodgrid[data-view="tiles"] .wbc-card__desc{display:block}
.wbc-prodgrid[data-view="tiles"] .wbc-card__media{aspect-ratio:1/1}

/* Stretched view */
.wbc-prodgrid[data-view="stretched"]{
  grid-template-columns:1fr;
  gap:14px;
}
.wbc-prodgrid[data-view="stretched"] .wbc-card{
  flex-direction:row;
  align-items:stretch;
}
.wbc-prodgrid[data-view="stretched"] .wbc-card__media{
  width:280px;min-width:280px;max-width:280px;
  border-bottom:0;border-right:1px solid var(--cio-border);
  background:#fff;aspect-ratio:auto;
}
.wbc-prodgrid[data-view="stretched"] .wbc-card__media img{width:92%;height:92%;object-fit:contain}
.wbc-prodgrid[data-view="stretched"] .wbc-card__body{padding:16px 18px}
.wbc-prodgrid[data-view="stretched"] .wbc-card__title{font-size:18px}
.wbc-prodgrid[data-view="stretched"] .wbc-card__desc{display:block}

/* Line clamps */
.wbc-lineclamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wbc-lineclamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Responsive */
@media (max-width: 880px){
  .wbc-prodgrid[data-view="stretched"] .wbc-card__media{
    width:220px;min-width:220px;max-width:220px;
  }
}
@media (max-width: 640px){
  .wbc-prodgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .wbc-prodgrid[data-view="stretched"] .wbc-card{
    flex-direction:column;
  }
  .wbc-prodgrid[data-view="stretched"] .wbc-card__media{
    width:100%;max-width:none;
    border-right:0;border-bottom:1px solid var(--cio-border);
    aspect-ratio:4/3;background:#faf7f3;
  }
}