:root {
  --pc-shadow: none;
  --pc-shadow-soft: 0 2px 12px -4px color-mix(in oklch, var(--ink, #222), transparent 88%);
  --pc-shadow-deep: 0 16px 36px -18px color-mix(in oklch, var(--ink, #222), transparent 78%);
  --pc-shadow-lift: 0 18px 40px -22px color-mix(in oklch, var(--ink, #222), transparent 74%);

  --g2-gap: 16px;
  --g2-gap-m: 10px;
  --g2-cols: 4;
  --g2-ease: cubic-bezier(.25, .9, .25, 1);
}

@media (max-width: 700px) {

  section.wg .pgrid.wg-mrail {
    scroll-snap-type: x proximity;
  }

  section.wg .pgrid.wg-mrail:not(.wg-paged-grid) {
    display: flex;
    gap: var(--wg-gap, 10px);
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  section.wg .pgrid.wg-mrail > .product,
  section.wg .pgrid.wg-mrail > .wg-mcell {
    flex: 0 0 var(--pc-rail-w, clamp(150px, 46%, 230px));
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  section.wg .pgrid.wg-mrail.is-one > .product,
  section.wg .pgrid.wg-mrail.is-one > .wg-mcell {
    flex: 0 0 clamp(220px, 82%, 340px);
  }

  section.wg .pgrid.wg-mrail.is-swipe {
    scroll-snap-type: none;
  }

  .wg-products:has(.pc-railbar) .wg-swipe-hint,
  .wg-grid2:has(.pc-railbar) .wg-swipe-hint,
  .wg:has(.pc-railbar) .wg-mrail-hint { display: none }
}

@media (max-width: 700px) {
  section.wg .pgrid:not(.wg-mrail):not(.wg-paged-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    touch-action: auto;
  }
  section.wg .pgrid:not(.wg-mrail):not(.wg-paged-grid) > .product { flex: none }
}

.pcard.pcard { box-shadow: var(--pc-shadow) }
.pcard.pcard:hover { box-shadow: var(--pc-shadow-hover, var(--pc-shadow)) }

.pcard.pc-sh-none { --pc-shadow: none }
.pcard.pc-sh-soft { --pc-shadow: var(--pc-shadow-soft) }
.pcard.pc-sh-deep { --pc-shadow: var(--pc-shadow-deep) }

@media (hover: hover) and (pointer: fine) {
  .pcard.pc-hv-lift { --pc-shadow-hover: var(--pc-shadow-lift) }
  .pcard.pc-hv-glow { --pc-shadow-hover: 0 0 0 3px color-mix(in oklch, var(--green), transparent 86%) }
  .pcard.pc-hv-zoom { --pc-shadow-hover: var(--pc-shadow) }
  .pcard.pc-hv-none { --pc-shadow-hover: var(--pc-shadow) }
}
@media (hover: none) {
  .pcard.pcard:hover { box-shadow: var(--pc-shadow) }
}

.wg-sh-none .pcard.pcard,
.wg-sh-none .pcard.pcard:hover { box-shadow: none }
.wg-sh-soft .pcard.pcard { --pc-shadow: var(--pc-shadow-soft) }
.wg-sh-deep .pcard.pcard { --pc-shadow: var(--pc-shadow-deep) }

.wg-sh-none.wg,
.wg-sh-none .pgrid,
.wg-sh-none .g2-track { box-shadow: none }

.wg-sh-none .product,
.wg-sh-none .product:hover { box-shadow: none }

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

.wg-grid2 .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;
}

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

.wg-grid2 .g2.is-rail-all .g2-track {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--g2-gap, 16px);
  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-grid2 .g2.is-rail-all .g2-cell {
  flex: 0 0 var(--g2-w, calc((100% - var(--g2-gap)) / 2));
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .wg-grid2 .g2.is-rail-md .g2-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--g2-gap, 16px);
    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-grid2 .g2.is-rail-md .g2-cell {
    flex: 0 0 var(--g2-w, calc((100% - var(--g2-gap)) / 2));
    scroll-snap-align: start;
  }
}

.wg-grid2 .g2-track::-webkit-scrollbar { display: none; width: 0; height: 0 }

@media (hover: hover) and (pointer: fine) {
  .wg-grid2 .g2.is-rail .g2-track { cursor: grab }
  .wg-grid2 .g2.is-rail .g2-track.is-drag { cursor: grabbing }
}
.wg-grid2 .g2-track.is-drag a,
.wg-grid2 .g2-track.is-drag img,
.wg-grid2 .g2-track.is-drag button { pointer-events: none }

.wg-grid2 .g2-cell { min-width: 0; display: flex }
.wg-grid2 .g2-cell > .product { flex: 1; min-width: 0; height: 100% }

.wg-grid2 .g2.is-rail .product { transition: box-shadow .2s var(--g2-ease), border-color .2s }
.wg-grid2 .g2.is-rail .product:hover { transform: none }
.wg-grid2 .g2-track.is-drag .product { transition: none }

@media (max-width: 700px) {
  .wg-grid2 .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;
    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-grid2 .g2:not(.is-m-off) .g2-cell {
    flex: 0 0 var(--g2-w-m, calc((100% - var(--g2-gap-m)) / 2));
    scroll-snap-align: start;
  }
  .wg-grid2 .g2 .product { transition: none }

  .wg-grid2 .g2.is-m-off .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-grid2 .g2.is-m-off .g2-cell { flex: none }
}

.wg-grid2 .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-grid2 .g2:hover .g2-btn,
.wg-grid2 .g2-btn:focus-visible { opacity: 1; transform: translateY(-50%) scale(1) }
.wg-grid2 .g2-btn:hover { color: var(--green) }
.wg-grid2 .g2-btn[disabled] { opacity: 0; pointer-events: none }
.wg-grid2 .g2-btn.prev { inset-inline-end: -6px }
.wg-grid2 .g2-btn.next { inset-inline-start: -6px }
.wg-grid2 .g2-btn .sf-i { width: 18px; height: 18px }
.wg-grid2 .g2-btn.next .sf-i { transform: scaleX(-1) }
@media (max-width: 900px) { .wg-grid2 .g2-btn { display: none } }
@media (prefers-reduced-motion: reduce) { .wg-grid2 .g2-btn { transition: none } }

.wg-grid2 .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-grid2 .g2.is-rail .g2-bar { display: block }
.wg-grid2 .g2-bar.is-off { display: none }
.wg-grid2 .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);
}
@media (max-width: 700px) { .wg-grid2 .g2.is-rail .g2-bar { display: block } }

.wg-grid2 .sec-head { margin-bottom: 16px }

button,
[type="button"],
[type="submit"],
[type="reset"] { font-family: var(--font, Vazirmatn), system-ui, sans-serif }