/* EcomFlow Slider – V2.7
   - Fond transparent (le fond vient de ta section/row Flatsome)
   - Vrai slider : overflow masqué (pas de scrollbar)
   - Boutons : fond blanc, flèche noire (visible)
   - Option card="white" ou card="transparent"
   - Mode blog + blog-featured
*/

:root{--ef-gap:16px}

/* ============================================
   BASE / OFFERS MODE
   ============================================ */

/* wrapper */
.ef-slider{margin:32px 0}

/* head */
.ef-slider-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.ef-slider-title{margin:0;text-transform:uppercase;letter-spacing:.04em;font-weight:800;font-size:14px;line-height:1.2;opacity:.85}

/* controls */
.ef-slider-controls{display:flex;gap:10px}
.ef-slider-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  cursor:pointer;
  background:#fff;
  color:#111 !important;
  padding:0;
}
.ef-slider-btn svg{display:block;fill:currentColor !important}
.ef-slider-btn:hover{background:rgba(255,255,255,.9)}

/* viewport */
.ef-slider-viewport{
  overflow:hidden;
  width:100%;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.ef-slider-viewport:active{
  cursor:grabbing;
}

/* track */
.ef-slider-track{
  display:flex;
  gap:var(--ef-gap);
  transform:translate3d(0,0,0);
  transition:transform .5s ease;
  will-change:transform;
}

/* slide sizing */
.ef-slide{
  flex:0 0 clamp(260px, 32vw, 344px);
  max-width:clamp(260px, 32vw, 344px);
}

/* card modes */
.ef-card{background:transparent;padding:0;border-radius:0;box-shadow:none}

/* White card mode */
.ef-card-white .ef-card{
  background:#fff;
  padding:12px;
  border-radius:14px;
}

/* Transparent mode (default) */
.ef-card-transparent .ef-card{
  background:transparent;
  padding:0;
  border-radius:0;
}

/* media */
.ef-media{display:block}
.ef-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* toolbar under image */
.ef-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 2px 0 2px;
  font-size:12px;
  line-height:1.2;
}
.ef-left{
  flex:1;
  opacity:.75;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ef-right{white-space:nowrap;text-decoration:underline;opacity:.85;color:inherit}
.ef-right:hover{opacity:1}

/* ============================================
   BLOG MODE
   ============================================ */

/* Blog slide sizing */
.ef-slider-blog .ef-slide-blog{
  flex:0 0 clamp(220px, 22vw, 280px);
  max-width:clamp(220px, 22vw, 280px);
}

/* Blog card */
.ef-card-blog{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Blog media */
.ef-blog-media{
  display:block;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.ef-blog-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.ef-blog-media:hover img{
  transform:scale(1.05);
}

/* Badge */
.ef-blog-badge{
  position:absolute;
  top:12px;
  right:12px;
  background:#3b82f6;
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:6px;
  line-height:1.3;
  white-space:nowrap;
}

/* Blog body */
.ef-blog-body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* Blog title */
.ef-blog-title{
  margin:0 0 auto 0;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ef-blog-title a{
  color:inherit;
  text-decoration:none;
}
.ef-blog-title a:hover{
  text-decoration:underline;
}

/* Blog footer */
.ef-blog-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  font-size:12px;
}
.ef-blog-date{
  color:#6b7280;
}
.ef-blog-link{
  color:inherit;
  text-decoration:none;
  font-weight:500;
  white-space:nowrap;
}
.ef-blog-link:hover{
  text-decoration:underline;
}

/* ============================================
   PRODUCTS MODE
   ============================================ */

/* Product slide sizing */
.ef-slider-products .ef-slide-product{
  flex:0 0 clamp(220px, 22vw, 280px);
  max-width:clamp(220px, 22vw, 280px);
}

/* Product card */
.ef-card-product{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Product media */
.ef-product-media{
  display:block;
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f9fafb;
}
.ef-product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.ef-product-media:hover img{
  transform:scale(1.05);
}

/* Product body */
.ef-product-body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* Product title */
.ef-product-title{
  margin:0 0 auto 0;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ef-product-title a{
  color:inherit;
  text-decoration:none;
}
.ef-product-title a:hover{
  text-decoration:underline;
}

/* Product footer */
.ef-product-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  font-size:12px;
}
.ef-product-cat{
  color:#6b7280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
}
.ef-product-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:#111;
  color:#fff;
  border-radius:50%;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
  flex-shrink:0;
}
.ef-product-link:hover{
  background:#333;
  transform:scale(1.05);
}
.ef-product-link svg{
  display:block;
}

/* Products-featured mode */
.ef-slider-products-featured .ef-slide-featured{
  flex:0 0 clamp(280px, 28vw, 340px);
  max-width:clamp(280px, 28vw, 340px);
}

/* ============================================
   OFFERS-FEATURED MODE
   ============================================ */

/* Featured slide sizing for offers */
.ef-slider-offers-featured .ef-slide-featured{
  flex:0 0 clamp(280px, 28vw, 340px);
  max-width:clamp(280px, 28vw, 340px);
}

/* ============================================
   BLOG-FEATURED MODE
   ============================================ */

/* Featured slide sizing */
.ef-slider-blog-featured .ef-slide-featured{
  flex:0 0 clamp(280px, 28vw, 340px);
  max-width:clamp(280px, 28vw, 340px);
}

/* Featured card */
.ef-card-featured{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  height:100%;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Featured background image */
.ef-featured-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* Featured overlay */
.ef-featured-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 100%);
  z-index:2;
}

/* Featured content */
.ef-featured-content{
  position:relative;
  z-index:3;
  padding:20px;
  color:#fff;
}

.ef-featured-title{
  margin:0 0 8px 0;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  color:#fff !important;
}

.ef-featured-desc{
  margin:0 0 16px 0;
  font-size:13px;
  line-height:1.5;
  opacity:.9;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.ef-featured-btn{
  display:inline-block;
  background:#fff;
  color:#111;
  font-size:13px;
  font-weight:600;
  padding:10px 20px;
  border-radius:8px;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.ef-featured-btn:hover{
  background:#f3f4f6;
  transform:translateY(-1px);
}

/* ============================================
   CORNERS MODE
   ============================================ */

/* Default = rounded (14px) */
/* Square mode */
.ef-corners-square .ef-card,
.ef-corners-square .ef-card-blog,
.ef-corners-square .ef-card-product,
.ef-corners-square .ef-card-featured,
.ef-corners-square .ef-media img,
.ef-corners-square .ef-blog-media img,
.ef-corners-square .ef-product-media img{
  border-radius:0 !important;
}

.ef-corners-square .ef-product-link{
  border-radius:0 !important;
}

.ef-corners-square .ef-card-white .ef-card{
  border-radius:0 !important;
}

.ef-corners-square .ef-featured-btn{
  border-radius:0 !important;
}

.ef-corners-square .ef-blog-badge{
  border-radius:0 !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width:768px){
  .ef-slider-blog .ef-slide-blog,
  .ef-slider-products .ef-slide-product{
    flex-basis:clamp(200px, 65vw, 260px);
    max-width:clamp(200px, 65vw, 260px);
  }
  .ef-slider-blog-featured .ef-slide-featured,
  .ef-slider-offers-featured .ef-slide-featured,
  .ef-slider-products-featured .ef-slide-featured{
    flex-basis:clamp(260px, 75vw, 300px);
    max-width:clamp(260px, 75vw, 300px);
  }
  .ef-card-featured{
    min-height:240px;
  }
}

@media (max-width:420px){
  .ef-slider-btn{width:36px;height:36px}
  .ef-slide{flex-basis:85%;max-width:85%}

  .ef-slider-blog .ef-slide-blog,
  .ef-slider-products .ef-slide-product{
    flex-basis:85%;
    max-width:85%;
  }
  .ef-slider-blog-featured .ef-slide-featured,
  .ef-slider-offers-featured .ef-slide-featured,
  .ef-slider-products-featured .ef-slide-featured{
    flex-basis:85%;
    max-width:85%;
  }
}