header.sticky {
  --bino-ink: #202833;
  --bino-muted: #64707a;
  --bino-orange: #f47a20;
  --bino-orange-soft: #fff2e6;
  --bino-teal: #11796f;
  --bino-teal-soft: #e8f5f2;

  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 244, 0.9)) !important;
  border-bottom: 1px solid rgba(244, 122, 32, 0.18) !important;
  box-shadow: 0 14px 34px rgba(32, 40, 51, 0.08);
  backdrop-filter: blur(18px) saturate(140%);
}

header.sticky::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--bino-orange), #ffb45f 48%, var(--bino-teal));
  pointer-events: none;
  z-index: 0;
}

header.sticky::after {
  content: "";
  position: absolute;
  inset: 3px 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.26;
  background-image:
    url("data:image/svg+xml,%3Csvg width='78' height='56' viewBox='0 0 78 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f47a20' fill-opacity='.34'%3E%3Cellipse cx='32' cy='33' rx='8' ry='6' transform='rotate(-10 32 33)'/%3E%3Cellipse cx='22' cy='23' rx='4' ry='5' transform='rotate(-22 22 23)'/%3E%3Cellipse cx='31' cy='18' rx='4' ry='5' transform='rotate(-8 31 18)'/%3E%3Cellipse cx='41' cy='20' rx='4' ry='5' transform='rotate(14 41 20)'/%3E%3Cellipse cx='48' cy='28' rx='4' ry='5' transform='rotate(25 48 28)'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='96' height='58' viewBox='0 0 96 58' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2311796f' stroke-opacity='.28' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M31 31h34'/%3E%3Cpath d='M30 21c-6-5-14 1-11 8-8-1-11 9-3 13 6 3 11-2 10-8'/%3E%3Cpath d='M66 21c6-5 14 1 11 8 8-1 11 9 3 13-6 3-11-2-10-8'/%3E%3C/g%3E%3C/svg%3E");
  background-position:
    6% 12%,
    78% 58%;
  background-repeat: repeat;
  background-size:
    156px 112px,
    192px 116px;
  animation: bino-header-pattern-drift 18s linear infinite;
}

header.sticky > div {
  position: relative;
  z-index: 1;
}

header.sticky img[alt="Bino Moda Pet"] {
  background: #fff;
  border: 1px solid rgba(244, 122, 32, 0.22);
  box-shadow: 0 10px 24px rgba(244, 122, 32, 0.14);
}

header.sticky h1,
header.sticky span.truncate {
  color: var(--bino-orange) !important;
  background: linear-gradient(135deg, #e95f12 0%, var(--bino-orange) 42%, var(--bino-teal) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 800 !important;
  text-shadow: 0 8px 18px rgba(244, 122, 32, 0.16);
  -webkit-text-fill-color: transparent;
}

header.sticky p {
  color: var(--bino-teal) !important;
  font-weight: 700 !important;
}

header.sticky [data-category-menu] > button,
header.sticky button[aria-label="Abrir carrinho"],
header.sticky button[aria-label="Carrinho"],
header.sticky button[aria-label="Login"],
header.sticky button[aria-label="Sair"],
header.sticky button[title="Login"],
header.sticky button[title="Sair"] {
  border: 1px solid rgba(17, 121, 111, 0.18) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffffff, var(--bino-teal-soft)) !important;
  color: var(--bino-ink) !important;
  box-shadow: 0 8px 18px rgba(17, 121, 111, 0.1);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease !important;
}

header.sticky [data-category-menu] > button:hover,
header.sticky button[aria-label="Abrir carrinho"]:hover,
header.sticky button[aria-label="Carrinho"]:hover,
header.sticky button[aria-label="Login"]:hover,
header.sticky button[aria-label="Sair"]:hover,
header.sticky button[title="Login"]:hover,
header.sticky button[title="Sair"]:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--bino-teal), #1aa896) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(17, 121, 111, 0.22);
}

header.sticky nav > div {
  border: 1px solid rgba(244, 122, 32, 0.22) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(244, 122, 32, 0.12) !important;
}

header.sticky nav a {
  color: #153a36 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

header.sticky nav a:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, var(--bino-orange), #ffae57) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(244, 122, 32, 0.24) !important;
}

header.sticky form .relative {
  min-width: 0;
}

header.sticky input[type="search"] {
  height: 42px !important;
  border: 1px solid rgba(32, 40, 51, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--bino-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 20px rgba(32, 40, 51, 0.06) !important;
}

header.sticky input[type="search"]:focus {
  border-color: rgba(244, 122, 32, 0.48) !important;
  box-shadow:
    0 0 0 3px rgba(244, 122, 32, 0.14),
    0 12px 24px rgba(32, 40, 51, 0.08) !important;
}

header.sticky form svg {
  color: var(--bino-teal) !important;
}

header.sticky button[aria-label="Abrir carrinho"] span,
header.sticky button[aria-label="Carrinho"] span {
  background: var(--bino-orange) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(244, 122, 32, 0.3) !important;
}

header.sticky [data-category-menu] div[class*="absolute"][class*="top-full"] {
  border: 1px solid rgba(244, 122, 32, 0.18) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 40px rgba(32, 40, 51, 0.14) !important;
}

header.sticky [data-category-menu] div[class*="absolute"][class*="top-full"] a:hover {
  background: linear-gradient(135deg, var(--bino-orange-soft), var(--bino-teal-soft)) !important;
  color: var(--bino-ink) !important;
}

@media (min-width: 1024px) {
  header.sticky img[alt="Bino Moda Pet"] {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 1023px) {
  header.sticky {
    background: rgba(255, 255, 255, 0.96) !important;
  }

  header.sticky > div {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  header.sticky [data-category-menu] > button,
  header.sticky button[aria-label="Carrinho"],
  header.sticky button[aria-label="Login"],
  header.sticky button[aria-label="Sair"] {
    width: 38px !important;
    height: 38px !important;
  }

  header.sticky input[type="search"] {
    height: 40px !important;
    font-size: 0.875rem !important;
  }
}

@keyframes bino-header-pattern-drift {
  0% {
    background-position:
      6% 12%,
      78% 58%;
  }

  50% {
    background-position:
      11% 18%,
      72% 48%;
  }

  100% {
    background-position:
      6% 12%,
      78% 58%;
  }
}

@media (prefers-reduced-motion: reduce) {
  header.sticky::after {
    animation: none;
  }
}