/* DigiShopfa v11 - Compatibility layout for injected Juliet-style blocks (jf-*)
   Purpose: when tenant has Juliet block outputs but Digi wrapper is active,
   keep layout readable and prevent "everything stacked in center".
   Safe: only targets jf-* and generic containers.
*/

:root{
  --dg-max: 1280px;
  --dg-pad: 16px;
  --dg-bg: #f5f5f5;
  --dg-card: #ffffff;
  --dg-border: #e5e7eb;
  --dg-text: #111827;
  --dg-muted: #6b7280;
  --dg-accent: #ef4056; /* Digikala-ish */
}

body.dg-body{
  background: var(--dg-bg);
  color: var(--dg-text);
}

#dg-site{
  min-height: 100vh;
}

/* Make main content centered with consistent gutters */
#dg-site > main,
#dg-site #dg-main,
#dg-site #jl-main,
#dg-site #jf-main,
#dg-site .jl-main,
#dg-site .jf-main{
  max-width: var(--dg-max);
  margin: 0 auto;
  padding: 0 var(--dg-pad);
}

/* If blocks render inside #dg-site without a main wrapper */
#dg-site{
  padding-bottom: 24px;
}
#dg-site > *{
  max-width: var(--dg-max);
  margin-left: auto;
  margin-right: auto;
}
#dg-site > header,
#dg-site > nav,
#dg-site > footer,
#dg-site > style,
#dg-site > script{
  max-width: none;
}

/* Hero */
.jf-hero{
  margin: 14px auto 18px;
  border-radius: 16px;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.jf-hero-frame{ position: relative; }
.jf-hero-track{ display:flex; will-change: transform; }
.jf-hero-slide{ flex:0 0 100%; position:relative; background:#e5e7eb; }
.jf-hero-img{ width:100%; height: clamp(260px, 34vw, 520px); object-fit: cover; display:block; }
.jf-hero-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:40px; height:40px; border:none; border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  cursor:pointer;
}
.jf-hero-next{ right: 12px; }
.jf-hero-prev{ left: 12px; }

/* Sections */
.jf-section{
  background: transparent;
  margin: 16px 0;
}
.jf-sec-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 10px 0 12px;
}
.jf-sec-title{ font-size: 18px; font-weight: 900; margin:0; }
.jf-sec-more{ color: var(--dg-accent); text-decoration:none; font-weight:800; }

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

.jf-card{
  background: var(--dg-card);
  border: 1px solid var(--dg-border);
  border-radius: 14px;
  overflow:hidden;
  text-decoration:none;
  color: inherit;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.jf-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.jf-card-img img{
  width:100%; height: 170px; object-fit: cover; display:block;
  background:#f3f4f6;
}
.jf-card-body{ padding: 10px 10px 12px; }
.jf-card-title{ font-weight:900; font-size:14px; line-height:1.5; text-align:center; }
.jf-card-code{ font-size:12px; color: var(--dg-muted); text-align:center; margin-top:4px; }
.jf-card-priceWrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:10px;
}
.jf-card-price{ font-weight:900; font-size:13px; }
.jf-card-btn{
  height:34px; padding: 0 10px;
  border-radius: 10px;
  background: var(--dg-accent);
  color:#fff;
  font-weight:900;
  font-size:12px;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;
}

/* Category tiles */
.jf-catGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 900px){ .jf-catGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.jf-catTile{
  background: var(--dg-card);
  border: 1px solid var(--dg-border);
  border-radius: 14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  text-decoration:none;
  color: inherit;
  min-height: 92px;
}
.jf-catText .jf-catFa{ font-weight: 1000; }
.jf-catText .jf-catEn{ color: var(--dg-muted); font-size:12px; margin-top:3px; }
.jf-catImg img{ width:76px; height:76px; object-fit: cover; border-radius: 12px; background:#f3f4f6; }

/* Featured carousel: keep it horizontal and not overflowing */
.jf-carousel{
  position: relative;
  background: var(--dg-card);
  border: 1px solid var(--dg-border);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
}
.jf-car-track{
  display:flex;
  gap: 10px;
  overflow:auto;
  scroll-behavior:smooth;
  padding-bottom: 6px;
}
.jf-car-track::-webkit-scrollbar{ height:0; width:0; }
.jf-car-item{
  flex: 0 0 180px;
  text-decoration:none;
  color: inherit;
}
.jf-car-img img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius: 12px;
  background:#f3f4f6;
  display:block;
}
.jf-car-title{ font-weight:900; font-size:13px; margin-top:8px; text-align:center; }
.jf-car-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border:none; border-radius:999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  cursor:pointer;
}
.jf-car-nav.prev{ left: 8px; }
.jf-car-nav.next{ right: 8px; }

/* Footer: readable */
.jf-footer{
  margin-top: 24px;
  background:#111827;
  color:#fff;
}
.jf-footer-inner{
  max-width: var(--dg-max);
  margin: 0 auto;
  padding: 24px var(--dg-pad);
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 900px){ .jf-footer-inner{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.jf-footer a{ color:#fff; text-decoration:none; opacity:.9; }
.jf-footer a:hover{ opacity:1; text-decoration:underline; }
.jf-footer-bottom{
  max-width: var(--dg-max);
  margin: 0 auto;
  padding: 12px var(--dg-pad);
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap: 12px;
  opacity:.9;
}