/* Breaking Budz menu refinement:
   slightly softer Cypress-style background, brighter stationary orange text with frequent shimmer,
   and animated full-perimeter gleam around each menu item. */
#menu.menu-section {
  background-image: url("assets/breaking-budz-cypress-menu-faded.webp") !important;
  background-repeat: repeat;
  background-size: 625px 625px;
  background-position: center top;
}
@media (max-width:760px){
  #menu.menu-section{background-size: 440px 440px;}
}

/* Brighter solid orange base to match/lean closer to the top buttons. */
#menu .section-heading h1,
#menu .search-area label {
  position: relative;
  isolation: isolate;
  background: none !important;
  color: #ffb63d !important;
  -webkit-text-fill-color: #ffb63d !important;
  animation: none !important;
  filter: none !important;
  text-shadow: 0 2px 8px rgba(8,3,13,.95), 0 0 14px rgba(255,145,34,.82), 0 0 28px rgba(255,162,52,.34) !important;
}
#menu .section-heading h1 {
  font-weight: 950;
  letter-spacing: .11em;
}
#menu .search-area label {
  font-weight: 780;
  display: inline-block;
}

/* Faster shimmer highlight layered over fully visible text. */
#menu .section-heading h1::after,
#menu .search-area label::after {
  content: attr(data-sheen);
  position: absolute;
  inset: 0;
  display: block;
  white-space: normal;
  pointer-events: none;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  background-image: linear-gradient(105deg,
    transparent 0%, transparent 38%,
    rgba(255,237,163,.14) 42%,
    rgba(255,250,216,.82) 47%,
    #ffffff 50%,
    rgba(255,248,205,.92) 53%,
    rgba(255,225,133,.44) 56%,
    transparent 61%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 260% 100%;
  background-position: 135% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: bb-text-glint 3.15s linear infinite;
}
@keyframes bb-text-glint {
  0%, 18% { background-position: 135% 0; }
  48%, 100% { background-position: -130% 0; }
}

/* Rotate only the colors, NEVER the card or outline. CSS angle animation keeps the
   pseudo-element fixed against all four rounded edges (including corners). */
@property --bb-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.product-slot {
  position: relative;
  isolation: isolate;
}
.product-slot::before {
  /* The border ring is clipped to precisely the card's existing rounded shape. */
  inset: 0 !important;
  border-radius: inherit !important;
  border: 2px solid transparent !important;
  transform: none !important;
  transform-origin: center center !important;
  --bb-border-angle: 0deg;
  background: conic-gradient(from var(--bb-border-angle) at 50% 50%,
    #8f35dd 0deg,
    #d353ec 43deg,
    #37d8ff 90deg,
    #adff6a 157deg,
    #ff9b2c 211deg,
    #ffe6ac 216deg,
    #fffdf0 221deg,
    #ffd166 227deg,
    #ff813a 239deg,
    #f64bd4 289deg,
    #8f35dd 360deg) border-box !important;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box !important;
  mask-composite: exclude !important;
  opacity: 1 !important;
  filter: none !important;
  animation: bb-border-colour-lap 5.4s linear infinite !important;
}
.product-slot::after {
  /* Stationary soft halo; unlike the former implementation its outline cannot shift. */
  inset: 0 !important;
  transform: none !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 17px rgba(156,59,210,.12),
    0 0 0 1px rgba(199,78,243,.12),
    0 0 14px rgba(149,59,215,.12) !important;
  animation: bb-border-glow 3s ease-in-out infinite alternate !important;
  opacity: .92 !important;
}
.product-slot:nth-child(4n+2)::before,.product-slot:nth-child(4n+2)::after{animation-delay:-1.35s !important}
.product-slot:nth-child(4n+3)::before,.product-slot:nth-child(4n+3)::after{animation-delay:-2.7s !important}
.product-slot:nth-child(4n+4)::before,.product-slot:nth-child(4n+4)::after{animation-delay:-4.05s !important}
.product-slot:hover::before,.product-slot:hover::after { opacity: 1 !important; }
@keyframes bb-border-colour-lap {
  0% { --bb-border-angle: 0deg; }
  100% { --bb-border-angle: 360deg; }
}
@keyframes bb-border-glow {
  from {
    box-shadow:
      inset 0 0 22px rgba(151,55,198,.10),
      0 0 0 1px rgba(255,176,61,.10),
      0 0 12px rgba(255,143,42,.10),
      0 0 16px rgba(141,73,232,.10);
  }
  to {
    box-shadow:
      inset 0 0 30px rgba(151,55,198,.16),
      0 0 0 1px rgba(255,176,61,.18),
      0 0 19px rgba(255,143,42,.16),
      0 0 28px rgba(141,73,232,.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  #menu .section-heading h1::after,
  #menu .search-area label::after {animation: none !important; background-image:none !important;}
  #menu .product-slot::before,
  #menu .product-slot::after {animation: none !important;opacity:.95 !important;}
}