/* =========================================================
   Unlimited Beauty – benefity + carousel značek
   Vlož do: Vzhled a obsah → Editor kódu → vlastní CSS
   Barvu akcentu měň na jednom místě: --ub-accent
   ========================================================= */
.ub-block{
  --ub-accent:#b76e79;
  --ub-border:#ece7e5;
  --ub-muted:#8a807d;
  --ub-text:#1f1b1a;
  max-width:1200px;
  margin:0 auto;
  padding:0 15px;
  box-sizing:border-box;
}
.ub-block *{box-sizing:border-box;}

/* ---------- Benefity (minimalistické) ---------- */
.ub-benefits{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin:26px 0 6px;
}
.ub-benefit{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 34px;
  position:relative;
}
.ub-benefit + .ub-benefit::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:40px;
  background:var(--ub-border);
}
.ub-benefit__icon{
  flex:0 0 auto;
  color:var(--ub-accent);
  line-height:0;
}
.ub-benefit__icon svg{width:28px;height:28px;display:block;}
.ub-benefit__title{
  font-weight:600;
  font-size:14px;
  line-height:1.25;
  color:var(--ub-text);
  display:block;
}
.ub-benefit__sub{
  font-size:12.5px;
  color:var(--ub-muted);
  line-height:1.3;
  margin-top:2px;
  display:block;
}

/* ---------- Značky – nekonečný pás log ---------- */
.ub-brands{margin:22px 0 34px;}
.ub-brands__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin:0 4px 16px;
  gap:12px;
  flex-wrap:wrap;
}
.ub-brands__title{
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin:0;
  color:var(--ub-text);
}
.ub-brands__title span{color:var(--ub-accent);}
.ub-brands__all{
  font-size:13px;
  color:var(--ub-muted);
  text-decoration:none;
}
.ub-brands__all:hover{color:var(--ub-accent);}

.ub-brands__viewport{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ub-brands__track{
  display:flex;
  width:max-content;
  gap:22px;
  animation:ub-marquee 90s linear infinite;
}
.ub-brands__viewport:hover .ub-brands__track{animation-play-state:paused;}
@keyframes ub-marquee{to{transform:translateX(-50%);}}

.ub-brand{
  flex:0 0 auto;
  width:160px;
  height:70px;
  display:grid;
  place-items:center;
  padding:0 8px;
  color:var(--ub-text);
}
/* SVG logotypy (výchozí – generované z JS) */
.ub-brand svg{
  width:100%;
  height:100%;
  opacity:.6;
  transition:opacity .25s ease,transform .25s ease;
}
.ub-brand:hover{color:var(--ub-accent);}
.ub-brand:hover svg{opacity:1;transform:scale(1.04);}
/* Reálná obrázková loga (pokud u značky doplníš logo: '...') */
.ub-brand img{
  max-width:100%;
  max-height:44px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.62;
  transition:filter .25s ease,opacity .25s ease,transform .25s ease;
}
.ub-brand:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.04);
}

/* ---------- Mobil ---------- */
@media (max-width:768px){
  .ub-benefits{flex-direction:column;align-items:stretch;margin:20px 0 4px;}
  .ub-benefit{padding:13px 6px;justify-content:flex-start;}
  .ub-benefit + .ub-benefit::before{
    top:0;left:6px;right:6px;width:auto;height:1px;transform:none;
  }
  .ub-brand{width:120px;height:60px;}
  .ub-brand img{max-height:38px;}
}

/* ---------- Přístupnost ---------- */
@media (prefers-reduced-motion:reduce){
  .ub-brands__track{animation:none;}
  .ub-brands__viewport{overflow-x:auto;}
}