.brand-home .brand-categories > a {
  cursor: pointer;
  transition: box-shadow .32s ease, transform .18s ease;
}

.brand-home .brand-categories > a::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(112deg, transparent 12%, #fff1 34%, #fff3 49%, #fff1 59%, transparent 82%),
    linear-gradient(145deg, #ffe0aa14, transparent 46%, #ffe0aa12);
  box-shadow: inset 0 0 0 1px #f5dcab80, inset 0 0 36px #f1d29b24;
  opacity: 0;
  transform: translateX(-12%);
  backdrop-filter: blur(1px) saturate(1.15);
  -webkit-backdrop-filter: blur(1px) saturate(1.15);
  z-index: 0;
  transition: opacity .32s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

.brand-home .brand-categories > a > div {
  position: relative;
  z-index: 1;
  transition: transform .32s ease;
}

.brand-home .brand-categories > a > span {
  z-index: 1;
  transition: background-color .28s ease, border-color .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.brand-home .brand-categories > a img {
  transition: filter .38s ease, transform .38s ease;
}

.brand-home .brand-categories > a:is(:hover, :focus-visible, :active) {
  box-shadow: inset 0 0 0 2px #e9c889, 0 0 22px #d5a45229;
}

.brand-home .brand-categories > a:is(:hover, :focus-visible, :active)::before {
  opacity: 1;
  transform: translateX(0);
}

.brand-home .brand-categories > a:is(:hover, :focus-visible, :active) img {
  filter: brightness(1.16) saturate(1.1);
}

.brand-home .brand-categories > a:is(:hover, :focus-visible, :active) > div {
  transform: translateY(-3px);
}

.brand-home .brand-categories > a:is(:hover, :focus-visible, :active) > span {
  background: #e9c889;
  border-color: #f3dba7;
  color: #17120b;
  box-shadow: 0 0 17px #e9c88955;
  transform: translateX(3px);
}

.brand-home .brand-categories > a:active {
  transform: scale(.99);
}

.brand-home .brand-categories > a:focus-visible {
  outline: 2px solid #f3dba7;
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-home .brand-categories > a,
  .brand-home .brand-categories > a::before,
  .brand-home .brand-categories > a > div,
  .brand-home .brand-categories > a > span,
  .brand-home .brand-categories > a img {
    transition: none;
  }
}