/* LA BUSSOLA — CATEGORY NAVIGATION: TRICOLORE COLOUR TREATMENT
   Colour / background / active-state only. No layout, dimension,
   typography or behaviour changes. */

.lb-catnav {
  --lb-noir: 7, 6, 5;
  --lb-gold: 217, 163, 95;
  /* horizontal inset of the pill inside the sticky wrapper:
     mobile the wrapper is full-bleed with 1.25rem padding (-mx-5 px-5),
     >=640px the wrapper padding is 0 (sm:mx-0 sm:px-0) */
  --lb-inset: 1.25rem;
  /* Do NOT set `position` here: the wrapper carries Tailwind's
     `sticky top-[72px]`, which is already a positioned containing block. */
}

@media (min-width: 640px) {
  .lb-catnav { --lb-inset: 0px; }
}

/* ---- 3 - TRICOLORE BACKGROUND GLOW (inside the pill) ---- */
.lb-catnav .lb-catnav__scroller {
  background-image:
    /* 1 - vertical noir falloff: keeps the centre band dark behind the text */
    linear-gradient(180deg,
      rgba(var(--lb-noir), 0.55) 0%,
      rgba(var(--lb-noir), 0.10) 45%,
      rgba(var(--lb-noir), 0.55) 100%),
    /* 2 - verde -> avorio caldo -> rosso, read through the darkness */
    linear-gradient(90deg,
      rgba(0, 143, 70, 0.30) 0%,
      rgba(0, 143, 70, 0.22) 17%,
      rgba(120, 170, 135, 0.10) 30%,
      rgba(246, 226, 187, 0.09) 42%,
      rgba(248, 233, 200, 0.11) 50%,
      rgba(246, 226, 187, 0.09) 58%,
      rgba(206, 140, 118, 0.10) 70%,
      rgba(203, 33, 42, 0.22) 83%,
      rgba(203, 33, 42, 0.30) 100%);
}

/* ---- 2 - TRICOLORE BORDER RING ---- */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .lb-catnav::before {
    content: "";
    position: absolute;
    left: var(--lb-inset);
    right: var(--lb-inset);
    top: 0;
    bottom: 0;
    border-radius: 9999px;
    padding: 2px;
    background: linear-gradient(90deg,
      rgba(0, 143, 70, 0.97) 0%,
      rgba(0, 143, 70, 0.95) 24%,
      rgba(140, 186, 150, 0.78) 34%,
      rgba(246, 226, 187, 0.76) 43%,
      rgba(248, 233, 200, 0.82) 50%,
      rgba(246, 226, 187, 0.76) 57%,
      rgba(214, 138, 112, 0.78) 66%,
      rgba(203, 33, 42, 0.95) 76%,
      rgba(203, 33, 42, 0.97) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
  }
}

/* ---- 4 - ACTIVE CATEGORY: WARM IVORY ---- */
.lb-catnav .lb-catnav__scroller > button.bg-gradient-to-r {
  background-image: linear-gradient(180deg, #fdfaf4 0%, #fbf7ee 55%, #f2e8d6 100%) !important;
  color: #070605 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(7, 6, 5, 0.55),
    0 0 14px -4px rgba(251, 247, 238, 0.45) !important;
}
.lb-catnav .lb-catnav__scroller > button.bg-gradient-to-r > span:first-child {
  color: #9a6c2c;
  opacity: 1 !important;
}