/* Header icons — prevent any rotation/flip/scale on click or active state.
   The user reported the search/account/cart icons "flipping" when clicked.
   These rules force the icon SVGs to stay in their natural orientation
   regardless of button :active, [aria-expanded="true"], or .is-active state. */

.header-icon-search,
.header-icon-account,
.header-icon-minicart,
#menu-search-icon,
#menu-cart-icon,
#customer-menu,
.header-icon-search svg,
.header-icon-account svg,
.header-icon-minicart svg,
#menu-search-icon svg,
#menu-cart-icon svg,
#customer-menu svg {
    transform: none !important;
    rotate: none !important;
    scale: none !important;
}

/* Override any Tailwind active:rotate / active:scale that might apply */
.header-icon-search:active,
.header-icon-search:active svg,
.header-icon-search[aria-expanded="true"] svg,
.header-icon-account:active,
.header-icon-account:active svg,
.header-icon-account[aria-expanded="true"] svg,
.header-icon-minicart:active,
.header-icon-minicart:active svg,
.header-icon-minicart[aria-expanded="true"] svg,
#menu-search-icon:active,
#menu-search-icon[aria-expanded="true"] svg,
#customer-menu:active,
#customer-menu[aria-expanded="true"] svg,
#menu-cart-icon:active,
#menu-cart-icon[aria-expanded="true"] svg {
    transform: none !important;
    rotate: 0 !important;
    scale: 1 !important;
    -webkit-transform: none !important;
}

/* And ensure no transitions on transform — if any framework toggles a
   transform via JS, this kills the animation outright. */
.header-icon-search,
.header-icon-account,
.header-icon-minicart,
#menu-search-icon,
#customer-menu,
#menu-cart-icon {
    transition-property: color, background-color, border-color, outline-color !important;
}