/* Grid */
.wccg-grid {
  display: grid;
  grid-template-columns: repeat(var(--wccg-cols,4), minmax(0, 1fr));
  gap: var(--wccg-gap, 16px);
}

/* Card */
.wccg-card {
  position: relative;
  display: block;
  border: 1px solid #ddd;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wccg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  border-color: #d6d6d6;
}

/* Thumb container */
.wccg-thumb{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--wccg-aspect, 4/3);
  overflow: hidden;
}

/* Background image layer that truly covers */
.wccg-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .35s ease;
}

/* Zoom on hover */
.wccg-card:hover .wccg-bg{ transform: scale(1.08); }


/* ✅ More visible zoom on hover */
.wccg-card:hover .wccg-thumb-img {
  transform: scale(1.08);
}

/* ✅ Clean black overlay only on hover */
.wccg-overlay {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity .35s ease;
}
.wccg-card:hover .wccg-overlay {
  opacity: 1;
}

/* Title */
.wccg-title {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #000;
  z-index: 2;
  transition: color .25s ease;
}
.wccg-card:hover .wccg-title {
  color: #fff;
}

.wccg-name { display: block; }

/* ✅ View More – only on hover */
.wccg-more {
  font-weight: 500;
  font-size: 12px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease;
}
.wccg-card:hover .wccg-more {
  opacity: 1;
  transform: translateY(0);
}

/* Optional product count */
.wccg-count {
  margin-left: 6px;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1200px) { .wccg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .wccg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .wccg-grid { grid-template-columns: 1fr; } }
/* --- Prevent next section from painting over the grid --- */
/* Keep hover effects inside the widget; don't sit above the next section */
.wccg-grid{
  position: relative;
  isolation: isolate;   /* creates its own stacking context */
  z-index: auto;        /* reset (remove any previous z-index) */
}

/* Normal stacking inside the grid */
.wccg-card{ position: relative; z-index: 0; }
.wccg-card:hover{ z-index: 1; }   /* only above sibling cards, not other sections */

/* Optional breathing room if the theme uses tight/negative margins */
.wccg-grid{ margin-bottom: 24px; } /* adjust or remove */
/* Nudge the next section down a bit (safe fix) */
.section-after-categories { margin-top: 24px; }

/* Or ensure it paints above its own background if needed */
.section-after-categories{ position: relative; z-index: auto; }

/* Make the widget act like a block inside a flex parent */
.elementor-widget-wccg_category_grid{
  flex: 0 0 100% !important;  /* take full row in a flex container */
  max-width: 100% !important;
  width: 100%;
  min-width: 0;               /* prevent overflow in flex context */
  align-self: stretch;        /* avoid vertical squish when align-items:center */
}

/* Ensure the internal grid computes width normally */
.elementor-widget-wccg_category_grid .wccg-grid{
  display: grid !important;   /* guard against inherited display:flex */
  width: 100%;
  min-width: 0;
}

/* Safety: allow children to shrink in flex environments */
.elementor-widget-wccg_category_grid .wccg-card,
.elementor-widget-wccg_category_grid .wccg-thumb{
  min-width: 0;
  min-height: 0;
}