.tcs-hier-cat,
.tcs-hier-cat__children { list-style: none; margin: 0; padding: 0; }

.tcs-hier-cat__node { margin: 6px 0; }

.tcs-hier-cat__children {
    margin-left: 14px;
    margin-top: 6px;
    padding-left: 10px;
    border-left: 1px solid rgba(0,0,0,.12);
}

.tcs-hier-cat__toggle {
    background: transparent;
    border: 0;
    padding: 0;
    margin-right: 6px;
    cursor: pointer;
    opacity: .85;
}

.tcs-hier-cat__toggle:hover { opacity: 1; }

.tcs-hier-cat__toggle[aria-expanded="true"] .tcs-hier-cat__chev {
    display: inline-block;
    transform: rotate(90deg);
}


.tcs-hier-cat, .tcs-hier-cat__children { list-style:none; margin:0; padding:0; }
.tcs-hier-cat__children { margin-left:14px; padding-left:10px; border-left:1px solid rgba(0,0,0,.12); }
.tcs-hier-cat__node { margin:6px 0; }
.tcs-hier-cat__toggle { background:transparent; border:0; padding:0; margin-right:6px; cursor:pointer; }
.tcs-hier-cat__toggle[aria-expanded="true"] .tcs-hier-cat__chev { display:inline-block; transform:rotate(90deg); }



/* Make the category toggle small + not affect label height */
.wc-block-product-filter-taxonomy .tcs-hier-cat__toggle{
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 6px 0 0;
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
}

/* Arrow glyph size */
.wc-block-product-filter-taxonomy .tcs-hier-cat__chev{
    display: inline-block;
    line-height: 1;
    transform-origin: 50% 50%;
}

/* Rotate when open */
.wc-block-product-filter-taxonomy .tcs-hier-cat__toggle[aria-expanded="true"] .tcs-hier-cat__chev{
    transform: rotate(90deg);
}

/* Prevent the label from becoming taller because of the toggle */
.wc-block-product-filter-taxonomy .wc-block-product-filter-checkbox-list__label{
    align-items: center;            /* helps if label is flex in your theme */
}

/* Optional: slightly tighter spacing overall */
.wc-block-product-filter-taxonomy .tcs-hier-cat__node{
    margin: 4px 0;
}



/* HARD reset: prevent theme button styles from affecting the toggle */
.wc-block-product-filter-taxonomy .tcs-hier-cat__toggle{
    all: unset;                 /* <-- nukes inherited button styles */
    display: inline-flex;
    width: 2px !important;
    height: 2px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    flex: 0 0 2px;             /* don't let it stretch in flex layouts */
}

/* Small arrow */
.wc-block-product-filter-taxonomy .tcs-hier-cat__chev{
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    transform-origin: 50% 50%;
    opacity: .85;
}

.wc-block-product-filter-taxonomy .tcs-hier-cat__toggle:hover .tcs-hier-cat__chev{
    opacity: 1;
}

.wc-block-product-filter-taxonomy .tcs-hier-cat__toggle[aria-expanded="true"] .tcs-hier-cat__chev{
    transform: rotate(90deg);
}

/* Optional: align checkbox + label nicely */
.wc-block-product-filter-taxonomy .wc-block-product-filter-checkbox-list__label{
    display: flex;
    align-items: center;
    gap: 0; /* we already add margin-right on toggle */
}

/* ---------- CATEGORY COLLAPSE TOGGLE (SMALL, RIGHT-ALIGNED) ---------- */

/* Make label a flex row */
.wc-block-product-filter-taxonomy
.wc-block-product-filter-checkbox-list__label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Push toggle to the right */
.wc-block-product-filter-taxonomy
.tcs-hier-cat__toggle {
    all: unset;                 /* FULL reset (kills brown pill) */
    order: 99;                  /* move after text */
    margin-left: auto;          /* push to right */
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 10px;
}

/* Arrow itself */
.wc-block-product-filter-taxonomy
.tcs-hier-cat__chev {
    font-size: 10px;
    line-height: 1;
    display: block;
    transform-origin: center;
    opacity: .7;
}

/* Rotate when open */
.wc-block-product-filter-taxonomy
.tcs-hier-cat__toggle[aria-expanded="true"] .tcs-hier-cat__chev {
    transform: rotate(90deg);
}

/* Hover feedback (subtle) */
.wc-block-product-filter-taxonomy
.tcs-hier-cat__toggle:hover .tcs-hier-cat__chev {
    opacity: 1;
}

/* Ensure checkbox + text stay together */
.wc-block-product-filter-taxonomy
.wc-block-product-filter-checkbox-list__input-wrapper {
    order: 0;
}

.wc-block-product-filter-taxonomy
.wc-block-product-filter-checkbox-list__text-wrapper {
    order: 1;
}


/* ---- Robust rotate (works whether aria-expanded is on the button OR the node) ---- */

/* If aria-expanded is on the button */
.wc-block-product-filter-taxonomy .tcs-hier-cat__toggle[aria-expanded="true"] .tcs-hier-cat__chev,
.wc-block-product-filter-taxonomy .tcs-hier-cat__toggle[aria-expanded="true"]{
    transform: rotate(90deg);
}

/* If aria-expanded is on the node (li/div wrapper) */
.wc-block-product-filter-taxonomy .tcs-hier-cat__node[aria-expanded="true"] .tcs-hier-cat__chev,
.wc-block-product-filter-taxonomy .tcs-hier-cat__node[aria-expanded="true"] .tcs-hier-cat__toggle{
    transform: rotate(90deg);
}

/* Ensure rotation is visible */
.wc-block-product-filter-taxonomy .tcs-hier-cat__chev{
    display: inline-block;          /* important for transforms */
    transform-origin: center;
}