/* ======================================================================
   wa-woof — mobile options bar + reusable sort dropdown
   ====================================================================== */

/* ----- Bar base (hidden by default; enabled via dynamic @media below) */
.wa-woof { display: none; }
.wa-woof * { box-sizing: border-box; }

.wa-woofswitch {
    width: 100%;
    display: flex;
    border-top: 1px solid rgba(0,0,0,.15);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

.wa-woofswitch > .wa-woofopen,
.wa-woofswitch > .wa-woofsort {
    width: 50%;
    min-height: 45px;
    line-height: 1.3;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-woofopen {
    background: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    justify-content: flex-start;
    text-align: left;
    font: inherit;
    color: inherit;
}
.wa-woofopen::before {
    content: "";
    background: url('icons/filter.svg') center/contain no-repeat;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
/* When the bar is in the active/pressed state, make the icon white to match
   the label color applied by the theme's button styles. No transition so the
   icon flips instantly in sync with the text-color change. */
.wa-woofopen[aria-expanded="true"]::before {
    filter: brightness(0) invert(1);
}
/* The theme styles this real <button> with a dark "active" background + light
   text on hover/focus/active. We only want that dark look while the filter
   panel is open (aria-expanded="true") - the same signal that flips the icon.
   When the panel is closed the button can still hold focus right after a click,
   so the theme would keep the dark bg/light text while the icon flips back to
   dark, leaving the button half-styled. Neutralise the theme's interactive
   styles whenever the panel is NOT open so a closed button always looks normal. */
.wa-woofopen:not([aria-expanded="true"]),
.wa-woofopen:not([aria-expanded="true"]):hover,
.wa-woofopen:not([aria-expanded="true"]):focus,
.wa-woofopen:not([aria-expanded="true"]):focus-visible,
.wa-woofopen:not([aria-expanded="true"]):active {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.wa-woofsort {
    position: relative;
    justify-content: flex-end;
    text-align: right;
    cursor: pointer;
    user-select: none;
    padding-left: 20px;
}
.wa-woofsort::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    border-left: 1px solid rgba(0,0,0,.15);
}
.wa-woofsort::after {
    content: "";
    background: url('icons/arrow.svg') center/contain no-repeat;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    transition: transform .15s ease;
}
.wa-woofsort[aria-expanded="true"]::after { transform: rotate(180deg); }

.wa-woofsort__label {
    display: inline;
}

/* ----- Sort panel (shared by mobile bar and desktop replacement) */
.wa-woofsort__panel,
.wa-sort__panel {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    width: auto;
    box-sizing: border-box;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    border-radius: 4px;
    z-index: 100;
    text-align: left;
    line-height: 1.4;
}
.wa-woofsort__panel[hidden],
.wa-sort__panel[hidden] { display: none; }

.wa-woofsort__panel li,
.wa-sort__panel li {
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
}
.wa-woofsort__panel li:hover,
.wa-sort__panel li:hover {
    background: #f5f5f5;
}
.wa-woofsort__panel li[aria-selected="true"],
.wa-sort__panel li[aria-selected="true"] {
    background: #f5f5f5;
    font-weight: 600;
}

/* ----- Desktop sort replacement (.wa-sort) */
.wa-sort {
    position: relative;
    display: inline-block;
    min-width: 200px;
    cursor: pointer;
    user-select: none;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 4px;
    padding: 8px 36px 8px 12px;
    background: #fff;
    line-height: 1.4;
    color: inherit;
    box-shadow: none;
}
/* Suppress theme button styles on the role=button elements in every state */
.wa-sort,
.wa-sort:hover,
.wa-sort:focus,
.wa-sort:focus-visible,
.wa-sort:active,
.wa-sort[aria-expanded="true"] {
    background: #fff !important;
    background-color: #fff !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}
.wa-woofsort,
.wa-woofsort:hover,
.wa-woofsort:focus,
.wa-woofsort:focus-visible,
.wa-woofsort:active,
.wa-woofsort[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.wa-sort,
.wa-sort:hover,
.wa-sort:focus,
.wa-sort:focus-visible,
.wa-sort:active {
    -webkit-tap-highlight-color: transparent !important;
}
.wa-sort::after {
    content: "";
    position: absolute;
    right: 10px; top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    background: url('icons/arrow.svg') center/contain no-repeat;
    transition: transform .15s ease;
    pointer-events: none;
}
.wa-sort[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ----- Hide native orderby select when our custom dropdown is mounted */
body.wa-sort-mounted .woocommerce-ordering select.orderby { display: none !important; }