html { overflow-anchor: none; }

.campaign-grid-2 {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
}

.campaign-tile-2 {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    position: relative;
}

.slide-container-2 {
    display: flex;
    align-items: center;
}

.slide-container-2 img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.product-info-2 {
    flex: 1;
}

.product-title-2 {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 4px;
}

.price-commission-box-2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
    margin-top: 8px;
    align-items: flex-end;
    /* چسباندن محتوا به چپ */
}

.price-line-2,
.commission-line-2 {
    display: flex;
    justify-content: flex-start;
    /* چسباندن محتوا به چپ */
    align-items: center;
    gap: 10px;
}

.discounted-price-2 {
    color: black;
    /* رنگ مشکی */
    font-weight: bold;
    font-size: 16px;
    /* بزرگتر از معمولی */
}

.commission-value-2 {
    color: black;
    /* رنگ مشکی */
    text-decoration: line-through;
    font-size: 12px;
    /* کوچکتر */
    font-weight: normal;
    /* نازک‌تر */
}

.tile-footer-2 {
    margin-top: 10px;
}

.campaign-link-2 {
    text-decoration: none;
    display: inline-block;
    /*background-color: #2A39C6;
    color: white;*/
    border-radius: 6px;
    padding: 8px;
    font-weight: bold;
}

.small-font-2 {
    font-size: 13px;
}

.menu-toggle {
    cursor: pointer;
    font-size: 24px;
    color: white;
    margin-left: 12px;
}

.drawer-menu {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
}

.drawer-menu.open {
    right: 0;
    padding: 20px;

}

.drawer-menu .menu-item {
    margin-bottom: 16px;
    font-size: 18px;
    color: #333;
    cursor: pointer;
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    display: none;
}

.drawer-backdrop.show {
    display: block;
}

.cart-wrapper {
position: absolute;
left: 1rem;
top: 1.2rem;
z-index: 100;
text-decoration: none;
}

/* ===== Floating WhatsApp: wrap, label & animations ===== */
#wa-fab-wrap{
  position: fixed;
  left: calc(1rem + env(safe-area-inset-left));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* حباب سمت راست دکمه */
  gap: 8px;
}

/* خود دکمه */
#wa-fab{
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color:#ffffff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 8px 22px rgba(37,211,102,.35);
  will-change: transform;
  /* انیمیشن لَرزش با مکث طولانی بین هر لرزش */
  animation: wa-nudge 5s ease-in-out infinite;
}
#wa-fab svg{ width:28px; height:28px; }
#wa-fab:active{ transform: translateY(1px); }

/* --- Embossed / 3D look for WhatsApp FAB --- */
#wa-fab{
  position: relative;                /* برای شبه‌المان‌ها */
  /* گرادیان ملایم روی سبز برای عمق */
  background: radial-gradient(120% 120% at 30% 30%,
  var(--button-bg) 0%, var(--button-bg) 55%, var(--button-bg) 100%) !important;

  /* سایه بیرونی + دو سایه داخلی برای بِلِف */
  box-shadow:
    0 10px 24px rgba(37,211,102,.35),      /* سایه بیرونی */
    inset 2px 2px 5px rgba(255,255,255,.35),   /* های‌لایت داخلی بالا-چپ */
    inset -4px -6px 10px rgba(0,0,0,.22);      /* سایه داخلی پایین-راست */
  border: 1px solid rgba(0,0,0,.05);
}

/* انعکاس براق ملایم بالای دکمه */
#wa-fab::before{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 30% 25%,
      rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;             /* درخشش لطیف */
}

/* ریم سبک برای حس ضخامت لبه */
#wa-fab::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45),
    inset 0 -1.5px 2px rgba(0,0,0,.15);
}

/* خود لوگو کمی برجسته‌تر دیده شود */
#wa-fab svg{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.55))   /* لبه بالایی روشن */
    drop-shadow(0 -1px 0 rgba(0,0,0,.25));       /* لبه پایینی تیره */
}


/* حباب متن بالای دکمه */
.wa-fab-label{
  direction: rtl;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 12.5px; font-weight: 800;
  color: #111; background: #fff;
  padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.06) inset;
  position: relative;
  white-space: nowrap;
  /* هم‌زمان با لرزش، ظاهر/محو شود */
  animation: wa-label-pop 5s ease-in-out infinite;
}
.wa-fab-label::after{
  content:"";
  position:absolute; bottom:-6px; right:16px;
  border: 6px solid transparent;
  border-top-color:#fff; /* نوک حباب */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}

/* مکث طولانی، لرزش کوتاه در انتهای هر سیکل */
@keyframes wa-nudge{
  0%, 82%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  84% { transform: translate3d(-1px,0,0) rotate(-6deg); }
  88% { transform: translate3d( 1px,0,0) rotate( 6deg); }
  92% { transform: translate3d(-1px,0,0) rotate(-4deg); }
  96% { transform: translate3d( 1px,0,0) rotate( 4deg); }
}

/* برچسب هنگام لرزش ظاهر شود */
@keyframes wa-label-pop{
  0%, 80%   { opacity: 0; transform: translateY(4px); }
  84%, 94%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(4px); }
}

@media (min-width:1024px){
  #wa-fab-wrap{ right:24px; bottom:24px; }
}


.cart-icon {
    background: white;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: relative;
}

.cart-count-badge {
    position: absolute;
    top: 0px;
    right: -6px;
    background: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Vazirmatn, sans-serif;
}

.quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.quantity-btn {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
}

.quantity-count {
    font-size: 16px;
    min-width: 24px;
    text-align: center;
}

/* نشان تخفیف */
.discount-badge {
position: absolute;
top: 6px;
right: 6px;
background: #e53935;          /* قرمز */
color: #fff;                   /* متن سفید */
padding: 4px 8px;
border-radius: 999px;          /* دورگرد کامل */
font-size: 12px;
font-weight: 800;
line-height: 1;
font-family: Vazirmatn, sans-serif;
z-index: 5;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* مطمئن شو ظرف تصویر موقعیت‌دهی نسبی دارد */
.slide-container, .slide-container-2 {
position: relative;
}

/* ───────── OTP Modal ───────── */
#otp-modal-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999;
    align-items:center; justify-content:center;
}
#otp-modal-backdrop{
z-index:13000 !important; /* بالاتر از color-modal (12000) و pm-backdrop (10050) */
}
#otp-modal{
    width: 92%; max-width: 420px; background:#fff; border-radius:12px; padding:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.2); direction: rtl; font-family:'Vazirmatn',sans-serif;
}
#otp-modal h3{ margin:0 0 12px; font-size:18px; }
#otp-modal label{ display:block; font-weight:700; font-size:13px; margin:10px 0 5px; }
#otp-modal input{
    width:-webkit-fill-available; border:1px solid #ddd; border-radius:8px; padding:10px; font-size:14px;
    font-family:'Vazirmatn',sans-serif;
}
#otp-modal .row{ display:flex; gap:8px; align-items:center; }
#otp-modal .btn{
    display:inline-block; border:none; border-radius:8px; padding:10px 12px; cursor:pointer;
    font-family:'Vazirmatn',sans-serif; font-weight:700; font-size:14px;
}
#otp-send-btn{ background:#009f7f; color:#fff; }
#otp-verify-btn{ background:#2a39c6; color:#fff; width:100%; }
#otp-cancel-btn{ background:#eee; color:#333; }
#otp-msg{ font-size:12px; color:#c0392b; margin-top:8px; min-height:16px; }
#otp-timer{ font-size:12px; color:#666; margin-top:6px; }

/* ===== Gallery slider (scroll-snap, RTL, no overflow:hidden) ===== */
.campaign-grid .image-slider {
direction: rtl;
width: 100%;
margin: 8px 0 0;
overflow-x: auto;                  /* فقط افقی */
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.campaign-grid .image-slider::-webkit-scrollbar { display: none; }

/* ظرف اسلایدها */
.campaign-grid .image-slider .slide-container {
display: flex;
flex-direction: row;               /* صریحاً row تا RTL پایداری داشته باشد */
gap: 12px;                         /* فاصله بین اسلایدها ⇒ گوشه‌ی بعدی دیده شود */
width: 100%;
padding-inline: 8px;               /* کمی فاصله از لبه‌ها */
position: relative;                /* برای discount-badge */
}

/* هر اسلاید کمی کمتر از عرض کانتینر تا گوشه‌ی بعدی معلوم باشد */
.campaign-grid .image-slider .slide {
flex: 0 0 95%;                     /* ~88% ⇒ ~12% اسلاید بعدی پیداست */
display: flex;
justify-content: center;
scroll-snap-align: center;          /* اسنپ ابتدای اسلاید (در RTL سمت راست) */
box-sizing: border-box;
}

/* لینک داخلی اسلاید تمام‌عرض باشد */
.campaign-grid .image-slider .slide > a {
display: flex;
justify-content: center;
width: fit-content;
}

/* خود تصویر: کمی کوچکتر + بوردر ظریف + رادیوس */
.campaign-grid .image-slider .slide img {
display: block;
width: 96%;                        /* کمی کوچکتر از اسلاید */
height: auto;
max-height: 70vh;
object-fit: contain;
border: 1px solid #e5e7eb;         /* بوردر ریز */
border-radius: 10px;
background: #fff;
pointer-events: none;              /* درگ بهتر */
margin: 0 auto;
}

/* دات‌ها: خارج از اسکرولر و ثابت زیر اسلایدر */
.campaign-grid .slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 8px;                   /* دقیقاً زیر تصویر */
}
.campaign-grid .slider-dots .dot {
width: 8px; height: 8px; border-radius: 50%;
background: #cfcfcf;
}
.campaign-grid .slider-dots .dot.active { background: #555; }

/* سازگاری با کد قدیمی: اینها را پنهان نگه‌دار تا script.js ارور ندهد */
.campaign-grid .image-slider .slide-image { display: none !important; }
.campaign-grid .image-slider .dots-container { display: none !important; }

/* نشان تخفیف را ثابت روی کارت نگه می‌داریم */
.campaign-inner { position: relative; }            /* محفظه‌ی مرجع برای موقعیت‌دهی */
.fixed-badge {
position: absolute;
top: 6px;
right: 6px;
z-index: 10;
pointer-events: none;                            /* کلیک‌ها به لینک/عکس برسند */
}

/* اگر قبلاً برای badge، نسبی روی slide-container گذاشته بودیم، خنثی‌اش کن */
.campaign-grid .image-slider .slide-container { position: static; }


/* ===== Two-Column Grid (products & campaigns) ===== */
.two-col-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
padding: 4px;
}

@media (min-width: 768px) {
.two-col-grid {
gap: 4px;
padding: 4px;
}
}

.tile-2col {
position: relative;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
cursor: pointer;
}

/* کاشی مربعی */
.tile-2col .tile-figure {
width: 100%;
aspect-ratio: 1 / 1;              /* مربع */
position: relative;
overflow: hidden;
background: #f8f8f8;
}

.tile-2col .tile-figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* نشان تخفیف در گوشه */
.tile-2col .discount-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
}

/* لایه‌ی اطلاعات پایین تصویر */
.tile-2col .tile-overlay {
position: absolute;
inset: auto 0 0 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.85) 100%);
color: #fff;
padding: 10px 10px 12px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 34%;
}

.tile-2col .tile-title {
font-size: 13px;
font-weight: 800;
line-height: 1.35;
margin: 0;
max-height: 3.6em;                 /* ~3 خط */
overflow: hidden;
}

.tile-2col .price-line {
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}

.tile-2col .price-line .now {
font-weight: 800;
font-size: 14px;
}

.tile-2col .price-line .was {
opacity: .85;
text-decoration: line-through;
font-size: 12px;
}

/* دکمه‌ها */
.tile-2col .tile-actions {
display: flex;
gap: 8px;
}

.tile-2col .tile-actions .btn {
display: inline-block;
flex: 1;
text-align: center;
border-radius: 8px;
padding: 8px 10px;
font-weight: 800;
font-size: 12px;
text-decoration: none;
}

.tile-2col .tile-actions .btn-primary {
background-color: var(--btn-bg, #2A39C6);
color: var(--btn-fg, #fff);
border: none;
}

/* لینک کلی روی کاشی (برای زمانی که فقط متن/قیمت داریم) */
.tile-2col a.cover-link {
position: absolute;
inset: 0;
}


.tile-2col{ position:relative; background:#fff; border-radius:12px; overflow:hidden;
   box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:pointer; box-sizing:border-box; }

.tile-2col .tile-figure{ width:100%; aspect-ratio:1/1; position:relative; overflow:hidden; background:#f8f8f8; }
.tile-2col .tile-figure img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }

.tile-2col .discount-badge{ position:absolute; top:8px; right:8px; z-index:2; }

.tile-2col .tile-overlay{
position:absolute; inset:auto 0 0 0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 55%,rgba(0,0,0,.85) 100%);
color:#fff; padding:10px 10px 12px; display:flex; flex-direction:column; gap:6px; min-height:34%;
}
.tile-2col .tile-title{ font-size:13px; font-weight:800; line-height:1.35; margin:0; max-height:3.6em; overflow:hidden; }
.tile-2col .price-line{ font-size:13px; display:flex; align-items:center; gap:8px; }
.tile-2col .price-line .now{ font-weight:800; font-size:14px; }
.tile-2col .price-line .was{ opacity:.85; text-decoration:line-through; font-size:12px; }

.tile-2col .tile-actions{ display:flex; gap:8px; }
.tile-2col .tile-actions .btn{ flex:1; text-align:center; border-radius:8px; padding:8px 10px; font-weight:800; font-size:12px; text-decoration:none; }
.tile-2col .tile-actions .btn-primary{ background-color:var(--btn-bg,#2A39C6); color:var(--btn-fg,#fff); border:none; }

/* جلوگیری از اسکریپت/استایل گالری روی حالت جدید */
.two-col-grid .image-slider, .two-col-grid .slider-dots { display:none !important; }


/* ===== Two-column (simple cards v2) ===== */

.two-tile{
background:#fff; overflow:hidden; /*border:1px solid #eee; border-radius:12px; 
box-shadow:0 2px 8px rgba(0,0,0,.04);*/
}

/* === Two-column slider (gallery-like) === */
.two-img-wrap{ position:relative; padding:2px; background:#fff; }
.two-img-viewport{
position:relative; width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#f7f7f7;
}
.two-img-track{
display:flex; flex-direction:row; gap:12px; height:100%;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
direction:rtl; /* برای پایداری اسکرول داخل صفحات RTL */
}
.two-img-track::-webkit-scrollbar{ display:none; }
.two-slide{ flex:0 0 100%; height:100%; scroll-snap-align:center; display:flex; justify-content:center; background-color: #fff;}
.two-slide a{ display:block; width:96%; height:96%; }   /* کمی کوچک‌تر برای تنفس */
.two-slide img{
width:100%; height:100%; object-fit:contain; display:block;
/*border:1px solid #e5e7eb;*/ border-radius:10px; background:#fff;
}

/* دات‌ها زیر ویوپورتی که اسکرول می‌شود */
.two-dots{
display:flex; justify-content:center; align-items:center; margin-top:4px;
}
.two-dots .dot{
width:4px; height:4px; border-radius:50%; background:#cfcfcf;
}
.two-dots .dot.active{ background:#555; }


/* اگر قبلاً cover-link داشتی، مطمئن شو اصلاً وجود ندارد؛
ولی اگر جایی ماند، لمس را مختل نکند: */
.cover-link{ pointer-events:none; }

/* نشان تخفیف */
.two-badge{ position:absolute; top:3px; right:3px; }
.two-badge .discount-badge{ position:static; box-shadow:0 2px 6px rgba(0,0,0,.12); }

/* اطلاعات */
.two-info{ padding:10px 12px 14px; display:flex; flex-direction:column;  }
.two-title{ font-size:13px; font-weight:800; line-height:1.45; margin:0; }
.two-title a{ color:inherit; text-decoration:none; }

/* قیمت‌ها زیر هم */
.two-prices{ display:flex;   align-items: baseline; align-self: end; gap: 8px;}
.two-prices .now{ font-weight:900; font-size:14px; color:#111; }
.two-prices .was{ font-size:12px; color:#777; text-decoration:line-through; }

/* دکمه: وسط‌چین و داخل کادر */
.two-actions{ margin-top:2px; }
.two-btn{
display:block; margin:0 auto; text-align:center;
padding:9px 10px; border-radius:10px; font-weight:800; font-size:12px; text-decoration:none; border:none;
background:var(--btn-bg,#2A39C6); color:var(--btn-fg,#fff);
}

/* ===== Two-Column Product Modal (fullscreen, slide-up) ===== */
#pm-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.45);
display:none; align-items:flex-end; z-index:10050; /* بالاتر از OTP (9999) و فوتر */
}
#pm-backdrop.show{ display:flex; }

#pm-sheet{
width:100%; max-height:92vh; background:#fff; border-radius:16px 16px 0 0;
box-shadow:0 -10px 30px rgba(0,0,0,.25);
transform:translateY(100%); transition:transform .28s ease-out;
display:flex; flex-direction:column; overflow:hidden;
}
#pm-backdrop.show #pm-sheet{ transform:translateY(0); }

.pm-header{
display:flex; align-items:center; justify-content:end;
padding:10px 14px; border-bottom:1px solid #eee;
}
.pm-title{ font-weight:900; font-size:14px; margin:0; }

.pm-close{
appearance:none; border:none; background:var(--button-bg); color:var(--button-fg);  height:34px;
border-radius:10px; font-size:13px; font-weight:800; cursor:pointer; line-height:1;
}

/* فونت و اعداد فارسی برای کل مودال */
#pm-sheet, #pm-sheet *{
font-family: 'Vazirmatn', sans-serif;
}

/* ===== Product Modal: compact gallery row ===== */
/* کل شیت حداکثر 90–92vh، بدنه اسکرول‌پذیر */
#pm-sheet{
max-height:92vh; display:flex; flex-direction:column;
}
.pm-body{
flex:1 1 auto; overflow:auto; padding:0px 10px 0px; /* فضای پایین برای فوتر چسبان */
}

/* گالری: ارتفاع امن تا همه‌چیز جا شود */
.pm-viewport{
width:100%;
height:min(34vh, 88vw); /* روی موبایل: کوچک‌تر از نصف صفحه بماند */
border-radius:10px; overflow:hidden; padding:6px; box-sizing:border-box;
}
.pm-track{
height:100%; display:flex; overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.pm-track::-webkit-scrollbar{ display:none; }
.pm-slide{width:100%;scroll-snap-align:center; display:flex; justify-content:center; align-items:center; background:#fff; border-radius:10px; padding:4px; }
.pm-slide img{  height:100%; object-fit:cover; border:1px solid #e5e7eb; border-radius:8px; background:#fff; display:block; }

/* دات‌های کوچک */
.pm-dots{ display:flex; justify-content:center; gap:6px; margin-top:6px; }
.pm-dots .dot{ width:5px; height:5px; border-radius:50%; background:#cfcfcf; }
.pm-dots .dot.active{ background:#555; }




/* بولِت‌پوینت مزایا */
.pm-benefits{ margin-top:10px; padding:10px; border:1px dashed #e5e7eb; border-radius:10px; background:#fcfcfc; }
/* بولت‌ها راست‌به‌چپ و داخل لیست */
.pm-benefits ul{
list-style:disc inside;
margin:0; padding:0;
}
.pm-benefits li{ font-size:12.5px; line-height:1.7; margin:0 0 4px; }


/* حالت جمع‌شده: فقط 4 مورد اول را نشان بده */
.pm-benefits li.pm-hidden{ display:none; }
.pm-benefits-toggle{
display:inline-block; margin-top:6px; font-weight:800; font-size:12px; cursor:pointer;
background:#f3f4f6; border-radius:8px; padding:6px 10px;width:-webkit-fill-available;
}

/* دکمه‌های مودال (یادآوری رنگ‌ها) */
.pm-btn.pm-add{ background: var(--btn-bg, #2A39C6); color: var(--btn-fg, #fff); }

/* تاپ‌بودن مودال انتخاب ویژگی روی مودال محصول */
#color-modal{ z-index: 12000 !important; }  /* قبلاً 9999 بود، بالاتر از #pm-backdrop بشه */

/* خود بک‌دراپ و شیت قبلی‌ها (برای اطمینان) */
#pm-backdrop{ z-index:10050; }

/* عنوان هدر را مخفی کن (فقط دکمه بستن بماند) */
.pm-header .pm-title{ display:none; }

/* ردیف نام + قیمت جمع و جور */
.pm-price-row{
display:flex; align-items:baseline; justify-content:space-between;
gap:10px; margin-top:6px;
}
.pm-name{
font-size:12.5px; font-weight:800; color:#222; flex:1; min-width:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pm-prices{ align-items:baseline; text-align:end;}
.pm-prices .now{ font-weight:900; font-size:13.5px; color:#111; }
.pm-prices .was{ font-size:11px; color:#777; text-decoration:line-through; }

/* باکس مزایا باریک‌تر و کم‌حاشیه */
.pm-benefits{
margin-top:8px; padding:8px; border:1px dashed #e5e7eb;
border-radius:10px; background:#fcfcfc;
}

/* دکمه "افزودن به سبد" و "رفتن به سبد" فشرده */
.pm-actions{ display:flex; gap:8px; margin-top:8px; }
.pm-footer{
position:sticky; bottom:0; left:0; right:0;
padding:10px; background:#fff; border-top:1px solid #eee;
display:flex; gap:8px; z-index:3;
}
.pm-btn{
flex:1; text-align:center; border-radius:10px; padding:11px 12px;
font-weight:800; font-size:13px; border:none; cursor:pointer;
}
.pm-btn { text-decoration: none; }
.pm-add{ background: var(--btn-bg, #2A39C6); color: var(--btn-fg, #fff); }
.pm-go-cart{ background:#009f7f; color:#fff; display:none; text-decoration:none;}


.pm-viewport{ position:relative; }
.pm-badge{
position:absolute; top:8px; right:8px; z-index:2;
}
.pm-badge .discount-badge{
position:static; padding:3px 7px; font-size:11px; box-shadow:0 2px 6px rgba(0,0,0,.12);
}


.pm-section-title{
font-size:12px; font-weight:800; margin:6px 0 6px; color:#333;
}

/* ==== Narrow container for desktop (two-column & list views) ==== */
@media (min-width: 1024px) {
:root { --page-max: 880px; }  /* اگر خواستی باریک‌تر/عریض‌ترش کن: 840px، 1000px، ... */

/* محدود کردن پهنا و سنتر کردن محتوا */
.header-content,
.two-col-grid,
.campaign-grid-2,
.footer {
max-width: var(--page-max);
margin-inline: auto;
}

/* چون grid ها padding داخلی دارند، در دسکتاپ جمع‌ترشان کنیم */
.two-col-grid,
.campaign-grid-2 {
padding-left: 0;
padding-right: 0;
}

/* گزینه‌ی اختیاری: هم‌تراز کردن آیکن سبد با کانتینر باریک‌شده */
.cart-wrapper {
left: calc(50% - (var(--page-max) / 2) + 1rem);
}
}

/* وقتی مودال باز است، اسکرول پس‌زمینه قفل شود */
body.scroll-locked{
position: fixed;
width: 100%;
overflow: hidden;
touch-action: none;
overscroll-behavior: contain;
}

/* کاهش اینرسی اسکرول لمسی */
.campaign-grid .image-slider,
.two-img-track,
.pm-track{
-webkit-overflow-scrolling: auto; /* قبلاً touch بود؛ اکنون ملایم‌تر */
}

/* ایست اجباری روی هر اسلاید تا تند نپرد */
.campaign-grid .image-slider .slide,
.two-img-track .two-slide,
.pm-track .pm-slide{
scroll-snap-stop: always;
}

.icon-btn{
appearance:none; background:transparent; border:none; padding:6px; border-radius:10px; cursor:pointer;
}
.icon-btn:active{ transform: translateY(1px); }

/* ردیف تگ‌ها زیر هدر (اسکرول افقی) */
.filters-row{
display:flex; gap:8px; flex-wrap:nowrap;
overflow-x:auto; overflow-y:hidden;
padding:10px 12px 8px;
background:#fff; /* زیر هدر */
scrollbar-width:none;
}
.filters-row::-webkit-scrollbar{ display:none; }

/* چیپ تگ‌ها: عادی سفید/خاکستری؛ انتخاب‌شده رنگ دکمه */
.tag-chip{
border:1px solid #e5e7eb;
background:#fff;
color:#666;
border-radius:999px;
cursor:pointer;
white-space:nowrap;
font-family:'Vazirmatn', sans-serif;
font-weight:800;
font-size:0.5rem;
}
.tag-chip.selected{
background: var(--button-bg);
color: var(--button-fg);
border-color: var(--button-bg);
}

/* ردیف بالایی هدر هم‌تراز */
/* هدر و سطر اول */
.header-content { display:flex; align-items:center; }
.influencer-info { display:flex; align-items:center; gap:10px; width:100%; }

/* آیکن‌ها به لبهٔ چپ چسبیده باشند */
.icon-bar { display:flex; align-items:center; gap:10px; }
.icon-bar { margin-inline-start: auto; }


/* در دسکتاپ بین هویت فروشگاه/سرچ و آیکن‌ها فاصله بیفتد (راست ← چپ) */
@media (min-width: 1024px){
.influencer-info { justify-content: space-between; }
}

/* ===== FIX: Filters row height & chip overflow ===== */

/* خودِ ردیف تگ‌ها کمی بلندتر + سنتر عمودی + فاصله بیشتر */
#filters-row.filters-row{
background: #f9f9f9;
padding: 0.5rem 0.5rem;          /* قبلاً 10/8 بود */
min-height: 1rem;            /* تا نیمه بریده دیده نشود */
align-items: center;         /* چیپ‌ها وسط چین عمودی */
gap: 10px;                   /* فاصله بین چیپ‌ها */
-webkit-overflow-scrolling: touch;
}

/* چیپ‌ها: inline-flex برای سنتر عمودی، ارتفاع لمسی 36–40px، عدم فشرده‌سازی */
#filters-row .tag-chip{
display: inline-flex;
align-items: center;
justify-content: center;

height: 1.2rem;                /* لمس‌پذیر و خوانا */
padding: 0 0.5rem;             /* به‌جای padding عمودی */
border-radius: 999px;
font-size: 0.8rem;             /* کمی خواناتر */
font-weight: 400;
line-height: 1;              /* جلوگیری از خروج متن از کادر */
white-space: nowrap;         /* یک‌خطی بماند */
flex: 0 0 auto;              /* روی موبایل له نشود */
max-width: none;             /* اجازه بده با متن کش بیاید */
}

/* حالت عادی */
#filters-row .tag-chip{
background: #fff;
color: #666;
border: 1px solid #e5e7eb;
}

/* حالت انتخاب‌شده (هم‌رنگ دکمه‌های فروشگاه) */
#filters-row .tag-chip.selected{
background: var(--button-bg);
color: var(--button-fg);
border-color: var(--button-bg);
}

/* اگر هنوز جایی کمی بریده می‌شود، ارتفاع ردیف را روی دسکتاپ بیشتر کن */
@media (min-width: 768px){
#filters-row.filters-row{ min-height: 58px; }
}

/* برای مرورگرهایی که متن خیلی بلند دارند، کمی فضای اضافه بده */
@supports (-webkit-touch-callout: none) {
#filters-row .tag-chip{ height: 1.5rem; }
}

/* پیش‌فرض: مشکی توخالی */
.icon-outline { color: #111; }
.icon-outline * { fill: none; stroke: currentColor; }

/* هدر تیره: سفید توخالی */
.header-dark .icon-outline { color: #fff; }

/* حالت پیش‌فرض: بکگراند روشن → آیکن‌ها مشکی توخالی */
.icon-btn svg { color: #111; }

/* وقتی بکگراند هدر تیره باشه → آیکن‌ها سفید توخالی */
.header-dark .icon-btn svg { color: #fff; }


/* ردیف اسکرول افقی فیلترها و چیپ جستجو */
.tags-scroll-row{
display:flex;
gap:8px;
padding:10px 12px;
overflow-x:auto;
-webkit-overflow-scrolling: touch;
min-height: 1.4rem;
scrollbar-width: thin;
background: #f9f9f9;

}
.tags-scroll-row::-webkit-scrollbar{ display:none; }

/* چیپ‌ها */
.chip{
display:inline-table;
align-items:center;
white-space:nowrap;                 /* نذار خط بشکنه */
max-width: 70vw;                    /* از قاب بیرون نزنه */
text-overflow: ellipsis;            /* اگه خیلی طولانی بود … */
overflow: hidden;
padding:6px 10px;
border:1px solid #e5e7eb;
border-radius:999px;
font-size:12px;                     /* ریز مثل فیلتر */
line-height:1;
background:#fff;
color:#666;
cursor:pointer;
min-height: 0.5rem;
}

/* چیپ دارای ضربدر (برای سرچ) */
.chip--dismissible{
gap:8px;
text-decoration:none;               /* چون <a> هست */
}
.chip-x{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px; height:18px;
border-radius:50%;
background:rgba(0,0,0,.08);
color:inherit;
font-weight:900;
line-height:1;
}

/* وقتی بک‌گراند چیپ با رنگ دکمه‌هاست، ضربدر را کمی روشن/تیره‌تر کن */
.chip--dismissible .chip-x{
background: rgba(255,255,255,.25);
}

/* ——— شعار زیر نام فروشگاه (هدر) ——— */
.store-identity{
display:flex;
align-items:center;
gap:12px;
}

.store-texts{
display:flex;
flex-direction:column;
text-align:right;
}

.store-title{
font-size:16px;
font-weight:900;
letter-spacing:-0.3px;
}

.store-slogan{
margin-top:2px;
font-size:12px;              /* کوچک‌تر از اسم */
font-weight:400;             /* نازک‌تر */
color: var(--header-text-color); /* همان رنگ ولی کم‌رنگ‌تر (60% opacity) */
color: color-mix(in srgb, var(--header-text-color) 60%, transparent);
letter-spacing:-0.2px;
}

/* ——— فوتر تیره حرفه‌ای ——— */
.site-footer{
--sf-bg: #0f1115;
--sf-fg: #eef2f7;
--sf-dim:#98a2b3;
--sf-card:#151924;
background:
radial-gradient(1200px 400px at 80% -10%, rgba(255,255,255,.04), transparent 60%),
var(--sf-bg);
color: var(--sf-fg);
border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer .site-footer__inner{
max-width: var(--page-max, 880px);
margin-inline:auto;
padding: 20px 16px 28px;
display:grid;
gap:16px;
}
@media (min-width: 920px){
.site-footer .site-footer__inner{
grid-template-columns: 1.2fr .8fr .8fr;
align-items:start;
gap:22px;
padding: 28px 0 34px;
}
}
.site-footer h4{
margin: 0 0 10px;
font-size: 14px;
font-weight: 900;
letter-spacing: -.2px;
}
.site-footer .about{
font-size: 13.5px;
line-height: 1.95;
color: var(--sf-dim);
background: var(--sf-card);
border: 1px solid rgba(255,255,255,.06);
padding: 14px 14px;
border-radius: 12px;
}
/* ستون ترکیبی: همیشه دو ستون کنار هم (بدون ریزش روی موبایل) */
.trust-support{
display:flex;
flex-direction:row;
align-items:stretch;
justify-content:space-between;
gap:16px;
flex-wrap:nowrap;           /* مهم: اجازه‌ی زیر هم رفتن نده */
align-items:center;
text-align:center;
}

/* هر ستون دقیقاً نصف عرض؛ از بیرون نزنه */
.trust-support .trust-col,
.trust-support .support-col{
width:50%;
min-width:0;                /* اجازه‌ی شکستن متن داخل ستون */
display:flex;
flex-direction:column;
gap:8px;
}

/* ریزتنظیم برای محتوا تا جمع‌وجور و یک‌دست بماند */
.trust-support h4{
margin:0 0 6px;
font-size:14px;
font-weight:700;
}

/* لوگوها داخل ستون نمادها از باکس نزنند بیرون */
.trust-support .trust-logos{
display:flex;
align-items:center;
gap:12px;
overflow:hidden;            /* اگر لوگوهای اسکریپتی بزرگ شدند، اسکرول افقی نگیریم */
align-self: center;

}
.trust-support .trust-logos img{
max-height:3.3rem;            /* متناسب با ظاهر قبلی */
height:auto;
width:auto;
}

/* لینک واتساپ فشرده و یک‌خطی بماند؛ در صورت نیاز متن می‌شکند */
.trust-support .wa-link{
display:inline-flex;
align-items:center;
gap:8px;
white-space:nowrap;         /* تلاش برای یک‌خطی؛ اگر جا کم شد… */
overflow:hidden;
text-overflow:ellipsis;     /* با … جمع می‌شود */
width: max-content;
align-self: center;
}
.trust-support .wa-link svg{ width:18px; height:18px; }

/* سایز نوشته‌های کمکی */
.trust-support small{
opacity:.85;
font-size:0.5rem;
}

/* دکمه واتساپ */
.wa-link{
display:inline-flex; align-items:center; gap:10px;
background:#25D366; color:#0a0a0a;
font-weight:900; font-size: 13.5px;
padding:10px 12px; border-radius: 999px; text-decoration:none;
box-shadow: 0 6px 20px rgba(37,211,102,.35);
transition: transform .12s ease, box-shadow .2s ease;
}
.wa-link:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,211,102,.45); }
.wa-link svg{ width:18px; height:18px; }

/* خط جداکننده پایانی */
.site-footer .footline{
grid-column: 1 / -1;
margin-top: 10px;
border-top: 1px dashed rgba(255,255,255,.08);
padding-top: 12px;
font-size: 12.5px;
color: var(--sf-dim);
display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* بنر بالای هدر */
.header-banner {
    width: 100%;
    overflow: hidden;
    /* چسبیده به بالا، بدون فاصله‌ی اضافی */
    margin: 0;
    padding: 0;
}

.header-banner img {
    display: block;
    width: 100%;
    height: 25px;          /* ارتفاع کم روی موبایل */
    object-fit: cover;
}

/* روی صفحه‌های بزرگ‌تر کمی بلندترش کن */
@media (min-width: 768px) {
  .header-banner img {
      height: 64px;
  }
}