.wg-products2 .g2 { position: relative; min-width: 0 }

.wg-products2 .g2-track {
  display: grid;
  grid-template-columns: repeat(var(--g2-cols, 4), minmax(0, 1fr));
  gap: var(--g2-gap, 16px);
  min-width: 0;
  align-items: stretch;
}
.wg-products2 .g2-cell { min-width: 0; display: flex }
.wg-products2 .g2-cell > .product { flex: 1; min-width: 0; height: 100% }
.wg-products2 .g2-track::-webkit-scrollbar { display: none; width: 0; height: 0 }

@media (max-width: 1240px) {
  .wg-products2 .g2-track { grid-template-columns: repeat(min(var(--g2-cols, 4), 4), minmax(0, 1fr)) }
}
@media (max-width: 1024px) {
  .wg-products2 .g2-track { grid-template-columns: repeat(min(var(--g2-cols, 4), 3), minmax(0, 1fr)) }
}

.wg-products2 .g2.is-rail-all .g2-track,
.wg-grid2 .g2.is-rail-all .g2-track {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
  scroll-padding-inline: 2px;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 10px;
  margin: -2px -2px 0;
}

@media (max-width: 1024px) {
  .wg-products2 .g2.is-rail-md .g2-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 10px;
    margin: -2px -2px 0;
  }
  .wg-products2 .g2.is-rail-md .g2-cell {
    flex: 0 0 var(--g2-w, calc((100% - var(--g2-gap, 16px)) / 3));
  }
}

@media (hover: hover) and (pointer: fine) {
  .wg-products2 .g2.is-rail .g2-track { cursor: grab }
  .wg-products2 .g2.is-rail .g2-track.is-drag { cursor: grabbing }
}
.wg-products2 .g2-track.is-drag a,
.wg-products2 .g2-track.is-drag img,
.wg-products2 .g2-track.is-drag button { pointer-events: none }
.wg-products2 .g2.is-rail .product:hover { transform: none }
.wg-products2 .g2-track.is-drag .product { transition: none }
.wg-products2 .sec-head { margin-bottom: 16px }

.wg-products2 .g2.is-rail-all .g2-cell,
.wg-grid2 .g2.is-rail-all .g2-cell {
  flex: 0 0 var(--g2-w-d, var(--g2-w, calc((100% - var(--g2-gap, 16px)) / 4)));
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .wg-products2 .g2.is-rail-all .g2-cell,
  .wg-grid2 .g2.is-rail-all .g2-cell {
    flex: 0 0 var(--g2-w, calc((100% - var(--g2-gap, 16px)) / 3));
  }
}

@media (max-width: 700px) {
  .wg-products2 .g2:not(.is-m-off) .g2-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--g2-gap-m, 10px);
    scroll-snap-type: none;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 10px;
    margin: -2px -2px 0;
  }
  .wg-products2 .g2:not(.is-m-off) .g2-cell {
    flex: 0 0 var(--g2-w-m, calc((100% - var(--g2-gap-m, 10px)) / 2));
    scroll-snap-align: start;
  }
  .wg-products2 .g2 .product { transition: none }

  .wg-products2 .g2.is-m-off:not(.is-slider) .g2-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--g2-gap-m, 10px);
    overflow: visible;
    touch-action: auto;
    padding: 0;
    margin: 0;
  }
  .wg-products2 .g2.is-m-off:not(.is-slider) .g2-cell { flex: none }

  .wg-products2 .g2.is-slider.is-m-off .g2-track,
  .wg-grid2 .g2.is-slider.is-m-off .g2-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: var(--g2-gap-m, 10px);
    touch-action: pan-x pan-y pinch-zoom;
    padding: 2px 2px 10px;
    margin: -2px -2px 0;
  }
  .wg-products2 .g2.is-slider.is-m-off .g2-cell,
  .wg-grid2 .g2.is-slider.is-m-off .g2-cell {
    flex: 0 0 var(--g2-w-m, calc((100% - var(--g2-gap-m, 10px)) / 2));
  }

  .wg-products2 .g2.is-rail-all .g2-track,
  .wg-grid2 .g2.is-rail-all .g2-track { gap: var(--g2-gap-m, 10px) }
  .wg-products2 .g2.is-rail-all .g2-cell,
  .wg-grid2 .g2.is-rail-all .g2-cell {
    flex: 0 0 var(--g2-w-m, calc((100% - var(--g2-gap-m, 10px)) / 2));
  }
}

.wg-products2 .g2-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sf-line, var(--line));
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--pc-shadow-soft);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(.92);
  transition: opacity .32s var(--g2-ease), transform .32s var(--g2-ease), color .2s;
}
.wg-products2 .g2:hover .g2-btn,
.wg-products2 .g2-btn:focus-visible { opacity: 1; transform: translateY(-50%) scale(1) }
.wg-products2 .g2-btn:hover { color: var(--green) }
.wg-products2 .g2-btn[disabled] { opacity: 0; pointer-events: none }
.wg-products2 .g2-btn.prev { inset-inline-end: -6px }
.wg-products2 .g2-btn.next { inset-inline-start: -6px }
.wg-products2 .g2-btn .sf-i { width: 18px; height: 18px }
.wg-products2 .g2-btn.next .sf-i { transform: scaleX(-1) }
@media (max-width: 900px) { .wg-products2 .g2-btn { display: none } }

.wg-products2 .g2.is-slider.is-rail .g2-btn,
.wg-grid2 .g2.is-slider.is-rail .g2-btn { opacity: .82; transform: translateY(-50%) scale(1) }
.wg-products2 .g2.is-slider.is-rail:hover .g2-btn,
.wg-grid2 .g2.is-slider.is-rail:hover .g2-btn,
.wg-products2 .g2.is-slider .g2-btn:focus-visible,
.wg-grid2 .g2.is-slider .g2-btn:focus-visible { opacity: 1 }
.wg-products2 .g2.is-slider .g2-btn[disabled],
.wg-grid2 .g2.is-slider .g2-btn[disabled] { opacity: 0 }

@media (max-width: 900px) and (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .wg-products2 .g2.is-slider .g2-btn,
  .wg-grid2 .g2.is-slider .g2-btn { display: grid }
}

.wg-products2 .g2-bar {
  height: 3px;
  border-radius: 99px;
  background: color-mix(in oklch, var(--ink, #222), transparent 90%);
  margin: 8px auto 0;
  width: min(120px, 40%);
  overflow: hidden;
  display: none;
}
.wg-products2 .g2.is-rail .g2-bar { display: block }
.wg-products2 .g2-bar.is-off { display: none }
.wg-products2 .g2-bar i {
  display: block;
  height: 100%;
  width: 34%;
  border-radius: 99px;
  background: var(--green);
  transform: translateX(0);
  transition: transform .16s linear, width .25s var(--g2-ease);
}
.wg-products2 .g2.is-slider.is-rail .g2-bar,
.wg-grid2 .g2.is-slider.is-rail .g2-bar { display: block }

.wg-products2 .g2.is-slider .g2-cell > .product,
.wg-grid2 .g2.is-slider .g2-cell > .product { height: 100% }

@media (prefers-reduced-motion: reduce) {
  .wg-products2 .g2-btn { transition: none }
}