/* Shafaq 1.5.45 — Digi deal redesign + safer configurable carousel behavior. */

/*
 * Digi Shafagh amazing-offer rails
 * --------------------------------
 * Older styling reserved only ~54px for the section heading and absolutely
 * positioned it inside the colored panel. Longer labels such as
 * «شگفت‌انگیزهای سوپرمارکتی» could therefore escape the panel and overlap
 * product cards. The section is now a real two-column layout on desktop:
 * content rail + a dedicated title panel. No title is absolutely positioned.
 */
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green{
  --ts-digi-deal-side:clamp(132px,10.5vw,172px);
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--ts-digi-deal-side)!important;
  grid-auto-flow:row;
  column-gap:12px!important;
  align-items:stretch!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  isolation:isolate;
  box-shadow:0 14px 34px rgba(30,50,70,.10)!important;
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red{
  background:linear-gradient(135deg,#e73350 0%,#ef4056 58%,#d92543 100%)!important;
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green{
  background:linear-gradient(135deg,#38a824 0%,#4fba28 52%,#2f981f 100%)!important;
}

body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-section-head,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-section-head{
  position:static!important;
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:100%!important;
  margin:0!important;
  padding:18px 12px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08))!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  backdrop-filter:blur(2px);
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-section-head>div,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-section-head>div{
  width:100%!important;
  min-width:0!important;
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-section-head h2,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-section-head h2{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(13px,1.08vw,17px)!important;
  line-height:1.9!important;
  font-weight:900!important;
  letter-spacing:-.25px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  text-wrap:balance;
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-section-head p,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-section-head p{
  margin:7px 0 0!important;
  color:rgba(255,255,255,.82)!important;
  font-size:10px!important;
  line-height:1.8!important;
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-section-head .ts-more,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-section-head .ts-more{
  display:none!important;
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-position-module,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-position-module{
  grid-column:1!important;
  grid-row:auto!important;
  min-width:0!important;
  align-self:stretch!important;
}


/* If the merchant intentionally clears the title, do not reserve an empty side column. */
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red:not(:has(>.ts-section-head)),
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green:not(:has(>.ts-section-head)){
  grid-template-columns:minmax(0,1fr)!important;
}
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red:not(:has(>.ts-section-head))>.ts-position-module,
body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green:not(:has(>.ts-section-head))>.ts-position-module{
  grid-column:1!important;
}

/* Product rail inside the colored panel. */
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green{
  height:100%;
  min-width:0;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-products,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-products{
  gap:10px!important;
  padding:2px!important;
  align-items:stretch!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-card,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-card{
  box-sizing:border-box!important;
  flex:0 0 var(--ts-card-basis-desktop,calc((100% - 60px)/7))!important;
  min-width:164px!important;
  max-width:none!important;
  min-height:306px!important;
  padding:10px!important;
  border:1px solid rgba(15,23,42,.07)!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(20,45,65,.08)!important;
  overflow:hidden!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-card:hover,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 11px 24px rgba(20,45,65,.13)!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-image,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-image{
  width:100%!important;
  aspect-ratio:1/1!important;
  margin:0 0 9px!important;
  padding:8px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#fbfcfd,#f5f7f9)!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-image img,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-image img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-card h3,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-card h3{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  height:auto!important;
  min-height:39px!important;
  margin:0 0 8px!important;
  color:#29384a!important;
  font-size:10.5px!important;
  line-height:1.85!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-meta,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-meta{
  margin-top:auto!important;
  padding-top:8px!important;
  border-top:1px solid #eef2f5!important;
  min-height:34px!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-card-actions,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-card-actions{
  gap:6px!important;
  padding-top:8px!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-card-action,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-card-action{
  min-height:32px!important;
  padding:6px 5px!important;
  border-radius:8px!important;
  font-size:9px!important;
  white-space:nowrap!important;
}
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-carousel-btn,
body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-carousel-btn{
  width:32px!important;
  height:46px!important;
  border-radius:12px!important;
  border-color:#dbe3e9!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 6px 18px rgba(20,45,65,.16)!important;
}

/* Keep responsive position controls meaningful inside Digi deal rails. */
@media(max-width:1100px) and (min-width:701px){
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red,
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green{
    --ts-digi-deal-side:128px;
  }
  body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-card,
  body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-card{
    flex-basis:var(--ts-card-basis-tablet,calc((100% - 30px)/4))!important;
    min-width:155px!important;
  }
}
@media(max-width:700px){
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red,
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:10px!important;
    padding:10px!important;
    border-radius:18px!important;
  }
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-section-head,
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-section-head{
    grid-column:1!important;
    grid-row:auto!important;
    min-height:0!important;
    justify-content:flex-start!important;
    text-align:right!important;
    padding:10px 12px!important;
    border-radius:13px!important;
  }
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-section-head h2,
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-section-head h2{
    font-size:14px!important;
    line-height:1.7!important;
    text-align:right!important;
  }
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-red>.ts-position-module,
  body.ts-template-layout-digi-shafagh .ts-style-digi-deal-green>.ts-position-module{
    grid-column:1!important;
  }
  body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-red .ts-product-card,
  body.ts-template-layout-digi-shafagh .ts-product-display-digi-deal-green .ts-product-card{
    flex:0 0 min(78vw,270px)!important;
    min-width:min(78vw,270px)!important;
    min-height:0!important;
  }
}

/* Respect reduced motion even when autoplay is enabled in the layout editor. */
@media(prefers-reduced-motion:reduce){
  .ts-products,.ts-categories,.ts-post-list{scroll-behavior:auto!important}
}

/* 1.5.46 — empty-position display setting support. */