@font-face{
  font-family:'Yekan';
  src:url('/assets/fonts/yekan-font/yekan-regular.woff') format('woff'),
      url('/assets/fonts/yekan-font/yekan-regular.eot') format('embedded-opentype'),
      url('/assets/fonts/yekan-font/Yekan.eot') format('embedded-opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --jf-bg:#ffffff;
  --jf-text:#1f2937;
  --jf-muted:#6b7280;
  --jf-line:#e5e7eb;

  /* سبز دکمه (نزدیک به نمونه شما) */
  --jf-green:#5f6f5b;
  --jf-green-hover:#556452;

  --jf-max: 1280px;
  --jf-hero-h: 540px;
}

html,body{background:var(--jf-bg); color:var(--jf-text); font-family:'Yekan', Tahoma, Arial, sans-serif;}
*{box-sizing:border-box}
a{color:inherit; text-decoration:none}

.jf-topbar{
  font-size:14px; line-height:1.8;
  text-align:center;
  padding:10px 12px;
  border-bottom:1px solid var(--jf-line);
  background:#fff;
}

.jf-header{
  position:sticky; top:0; z-index:9999;
  background:#fff;
  border-bottom:1px solid var(--jf-line);
}
.jf-header-inner{
  max-width:var(--jf-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
}
.jf-left{display:flex; align-items:center; gap:12px;}
.jf-currency-btn{
  border:1px solid var(--jf-line);
  background:#fff;
  padding:8px 10px;
  border-radius:4px;
  cursor:pointer;
}
.jf-icons{display:flex; gap:10px;}
.jf-ico{font-size:18px; opacity:.9}
.jf-ico:hover{opacity:1}

.jf-nav{
  flex:1;
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
.jf-nav-link{
  font-size:15px;
  padding:6px 0;
  color:#111827;
  border-bottom:1px solid transparent;
}
.jf-nav-link:hover{border-bottom-color:#111827}

.jf-logo{min-width:170px; text-align:right}
.jf-logo-mark{letter-spacing:.35em; font-weight:600}
.jf-logo-sub{font-size:11px; color:var(--jf-muted); letter-spacing:.12em}

/* HERO */
.jf-hero{width:100%}
.jf-hero-slider{
  width:100%;
  height:var(--jf-hero-h);
  position:relative;
  overflow:hidden;
  background:#f3f4f6;
}
.jf-slide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.jf-slide.is-active{opacity:1; pointer-events:auto}
.jf-slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.jf-slide-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 10%;
  color:#fff;
  text-shadow:0 8px 25px rgba(0,0,0,.35);
}
.jf-slide-brand{font-size:34px; letter-spacing:.18em; opacity:.95}
.jf-slide-title{font-size:64px; font-weight:600; line-height:1.05; margin-top:8px}
.jf-slide-cta{
  margin-top:18px;
  font-size:14px;
  letter-spacing:.12em;
  border-bottom:2px solid rgba(255,255,255,.75);
  padding-bottom:6px;
}
.jf-slide-nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.15);
  color:#fff;
  cursor:pointer;
}
.jf-slide-nav.prev{left:18px}
.jf-slide-nav.next{right:18px}
.jf-slide-nav:hover{background:rgba(255,255,255,.22)}
.jf-hero-empty{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  color:#111827;
}

/* Sections */
.jf-section{max-width:var(--jf-max); margin:0 auto; padding:34px 16px;}
.jf-sec-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.jf-sec-title{font-size:20px; margin:0}
.jf-sec-more{color:var(--jf-muted); font-size:14px}
.jf-sec-more:hover{color:#111827}

/* Product grid */
.jf-grid{display:grid; gap:18px;}
.jf-grid-5{grid-template-columns:repeat(5, minmax(0,1fr));}
@media (max-width:1200px){.jf-grid-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.jf-grid-5{grid-template-columns:repeat(2,1fr)}}

.jf-card{display:block}
/* Product card image box fixed size */
.jf-card-img{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;   /* کارت ثابت */
  overflow:hidden;
  background:#f3f4f6;
}

/* Image always cover without changing card size */
.jf-card-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
}
.jf-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(255,255,255,.9);
  font-size:12px;
  padding:4px 8px;
  border-radius:2px;
}


/* Featured carousel image box fixed size */
.jf-car-img{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  overflow:hidden;
  background:#f3f4f6;
}

.jf-car-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
}



.jf-card-body{padding:12px 2px 0}
.jf-card-title{font-weight:600; margin-top:6px}
.jf-card-code{color:var(--jf-muted); font-size:12px; margin-top:6px}
.jf-card-priceWrap{margin-top:14px; min-height:46px; position:relative}
.jf-card-price{font-size:18px; font-weight:600; transition:opacity .2s ease}
.jf-card-btn{
  position:absolute; inset-inline:0; bottom:0;
  background:var(--jf-green);
  color:#fff;
  text-align:center;
  padding:12px 0;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.jf-card:hover .jf-card-price{opacity:0}
.jf-card:hover .jf-card-btn{opacity:1; transform:translateY(0)}
.jf-card:hover .jf-card-btn{background:var(--jf-green-hover)}

/* Banner grid */
.jf-banner-grid{
  display:grid;
  grid-template-columns:repeat(var(--jf-banner-cols), 1fr);
  gap:10px;
}
.jf-banner{
  position:relative;
  background:#d1d5db;
  overflow:hidden;
  min-height:220px;
}
.jf-banner img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.jf-banner-mask{
  position:absolute; inset:0;
  background:rgba(0,0,0,.18);
}
.jf-banner-text{
  position:absolute;
  left:18px; top:18px;
  color:#fff;
}
.jf-banner-text .fa{font-size:28px; font-weight:700}
.jf-banner-text .en{font-size:20px; opacity:.9}

/* Featured carousel */
.jf-carousel{position:relative}
.jf-car-track{
  display:flex;
  gap:14px;
  overflow:hidden;
  scroll-behavior:smooth;
}
.jf-car-item{min-width:220px}
.jf-car-img img{width:100%; aspect-ratio: 3/4; object-fit:cover; display:block; background:#f3f4f6}
.jf-car-title{margin-top:8px; font-size:14px}
.jf-car-nav{
  position:absolute; top:45%;
  transform:translateY(-50%);
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--jf-line);
  background:#fff;
  cursor:pointer;
}
.jf-car-nav.prev{left:-8px}
.jf-car-nav.next{right:-8px}

/* Footer */
.jf-footer{border-top:1px solid var(--jf-line); margin-top:30px; background:#fff}
.jf-footer-inner{
  max-width:var(--jf-max);
  margin:0 auto;
  padding:34px 16px;
  display:grid;
  grid-template-columns: 1.2fr 1.5fr 1fr 1fr 1fr;
  gap:24px;
}
.jf-foot-col h4{margin:0 0 12px; color:var(--jf-green); font-size:16px}
.jf-foot-col a{display:block; color:#111827; padding:4px 0}
.jf-foot-col a:hover{text-decoration:underline}
.jf-enamad{max-width:120px; height:auto}
.jf-footer-bottom{
  max-width:var(--jf-max);
  margin:0 auto;
  padding:14px 16px;
  border-top:1px solid var(--jf-line);
  display:flex;
  justify-content:space-between;
  color:var(--jf-muted);
  font-size:13px;
}


/* ===== Category banners (Woshe-like grid 5x2) ===== */
.jf-catBanners{padding-top:10px}
.jf-catGrid{
  max-width:var(--jf-max);
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
.jf-catTile{
  /* equal-size tiles like woshe.co */
  background:#d6d6d6;
  border-radius:0;
  position:relative;
  overflow:hidden;
  height:220px;
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  /* force visual order: text (left) + image (right) */
  direction:ltr;
}
.jf-catText{
  width:45%;
  padding:22px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  color:#fff;
  z-index:2;
  /* Persian text stays RTL but sits on the left side */
  direction:rtl;
  text-align:left;
}
.jf-catFa{
  font-size:26px;
  font-weight:600;
  letter-spacing:.02em;
}
.jf-catEn{
  font-size:22px;
  opacity:.95;
  /* English font similar to the reference (serif look) */
  font-family:"Playfair Display","Didot","Bodoni MT","Georgia","Times New Roman",serif;
  letter-spacing:.02em;
  direction:ltr;
  text-align:left;
}
.jf-catImg{
  /* image area max 55% of tile width */
  width:55%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.jf-catImg img{
  width:100%;
  height:100%;
  /* If the image is too tall, cover within the tile bounds */
  object-fit:cover;
  object-position:center right;
  /* images are "glass" (transparent) => keep background visible */
  background:transparent;
  filter:none;
}
@media (max-width: 992px){
  .jf-catGrid{grid-template-columns:1fr}
  .jf-catTile{height:200px}
  .jf-catText{width:45%}
  .jf-catImg{width:55%}
}