:root{
  --wh-bg:#fff;
  --wh-accent:#d71f1f;
  --wh-muted:#8a8a8a;
  --wh-soft:#faf0ef;
  --wh-border:#eee;
  --wh-radius:12px;
}

selector a {
    color: #CC0000 !important;
}

selector .active a{
    color: #fff !important
}

/* Container */
#wc-hierarchy-wrap { width:100%; box-sizing:border-box; }

/* Columns */
.wh-columns {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap:24px;
  align-items:start;
}

/* Panels */
.wh-column {
  padding:16px;
  box-shadow:0 6px 18px rgba(12,12,12,0.03);
  box-sizing:border-box;
}

/* Parents list */
#wh-parents-list,
.wh-parents-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.wh-parent {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease;
  font-weight:600;
  text-decoration:none;
}
.wh-parent:hover { transform:translateY(-3px); background:#fff6f6; }
.wh-parent.active,
.wh-parent.selected-mobile { background:var(--wh-accent); color:#fff; box-shadow:0 8px 18px rgba(215,31,31,0.12); }
.wh-parent .wh-parent-count { opacity:.9; font-weight:600; }

/* Children container */
#wh-children-container,
#wh-children-list { min-height:140px; }

/* Subcategory grid */
.wh-child-list {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
  margin:0;
  padding:0;
  align-items:start;
  list-style:none;
}

/* Subcategory item as card */
.wh-child-item {
  display:block;
  padding:12px;
  border-radius:10px;
  background:transparent;
  box-sizing:border-box;
  transition: background .12s ease, transform .12s ease;
  cursor:pointer;
}
.wh-child-item:hover { background:#fbfbfb; transform:translateY(-2px); }

/* Thumbnail */
.wh-child-thumb-wrap {
  width:100%;
  height:140px;
  border-radius:10px;
  overflow:hidden;
  display:block;
  background:#f5f5f5;
}
.wh-child-image {
  width:70%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* Meta */
.wh-child-meta { display:block; margin:0; }
.wh-child-name { display:block; font-weight:700; margin:6px 0 0 0; color:inherit; }

/* WooCommerce product grid injected inside container */
.wh-products-inner .products,
#wh-children-container .products {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:24px;
  align-items:start;
}

/* Product card */
.wh-products-inner .product,
#wh-children-container .product {
  background:var(--wh-bg);
  border:1px solid var(--wh-border);
  border-radius:12px;
  overflow:hidden;
  padding:16px;
  box-sizing:border-box;
  transition: transform .14s ease, box-shadow .14s ease;
}
.wh-products-inner .product:hover,
#wh-children-container .product:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(12,12,12,0.06);
}

/* Product image/title/price */
.wh-products-inner .product img,
#wh-children-container .product img { width:100%; height:auto; display:block; margin:0 0 12px; }
.wh-products-inner .product .woocommerce-loop-product__title,
#wh-children-container .product .woocommerce-loop-product__title {
  font-size:1.05rem;
  line-height:1.15;
  margin:0 0 8px;
  font-weight:700;
  color:#222;
}
.wh-products-inner .product .price,
#wh-children-container .product .price { font-weight:700; color:var(--wh-accent); }

/* Loading / placeholder */
.wh-loading, .wh-empty, .wh-no-products, .wh-error {
  padding:18px;
  color:var(--wh-muted);
  background:transparent;
}

/* Remove list markers / spacing */
#wh-children-list, #wh-children-list ul, #wh-children-list li,
#wh-children-container, #wh-children-container ul, #wh-children-container li {
  list-style:none;
  margin:0;
  padding:0;
}

.wh-parent-count , .single_add_to_cart_button, .onsale{
    display: none !important;
}

.wh-child-thumb-wrap {
    display: flex !important;
    justify-content: center !important;
}

/* Responsive */
@media (max-width:980px){
  .wh-products-inner .products,
  #wh-children-container .products { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /*.wh-columns { grid-template-columns:220px 1fr; gap:18px; }*/
  .wh-child-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width:720px){
  .wh-columns { display:block; }
  .wh-column { margin-bottom:14px; }
  #wh-parents-list { display:flex; gap:10px; flex-wrap:wrap; }
  .wh-parent { padding:10px; border-radius:10px; }
  .wh-products-inner .products,
  #wh-children-container .products { grid-template-columns:1fr; }
  .wh-child-thumb-wrap { width:100%; height:140px; border-radius:10px; }
  .wh-child-item { flex-direction:column; align-items:flex-start; }
  .wh-columns{
      display:flex !important;
      flex-direction:column !important;
  }
}

/* Two-column subcategory grid on small screens */
@media (max-width: 767px) {
  .wh-child-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .wh-child-item {
    padding: 10px;
    border-radius: 10px;
  }

  .wh-child-thumb-wrap {
    height: 110px;
  }

  .wh-child-name { font-size: 0.95rem; margin-top:8px; }
  
  .wh-column.wh-parents-col {
    width: 100%;
}
}


/* Minor polish */
.wh-parent .wh-parent-name { display:inline-block; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.wh-products-inner .product .button, #wh-children-container .product .button { width:100%; margin-top:10px; }

/* Ensure consistent box-sizing */
#wc-hierarchy-wrap * { box-sizing:border-box; }

/* mobile sticky show-all button */
.wchr-show-all-btn {
  display:block;
  width:100%;
  padding:10px 12px;
  margin-bottom:12px;
  border-radius:10px;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
  font-weight:700;
  cursor:pointer;
  position: -webkit-sticky;
  position: sticky;
  top: 8px;
  z-index: 60;
  text-align:center;
}

/* smaller visual on tiny screens */
@media (max-width:420px){
  .wchr-show-all-btn { padding:8px 10px; font-size:0.95rem; }
}

