/* =========================================================
   Gerbs — Allergen Marquee Strip  (homepage 14-allergen band)
   Pure CSS, GPU-accelerated, seamless right→left loop. No JS —
   the 14 items are rendered twice server-side (see
   inc/allergen-strip.php) so translateX(-50%) wraps perfectly.
   Depends on gerbs-tokens.css for all var(--gerbs-*, --ff-*,
   --fs-*, --radius-pill, --shadow-sm) custom properties.
   ---------------------------------------------------------
   Defaults (override inline on the root if you like):
     --as-duration : 40s    one full loop
     --as-icon     : 40px   icon height
     --as-gap      : 60px   space between items
     --as-fade     : 96px   edge-fade width
   ========================================================= */

.gerbs-allergens {
  --as-duration: 40s;
  --as-icon: 40px;
  --as-gap: 60px;
  --as-fade: 96px;
  --as-bg: var(--gerbs-blue);
  --as-fg: #ffffff;
  --as-chip-bg: transparent;
  --as-chip-fg: #ffffff;

  position: relative;
  width: 100%;
  background: var(--as-bg);
  color: var(--as-fg);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
}

/* ---- Header / title -------------------------------------- */
.gerbs-allergens__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px 0 max(28px, env(safe-area-inset-left));
  font-family: var(--ff-display, 'Bitter', serif);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.05vw + 0.55rem, 1.25rem);
  line-height: 1.12;
  color: var(--as-fg);
  z-index: 2;
  position: relative;
}
.gerbs-allergens__label b { color: inherit; white-space: nowrap; }
.gerbs-allergens__label .as-count {
  display: inline-flex;
  align-items: baseline;
  gap: .12em;
  font-size: 1.55em;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* thin divider between the anchored label and the moving track */
.gerbs-allergens__label::after {
  content: "";
  position: absolute;
  right: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: currentColor;
  opacity: .22;
}

/* ---- Viewport + track ----------------------------------- */
.gerbs-allergens__viewport {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: var(--as-mask, none);
  mask-image: var(--as-mask, none);
}

.gerbs-allergens__track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  padding-block: 18px;
  animation: gerbs-marquee var(--as-duration) linear infinite;
  will-change: transform;
}
/* pause when a pointer is over the bar (only where hover is real) */
@media (hover: hover) {
  .gerbs-allergens:hover .gerbs-allergens__track { animation-play-state: paused; }
}
.gerbs-allergens:focus-within .gerbs-allergens__track { animation-play-state: paused; }

@keyframes gerbs-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---- Items ---------------------------------------------- */
.gerbs-allergens__item {
  flex: 0 0 auto;
  margin-inline-end: var(--as-gap);          /* trailing gap on EVERY item → seamless -50% */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  background: var(--as-chip-bg);
  color: var(--as-chip-fg);
  border-radius: var(--radius-pill, 999px);
  transition: transform .25s ease;
}
.gerbs-allergens__item img {
  height: var(--as-icon);
  width: auto;
  display: block;
  -webkit-user-drag: none;
}
.gerbs-allergens__item span {
  font-family: var(--ff-body, 'Inter', sans-serif);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  line-height: 1.1;
}

/* =========================================================
   STYLE VARIANTS  (set via data-style on root)
   ========================================================= */
/* navy icons on blue is the brand-spec pairing; keep icons native navy. */

/* Blue band · bare icons (default) */
.gerbs-allergens[data-style="blue"] {
  --as-bg: var(--gerbs-blue);
  --as-fg: #ffffff;
  --as-chip-bg: transparent;
  --as-chip-fg: #ffffff;
}

/* Blue band · white chips */
.gerbs-allergens[data-style="bluechips"] {
  --as-bg: var(--gerbs-blue);
  --as-fg: #ffffff;
  --as-chip-bg: #ffffff;
  --as-chip-fg: var(--gerbs-ink, #1e1e1e);
}

/* Blue band · yellow chips */
.gerbs-allergens[data-style="yellowchips"] {
  --as-bg: var(--gerbs-blue);
  --as-fg: #ffffff;
  --as-chip-bg: var(--gerbs-yellow, #fecb00);
  --as-chip-fg: var(--gerbs-ink, #1e1e1e);
}

/* Light band · bare icons */
.gerbs-allergens[data-style="light"] {
  --as-bg: var(--gerbs-fog, #fafafa);
  --as-fg: var(--gerbs-ink, #1e1e1e);
  --as-chip-bg: transparent;
  --as-chip-fg: var(--gerbs-ink, #1e1e1e);
  border-block: 1px solid var(--gerbs-hairline, #ececec);
}

/* chip padding only when items actually have a chip background */
.gerbs-allergens[data-style="bluechips"] .gerbs-allergens__item,
.gerbs-allergens[data-style="yellowchips"] .gerbs-allergens__item {
  flex-direction: row;
  gap: 12px;
  padding: 12px 22px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12));
}
.gerbs-allergens[data-style="bluechips"] .gerbs-allergens__item span,
.gerbs-allergens[data-style="yellowchips"] .gerbs-allergens__item span {
  font-size: var(--fs-16, 1rem);
}
.gerbs-allergens[data-style="bluechips"] .gerbs-allergens__item img,
.gerbs-allergens[data-style="yellowchips"] .gerbs-allergens__item img {
  height: calc(var(--as-icon) * 0.82);
}

/* =========================================================
   ICON COLOR  (set via data-icons on root)
   Icons ship as navy #183A8F PNGs. "white" recolors them to
   pure white via a filter — legible knockout on the blue band.
   ========================================================= */
.gerbs-allergens[data-icons="white"] .gerbs-allergens__item img {
  filter: brightness(0) invert(1);
}
/* on the light band a white icon would vanish — keep navy there */
.gerbs-allergens[data-style="light"][data-icons="white"] .gerbs-allergens__item img {
  filter: none;
}

/* =========================================================
   CONTENT VARIANTS  (set via data-content on root)
   ========================================================= */
.gerbs-allergens[data-content="icon"] .gerbs-allergens__item span { display: none; }
.gerbs-allergens[data-content="icon"] { --as-gap: 52px; }
/* icon-only chips become circular */
.gerbs-allergens[data-content="icon"][data-style="bluechips"] .gerbs-allergens__item,
.gerbs-allergens[data-content="icon"][data-style="yellowchips"] .gerbs-allergens__item {
  padding: 16px;
  border-radius: 50%;
}

/* =========================================================
   HEADER VARIANTS  (set via data-header on root)
   ========================================================= */
.gerbs-allergens[data-header="none"] .gerbs-allergens__label { display: none; }

/* "above": stack the title over a full-width strip */
.gerbs-allergens[data-header="above"] {
  flex-direction: column;
  align-items: stretch;
}
.gerbs-allergens[data-header="above"] .gerbs-allergens__label {
  justify-content: center;
  padding: 16px 24px 2px;
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.5rem);
}
.gerbs-allergens[data-header="above"] .gerbs-allergens__label::after { display: none; }

/* =========================================================
   EDGE FADE  (set via data-fade on root)
   ========================================================= */
.gerbs-allergens[data-fade="on"] {
  --as-mask: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--as-fade),
    #000 calc(100% - var(--as-fade)),
    transparent 100%
  );
}
/* when the title is anchored at left (inline), only fade the right edge */
.gerbs-allergens[data-fade="on"][data-header="inline"] {
  --as-mask: linear-gradient(
    90deg,
    #000 0,
    #000 calc(100% - var(--as-fade)),
    transparent 100%
  );
}

/* =========================================================
   RESPONSIVE — auto-stack the inline title on narrow screens
   (an anchored left title would starve the track on phones)
   ========================================================= */
@media (max-width: 640px) {
  .gerbs-allergens[data-header="inline"] {
    flex-direction: column;
    align-items: stretch;
  }
  .gerbs-allergens[data-header="inline"] .gerbs-allergens__label {
    justify-content: center;
    padding: 14px 20px 0;
    line-height: 1.06;
  }
  .gerbs-allergens[data-header="inline"] .gerbs-allergens__label::after { display: none; }
  /* fade both edges again now that the title sits above */
  .gerbs-allergens[data-fade="on"][data-header="inline"] {
    --as-mask: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--as-fade),
      #000 calc(100% - var(--as-fade)),
      transparent 100%
    );
  }
  /* trim the edge fade + icon a touch so more fits on small phones */
  .gerbs-allergens { --as-fade: 40px; }
  .gerbs-allergens[data-content="label"] { --as-gap: 44px; }
}

/* =========================================================
   MOTION SAFETY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .gerbs-allergens__track { animation: none; }
  .gerbs-allergens__viewport {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gerbs-allergens__viewport::-webkit-scrollbar { display: none; }
  /* hide the duplicate copy so the static list reads once */
  .gerbs-allergens__track [data-dup] { display: none; }
}