/* Illustrated family names are the visible labels; controls keep an aria-label. */
.family-choice { --family-art-size:120px; }
/* Retain the original paired artwork's square framing without a live SVG filter. */
.family-icon-static-pair{background-size:100% 100%;filter:none}
button.family-choice{-webkit-appearance:none;appearance:none}
.family-choice .family-icon {
  width:var(--family-art-size);
  height:var(--family-art-size);
  flex:none;
  margin:0;
  grid-row:auto;
  transform:translateY(var(--family-baseline,0%));
}
/* Optical alignment of the lettering already drawn into the original assets. */
.family-choice:is([data-icon-family="sandwichs"],[data-icon-family="gourmands"],[data-icon-family="paninis"],[data-icon-family="salades"]) { --family-baseline:12%; }
.family-choice[data-icon-family="smash"] { --family-baseline:5%; }
.family-choice[data-icon-family="enfants"] { --family-baseline:3%; }
.counter-sign.family-choice {
  flex:0 0 144px;
  min-height:148px;
  padding:12px 10px;
  gap:0;
  align-content:center;
}
.filter.family-choice {
  flex:0 0 132px;
  min-height:132px;
  padding:6px;
  justify-content:center;
  border-radius:32px 32px 5px 5px;
}
.filter-bar { align-items:stretch; }
.filter[data-filter="all"] { align-self:center; }
.lp-family.family-choice {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:flex-start;
  padding:20px 10px;
  gap:12px;
}
.lp-family.family-choice>span:not(.family-icon) {
  min-height:2.8em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lp-family.family-choice i { margin-top:auto; }
.family-choice:focus-visible { outline:3px solid var(--red);outline-offset:3px; }
/* Light at rest; black with white/red artwork when selected or mouse-hovered. */
.menu-page :is(.filter-bar,#counter-families) .family-choice,
.menu-page .filter-bar .filter[data-filter="all"] {
  background:var(--cream-100);
  color:var(--ink);
  border-color:var(--line);
}
.menu-page :is(.filter-bar,#counter-families) .family-choice .family-icon {
  background-image:var(--icon-light);
}
.menu-page :is(.filter-bar,#counter-families) .family-choice .family-icon-pair {
  background-position:left center;
  filter:url(#icon-clear-cream);
}
.menu-page :is(.filter-bar,#counter-families) :is(.family-choice,.filter[data-filter="all"])[aria-pressed="true"] {
  background:var(--ink);
  color:var(--cream-100);
  border-color:var(--red);
  box-shadow:inset 0 -4px var(--red);
}
.menu-page :is(.filter-bar,#counter-families) .family-choice[aria-pressed="true"] .family-icon {
  background-image:var(--icon-dark);
}
.menu-page :is(.filter-bar,#counter-families) .family-choice[aria-pressed="true"] .family-icon-pair {
  background-position:right center;
  filter:url(#icon-clear-charcoal);
}
/* Fine pointing devices only: touch selection must not leave a second hovered tile. */
@media(hover:hover) and (pointer:fine) {
  .menu-page :is(.filter-bar,#counter-families) :is(.family-choice,.filter[data-filter="all"]):hover {
    background:var(--ink);
    color:var(--cream-100);
    border-color:var(--red);
  }
  .menu-page :is(.filter-bar,#counter-families) .family-choice:hover .family-icon {
    background-image:var(--icon-dark);
  }
  .menu-page :is(.filter-bar,#counter-families) .family-choice:hover .family-icon-pair {
    background-position:right center;
    filter:url(#icon-clear-charcoal);
  }
}
/* Homepage family links: existing light/dark artwork, including paired sprites. */
#home-families .lp-family:is(:focus-visible,:active) {
  background:var(--ink);
  color:var(--cream-100);
  border-color:var(--red);
}
#home-families .lp-family:is(:focus-visible,:active)>span:not(.family-icon) { color:inherit; }
#home-families .lp-family:is(:focus-visible,:active) .family-icon { background-image:var(--icon-dark); }
#home-families .lp-family:is(:focus-visible,:active) .family-icon-pair {
  background-position:right center;
  filter:url(#icon-clear-charcoal);
}
@media(hover:hover) and (pointer:fine) {
  #home-families .lp-family:hover {
    background:var(--ink);
    color:var(--cream-100);
    border-color:var(--red);
  }
  #home-families .lp-family:hover>span:not(.family-icon) { color:inherit; }
  #home-families .lp-family:hover .family-icon { background-image:var(--icon-dark); }
  #home-families .lp-family:hover .family-icon-pair {
    background-position:right center;
    filter:url(#icon-clear-charcoal);
  }
}
@media(max-width:620px) {
  .family-choice { --family-art-size:104px; }
  .counter-sign.family-choice { flex-basis:124px;min-height:128px;padding:10px; }
  .filter.family-choice { flex-basis:116px;min-height:120px;padding:6px; }
  .lp-family.family-choice { padding:18px 8px;gap:10px; }
}