/* PGCO Sale — سکشن فروش ویژه + نوار بالای هدر
   توکن‌ها از دیزاین سیستم PGCO؛ اگر قالب متغیرهای --pgco-* را تعریف کرده باشد همان‌ها استفاده می‌شوند. */

.pgs, .pgs-bar {
    --pgs-primary: var(--pgco-primary, #d71a20);
    --pgs-primary-dark: var(--pgco-shade-3, #971216);
    --pgs-white: #fff;
    --pgs-black: var(--pgco-black, #1f1f1f);
    --pgs-gray-01: var(--pgco-gray-01, #f3f3f3);
    --pgs-gray-02: var(--pgco-gray-02, #ececec);
    --pgs-gray-08: var(--pgco-gray-08, #808080);
    --pgs-gray-09: var(--pgco-gray-09, #404040);
    --pgs-gap: 24px;
    --pgs-container: var(--pgco-container, 1224px); /* عرض کانتینر سایت؛ برای هماهنگی با قالب در CSS سفارشی تغییر دهید */
    font-family: inherit;
    color: var(--pgs-black);
    box-sizing: border-box;
}
.pgs *, .pgs *::before, .pgs *::after,
.pgs-bar *, .pgs-bar *::before, .pgs-bar *::after { box-sizing: border-box; }
.pgs p, .pgs h2, .pgs h3, .pgs ul, .pgs-bar p { margin: 0; padding: 0; }
.pgs ul { list-style: none; }
[hidden].pgs, [hidden].pgs-bar { display: none !important; }

/* ───────── سکشن ───────── */
.pgs {
    position: relative;
    overflow: hidden;
    padding: 40px 0 16px;
    background: var(--pgs-bg, none) center / cover no-repeat, var(--pgs-gray-02);
    isolation: isolate;
}
.pgs-decor { position: absolute; z-index: -1; max-width: none; height: auto; pointer-events: none; user-select: none; }
.pgs__inner { position: relative; width: 100%; max-width: var(--pgs-container); margin-inline: auto; padding-inline: 16px; }
.pgs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.pgs__title { font-size: 28px; line-height: 1.5; font-weight: 800; color: var(--pgs-black); }
.pgs__subtitle { font-size: 14px; line-height: 24px; font-weight: 400; margin-top: 4px; }

/* ───────── تایمر ───────── */
.pgs-timer { display: flex; align-items: center; gap: 4px; direction: rtl; }
.pgs-timer__cells { display: flex; gap: 4px; direction: ltr; } /* چپ‌به‌راست: روز، ساعت، دقیقه، ثانیه */
.pgs-cell {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 48px; height: 48px; gap: 2px; border-radius: 8px; color: #fff; overflow: hidden;
    background: linear-gradient(180deg, #353535, #1d1d1d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 4px rgba(0, 0, 0, .5);
}
.pgs-cell::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.pgs-cell__num { display: block; font-size: 18px; line-height: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pgs-cell__label { display: block; font-size: 11px; line-height: 14px; font-weight: 400; opacity: .9; }
.pgs-cell__num.is-flip { animation: pgs-flip .45s cubic-bezier(.3, .7, .2, 1); }
@keyframes pgs-flip {
    0% { transform: translateY(-60%) scale(.9); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

.pgs-timer--section {
    gap: 8px; padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(180deg, #2f2f2f, #151515);
    border: 1px solid #3d3d3d;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pgs-timer--section .pgs-cell { background: linear-gradient(180deg, #262626, #121212); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06); }
.pgs-clock { position: relative; display: block; flex: none; width: 52px; height: 52px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.pgs-clock::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    animation: pgs-pulse 2s ease-out infinite;
}
@keyframes pgs-pulse {
    0% { box-shadow: 0 0 0 0 rgba(215, 26, 32, .55); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(215, 26, 32, 0); }
}

/* ───────── اسلایدر ───────── */
.pgs-slider { position: relative; }
.pgs-viewport {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    padding-block: 4px 40px; margin-block-end: -24px; outline-offset: 2px;
}
.pgs-viewport::-webkit-scrollbar { display: none; }
.pgs-track { display: flex; gap: var(--pgs-gap); }
.pgs-slide {
    position: relative; flex: 0 0 calc((100% - (var(--pgs-per) - 1) * var(--pgs-gap)) / var(--pgs-per));
    min-width: 0; scroll-snap-align: start;
}
.pgs-floor {
    position: absolute; inset-inline: 8%; bottom: -22px; height: 31px; border-radius: 50%; z-index: -1; filter: blur(8px);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(23, 23, 23, .22) 51%, rgba(0, 0, 0, 0));
}

.pgs-nav {
    position: absolute; top: 40%; z-index: 3; display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: #fff; color: var(--pgs-black); box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transition: transform .2s, background .2s, color .2s, opacity .2s;
}
.pgs-nav:hover { background: var(--pgs-primary); color: #fff; transform: scale(1.08); }
.pgs-nav:focus-visible { outline: 2px solid var(--pgs-primary); outline-offset: 2px; }
.pgs-nav--prev { right: -12px; }
.pgs-nav--next { left: -12px; }
.pgs-nav[disabled] { opacity: 0; pointer-events: none; }
.pgs-slider.is-scrollable .pgs-nav { display: flex; }

/* ───────── کارت ───────── */
.pgs-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 12px; overflow: hidden; }
.pgs-card__media { position: relative; aspect-ratio: 288 / 180; background: #fff; border-bottom: 1.6px solid var(--pgs-gray-01); overflow: hidden; }
.pgs-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pgs-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); pointer-events: none; }
.pgs-badge {
    position: absolute; z-index: 1; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 12px; background: var(--pgs-primary); color: #fff; border-radius: 8px 8px 8px 0;
    font-size: 16px; font-weight: 700; line-height: 1;
}
.pgs-card__body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 8px 16px 16px; }
.pgs-card__title {
    font-size: 16px; line-height: 24px; font-weight: 700; color: var(--pgs-gray-09);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px;
}
.pgs-price { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.pgs-price__old { font-size: 14px; line-height: 24px; color: var(--pgs-gray-08); text-decoration: line-through; }
.pgs-price__row { display: flex; align-items: center; gap: 4px; }
.pgs-price__new { font-size: 20px; line-height: 28px; font-weight: 800; white-space: nowrap; }
.pgs-price__unit { font-size: 12px; line-height: 20px; font-weight: 500; }
.pgs-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 12px 16px;
    background: var(--pgs-primary); color: #fff !important; border-radius: 8px; text-decoration: none !important;
    font-size: 16px; line-height: 24px; font-weight: 600; transition: background .2s, transform .2s;
}
.pgs-btn:hover { background: var(--pgs-primary-dark); }
.pgs-btn:active { transform: scale(.98); }
.pgs-btn:focus-visible { outline: 2px solid var(--pgs-black); outline-offset: 2px; }
.pgs-btn__icon { flex: none; }

/* ───────── نوار بالای هدر ───────── */
.pgs-bar { position: relative; z-index: 99; background: #000; color: #fff; }
.pgs-bar__inner { display: flex; align-items: center; gap: 16px; width: 100%; max-width: var(--pgs-container); min-height: 49px; margin-inline: auto; padding-inline: 16px; }
.pgs-bar__badge {
    display: flex; flex: none; align-items: center; justify-content: center; align-self: stretch; padding: 4px 24px;
    background: var(--pgs-primary); font-size: 20px; line-height: 28px; font-weight: 900; white-space: nowrap;
}
.pgs-bar__content { display: flex; flex: 1; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
.pgs-bar__text { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 28px; font-weight: 700; }
.pgs-bar__text strong { font-size: 20px; font-weight: 900; }
.pgs-bar__link {
    display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 4px 8px; color: #fff !important; text-decoration: none !important;
    font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap;
}
.pgs-bar__link svg { transition: transform .2s; }
.pgs-bar__link:hover svg { transform: translateX(-4px); }
.pgs-bar__link:focus-visible, .pgs-bar__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pgs-bar__close {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s;
}
.pgs-bar__close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.pgs-timer--bar .pgs-cell { background: var(--pgs-gray-09); border-radius: 0; box-shadow: none; }
.pgs-timer--bar .pgs-cell::after { display: none; }

/* عرض محتوا = همان کانتینر سکشن (--pgs-container)؛ بج و لینک دقیقاً روی لبه‌ی کانتینر می‌نشینند */
@media (min-width: 1200px) {
    .pgs-bar__inner, .pgs__inner { padding-inline: 0; }
}
@media (min-width: 1280px) {
    .pgs-bar__close { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); }
}

/* ───────── تبلت ───────── */
@media (max-width: 1023px) {
    .pgs-slide { flex-basis: calc((100% - (var(--pgs-per-tab) - 1) * var(--pgs-gap)) / var(--pgs-per-tab)); }
    .pgs-nav { display: none !important; }
    .pgs-bar__text { font-size: 16px; }
    .pgs-bar__text strong { font-size: 18px; }
}

/* ───────── موبایل (فشرده‌تر) ───────── */
@media (max-width: 640px) {
    .pgs { --pgs-gap: 12px; padding: 24px 0 8px; }
    .pgs__head { flex-direction: column; gap: 12px; margin-bottom: 16px; }
    .pgs__title { font-size: 20px; }
    .pgs__subtitle { font-size: 12px; line-height: 20px; }
    .pgs-slide { flex-basis: calc((100% - (var(--pgs-per-mob) - 1) * var(--pgs-gap)) / var(--pgs-per-mob)); }
    .pgs-viewport { padding-block: 2px 28px; margin-block-end: -16px; scroll-padding-inline: 16px; margin-inline: -16px; padding-inline: 16px; }
    .pgs-timer--section { gap: 6px; padding: 8px 10px; border-radius: 12px; align-self: stretch; justify-content: center; }
    .pgs-clock { width: 40px; height: 40px; }
    .pgs-cell { width: 40px; height: 40px; border-radius: 6px; }
    .pgs-cell__num { font-size: 15px; line-height: 17px; }
    .pgs-cell__label { font-size: 10px; line-height: 12px; }
    .pgs-card__media { aspect-ratio: 288 / 150; }
    .pgs-card__body { gap: 10px; padding: 6px 12px 12px; }
    .pgs-card__title { font-size: 14px; line-height: 22px; min-height: 44px; }
    .pgs-price__old { font-size: 12px; line-height: 18px; }
    .pgs-price__new { font-size: 17px; line-height: 24px; }
    .pgs-price__unit { font-size: 11px; }
    .pgs-badge { height: 26px; padding: 0 8px; font-size: 13px; }
    .pgs-btn { height: 40px; padding: 8px 12px; font-size: 14px; }
    .pgs-btn__icon { width: 20px; height: 20px; }

    .pgs-bar__inner { flex-wrap: wrap; gap: 4px 8px; padding: 0 8px 8px 40px; position: relative; min-height: 0; }
    .pgs-bar__badge { order: 1; align-self: auto; margin-top: 8px; padding: 2px 10px; border-radius: 6px; font-size: 14px; line-height: 22px; }
    .pgs-bar__content { order: 3; flex: 1 1 100%; flex-direction: column; gap: 6px; }
    .pgs-bar__text { flex-wrap: wrap; justify-content: center; gap: 2px 6px; font-size: 13px; line-height: 20px; text-align: center; }
    .pgs-bar__text strong { font-size: 14px; }
    .pgs-bar__link { order: 2; margin-top: 8px; margin-inline-start: auto; padding: 2px 4px; font-size: 13px; }
    .pgs-bar__close { position: absolute; top: 6px; left: 4px; }
    .pgs-timer--bar .pgs-cell { width: auto; min-width: 44px; height: 34px; padding-inline: 8px; flex-direction: row; gap: 4px; }
    .pgs-timer--bar .pgs-cell__num { font-size: 14px; }
    .pgs-timer--bar .pgs-cell__label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pgs-clock::after, .pgs-cell__num.is-flip { animation: none; }
    .pgs-viewport { scroll-behavior: auto; }
}