.shop-layout{display:grid;grid-template-columns:268px 1fr;gap:24px;max-width:1600px;margin:0 auto;padding:28px 24px;align-items:start}
/* ===== FILTER SIDEBAR ===== */
.filter-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);position:sticky;top:calc(var(--hdr)+14px);max-height:calc(100vh - var(--hdr) - 28px);overflow-y:auto}
.filter-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-head h3{font-family:var(--display);font-size:15px;font-weight:700}
.clear-all{font-size:12px;color:var(--purple-l);cursor:pointer;font-weight:600;transition:color .15s}
.clear-all:hover{color:var(--red)}
.filter-section{padding:16px 20px;border-bottom:1px solid var(--border)}
.filter-section:last-child{border-bottom:none}
.filter-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.filter-label i{font-size:10px;transition:transform .2s}
.filter-label.collapsed i{transform:rotate(-90deg)}
.filter-search{width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;outline:none;margin-bottom:10px;font-family:var(--font)}
.filter-search:focus{border-color:var(--purple)}
.filter-list{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto}
.filter-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;transition:background .12s}
.filter-item:hover{background:rgba(255,255,255,.04)}
.filter-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--purple);cursor:pointer;flex-shrink:0}
.filter-item span{font-size:13px;color:var(--text2)}
.filter-item .fi-count{margin-left:auto;font-size:10px;color:var(--text3);background:var(--surface2);padding:1px 6px;border-radius:8px}
/* Cat pills */
.cat-pill-list{display:flex;flex-direction:column;gap:2px}
.cat-pill-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .12s}
.cat-pill-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.cat-pill-item.active{background:rgba(124,58,237,.12);color:var(--purple-l)}
.cat-pill-item i{width:16px;text-align:center;font-size:13px}
/* Price inputs */
.price-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.price-inp-wrap{position:relative}
.price-inp-wrap span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px}
.price-inp{width:100%;padding:8px 8px 8px 22px;background:var(--bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;outline:none;font-family:var(--font)}
.price-inp:focus{border-color:var(--purple)}
.apply-price{width:100%;padding:9px;background:var(--purple);color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;font-family:var(--font)}
.apply-price:hover{opacity:.85}
/* Active tags */
#active-tag-wrap{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px;border-bottom:1px solid var(--border)}
#active-tag-wrap:empty{display:none}
.filter-tag{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.22);color:var(--purple-l);font-size:12px;font-weight:500}
.filter-tag .rm{cursor:pointer;font-size:10px;opacity:.7;transition:opacity .12s}
.filter-tag .rm:hover{opacity:1;color:var(--red)}

/* ===== PRODUCTS AREA ===== */
.products-area{min-height:600px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.toolbar-title{font-family:var(--display);font-weight:700;font-size:18px;flex:1}
.toolbar-title span{font-weight:400;font-size:14px;color:var(--text2);margin-left:6px}
.toolbar-select{padding:9px 30px 9px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:13px;cursor:pointer;outline:none;font-family:var(--font);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.toolbar-select:focus{border-color:var(--purple)}
.view-toggle{display:flex;gap:4px}
.view-btn{width:34px;height:34px;border-radius:7px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:all .15s}
.view-btn.active,.view-btn:hover{background:var(--purple);color:#fff;border-color:var(--purple)}

/* Product Grid */
#prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
#prod-grid.list-view{grid-template-columns:1fr}
#prod-grid.list-view .prod-card{flex-direction:row}
#prod-grid.list-view .prod-img{width:180px;flex-shrink:0;height:150px}
#prod-grid.list-view .prod-title{-webkit-line-clamp:1}

/* Skeleton */
.skel{animation:skelPulse 1.5s ease-in-out infinite;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
@keyframes skelPulse{0%,100%{opacity:1}50%{opacity:.45}}
.skel-img{height:200px;background:var(--surface2)}
.skel-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.skel-line{height:12px;background:var(--border2);border-radius:4px}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.pag-btn{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--text2);transition:all .15s}
.pag-btn:hover:not(.disabled):not(.active){background:var(--surface2);color:var(--text)}
.pag-btn.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.pag-btn.disabled{opacity:.35;cursor:default;pointer-events:none}

/* Product Modal */
.prod-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);z-index:800;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s}
.prod-modal-overlay.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.prod-modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-xl);width:100%;max-width:900px;max-height:90vh;overflow-y:auto;animation:popIn .25s}
@keyframes popIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-inner{display:grid;grid-template-columns:1fr 1fr;position:relative}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;background:var(--surface2);border:1px solid var(--border2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:all .15s}
.modal-close:hover{background:rgba(244,63,94,.15);color:var(--red)}
.modal-gallery{background:var(--surface2);border-radius:var(--radius-xl) 0 0 var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:12px}
.gallery-main{height:280px;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;background:var(--bg2)}
.gallery-main img{max-height:100%;max-width:100%;object-fit:contain}
.gallery-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.g-thumb{width:56px;height:48px;border-radius:7px;border:2px solid transparent;cursor:pointer;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.g-thumb.active{border-color:var(--purple)}
.g-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.modal-info{padding:30px;display:flex;flex-direction:column}
.modal-cat{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.modal-title{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.25;margin-bottom:10px}
.modal-brand{font-size:13px;color:var(--text2);margin-bottom:12px}
.modal-cond{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:14px}
.modal-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.modal-price{font-family:var(--display);font-size:32px;font-weight:800;color:var(--purple-l)}
.modal-compare{font-size:16px;color:var(--text3);text-decoration:line-through}
.modal-disc{font-size:13px;font-weight:700;color:var(--red);background:rgba(244,63,94,.1);padding:2px 8px;border-radius:4px}
.modal-desc{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:16px}
.modal-specs-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:10px}
.spec-row{display:flex;font-size:13px;padding:7px 0;border-bottom:1px solid var(--border)}
.spec-row:last-child{border-bottom:none}
.spec-k{color:var(--text2);flex:0 0 42%;font-weight:500}
.spec-v{color:var(--text);flex:1}
.modal-stock{font-size:12px;margin-bottom:16px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px}
.modal-actions{display:flex;gap:10px;margin-top:auto;padding-top:16px}
.modal-add-btn{flex:1;padding:13px;background:var(--purple);color:#fff;border-radius:var(--radius);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .15s;font-family:var(--font)}
.modal-add-btn:hover{background:var(--purple-d)}
.modal-wish-btn{width:48px;height:48px;border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text2);cursor:pointer;transition:all .15s}
.modal-wish-btn:hover{background:rgba(244,63,94,.12);color:var(--red)}

/* Mobile filter */
.mob-filter-btn{display:none;align-items:center;gap:8px;padding:9px 16px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .15s}
.mob-filter-btn:hover{border-color:var(--purple-l);color:var(--purple-l)}

/* No results */
.no-results{grid-column:1/-1;text-align:center;padding:80px 20px}
.no-results-icon{font-size:48px;color:var(--text3);margin-bottom:16px}

@media(max-width:1024px){
  .shop-layout{grid-template-columns:240px 1fr}
}
@media(max-width:800px){
  .shop-layout{grid-template-columns:1fr;padding:16px}
  .filter-sidebar{position:fixed;left:-290px;top:0;height:100vh;z-index:700;width:280px;border-radius:0;transition:left .3s;max-height:100vh}
  .filter-sidebar.open{left:0}
  .mob-filter-btn{display:flex}
  .modal-inner{grid-template-columns:1fr}
  .modal-gallery{border-radius:var(--radius-xl) var(--radius-xl) 0 0}
}
@media(max-width:500px){
  #prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
	
	
	/* ===== PRODUCT CARDS ===== */
.prod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
  height: 100%;           /* ← fixes unequal card heights */
}
.prod-card:hover {
  transform: translateY(-3px);
  border-color: var(--purple);
  box-shadow: 0 8px 28px rgba(124,58,237,.18);
}

/* Image area — fixed height so all cards align */
.prod-img {
  position: relative;
  height: 200px;          /* ← fixed uniform image height */
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* overflow removed — moved to inner img-clip wrapper so badges aren't clipped */
}
.prod-img-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.prod-img-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.prod-card:hover .prod-img-clip img { transform: scale(1.04); }

.no-img {
  font-size: 40px;
  color: var(--text3);
  position: relative;
  z-index: 1;
}

/* Badge */
.prod-badge-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 2;   /* above the clip wrapper */
}
.prod-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.pb-hot    { background: var(--red);    color: #fff; border: none; }
.pb-new    { background: var(--green);  color: #fff; }
.pb-used   { background: var(--yellow); color: #000; }
.pb-open   { background: var(--blue);   color: #fff; }
.pb-refurb { background: var(--violet); color: #fff; }
.pb-custom { background: var(--violet); color: #fff; }
.pb-free   { background: var(--green);  color: #fff; }
.pb-sale   { background: var(--orange); color: #fff; }

/* Wishlist button on card */
.prod-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  z-index: 1;
}
.prod-wish:hover,
.prod-wish.active { background: rgba(244,63,94,.2); color: var(--red); border-color: rgba(244,63,94,.4); }

/* Card body */
.prod-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;               /* ← stretches body to fill card */
  gap: 6px;
}
.prod-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text3);
}
.cat-pill {
  padding: 2px 8px;
  background: rgba(124,58,237,.12);
  color: var(--purple-l);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.prod-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stock badges */
.prod-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  width: fit-content;
}
.in-stock  { background: rgba(34,197,94,.1);  color: #22c55e; }
.low-stock { background: rgba(234,179,8,.1);  color: #eab308; }
.out-stock { background: rgba(244,63,94,.1);  color: var(--red); }

/* Price + Add button row */
.prod-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;      /* ← pushes to bottom of card */
  padding-top: 8px;
}
.prod-price {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  color: var(--purple-l);
}
.prod-compare {
  font-size: 12px;
  color: var(--text3);
  text-decoration: line-through;
}
.prod-discount {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  background: rgba(244,63,94,.1);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ★ THE ADD/BUY BUTTON ★ */
.prod-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--purple);
  color: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.prod-add:hover  { background: var(--purple-d); }
.prod-add:active { transform: scale(.96); }

/* List-view card overrides */
#prod-grid.list-view .prod-card  { flex-direction: row; height: auto; }
#prod-grid.list-view .prod-img   { width: 180px; height: 150px; flex-shrink: 0; }
#prod-grid.list-view .prod-img-clip img { object-fit: cover; }
#prod-grid.list-view .prod-title { -webkit-line-clamp: 1; }
#prod-grid.list-view .prod-body  { flex-direction: row; align-items: center; flex-wrap: wrap; }
#prod-grid.list-view .prod-foot  { margin-top: 0; padding-top: 0; }
/* ── Light mode fixes ── */
[data-theme=light] .cat-pill-item:hover{background:rgba(0,0,0,.05);color:var(--text)}
[data-theme=light] .cat-pill-item.active{background:rgba(109,40,217,.10);color:var(--violet)}
[data-theme=light] .filter-label{color:var(--text2)}
[data-theme=light] .prod-meta .cat-pill{color:var(--violet)}