/* هدر در صفحات شاپ ثابت بماند */
body.woocommerce-shop .site-header,
body.tax-product_cat .site-header,
body.tax-product_tag .site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* اگر قالب روی html/ body ارتفاع 100% داده، فقط در شاپ بی‌اثر کن */
html:has(body.woocommerce-shop),
html:has(body.tax-product_cat),
html:has(body.tax-product_tag){
  height: auto !important;
}
body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag{
  height: auto !important;
  overflow-y: auto !important;  /* فقط یک اسکرول عمودی */
  overflow-x: clip;
}
/* فقط در صفحات فروشگاه: هیچ والد بالادستی اسکرول/کلیپ/ترنسفورم نسازد */
body.woocommerce-shop .site,
body.woocommerce-shop #page,
body.woocommerce-shop .woocommerce,
body.tax-product_cat .site,
body.tax-product_cat #page,
body.tax-product_cat .woocommerce,
body.tax-product_tag .site,
body.tax-product_tag #page,
body.tax-product_tag .woocommerce{
  overflow: visible !important;
  transform: none !important; /* اگر قالب translateZ(0) داده باشد */
}

/* کانتینر شبکه هم اسکرول داخلی نسازد */
.lfs-shop-wrap,
.lfs-grid{
  overflow: visible !important;
}
/* والدهای محتوای شاپ اسکرول داخلی نسازند */
/* فقط یک اسکرول کلی داشته باشیم؛ والدهای محتوا اسکرول داخلی نسازند */
body.woocommerce-shop .site-content,
body.woocommerce-shop .content-area,
body.woocommerce-shop .site-main,
body.woocommerce-shop #primary,
body.tax-product_cat .site-content,
body.tax-product_cat .content-area,
body.tax-product_cat .site-main,
body.tax-product_cat #primary,
body.tax-product_tag .site-content,
body.tax-product_tag .content-area,
body.tax-product_tag .site-main,
body.tax-product_tag #primary{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* سایدبار فیلتر: با اسکرول صفحه می‌آید و وقتی به بالا رسید می‌چسبد */
.lfs-sidebar{
  position: sticky;
  top: calc(var(--lfs-header, 0px) + 12px);
  align-self: start;
  overflow: visible !important;
  height: max-content; /* مهم: از کشیده‌شدن عمودی در Grid جلوگیری می‌کند */
}

/* خود کانتینر شبکه محصول اسکرول داخلی نداشته باشد */
.lfs-grid{ overflow: visible !important; }

/* اگر قالب روی body/ html ارتفاع 100% داده بود، فقط در صفحات شاپ خنثی کن */
html:has(body.woocommerce-shop),
html:has(body.tax-product_cat),
html:has(body.tax-product_tag){
  height: auto !important;
}
body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag{
  height: auto !important;
  overflow-y: auto !important;   /* یک اسکرول عمودی */
  overflow-x: clip;
}

/* ===== Layout ===== */

.lfs-shop-wrap{
  display:grid;
  grid-template-columns: minmax(240px,280px) 1fr;
  gap: clamp(16px, 2.5vw, 24px);
  align-items:start;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 24px);
}


/* Boxes & controls */
.lfs-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
}
.lfs-label{ display:block; font-weight:700; margin-bottom:8px; }
.lfs-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lfs-input,.lfs-select{
  width:100%; border:1px solid #d1d5db; border-radius:10px; padding:10px 12px;
  font:600 14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.lfs-checks{ display:flex; flex-direction:column; gap:8px; }
.lfs-check input{ margin-right:8px; }

/* Toolbar */
.lfs-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; align-items: flex-start;}
.lfs-results{ opacity:.7; }

/* Grid */
.lfs-grid{
  display:grid !important;
  gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Product card (بدون تغییر ابعاد روی :hover تا Layout نجنبد) */
.lfs-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;       /* اضافه شد: محتوای بالا و دکمه پایین */
  min-height: 100%;                    /* اطمینان از کشیدگی مساوی در یک ردیف */
  transition: box-shadow .2s ease, transform .15s ease, border-color .15s ease;
}
.lfs-card:hover{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transform: translateY(-2px);   /* ترنسفورم فقط؛ نه margin/height */
  border-color:#e3e3e3;
}

/* Thumb + gallery overlay — محلی، بدون ایجاد اسکرول */
.lfs-thumb{ position:relative; overflow:hidden; border-radius:12px; }
.lfs-thumb img{
  width:100%; height:auto; display:block; border-radius:12px !important;
  aspect-ratio: 1 / 1; object-fit: cover; position: relative; z-index:1;
}
.lfs-gallery-nav{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; opacity:0; transition: opacity .2s ease; pointer-events:none; z-index:2;
}
.lfs-card:hover .lfs-gallery-nav{ opacity:1; pointer-events:auto; }
.lfs-gal{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;
}
.lfs-gal:hover{ background:rgba(0,0,0,.65); }

/* Sale badge (round) */
.woocommerce span.onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgb(255 0 55 / 48%) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 17px 7px;
    border-radius: 6px !important;
    line-height: 3px !important;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

/* Title/price/rating/button */
.lfs-title{ font-size:15px; font-weight:800; line-height:1.25; margin:4px 0; }
.lfs-title a{
  color:#333;                 /* مشکی ملایم‌تر */
  text-decoration:none;
  text-align:center;          /* وسط‌چین متن */
  font-weight:400;            /* معمولی، نه بولد */
  display:block;              /* برای اعمال text-align لازم است */
}
/* وسط‌چین کردن ستاره‌های امتیاز محصول */
.lfs-rating {
  text-align: center;       /* کل بخش را وسط می‌آورد */
  margin-top: 4px;          /* فاصله‌ی کوچک از عنوان */
}
.lfs-rating .star-rating {
  margin: 0 auto;           /* ستاره‌ها را در مرکز قرار می‌دهد */
  float: none !important;   /* حذف float پیش‌فرض ووکامرس */
  display: inline-block;    /* برای وسط‌چین دقیق */
}
.lfs-title a:hover{ text-decoration:underline; }
.lfs-rating .star-rating{ transform: translateY(1px); }
/* قیمت: وسط‌چین + فاصله پایین برای دکمه */
.lfs-price{
  font-weight:900;
  font-size:16px;
  text-align:center;     /* وسط‌چین کردن متن قیمت */
  margin-bottom:12px;    /* فاصله‌ی پایین برای جدا شدن از دکمه */
}
/* === یکسان‌سازی تراز قیمت و دکمه در همه کارت‌ها === */

/* کارت‌ها را ستون‌بندی کامل می‌کنیم */
.lfs-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* محتوای بالایی و پایینی جدا */
  min-height: 360px; /* ارتفاع حداقلی یکنواخت؛ در صورت نیاز تغییر بده */
}

/* محتوای بالای کارت (تصویر، عنوان، امتیاز) */
.lfs-card .lfs-top{
  flex: 1 1 auto;   /* فضای آزاد پر شود */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* بخش پایین: قیمت و دکمه همیشه در یک خط افقی قرار بگیرد */
.lfs-card .lfs-bottom{
  margin-top: auto; /* همیشه چسبیده به پایین کارت */
  text-align: center;
}

/* قیمت وسط‌چین و فاصله از دکمه */
.lfs-price{
  text-align: center;
  margin-bottom: 12px; /* فاصله مناسب از دکمه */
}
/* حذف underline پیش‌فرض تگ <ins> برای قیمت تخفیفی */
.woocommerce ins,
.woocommerce ins .woocommerce-Price-amount,
.lfs-price ins,
.lfs-price ins .woocommerce-Price-amount {
    text-decoration: none !important;
}

/* === یکنواخت‌سازی ارتفاع بخش بالایی کارت (عنوان + ستاره) === */
.lfs-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 380px; /* در صورت نیاز کم/زیادش کن تا همه کارت‌ها هم‌قد شوند */
}

/* ظرف بالایی: عنوان + ستاره */
.lfs-card .lfs-top{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap: 6px;
}

/* عنوان: دو خطه + قطع‌شدن، ارتفاع ثابت */
.lfs-title{
  margin: 4px 0;
}
.lfs-title a{
  display: -webkit-box;           /* برای line-clamp */
  -webkit-line-clamp: 2;          /* حداکثر دو خط */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  text-align: center;
  color:#333;
  font-weight: 400;               /* معمولی */
  line-height: 1.3;
  min-height: calc(1.3em * 2);    /* ارتفاع دقیق دو خط */
}

/* ستاره‌ها: همیشه ظرفش هست؛ اگر خالی بود، جای خالی نگه می‌داریم */
.lfs-rating{
  text-align:center;
  min-height: 18px;               /* ارتفاع ثابت برای جای ستاره */
}
.lfs-rating .star-rating{
  margin: 0 auto;
  float: none !important;
  display: inline-block;
}
.lfs-rating.is-empty{ visibility: hidden; } /* جا را نگه می‌دارد ولی دیده نمی‌شود */

/* ظرف پایینی: قیمت + دکمه همیشه پایین */
.lfs-card .lfs-bottom{
  margin-top: auto;  /* می‌چسبد به پایین کارت */
  text-align: center;
}

/* قیمت وسط‌چین و فاصله تا دکمه */
.lfs-price{
  font-weight:900;
  font-size:16px;
  text-align:center;
  margin-bottom: 12px;
}

/* حذف خط زیر قیمت تخفیفی (INS) فقط در آرشیو ما */
.lfs-price ins,
.lfs-price ins .woocommerce-Price-amount{
  text-decoration: none !important;
  border: 0 !important;
}

/* دکمه‌ها */
.lfs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; text-decoration:none;
  transition: transform .15s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.lfs-btn:hover{ transform: translateY(-1px); }
.lfs-btn.is-black{ background:#000 !important; color:#fff !important; }
.lfs-btn.is-black:hover{ background:#222 !important; }

/* ریسپانسیو */
@media (max-width: 992px){
  .lfs-card{ min-height: 360px; }
}
@media (max-width: 640px){
  .lfs-card{ min-height: 340px; }
}

/* === ثابت کردن تراز ستاره‌ها در همه کارت‌ها === */
.lfs-card { --lfs-star-size: 14px; } /* در صورت نیاز 12/16 هم می‌تونی بذاری */

.lfs-rating{
  /* ظرف ستاره همیشه یک قد مشخص داشته باشد */
  min-height: calc(var(--lfs-star-size) + 4px);
  display: flex;
  align-items: center;      /* تراز عمودی دقیق */
  justify-content: center;  /* وسط‌چین افقی */
  margin-top: 4px;
  margin-bottom: 18px;
}

/* استایل‌دهی WooCommerce را خنثی و استاندارد کن */
.lfs-rating .star-rating{
  float: none !important;
  display: inline-block;
  margin: 0;
  line-height: 1;
}

/* اندازه و ارتفاع یکدست برای خود آیکون‌های ستاره */
.lfs-rating .star-rating,
.lfs-rating .star-rating::before,
.lfs-rating .star-rating span::before{
  font-size: var(--lfs-star-size);
  height: var(--lfs-star-size);
  line-height: var(--lfs-star-size);
}

/* وقتی امتیاز نداریم، ظرف خالی فضا را نگه دارد ولی دیده نشود */
.lfs-rating.is-empty{
  visibility: hidden;   /* فضا حفظ می‌شود */
}
/* Buttons */
.lfs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; padding:8px 22px; font-weight:500; cursor:pointer; text-decoration:none;font-size: 14px;
  transition: transform .15s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.lfs-btn:hover{ transform: translateY(-1px); }
.lfs-btn.is-black{ background:#000 !important; color:#fff !important; }
.lfs-btn.is-black:hover{ background:#222 !important; }
.lfs-btn.is-ghost{ background:transparent; color:#111; border:1px solid #d1d5db; }
.lfs-btn.is-ghost:hover{ background:#f5f5f5; }

/* Pagination */
.lfs-pagination ul{ list-style:none; display:flex; gap:8px; padding:0; margin:16px 0 0; }
.lfs-pagination a,
.lfs-pagination span{
  display:inline-block; min-width:36px; text-align:center; padding:8px 12px; border-radius:8px;
  background:#000 !important; color:#fff !important; text-decoration:none;
}
.lfs-pagination .current{ background:#222 !important; }

/* Hover helpers */
.lfs-card .lfs-view:hover{ opacity:.9; }
.lfs-filters input:hover, .lfs-filters select:hover{ border-color:#9ca3af; }

/* ===== Responsive ===== */
@media (max-width: 992px){
  .lfs-shop-wrap{ grid-template-columns: 1fr; padding: 20px; }
  .lfs-sidebar{ position: static; }
  .lfs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .lfs-grid{ grid-template-columns: 1fr; }
  .lfs-gal{ width:30px; height:30px; font-size:16px; }
  .woocommerce span.onsale{
    min-width:40px !important; min-height:40px !important; line-height:2px !important; font-size:12px !important;
  }
}


/* ===== فقط موبایل: کوچک‌تر شدن ورودی‌ها، سلکت و دکمه‌ها ===== */
@media (max-width: 640px){

  /* همه‌ی input و select ها */
  .lfs-input,
  .lfs-select {
    font-size: 13px;
    padding: 6px 8px;     /* پدینگ کمتر برای جمع شدن */
    border-radius: 8px;
  }

  /* دکمه‌های اصلی سیاه */
  .lfs-btn.is-black {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 8px;
  }
/* ===== فقط موبایل: استایل باکس سفید برای نتایج ===== */
  .lfs-results {
    font-size: 10px;
    opacity: .8;

    /* استایل شبیه .lfs-box */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 7px 9px;
    margin-bottom: 12px;
    display: inline-block; /* تا محتوا درست وسط باشه */
  }

  /* اگر می‌خواهی دکمه فیلتر هم کمی جمع شود */
  .lfs-filter-toggle {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ===== Drawer Filters (Mobile) ===== */

/* دکمهٔ فیلتر فقط در موبایل نمایش داده شود */
.lfs-filter-toggle { display: none; }
@media (max-width: 992px){
  .lfs-filter-toggle { display: inline-flex; }
}

/* بک‌دراپ پشت کشو */
.lfs-drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1009;
}

/* بدنه قفل اسکرول وقتی کشو باز است */
body.lfs-lock { overflow: hidden; }

/* کشوی فیلتر (خود سایدبار) */
.lfs-sidebar.is-drawer { /* پایه: دسکتاپ مثل قبل */
  /* استایل دسکتاپ همان قبلی شماست */
}

/* موبایل: آوف‌کانواس از چپ */
@media (max-width: 992px){
  .lfs-shop-wrap{ grid-template-columns: 1fr; } /* سایدبار کنار محتوا نباشد */

  .lfs-sidebar.is-drawer{
    position: fixed;
    top: 0;
    left: 0;
    width: min(88vw, 360px);
    height: 100dvh;              /* ویوپورت دینامیک */
    overflow: auto;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    padding: 14px;
    z-index: 1010;

    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .lfs-sidebar.is-drawer.is-open{
    transform: translateX(0);
  }

  /* هدر کوچک داخل کشو */
  .lfs-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:10px; padding-bottom:8px;
    border-bottom: 1px dashed #e5e7eb;
  }
  .lfs-drawer-head strong{ font-weight:800; }

  /* خود سایدبار در موبایل به‌صورت کشو؛ sticky لازم نیست */
  .lfs-sidebar{ position: static; top:auto; }
}

/* مطمئن شو در دسکتاپ بک‌دراپ دیده نشود */
@media (min-width: 993px){
  .lfs-drawer-backdrop{ display: none !important; }
}

/* هدر کشو (Filters ✕) فقط موبایل */
.lfs-drawer-head {
  display: none;        /* دسکتاپ: پنهان */
}

@media (max-width: 992px) {
  .lfs-drawer-head {
    display: flex;      /* موبایل: نمایش */
  }
}


/* ===== لوگوی هدر در موبایل فقط در صفحات شاپ ===== */
@media (max-width: 768px) {
  body.woocommerce-shop .site-header .brand .site-logo,
  body.tax-product_cat .site-header .brand .site-logo,
  body.tax-product_tag .site-header .brand .site-logo {
    height: 40px !important;
  }
}