:root {
  --sft-ease: cubic-bezier(.22, .61, .36, 1);
  --sft-rail-fade: 26px;
  --sft-tap: 44px;
  --wg-max: 1200px;
}

.wg-prail[data-sft="1"] .wg-prail-view {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  cursor: default;
  padding-block-end: 2px;
}
.wg-prail[data-sft="1"] .wg-prail-view::-webkit-scrollbar { height: 0; display: none }

.wg-prail[data-sft="1"] .wg-prail-track {
  transform: none !important;
  transition: none !important;
  will-change: auto;
}
.wg-prail[data-sft="1"] .wg-prail-cell {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.wg-prail[data-sft="1"] .wg-prail-view.is-drag {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.wg-prail[data-sft="1"] .wg-prail-view.is-drag a,
.wg-prail[data-sft="1"] .wg-prail-view.is-drag img { pointer-events: none }

@media (hover: hover) and (pointer: fine) {
  .wg-prail[data-sft="1"]:not(.is-static) .wg-prail-view { cursor: grab }
}

.wg-rail-btn {
  min-width: var(--sft-tap);
  min-height: var(--sft-tap);
  touch-action: manipulation;
  transition: background .18s var(--sft-ease), color .18s var(--sft-ease), opacity .18s;
}
.wg-rail-btn:disabled { opacity: .32; cursor: default }
.wg-prail.is-static .wg-rail-btn { display: none }

@media (hover: none) {
  .wg-prail[data-sft="1"] .wg-rail-btn { display: none }
}

.wg-prail[data-sft="1"] { position: relative }
.wg-prail[data-sft="1"]::before,
.wg-prail[data-sft="1"]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: var(--sft-rail-fade);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s linear;
  z-index: 2;
}
.wg-prail[data-sft="1"]::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--bg, #fff), transparent);
}
.wg-prail[data-sft="1"]::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--bg, #fff), transparent);
}
html[dir="rtl"] .wg-prail[data-sft="1"]::before { background: linear-gradient(to left, var(--bg, #fff), transparent) }
html[dir="rtl"] .wg-prail[data-sft="1"]::after { background: linear-gradient(to right, var(--bg, #fff), transparent) }
.wg-prail[data-sft="1"].can-start::before { opacity: .9 }
.wg-prail[data-sft="1"].can-end::after { opacity: .9 }

.wg-swipe-hint { transition: opacity .3s linear, max-height .3s linear; max-height: 40px }
.wg-swipe-hint.is-gone { opacity: 0; max-height: 0; pointer-events: none }

.wg-slider[data-sft="1"] .wg-slides {
  position: relative;
  inset: auto;
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wg-slider[data-sft="1"] .wg-slides::-webkit-scrollbar { height: 0; display: none }
.wg-slider[data-sft="1"] .wg-slide {
  position: relative;
  inset: auto;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  transition: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.wg-slider[data-sft="1"] .wg-dots { z-index: 3 }
.wg-slider[data-sft="1"] .wg-dots button { min-width: 22px; min-height: 22px; touch-action: manipulation }

.sft-scroller {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.sft-scroller::-webkit-scrollbar { height: 0; display: none }
.sft-scroller > * { scroll-snap-align: start }
.sft-scroller.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none }
.sft-scroller.is-drag > * { pointer-events: none }

.wg-tabs-bar.sft-scroller,
.acc-nav.sft-scroller,
nav.cats .wrap.sft-scroller { scroll-snap-type: none }

.pgallery.sft-scroller,
.qv-thumbs.sft-scroller,
.sfgal-thumbs.sft-scroller { scroll-padding-inline: 2px }

@media (hover: none) {
  .product,
  .sf-card { transition: box-shadow .18s var(--sft-ease), border-color .18s var(--sft-ease) }

  .product:hover,
  .sf-card:hover { transform: none !important; box-shadow: none }
  .product:hover .product-visual img { transform: none !important }

  .product:active { transform: scale(.985); transition: transform .1s linear }

  .product-quick { opacity: 1; transform: none }
}

.sfbtn,
.btn,
.product-quick,
.wg-page-btn,
.wg-page-dots button,
.wg-dots button,
.wg-rail-btn,
.qv-close { touch-action: manipulation; -webkit-tap-highlight-color: transparent }

@media (max-width: 700px) {
  .product-quick { width: 36px; height: 36px }
  .product-cta .sfbtn { min-height: var(--sft-tap) }
}

.pgrid,
.wg-prail,
.wg-paged-grid { touch-action: pan-y pinch-zoom }

@media (prefers-reduced-motion: reduce) {
  .wg-prail[data-sft="1"] .wg-prail-view,
  .wg-slider[data-sft="1"] .wg-slides,
  .sft-scroller { scroll-behavior: auto }
  .product:active { transform: none }
}

.sft-sheet { touch-action: pan-y }
.sft-sheet.is-drag { transition: none !important }
.qv-box.sft-sheet::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 99px;
  background: var(--line, #ddd);
  margin: 8px auto 0;
}
@media (min-width: 701px) { .qv-box.sft-sheet::before { display: none } }

.sf-stickybuy,
.sf-bottomnav,
.sf-mobilebar { padding-bottom: max(8px, env(safe-area-inset-bottom)) }

main.builder-page {
  max-width: var(--wg-max, 1200px);
  margin-inline: auto;
  padding: 0 clamp(12px, 3vw, 24px) 64px;
}
main.builder-page.is-wide { max-width: none; padding-inline: 0 }
main.builder-page > .wg:first-child,
.builder-page > .wg:first-child { padding-top: 0 }
main.builder-page > .wg:last-child { padding-bottom: 0 }

.builder-page .wg .box,
.builder-page .wg-show-panel,
.builder-page .wg-deal2-card,
.builder-page .wg-deal2-rail,
.builder-page .wg-quote,
.builder-page .wg-feature,
.builder-page .wg-stat,
.builder-page .wg-contact {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  border-radius: var(--sf-r, var(--radius, 16px));
}
.builder-page .wg-sub,
.builder-page .wg-pcol-n,
.builder-page .wg-rank-n { color: var(--muted) }

html[data-theme="dark"] .builder-page .wg-show-btn,
body[class*="theme-"] html[data-theme="dark"] .builder-page .wg-show-btn {
  background: var(--surface2, var(--surface));
  color: var(--ink);
}

body[class*="theme-"] main.builder-page { color: var(--ink) }

.builder-page .wg > .wrap,
.builder-page .wg-hero-in { max-width: 100% }