/* === Side Toggle — final minimal patch === */
/* Load this AFTER any previous side-toggle patches. */
/* Goal: only change the circle color on hover; keep icon size/aspect untouched. */

:root { --action: #FF6A3A; } /* fallback to your brand orange */

/* Circle button: do NOT impose fixed width/height; just center content */
.header-area-2 .header__navicon .side-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color .25s ease;
  line-height: 1;
  /* no width/height here on purpose */
}

/* Hover: orange circle */
.header-area-2 .header__navicon .side-toggle:hover {
  background-color: var(--action);
}

/* Icon: let intrinsic size win; prevent distortion */
.header-area-2 .header__navicon .side-toggle img,
.header-area-2 .header__navicon .side-toggle i {
  width: auto;      /* no forced width */
  height: auto;     /* no forced height */
  max-height: 18px; /* gentle upper bound only; adjust 16–20px as you like */
  object-fit: contain;
  transform: none;
  filter: none;
}