/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 09 2026 | 17:28:47 */
/* ======================================================
   WC Subcategories (Shortcode: [wc_subcats])
   - Level 1: content-width packed items (flex wrap)
   - Default: show only 2 rows (via jQuery setting max-height)
   - Controls: View All / View Less at bottom
   ====================================================== */

.chini-wc-subcats-wrap{
  width: 100%;
  --chini-gap: 12px;      /* spacing between items */
  --chini-card-pad-y: 10px;
  --chini-card-pad-x: 12px;
}

/* ---------- Reset UL ---------- */
.chini-wc-subcats-wrap ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ======================================================
   LEVEL 1: “pack by content width”
   ====================================================== */
.chini-wc-subcats-wrap .chini-wc-subcat-level-1{
  display: flex;
  flex-wrap: wrap;
  gap: var(--chini-gap);
  align-items: flex-start;

  /* IMPORTANT for collapse (jQuery uses max-height) */
  overflow: hidden;
  transition: max-height .25s ease;
}

/* Each item uses content width (not 100%, not 1fr) */
.chini-wc-subcats-wrap .chini-wc-subcat-item-level-1{
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}

/* Parent “card” */
.chini-wc-subcats-wrap .chini-wc-subcat-item-level-1 > .chini-wc-subcats-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: var(--chini-card-pad-y) var(--chini-card-pad-x);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  background: #fff;

  text-decoration: none;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.chini-wc-subcats-wrap .chini-wc-subcat-item-level-1 > .chini-wc-subcats-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.18);
}

/* Thumb */
.chini-wc-subcats-wrap .chini-wc-subcats-thumb-wrap{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 10px;
}

.chini-wc-subcats-wrap .chini-wc-subcats-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text: keep on one line */
.chini-wc-subcats-wrap .chini-wc-subcats-name{
  font-weight: 650;
  white-space: nowrap;
  max-width: 42ch;   /* prevents extremely long names making super wide cards */
  overflow: hidden;
  text-overflow: ellipsis;
}

.chini-wc-subcats-wrap .chini-wc-subcats-count{
  opacity: 0.7;
  font-weight: 500;
  white-space: nowrap;
}

/* ======================================================
   LEVEL 2 (grandchildren) as chips under a parent item
   ====================================================== */
.chini-wc-subcats-wrap .chini-wc-subcat-level-2{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-left: 6px;
}

.chini-wc-subcats-wrap .chini-wc-subcat-item-level-2{
  flex: 0 0 auto;
}

.chini-wc-subcats-wrap .chini-wc-subcat-item-level-2 > .chini-wc-subcats-link{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  background: rgba(0,0,0,0.03);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.chini-wc-subcats-wrap .chini-wc-subcat-item-level-2 > .chini-wc-subcats-link:hover{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
}

/* ======================================================
   COLLAPSE/EXPAND states (jQuery toggles these classes)
   ====================================================== */
.chini-wc-subcats-wrap.is-expanded .chini-wc-subcat-level-1{
  max-height: none !important;
  overflow: visible;
}

/* Note:
   In collapsed mode, jQuery sets max-height inline (px),
   so we don't hardcode max-height in CSS.
*/

/* ======================================================
   Controls: View All / View Less
   (your PHP markup already includes these)
   ====================================================== */
.chini-wc-subcats-wrap .chini-wc-subcats-controls{
  margin-top: 14px;
  display: flex;
}

.chini-wc-subcats-wrap .chini-wc-subcats-viewall-wrap,
.chini-wc-subcats-wrap .chini-wc-subcats-viewless-wrap{
  text-align: center;
}

.chini-wc-subcats-wrap .chini-wc-subcats-viewall,
.chini-wc-subcats-wrap .chini-wc-subcats-viewless{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
  line-height: 1;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.chini-wc-subcats-wrap .chini-wc-subcats-viewall:hover,
.chini-wc-subcats-wrap .chini-wc-subcats-viewless:hover{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.22);
  transform: translateY(-1px);
}

/* Mobile tuning */
@media (max-width: 575px){
  .chini-wc-subcats-wrap{
    --chini-gap: 10px;
    --chini-card-pad-y: 9px;
    --chini-card-pad-x: 10px;
  }

  .chini-wc-subcats-wrap .chini-wc-subcats-name{
    max-width: 28ch;
  }
}