.e2d-gf{ position:relative; --gf-gap:6px }

.e2d-gf__row{
  display:flex; flex-wrap:nowrap; align-items:stretch;
  gap:var(--gf-gap);
  overflow-x:auto; overflow-y:visible;

  justify-content:flex-start;
  justify-content:safe center;
  scrollbar-width:none;
  scroll-padding-left:40px; scroll-padding-right:40px;
  padding:0 34px;
  cursor:grab;
}
.e2d-gf__row::-webkit-scrollbar{ display:none }
.e2d-gf__row.is-grabbed{ cursor:grabbing }
.e2d-gf__row.is-grabbed .e2d-gf__tile{ pointer-events:none }

.e2d-gf__tile{
  position:relative; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:9px; border:0; background:transparent; cursor:pointer;
  color:#242424; font-size:15px; font-weight:500; line-height:1.2;
  transition:transform .18s cubic-bezier(.22,.61,.36,1), color .16s ease-out;
}

.e2d-gf__img{
  position:relative; z-index:1;
  display:block; width:40px; height:40px; object-fit:contain;
}
.e2d-gf__img--drawn{ background-size:contain; background-repeat:no-repeat; background-position:center }
.e2d-gf__text{ position:relative; z-index:1; white-space:nowrap }

.e2d-gf__row--parent{ padding-top:8px }
.e2d-gf__row--parent .e2d-gf__tile{ padding:20px 18px 18px }

.e2d-gf__row--parent .e2d-gf__tile::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:7px; left:3px; right:3px; bottom:5px;
  opacity:0; transform:rotate(-1.1deg);
  transition:opacity .2s ease-out, box-shadow .2s ease-out;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3.6 5.4C26 3.6 54 4.8 96.4 4.0C97.6 32 96.6 66 96.0 95.6C70 97.4 38 96.2 3.9 95.9C2.4 66 3.0 33 3.6 5.4Z' fill='%23FFFFFF' stroke='%23FF6A00' stroke-width='1.6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.e2d-gf__row--parent .e2d-gf__tile:hover::before{ opacity:.45 }
.e2d-gf__row--parent .e2d-gf__tile.is-picked::before{
  opacity:1;
  box-shadow:2px 4px 9px -3px rgba(61,86,27,.26), 1px 2px 3px -1px rgba(61,86,27,.20);
}

.e2d-gf__row--parent .e2d-gf__tile::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  top:-1px; left:50%; margin-left:-8px; width:16px; height:19px;
  opacity:0; transition:opacity .2s ease-out;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cg stroke='%23242424' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M13.4 4.6c4.1-.7 8.4-.8 12.6-.2l-1.8 11.9c3.7 2.1 6.2 5.6 6.6 9.5.1 1-.7 1.8-1.7 1.8H10.5c-1 0-1.8-.9-1.6-1.9.5-3.8 3-7.2 6.6-9.2L13.4 4.6z' fill='%23FF6A00' fill-opacity='.92' stroke-width='2.1'/%3E%3Cpath d='M19.6 27.8c.5 4.7.9 9.5 1.1 14.3' stroke-width='2.1'/%3E%3C/g%3E%3C/svg%3E") center/16px 19px no-repeat;
}
.e2d-gf__row--parent .e2d-gf__tile.is-picked::after{ opacity:1 }
.e2d-gf__row--parent .e2d-gf__tile.is-picked{ transform:translateY(-2px); color:#FF6A00; font-weight:700 }
.e2d-gf__row--parent .e2d-gf__tile:not(.is-picked):hover{ transform:translateY(-1px); color:#FF6A00 }

.e2d-gf__body{ --pal-body-h:1700px }

.e2d-gf.is-fetching .e2d-gf__grid{ opacity:.5; transition:opacity .15s ease-out }

.e2d-gf__btn{
  position:absolute; z-index:9;
  width:40px; height:40px; padding:0; border:0; border-radius:50%;
  background-color:#FFFFFF; background-repeat:no-repeat;
  background-position:center; background-size:40px 40px;
  box-shadow:2px 3px 8px -2px rgba(61,86,27,.26); cursor:pointer;
  transition:transform .16s ease-out, box-shadow .16s ease-out, opacity .16s ease-out;
}
.e2d-gf__btn--left{ left:-4px }
.e2d-gf__btn--right{ right:-4px }
@media (min-width:768px){ #brx-content:has(.e2d-gf){ overflow-x:clip } }
.e2d-gf__btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:3px 5px 11px -3px rgba(61,86,27,.32) }
.e2d-gf__btn:active:not(:disabled){ transform:translateY(0) scale(.96) }

.e2d-gf__btn:disabled{ opacity:.34; cursor:default; box-shadow:none }

@media(max-width:767px){

  .e2d-gf{ --gf-gap:6px; margin-top:20px }
  .e2d-gf__row{ padding:0 26px }

  .e2d-gf__row--parent{ padding-top:8px; padding-bottom:4px }
  .e2d-gf__row--parent .e2d-gf__tile{
    flex-direction:row; align-items:center; gap:7px;
    padding:10px 13px; font-size:14px;
  }
  .e2d-gf__row--parent .e2d-gf__img{ width:26px; height:26px }

  .e2d-gf__row--parent .e2d-gf__tile::before{ top:2px; left:1px; right:1px; bottom:2px }

  .e2d-gf__row--parent .e2d-gf__tile::after{
    top:-7px; margin-left:-6px; width:12px; height:14px; background-size:12px 14px;
  }

  .e2d-gf .e2d-pin-board__nav{ margin-top:18px; margin-bottom:20px }

  .e2d-gf__btn{ width:28px; height:28px; background-size:28px 28px }
  .e2d-gf__btn--left{ left:-2px }
  .e2d-gf__btn--right{ right:-2px }

  .e2d-gf__body{ --pal-body-h:470px }
}

@media(max-width:379px){
  .e2d-gf__row--parent .e2d-gf__tile{ font-size:13px; padding:8px 10px }
  .e2d-gf__row--parent .e2d-gf__img{ width:22px; height:22px }
}
@media(prefers-reduced-motion:reduce){
  .e2d-gf__tile, .e2d-gf__btn{ transition:none }
}