/* WPCWPF – Woo Product Showcase (Categories + Grid) */
.wpcwpf-wrap{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.wpcwpf-sidebar{
  flex:0 0 20%;
  max-width:20%;
}
.wpcwpf-content{
  flex:1 1 80%;
  max-width:80%;
}
.wpcwpf-side-heading{
  margin:0 0 12px;
  font-size:18px;
  font-weight:600 !important;
  text-transform: uppercase;
}
.wpcwpf-cat-list{
  list-style:none;
  margin:0;
  padding:0;
}
.wpcwpf-cat-item{ margin:0 0 8px;  list-style-type: none;}
.wpcwpf-cat-item a{
  display:block;
  padding:10px 12px;
  border-radius:0px;
  text-decoration:none; line-height: 2.7em !important;
  border:1px solid #eeeeee00;
  color:inherit; font-weight: 300 !important;
  transition:background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wpcwpf-cat-item.is-active a{
 /* background:#f5f5f5;
  border-color:#e5e5e5;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.03);
  font-weight:600;*/
  border-left: 4px solid #db0031;
  font-weight:700 !important;
}



/* Product grid */
.wpcwpf-grid{
  display:grid;
  gap:16px;
}
.wpcwpf-cols-1{ grid-template-columns:repeat(1, minmax(0,1fr)); }
.wpcwpf-cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.wpcwpf-cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.wpcwpf-cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.wpcwpf-cols-5{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.wpcwpf-cols-6{ grid-template-columns:repeat(6, minmax(0,1fr)); }

.wpcwpf-card{
  display:block;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.wpcwpf-card:hover{
  transform:translateY(-2px);
  background:#f7f7f7; /* subtle gray on hover */
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.wpcwpf-thumb{
  aspect-ratio:4/3;
  overflow:hidden;
}
.wpcwpf-thumb img{
}
.wpcwpf-card:hover .wpcwpf-thumb img{
  transform:scale(1.05); /* slight zoom on hover */
}
.wpcwpf-card-body{
  padding:10px 12px;
}
.wpcwpf-title{
  font-size:14px;
  margin:0 0 0px;
  line-height:1.35; color: black;
    font-weight: 300;
}
.wpcwpf-meta{
  font-size:10px;
  color:#777;
}

.wpcwpf-empty{
  color:#666;
  font-size:14px;
}

/* Desktop responsiveness / graceful degradation */
@media (max-width: 1280px){
  .wpcwpf-cols-6{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width: 1200px){
  .wpcwpf-cols-4{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 992px){
  .wpcwpf-wrap{ flex-direction:column; }
  .wpcwpf-sidebar, .wpcwpf-content{ max-width:100%; flex:1 1 100%; }
  .wpcwpf-cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .wpcwpf-cols-4{ grid-template-columns:repeat(1, minmax(0,1fr)); }
}


.wpcwpf-wrap{display:flex;gap:24px}
.wpcwpf-content{/*flex:1 1 70%;*/}
.wpcwpf-cat-list{list-style:none;padding:0 !important;margin:0}
.wpcwpf-cat-item a{/*display:block;padding:8px;border:1px solid #eee;border-radius:8px;text-decoration:none;color:#333;*/}
.wpcwpf-cat-item.is-active a{/*background:#f5f5f5;font-weight:600;*/}
.wpcwpf-grid{display:grid;gap:16px}
.wpcwpf-cols-4{grid-template-columns:repeat(4,1fr)}
.wpcwpf-card{border:1px solid #eee;border-radius:8px;overflow:hidden;background:#ebebebb8;transition:.2s}
.wpcwpf-thumb img{width:78%; /*height:auto;*/ transition:.2s;object-fit:cover;
  transition:}
.wpcwpf-card:hover .wpcwpf-thumb img{transform:scale(1.05)}
.wpcwpf-card-body{padding:8px}
.wpcwpf-current-cat{font-size:18px;font-weight:700;margin-bottom:12px;color: #db0031;margin-top: -10px; text-transform: uppercase;}
.wpcwpf-grid-wrap.wpcwpf-scrollable{max-height:70vh;overflow:auto;scroll-behavior:smooth}

/* Active tab via aria-selected as well */
.wpcwpf-cat-item[aria-selected="true"] a{
 /* background:#f5f5f5;
  border-color:#e5e5e5;
  font-weight:600;*/
}

/* Loading overlay for the grid area */
.wpcwpf-grid-wrap.wpcwpf-loading{
  position:relative;
}
.wpcwpf-grid-wrap.wpcwpf-loading::after{
  content:"Loading…";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.6);
  font-weight:600;
  z-index:2;
}