/* ════════════════════════════════════════════════════════════
   SANITARA ONLINE — banner.css
   Hero Swiper, Daily Deals, controale
   Depinde de: header.css (include DUPĂ header.css)
═══════════════════════════════════════════════════════════════ */

/* ── HERO WRAPPER ──────────────────────────────────────────── */
.hero-wrap { background: #fff; padding: 12px 0; }
.hero-split {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  align-items: stretch;
}

/* Mod: slider full-width (fara panou dreapta) */
.hero-split--full {
  grid-template-columns: 1fr;
}
.hero-split--full .hero-slider {
  height: 300px;
}

/* ── VIDEO FULLWIDTH (inlocuieste tot hero-ul) ──────────────── */
.hero-video-fullwidth {
  position: relative;
  width: 100%;
  background: #000;
  height: 420px;
  max-height: 50vw;
  overflow: hidden;
}
.hero-video-fullwidth iframe,
.hero-video-fullwidth video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

@media(max-width:900px) {
  .hero-video-fullwidth { height: 300px; max-height: 40vw; }
}
@media(max-width:600px) {
  .hero-video-fullwidth { height: 220px; max-height: none; }
}

/* ── HERO SWIPER ───────────────────────────────────────────── */
.hero-slider {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  height: 240px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  flex-shrink: 0;
}
.hero-track {
  display: flex;
  height: 100%;
  transition: transform .55s ease;
  will-change: transform;
}

/* Slide */
.hero-slide {
  position: relative;
  min-width: 100%;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
a.hero-slide-link {
  cursor: pointer;
  text-decoration: none;
}
a.hero-slide-link:hover .hero-slide-overlay {
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.06) 100%);
}

.hero-slide-default {
  background: linear-gradient(120deg,#0a1628,#1565c0);
}

/* Overlay gradient pe imaginile foto */
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.02) 100%);
  pointer-events: none;
}

/* Video background in hero slide */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-yt-bg {
  border: none;
  pointer-events: none;
}
.hero-slide-video .hero-slide-body {
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 70%, transparent 100%);
}

/* Continut text */
.hero-slide-body {
  position: relative;
  z-index: 1;
  padding: clamp(18px, 4vw, 52px) clamp(20px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  max-width: min(660px, 78%);
}
.slide-tag {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #ffd740;
  padding: 3px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 14px;
  align-self: flex-start;
  letter-spacing: .3px;
}
.slide-h {
  font-size: clamp(22px, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 12px;
  color: #fff;
}
.slide-h em { color: #ffd740; font-style: normal; }
.slide-sub {
  color: rgba(255,255,255,.88);
  font-size: clamp(13px, 1.3vw, 15px);
  margin-bottom: 24px;
  max-width: 500px;
  line-height: 1.65;
}
.slide-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* Butoane CTA */
.btn-w {
  background: #fff;
  color: var(--blue);
  padding: 11px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}
.btn-w:hover { background: #e3f2fd; transform: translateY(-1px); }
.btn-tr {
  background: transparent;
  color: #fff;
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.45);
  font-family: 'Inter', sans-serif;
  transition: all .2s;
  text-decoration: none;
}
.btn-tr:hover { background: rgba(255,255,255,.12); }

/* ── Hero slider navigare ───────────────────────────────────── */
.hero-prev,
.hero-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .2s;
  display: flex; align-items: center; justify-content: center;
}
.hero-prev:hover,
.hero-next:hover { background: rgba(255,255,255,.38); }
.hero-prev { left: 14px; }
.hero-next { right: 14px; }

/* ── Hero dots ──────────────────────────────────────────────── */
.hero-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 10;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: none; cursor: pointer; padding: 0;
  transition: all .25s;
}
.hero-dot.on {
  width: 22px; border-radius: 4px;
  background: #fff;
}

/* ── DAILY DEALS ───────────────────────────────────────────── */
/* Orice <img> direct în interiorul unui slide hero să fie responsiv (fără tăiere) */
.hero-slide img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block
}
.daily-panel{background:#f3f5fb;border-radius:16px;overflow:hidden;display:flex;
  flex-direction:column;border:1px solid var(--border);height:240px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);align-self:start}
.daily-header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid #f0f0f0}
.daily-title{font-size:16px;font-weight:800;color:var(--text)}
.countdown{display:flex;align-items:center;gap:4px}
.cd-block{background:#1565c0;color:#fff;border-radius:6px;min-width:30px;height:30px;
  padding:0 5px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;font-family:'Inter',sans-serif}
.cd-sep{font-size:16px;font-weight:800;color:#1565c0;line-height:1}
.daily-slides{position:relative;overflow:hidden}
.daily-slide-track{display:flex;transition:transform .4s ease}
.daily-item{display:flex;flex-direction:row;text-decoration:none;color:inherit;
  height:160px;flex-shrink:0;overflow:hidden}
.daily-info{flex:1;min-width:0;padding:12px 10px 12px 16px;display:flex;
  flex-direction:column;overflow:hidden}
.daily-badge{display:inline-block;background:#d32f2f;color:#fff;font-size:11px;
  font-weight:800;padding:3px 9px;border-radius:5px;white-space:nowrap;flex-shrink:0}
.daily-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;
  flex-wrap:wrap;flex-shrink:0}
.daily-old-wrap{display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.daily-price{font-size:20px;font-weight:900;color:var(--text);line-height:1.1}
.daily-old{font-size:13px;color:var(--muted);text-decoration:line-through}
.daily-name{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:8px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex-shrink:0}
.daily-nav-row{display:flex;align-items:center;gap:6px;margin-top:auto;flex-shrink:0}
.daily-nav-btn{width:28px;height:28px;border:1.5px solid #d0d0d0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;
  transition:all .2s;background:#fff;flex-shrink:0;color:#424242;user-select:none}
.daily-nav-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.daily-img-wrap{width:140px;min-width:120px;max-width:140px;flex:0 0 140px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.daily-img-wrap img{width:100%;height:100%;/*object-fit:contain;*/padding:10px;
  display:block;filter:drop-shadow(0 4px 2px rgba(0,0,0,.3))}
.daily-img-placeholder{font-size:48px;opacity:.6;color:#fff}
.daily-dots-row{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 0 10px}
.daily-dot{width:6px;height:6px;border-radius:50%;background:#d0d0d0;cursor:pointer;transition:all .25s}
.daily-dot.on{background:var(--blue);width:18px;border-radius:3px}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — banner
═══════════════════════════════════════════════════════════════ */

/* ── ≤900px: daily-panel ascuns, slider ocupă tot ── */
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr}
  .hero-split--full{grid-template-columns:1fr}
  .daily-panel{display:none}
  .hero-slider{height:220px}
  .hero-split--full .hero-slider{height:220px}
}

/* ── ≤600px ── */
@media(max-width:600px){
  .hero-wrap{padding:8px 0}
  .hero-slider{height:200px;border-radius:12px}
  .hero-slide-body{max-width:100%}
  .slide-sub{font-size:12px;margin-bottom:14px}
  .btn-w,.btn-tr{padding:8px 14px;font-size:12px}
  /* daily price row: badge sub pret vechi pe ecrane mici */
  .daily-old-wrap{flex-direction:column;align-items:flex-start;gap:2px}
  .daily-price-row{flex-wrap:wrap;gap:4px}
}

/* ── ≤480px ── */
@media(max-width:480px){
  .hero-slider{height:180px}
  .slide-sub{display:none}
  .hero-prev,.hero-next{width:28px!important;height:28px!important}
  /* video iframe - pointer events off pe mobil sa nu blocheze swipe */
  .hero-yt-bg{pointer-events:none}
  .daily-price{font-size:17px}
  .daily-badge{font-size:10px;padding:2px 7px}
}

/* ── ≤360px ── */
@media(max-width:360px){
  .hero-slider{height:160px;border-radius:10px}
  .slide-tag{font-size:10px;padding:2px 8px}
  .btn-w{padding:7px 12px;font-size:11px}
  .btn-tr{display:none}
  .daily-price{font-size:15px}
}


/* ── MOBILE DAILY DEAL under popular categories ───────────── */
.daily-mobile-sec{display:none;padding-top:0}
.daily-slides-mobile{position:relative;overflow:hidden}
.daily-slide-track-mobile{display:flex;transition:transform .4s ease;will-change:transform}
.daily-item-mobile{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:0 0 100%}
.daily-item-mobile .daily-info{flex:1;min-width:0}
.daily-item-mobile .daily-img-wrap{width:46%;min-width:120px;max-width:150px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.daily-item-mobile .daily-img-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.daily-nav-row-mobile{display:flex}

@media(max-width:900px){
  .hero-split > .daily-panel{display:none}
  .daily-mobile-sec{display:block}
  .daily-panel-mobile{display:flex;margin-top:8px}
}

@media(max-width:600px){
  .daily-mobile-sec .w{padding-top:0}
  .daily-panel-mobile{border-radius:18px}
  .daily-item-mobile{padding:0}
  .daily-item-mobile .daily-info{padding-right:6px}
}

@media(max-width:360px){
  .daily-item-mobile{gap:10px}
  .daily-item-mobile .daily-img-wrap{min-width:108px;width:42%}
}


.daily-slides-mobile{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.daily-slide-track-mobile{touch-action:pan-y}
.daily-item-mobile img{-webkit-user-drag:none;user-drag:none}